feat: stop scroll on view_mode change

This commit is contained in:
Safwan Samsudeen 2024-12-19 12:34:00 +05:30
parent 8be3b02a9e
commit 5c9f46a69c
2 changed files with 45 additions and 45 deletions

View File

@ -347,10 +347,6 @@ export default class Bar {
this.gantt.$container this.gantt.$container
.querySelector(`.highlight-${task_id}`) .querySelector(`.highlight-${task_id}`)
.classList.toggle('hide'); .classList.toggle('hide');
console.log(
this.gantt.$container.querySelector(`.highlight-${task_id}`)
.classList,
);
}); });
} else { } else {
let timeout; let timeout;

View File

@ -116,7 +116,7 @@ export default class Gantt {
update_options(options) { update_options(options) {
this.setup_options({ ...this.original_options, ...options }); this.setup_options({ ...this.original_options, ...options });
this.change_view_mode(); this.change_view_mode(undefined, true);
} }
setup_tasks(tasks) { setup_tasks(tasks) {
@ -222,17 +222,22 @@ export default class Gantt {
bar.refresh(); bar.refresh();
} }
change_view_mode(mode = this.options.view_mode) { change_view_mode(mode = this.options.view_mode, change = false) {
if (typeof mode === 'string') { if (typeof mode === 'string') {
mode = this.options.view_modes.find((d) => d.name === mode); mode = this.options.view_modes.find((d) => d.name === mode);
} }
// For change const old_scroll_pos = this.$container.scrollLeft;
const old_scroll_op = this.options.scroll_to;
this.options.scroll_to = null;
this.options.view_mode = mode.name; this.options.view_mode = mode.name;
this.config.view_mode = mode; this.config.view_mode = mode;
this.update_view_scale(mode); this.update_view_scale(mode);
this.setup_dates(); this.setup_dates(change);
this.render(); this.render();
this.options.scroll_to = old_scroll_op;
this.$container.scrollLeft = old_scroll_pos;
this.trigger_event('view_change', [mode]); this.trigger_event('view_change', [mode]);
} }
@ -252,12 +257,12 @@ export default class Gantt {
10; 10;
} }
setup_dates() { setup_dates(refresh = false) {
this.setup_gantt_dates(); this.setup_gantt_dates(refresh);
this.setup_date_values(); this.setup_date_values();
} }
setup_gantt_dates() { setup_gantt_dates(refresh) {
let gantt_start, gantt_end; let gantt_start, gantt_end;
if (!this.tasks.length) { if (!this.tasks.length) {
gantt_start = new Date(); gantt_start = new Date();
@ -277,44 +282,44 @@ export default class Gantt {
gantt_end = date_utils.start_of(gantt_end, 'day'); gantt_end = date_utils.start_of(gantt_end, 'day');
// handle single value for padding // handle single value for padding
if (!this.options.infinite_padding) { if (!refresh) {
if (typeof this.config.view_mode.padding === 'string') if (!this.options.infinite_padding) {
this.config.view_mode.padding = [ if (typeof this.config.view_mode.padding === 'string')
this.config.view_mode.padding, this.config.view_mode.padding = [
this.config.view_mode.padding, this.config.view_mode.padding,
]; this.config.view_mode.padding,
];
let [padding_start, padding_end] = let [padding_start, padding_end] =
this.config.view_mode.padding.map(date_utils.parse_duration); this.config.view_mode.padding.map(
gantt_start = date_utils.add( date_utils.parse_duration,
gantt_start, );
-padding_start.duration, this.gantt_start = date_utils.add(
padding_start.scale, gantt_start,
); -padding_start.duration,
gantt_end = date_utils.add( padding_start.scale,
gantt_end, );
padding_end.duration, this.gantt_end = date_utils.add(
padding_end.scale, gantt_end,
); padding_end.duration,
} else { padding_end.scale,
gantt_start = date_utils.add( );
gantt_start, } else {
-this.config.extend_by_units * 3, this.gantt_start = date_utils.add(
this.config.unit, gantt_start,
); -this.config.extend_by_units * 3,
gantt_end = date_utils.add( this.config.unit,
gantt_end, );
this.config.extend_by_units * 3, this.gantt_end = date_utils.add(
this.config.unit, gantt_end,
); this.config.extend_by_units * 3,
this.config.unit,
);
}
} }
this.config.format_string = this.config.format_string =
this.config.view_mode.format_string || 'YYYY-MM-DD HH'; this.config.view_mode.format_string || 'YYYY-MM-DD HH';
this.gantt_start = gantt_start;
this.gantt_start.setHours(0, 0, 0, 0); this.gantt_start.setHours(0, 0, 0, 0);
this.gantt_end = gantt_end;
} }
setup_date_values() { setup_date_values() {
@ -917,7 +922,6 @@ export default class Gantt {
let $el = this.upperTexts.find( let $el = this.upperTexts.find(
(el) => el.textContent === current_upper, (el) => el.textContent === current_upper,
); );
console.log(current_upper, $el);
// Recalculate // Recalculate
this.current_date = date_utils.add( this.current_date = date_utils.add(