From fcd04922bd582df354808f2251a31889f4dc0b66 Mon Sep 17 00:00:00 2001 From: Safwan Samsudeen Date: Tue, 17 Dec 2024 14:57:51 +0530 Subject: [PATCH] fix: few bugs in popup --- src/bar.js | 85 ++++++++++++++++++-------------------------- src/defaults.js | 42 ++++++++++++---------- src/index.js | 17 +++++---- src/styles/gantt.css | 12 +++---- 4 files changed, 73 insertions(+), 83 deletions(-) diff --git a/src/bar.js b/src/bar.js index a3a6a5e..39b3a90 100644 --- a/src/bar.js +++ b/src/bar.js @@ -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', () => { diff --git a/src/defaults.js b/src/defaults.js index c10dd43..da54de2 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -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' : ''})
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, diff --git a/src/index.js b/src/index.js index 1d2e3fb..0d2db62 100644 --- a/src/index.js +++ b/src/index.js @@ -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) { diff --git a/src/styles/gantt.css b/src/styles/gantt.css index 47f6b8d..50d3e57 100644 --- a/src/styles/gantt.css +++ b/src/styles/gantt.css @@ -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; } }