jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

chore: format, license, bump version

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-09-11 20:19:18 +05:30
parent daaf0d3be2
commit 9e64337ea8
5 changed files with 79 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
license.txt
View File

@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2016 Frappe Technologies Pvt. Ltd.
Copyright (c) 2024 Frappe Technologies Pvt. Ltd.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "frappe-gantt",
"version": "0.7",
"version": "0.8",
"description": "A simple, modern, interactive gantt library for the web",
"main": "src/index.js",
"type": "module",

29
src/bar.js
View File

@ -31,8 +31,8 @@ export default class Bar {
this.width = this.gantt.options.column_width * this.duration;
this.progress_width =
this.gantt.options.column_width *
this.duration *
(this.task.progress / 100) || 0;
this.duration *
(this.task.progress / 100) || 0;
this.group = createSVG('g', {
class:
'bar-wrapper' +
@ -72,8 +72,8 @@ export default class Bar {
this.compute_expected_progress();
this.expected_progress_width =
this.gantt.options.column_width *
this.duration *
(this.expected_progress / 100) || 0;
this.duration *
(this.expected_progress / 100) || 0;
}
draw() {
@ -102,7 +102,7 @@ export default class Bar {
class:
'bar' +
(/^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
!this.task.important
!this.task.important
? ' safari'
: ''),
append_to: this.bar_group,
@ -287,12 +287,12 @@ export default class Bar {
this.group,
'mouseenter',
(e) =>
(timeout = setTimeout(() => {
this.show_popup(e.offsetX || e.layerX);
document.getElementById(
`${task_id}-highlight`,
).style.display = 'block';
}, 200)),
(timeout = setTimeout(() => {
this.show_popup(e.offsetX || e.layerX);
document.getElementById(
`${task_id}-highlight`,
).style.display = 'block';
}, 200)),
);
$.on(this.group, 'mouseleave', () => {
@ -567,8 +567,8 @@ export default class Bar {
this.$expected_bar_progress.setAttribute(
'width',
this.gantt.options.column_width *
this.duration *
(this.expected_progress / 100) || 0,
this.duration *
(this.expected_progress / 100) || 0,
);
}
@ -634,8 +634,7 @@ export default class Bar {
.querySelector('.handle.right')
.setAttribute('x', bar.getEndX() + 4);
const handle = this.group.querySelector('.handle.progress');
handle &&
handle.setAttribute('cx', this.$bar_progress.getEndX());
handle && handle.setAttribute('cx', this.$bar_progress.getEndX());
}
update_arrow_position() {

2
src/date_utils.js
View File

@ -25,7 +25,7 @@ export default {
parse_duration(duration) {
const regex = /([0-9]+)(y|m|d|h|min|s|ms)/gm;
const matches = regex.exec(duration);
console.log(matches)
console.log(matches);
if (matches !== null) {
if (matches[2] === 'y') {
return { duration: parseInt(matches[1]), scale: `year` };

107
src/index.js
View File

@ -77,7 +77,7 @@ export default class Gantt {
} else {
throw new TypeError(
'Frappe Gantt only supports usage of a string CSS selector,' +
" HTML DOM element or SVG DOM element for the 'element' parameter",
" HTML DOM element or SVG DOM element for the 'element' parameter",
);
}
@ -143,7 +143,7 @@ export default class Gantt {
if (diff < 0) {
throw Error(
"start of task can't be after end of task: in task #, " +
(i + 1),
(i + 1),
);
}
// make task invalid if duration too large
@ -358,7 +358,7 @@ export default class Gantt {
this.map_arrows_on_bars();
this.set_width();
this.set_scroll_position(this.options.scroll_to);
this.update_button_position()
this.update_button_position();
}
setup_layers() {
@ -390,7 +390,7 @@ export default class Gantt {
this.options.header_height +
this.options.padding +
(this.options.bar_height + this.options.padding) *
this.tasks.length;
this.tasks.length;
createSVG('rect', {
x: 0,
@ -494,15 +494,20 @@ export default class Gantt {
$today_button.textContent = 'Today';
$today_button.onclick = this.scroll_today.bind(this);
$side_header.appendChild($today_button);
this.$today_button = $today_button
this.$today_button = $today_button;
}
this.$header.appendChild($side_header);
this.$side_header = $side_header
this.$side_header = $side_header;
window.addEventListener('scroll', this.update_button_position.bind(this));
window.addEventListener('resize', this.update_button_position.bind(this));
window.addEventListener(
'scroll',
this.update_button_position.bind(this),
);
window.addEventListener(
'resize',
this.update_button_position.bind(this),
);
}
update_button_position() {
@ -511,8 +516,11 @@ export default class Gantt {
const { left, y } = this.$header.getBoundingClientRect();
// Check if the button is scrolled out of the container vertically
console.log('heyy')
if (buttonRect.top < containerRect.top || buttonRect.bottom > containerRect.bottom) {
console.log('heyy');
if (
buttonRect.top < containerRect.top ||
buttonRect.bottom > containerRect.bottom
) {
this.$side_header.style.position = 'absolute';
this.$side_header.style.top = `${containerRect.scrollTop + buttonRect.top}px`;
} else {
@ -643,7 +651,7 @@ export default class Gantt {
x +
(date_utils.diff(today, this.gantt_start, 'hour') /
this.options.step) *
this.options.column_width,
this.options.column_width,
date: today,
};
}
@ -672,7 +680,7 @@ export default class Gantt {
}
make_grid_highlights() {
if (this.options.highlight_weekend) this.highlightWeekends()
if (this.options.highlight_weekend) this.highlightWeekends();
// highlight today's | week's | month's | year's
if (
this.view_is(VIEW_MODE.DAY) ||
@ -681,16 +689,28 @@ export default class Gantt {
this.view_is(VIEW_MODE.YEAR)
) {
// Used as we must find the _end_ of session if view is not Day
const { x: left, date } = this.computeGridHighlightDimensions(this.options.view_mode)
if (!this.dates.find(d => d.getTime() == date.getTime())) return;
const { x: left, date } = this.computeGridHighlightDimensions(
this.options.view_mode,
);
if (!this.dates.find((d) => d.getTime() == date.getTime())) return;
const top = this.options.header_height + this.options.padding / 2;
const height = (this.options.bar_height + this.options.padding) * this.tasks.length;
this.$current_highlight = this.create_el({ top, left, height, classes: 'current-highlight', append_to: this.$container })
let $today = document.getElementById(date_utils.format(date).replaceAll(' ', '_'))
const height =
(this.options.bar_height + this.options.padding) *
this.tasks.length;
this.$current_highlight = this.create_el({
top,
left,
height,
classes: 'current-highlight',
append_to: this.$container,
});
let $today = document.getElementById(
date_utils.format(date).replaceAll(' ', '_'),
);
if ($today) {
$today.classList.add('current-date-highlight')
$today.style.top = +$today.style.top.slice(0, -2) - 4 + 'px'
$today.style.left = +$today.style.left.slice(0, -2) - 8 + 'px'
$today.classList.add('current-date-highlight');
$today.style.top = +$today.style.top.slice(0, -2) - 4 + 'px';
$today.style.left = +$today.style.left.slice(0, -2) - 8 + 'px';
}
}
}
@ -788,10 +808,10 @@ export default class Gantt {
date.getDate() !== last_date.getDate()
? date.getMonth() !== last_date.getMonth()
? date_utils.format(
date,
'D MMM',
this.options.language,
)
date,
'D MMM',
this.options.language,
)
: date_utils.format(date, 'D', this.options.language)
: '',
Day_upper:
@ -813,7 +833,7 @@ export default class Gantt {
};
let column_width = this.view_is(VIEW_MODE.MONTH)
? (date_utils.get_days_in_month(date) * this.options.column_width) /
30
30
: this.options.column_width;
const base_pos = {
x: last_date_info
@ -845,17 +865,17 @@ export default class Gantt {
base_pos_x: base_pos.x,
upper_text: this.options.lower_text
? this.options.upper_text(
date,
this.options.view_mode,
date_text[`${this.options.view_mode}_upper`],
)
date,
this.options.view_mode,
date_text[`${this.options.view_mode}_upper`],
)
: date_text[`${this.options.view_mode}_upper`],
lower_text: this.options.lower_text
? this.options.lower_text(
date,
this.options.view_mode,
date_text[`${this.options.view_mode}_lower`],
)
date,
this.options.view_mode,
date_text[`${this.options.view_mode}_lower`],
)
: date_text[`${this.options.view_mode}_lower`],
upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`],
upper_y: base_pos.upper_y,
@ -931,7 +951,7 @@ export default class Gantt {
const scroll_pos =
(hours_before_first_task / this.options.step) *
this.options.column_width -
this.options.column_width -
this.options.column_width;
parent_element.scrollTo({ left: scroll_pos, behavior: 'smooth' });
}
@ -941,15 +961,10 @@ export default class Gantt {
}
bind_grid_click() {
$.on(
this.$svg,
'click',
'.grid-row, .grid-header',
() => {
this.unselect_all();
this.hide_popup();
},
);
$.on(this.$svg, 'click', '.grid-row, .grid-header', () => {
this.unselect_all();
this.hide_popup();
});
}
bind_bar_events() {
@ -983,8 +998,8 @@ export default class Gantt {
is_dragging = true;
}
bar_wrapper.classList.add("active");
if (this.popup) this.popup.parent.classList.add('hidden')
bar_wrapper.classList.add('active');
if (this.popup) this.popup.parent.classList.add('hidden');
if (this.popup) this.popup.parent.classList.add('hidden');