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) 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: 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", "name": "frappe-gantt",
"version": "0.7", "version": "0.8",
"description": "A simple, modern, interactive gantt library for the web", "description": "A simple, modern, interactive gantt library for the web",
"main": "src/index.js", "main": "src/index.js",
"type": "module", "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.width = this.gantt.options.column_width * this.duration;
this.progress_width = this.progress_width =
this.gantt.options.column_width * this.gantt.options.column_width *
this.duration * this.duration *
(this.task.progress / 100) || 0; (this.task.progress / 100) || 0;
this.group = createSVG('g', { this.group = createSVG('g', {
class: class:
'bar-wrapper' + 'bar-wrapper' +
@ -72,8 +72,8 @@ export default class Bar {
this.compute_expected_progress(); this.compute_expected_progress();
this.expected_progress_width = this.expected_progress_width =
this.gantt.options.column_width * this.gantt.options.column_width *
this.duration * this.duration *
(this.expected_progress / 100) || 0; (this.expected_progress / 100) || 0;
} }
draw() { draw() {
@ -102,7 +102,7 @@ export default class Bar {
class: class:
'bar' + 'bar' +
(/^((?!chrome|android).)*safari/i.test(navigator.userAgent) && (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
!this.task.important !this.task.important
? ' safari' ? ' safari'
: ''), : ''),
append_to: this.bar_group, append_to: this.bar_group,
@ -287,12 +287,12 @@ export default class Bar {
this.group, this.group,
'mouseenter', 'mouseenter',
(e) => (e) =>
(timeout = setTimeout(() => { (timeout = setTimeout(() => {
this.show_popup(e.offsetX || e.layerX); this.show_popup(e.offsetX || e.layerX);
document.getElementById( document.getElementById(
`${task_id}-highlight`, `${task_id}-highlight`,
).style.display = 'block'; ).style.display = 'block';
}, 200)), }, 200)),
); );
$.on(this.group, 'mouseleave', () => { $.on(this.group, 'mouseleave', () => {
@ -567,8 +567,8 @@ export default class Bar {
this.$expected_bar_progress.setAttribute( this.$expected_bar_progress.setAttribute(
'width', 'width',
this.gantt.options.column_width * this.gantt.options.column_width *
this.duration * this.duration *
(this.expected_progress / 100) || 0, (this.expected_progress / 100) || 0,
); );
} }
@ -634,8 +634,7 @@ export default class Bar {
.querySelector('.handle.right') .querySelector('.handle.right')
.setAttribute('x', bar.getEndX() + 4); .setAttribute('x', bar.getEndX() + 4);
const handle = this.group.querySelector('.handle.progress'); const handle = this.group.querySelector('.handle.progress');
handle && handle && handle.setAttribute('cx', this.$bar_progress.getEndX());
handle.setAttribute('cx', this.$bar_progress.getEndX());
} }
update_arrow_position() { update_arrow_position() {

2
src/date_utils.js
View File

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

109
src/index.js
View File

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