jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

fix: few bugs in popup

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-12-17 14:57:51 +05:30
parent 350dc88785
commit fcd04922bd
4 changed files with 73 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/bar.js
View File

@ -46,6 +46,9 @@ export default class Bar {
class: 'handle-group', class: 'handle-group',
append_to: this.group, append_to: this.group,
}); });
if (this.task.progress < 0) this.task.progress = 0;
if (this.task.progress > 100) this.task.progress = 100;
} }
prepare_helpers() { prepare_helpers() {
@ -156,7 +159,7 @@ export default class Bar {
this.gantt.config.column_width; this.gantt.config.column_width;
let $date_highlight = this.gantt.create_el({ let $date_highlight = this.gantt.create_el({
classes: `date-highlight hide highlight-${this.task.id}`, classes: `date-range-highlight hide highlight-${this.task.id}`,
width: this.width, width: this.width,
left: x, left: x,
}); });
@ -171,18 +174,10 @@ export default class Bar {
const ignored_end = this.x + width; const ignored_end = this.x + width;
const total_ignored_area = const total_ignored_area =
this.gantt.config.ignored_positions.reduce((acc, val) => { this.gantt.config.ignored_positions.reduce((acc, val) => {
if (this.task._index === 2)
console.log('IN', val >= this.x, val < ignored_end);
return acc + (val >= this.x && val < ignored_end); return acc + (val >= this.x && val < ignored_end);
}, 0) * this.gantt.config.column_width; }, 0) * this.gantt.config.column_width;
let progress_width = let progress_width =
((width - total_ignored_area) * this.task.progress) / 100; ((width - total_ignored_area) * this.task.progress) / 100;
console.log(
this.task,
this.gantt.config.ignored_positions.reduce((acc, val) => {
return acc + (val >= this.x && val < ignored_end);
}, 0),
);
const progress_end = this.x + progress_width; const progress_end = this.x + progress_width;
const total_ignored_progress = const total_ignored_progress =
this.gantt.config.ignored_positions.reduce((acc, val) => { this.gantt.config.ignored_positions.reduce((acc, val) => {
@ -310,22 +305,6 @@ export default class Bar {
this.setup_click_event(); this.setup_click_event();
} }
toggle_popup(e) {
if (
!this.gantt.popup ||
this.gantt.popup.parent.classList.contains('hide')
) {
this.gantt.show_popup({
x: e.offsetX || e.layerX,
y: e.offsetY || e.layerY,
task: this.task,
target: this.$bar,
});
} else {
this.gantt.popup.hide();
}
}
setup_click_event() { setup_click_event() {
let task_id = this.task.id; let task_id = this.task.id;
$.on(this.group, 'mouseover', (e) => { $.on(this.group, 'mouseover', (e) => {
@ -337,39 +316,43 @@ export default class Bar {
]); ]);
}); });
this.popup_opened = false;
if (this.gantt.options.popup_on === 'click') { if (this.gantt.options.popup_on === 'click') {
$.on(this.group, 'click', (e) => { $.on(this.group, 'click', (e) => {
console.log('CLICKED'); if (!this.popup_opened)
this.toggle_popup(e); this.gantt.show_popup({
x: e.offsetX || e.layerX,
y: e.offsetY || e.layerY,
task: this.task,
target: this.$bar,
});
this.popup_opened = !this.popup_opened;
this.gantt.$container this.gantt.$container
.querySelector(`.highlight-${task_id}`) .querySelector(`.highlight-${task_id}`)
.classList.toggle('hide'); .classList.toggle('hide');
}); });
} else { } else {
// let timeout; let timeout;
// $.on( $.on(this.group, 'mouseenter', (e) => {
// this.group, timeout = setTimeout(() => {
// 'mouseenter', this.gantt.show_popup({
// (e) => x: e.offsetX || e.layerX,
// (timeout = setTimeout(() => { y: e.offsetY || e.layerY,
// this.gantt.show_popup({ task: this.task,
// x: e.offsetX || e.layerX, target: this.$bar,
// y: e.offsetY || e.layerY, });
// task: this.task, this.gantt.$container
// target: this.$bar, .querySelector(`.highlight-${task_id}`)
// }); .classList.remove('hide');
// this.gantt.$container.querySelector( }, 200);
// `.highlight-${task_id}`, });
// ).style.display = 'block'; $.on(this.group, 'mouseleave', () => {
// }, 200)), clearTimeout(timeout);
// ); this.gantt.popup?.hide?.();
// $.on(this.group, 'mouseleave', () => { this.gantt.$container
// clearTimeout(timeout); .querySelector(`.highlight-${task_id}`)
// this.gantt.popup?.hide?.(); .classList.add('hide');
// this.gantt.$container.querySelector( });
// `.highlight-${task_id}`,
// ).style.display = 'none';
// });
} }
$.on(this.group, 'click', () => { $.on(this.group, 'click', () => {

42
src/defaults.js
View File

@ -142,25 +142,29 @@ const DEFAULT_OPTIONS = {
`${start_date} - ${end_date} (${ctx.task.actual_duration} days${ctx.task.ignored_duration ? ' + ' + ctx.task.ignored_duration + ' excluded' : ''})<br/>Progress: ${ctx.task.progress}%`, `${start_date} - ${end_date} (${ctx.task.actual_duration} days${ctx.task.ignored_duration ? ' + ' + ctx.task.ignored_duration + ' excluded' : ''})<br/>Progress: ${ctx.task.progress}%`,
); );
ctx.add_action('Toggle Priority', (task, chart) => { if (!ctx.chart.options.readonly) {
task.important = !task.important; ctx.add_action('Toggle Priority', (task, chart) => {
chart.refresh( task.important = !task.important;
chart.tasks.map((t) => (t.id !== task.id ? t : task)), chart.refresh(
); chart.tasks.map((t) => (t.id !== task.id ? t : task)),
}); );
});
ctx.add_action('+', (task, chart) => { if (!ctx.chart.options.readonly_progress) {
task.progress += (1 / task.actual_duration) * 100; ctx.add_action('+', (task, chart) => {
chart.refresh( task.progress +=
chart.tasks.map((t) => (t.id !== task.id ? t : task)), Math.floor((1 / task.actual_duration) * 10000) / 100;
); chart.refresh(
}); chart.tasks.map((t) => (t.id !== task.id ? t : task)),
ctx.add_action('-', (task, chart) => { );
task.progress -= (1 / task.actual_duration) * 100; });
chart.refresh( ctx.add_action('-', (task, chart) => {
chart.tasks.map((t) => (t.id !== task.id ? t : task)), task.progress -= (1 / task.actual_duration) * 100;
); chart.refresh(
}); chart.tasks.map((t) => (t.id !== task.id ? t : task)),
);
});
}
}
}, },
popup_on: 'click', popup_on: 'click',
readonly_progress: false, readonly_progress: false,

17
src/index.js
View File

@ -663,7 +663,7 @@ export default class Gantt {
left, left,
height, height,
classes: 'current-highlight', classes: 'current-highlight',
append_to: this.$extras, append_to: this.$container,
}); });
} }
@ -967,10 +967,15 @@ export default class Gantt {
} }
bind_grid_click() { bind_grid_click() {
$.on(this.$svg, 'click', '.grid-row, .grid-header', () => { $.on(
this.unselect_all(); this.$svg,
this.hide_popup(); 'click',
}); '.grid-row, .grid-header, .ignored-bar',
() => {
this.unselect_all();
this.hide_popup();
},
);
} }
bind_holiday_labels() { bind_holiday_labels() {
@ -1404,7 +1409,7 @@ export default class Gantt {
[...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => { [...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
el.classList.remove('active'); el.classList.remove('active');
}); });
if (this.popup) this.popup.parent.classList.remove('hide'); if (this.popup) this.popup.parent.classList.add('hide');
} }
view_is(modes) { view_is(modes) {

12
src/styles/gantt.css
View File

@ -156,13 +156,11 @@
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
} }
& .date-highlight { & .date-range-highlight {
background-color: var(--g-progress-color); background-color: var(--g-progress-color);
border-radius: 20px; border-radius: 12px;
height: var(--gv-lower-header-height); height: calc(var(--gv-lower-header-height) - 6px);
top: calc( top: calc(var(--gv-upper-header-height) + 5px);
var(--gv-upper-header-height) + var(--gv-lower-header-height) * 0.1
);
position: absolute; position: absolute;
} }
@ -350,7 +348,7 @@
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.date-highlight { .date-range-highlight {
display: block; display: block;
} }
} }