jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

fix button issues, positioned properly now

Browse Source
This commit is contained in:
safwansamsudeen 2024-12-05 16:28:12 +05:30
parent d740d407b4
commit f37fe4e80f
2 changed files with 28 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/gantt.css
View File

@ -100,16 +100,21 @@
} }
& .current-upper { & .current-upper {
position: fixed; position: absolute;
left: 10px;
padding: 0 10px;
height: 20px;
background: white;
z-index: 1000;
top: 5px;
} }
& .side-header { & .side-header {
position: fixed; position: absolute;
padding: 0 10px; z-index: 1000;
margin-right: 10px;
background: white;
line-height: 20px; line-height: 20px;
font-weight: 400; font-weight: 400;
top: 5px;
} }
& .today-button, & .today-button,

81
src/index.js
View File

@ -305,7 +305,6 @@ 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();
} }
setup_layers() { setup_layers() {
@ -324,6 +323,7 @@ export default class Gantt {
this.make_grid_background(); this.make_grid_background();
this.make_grid_rows(); this.make_grid_rows();
this.make_grid_header(); this.make_grid_header();
this.make_side_header();
} }
make_grid_extras() { make_grid_extras() {
@ -398,8 +398,6 @@ export default class Gantt {
$lower_header.classList.add('lower-header'); $lower_header.classList.add('lower-header');
this.$lower_header = $lower_header; this.$lower_header = $lower_header;
this.$header.appendChild($lower_header); this.$header.appendChild($lower_header);
this.make_side_header();
} }
make_side_header() { make_side_header() {
@ -443,52 +441,8 @@ export default class Gantt {
this.$today_button = $today_button; this.$today_button = $today_button;
} }
this.$header.appendChild($side_header); this.$container.appendChild($side_header);
this.$side_header = $side_header; this.$side_header = $side_header;
window.addEventListener(
'scroll',
this.update_button_position.bind(this),
);
window.addEventListener(
'resize',
this.update_button_position.bind(this),
);
}
update_button_position() {
const containerRect = this.$container.getBoundingClientRect();
const buttonRect = this.$side_header.getBoundingClientRect();
const { left, y } = this.$header.getBoundingClientRect();
// Check if the button is scrolled out of the container vertically
if (
buttonRect.top < containerRect.top ||
buttonRect.bottom > containerRect.bottom
) {
this.$side_header.style.position = 'absolute';
this.$side_header.style.top = `${containerRect.scrollTop + buttonRect.top}px`;
} else {
this.$side_header.style.position = 'fixed';
this.$side_header.style.top = y + 10 + 'px';
}
const width = Math.min(
this.$header.clientWidth,
this.$container.clientWidth,
);
this.$side_header.style.left =
left +
this.$container.scrollLeft +
width -
this.$side_header.clientWidth +
'px';
// Update the left value on page resize
if (this.$today_button) {
this.$today_button.style.left = `${containerRect.left + 20}px`;
}
} }
make_grid_ticks() { make_grid_ticks() {
@ -1006,11 +960,20 @@ export default class Gantt {
if (x_on_scroll_start) { if (x_on_scroll_start) {
dx = e.currentTarget.scrollLeft - x_on_scroll_start; dx = e.currentTarget.scrollLeft - x_on_scroll_start;
} }
this.$side_header.style.left =
e.currentTarget.clientWidth +
e.currentTarget.scrollLeft -
this.$side_header.clientWidth -
5 +
'px';
if (this.$current)
this.$current.style.left = e.currentTarget.scrollLeft + 'px';
// Calculate current scroll position's upper text
const upperTexts = Array.from( const upperTexts = Array.from(
document.querySelectorAll('.upper-text'), document.querySelectorAll('.upper-text'),
); );
let currentDate = date_utils.add( let currentDate = date_utils.add(
this.gantt_start, this.gantt_start,
e.currentTarget.scrollLeft / this.config.column_width, e.currentTarget.scrollLeft / this.config.column_width,
@ -1018,7 +981,6 @@ export default class Gantt {
); );
let currentUpper = this.config.view_mode.upper_text(currentDate); let currentUpper = this.config.view_mode.upper_text(currentDate);
let $el = upperTexts.find((el) => el.textContent === currentUpper); let $el = upperTexts.find((el) => el.textContent === currentUpper);
// Recalculate for smoother experience // Recalculate for smoother experience
currentDate = date_utils.add( currentDate = date_utils.add(
this.gantt_start, this.gantt_start,
@ -1029,21 +991,13 @@ export default class Gantt {
currentUpper = this.config.view_mode.upper_text(currentDate); currentUpper = this.config.view_mode.upper_text(currentDate);
$el = upperTexts.find((el) => el.textContent === currentUpper); $el = upperTexts.find((el) => el.textContent === currentUpper);
if ($el && !$el.classList.contains('current-upper')) { if ($el !== this.$current) {
const $current = document.querySelector('.current-upper'); if (this.$current)
if ($current) { this.$current.classList.remove('current-upper');
$current.classList.remove('current-upper');
$current.style.left =
this.upper_texts_x[$current.textContent] + 'px';
$current.style.top = this.options.header_height - 50 + 'px';
}
$el.classList.add('current-upper'); $el.classList.add('current-upper');
let dimensions = this.$svg.getBoundingClientRect(); $el.style.left = e.currentTarget.scrollLeft + 'px';
$el.style.left = this.$current = $el;
dimensions.x + this.$container.scrollLeft + 10 + 'px';
$el.style.top =
dimensions.y + this.options.header_height - 50 + 'px';
} }
Array.prototype.forEach.call(elements, function (el, i) { Array.prototype.forEach.call(elements, function (el, i) {
@ -1319,6 +1273,7 @@ export default class Gantt {
clear() { clear() {
this.$svg.innerHTML = ''; this.$svg.innerHTML = '';
this.$header?.remove?.(); this.$header?.remove?.();
this.$side_header?.remove?.();
this.$current_highlight?.remove?.(); this.$current_highlight?.remove?.();
this.popup?.hide?.(); this.popup?.hide?.();
} }