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',
append_to: this.group,
});
if (this.task.progress < 0) this.task.progress = 0;
if (this.task.progress > 100) this.task.progress = 100;
}
prepare_helpers() {
@ -156,7 +159,7 @@ export default class Bar {
this.gantt.config.column_width;
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,
left: x,
});
@ -171,18 +174,10 @@ export default class Bar {
const ignored_end = this.x + width;
const total_ignored_area =
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);
}, 0) * this.gantt.config.column_width;
let progress_width =
((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 total_ignored_progress =
this.gantt.config.ignored_positions.reduce((acc, val) => {
@ -310,22 +305,6 @@ export default class Bar {
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() {
let task_id = this.task.id;
$.on(this.group, 'mouseover', (e) => {
@ -337,39 +316,43 @@ export default class Bar {
]);
});
this.popup_opened = false;
if (this.gantt.options.popup_on === 'click') {
$.on(this.group, 'click', (e) => {
console.log('CLICKED');
this.toggle_popup(e);
if (!this.popup_opened)
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
.querySelector(`.highlight-${task_id}`)
.classList.toggle('hide');
});
} else {
// let timeout;
// $.on(
// this.group,
// 'mouseenter',
// (e) =>
// (timeout = setTimeout(() => {
// this.gantt.show_popup({
// x: e.offsetX || e.layerX,
// y: e.offsetY || e.layerY,
// task: this.task,
// target: this.$bar,
// });
// this.gantt.$container.querySelector(
// `.highlight-${task_id}`,
// ).style.display = 'block';
// }, 200)),
// );
// $.on(this.group, 'mouseleave', () => {
// clearTimeout(timeout);
// this.gantt.popup?.hide?.();
// this.gantt.$container.querySelector(
// `.highlight-${task_id}`,
// ).style.display = 'none';
// });
let timeout;
$.on(this.group, 'mouseenter', (e) => {
timeout = setTimeout(() => {
this.gantt.show_popup({
x: e.offsetX || e.layerX,
y: e.offsetY || e.layerY,
task: this.task,
target: this.$bar,
});
this.gantt.$container
.querySelector(`.highlight-${task_id}`)
.classList.remove('hide');
}, 200);
});
$.on(this.group, 'mouseleave', () => {
clearTimeout(timeout);
this.gantt.popup?.hide?.();
this.gantt.$container
.querySelector(`.highlight-${task_id}`)
.classList.add('hide');
});
}
$.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}%`,
);
ctx.add_action('Toggle Priority', (task, chart) => {
task.important = !task.important;
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(
chart.tasks.map((t) => (t.id !== task.id ? t : task)),
);
});
ctx.add_action('-', (task, chart) => {
task.progress -= (1 / task.actual_duration) * 100;
chart.refresh(
chart.tasks.map((t) => (t.id !== task.id ? t : task)),
);
});
if (!ctx.chart.options.readonly) {
ctx.add_action('Toggle Priority', (task, chart) => {
task.important = !task.important;
chart.refresh(
chart.tasks.map((t) => (t.id !== task.id ? t : task)),
);
});
if (!ctx.chart.options.readonly_progress) {
ctx.add_action('+', (task, chart) => {
task.progress +=
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(
chart.tasks.map((t) => (t.id !== task.id ? t : task)),
);
});
}
}
},
popup_on: 'click',
readonly_progress: false,

17
src/index.js
View File

@ -663,7 +663,7 @@ export default class Gantt {
left,
height,
classes: 'current-highlight',
append_to: this.$extras,
append_to: this.$container,
});
}
@ -967,10 +967,15 @@ 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, .ignored-bar',
() => {
this.unselect_all();
this.hide_popup();
},
);
}
bind_holiday_labels() {
@ -1404,7 +1409,7 @@ export default class Gantt {
[...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
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) {

12
src/styles/gantt.css
View File

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