From 48cc04d0d13452c0d7722d116068e5c759f8106f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?= Date: Tue, 5 Nov 2024 09:37:42 +0100 Subject: [PATCH] Refactoring --- timeline/header.ts | 23 +- timeline/index.html | 695 +------------------------------------- timeline/index.ts | 58 ++-- timeline/lib.ts | 11 + timeline/out/index.js | 70 ++-- timeline/out/index.js.map | 6 +- timeline/post.css | 549 ++++++++++++++++++++++++++++++ timeline/pre.css | 131 +++++++ 8 files changed, 781 insertions(+), 762 deletions(-) create mode 100644 timeline/post.css create mode 100644 timeline/pre.css diff --git a/timeline/header.ts b/timeline/header.ts index 32784101..d21a230f 100644 --- a/timeline/header.ts +++ b/timeline/header.ts @@ -7,18 +7,14 @@ export class HeaderMonitor { private headerMonitor!: ResizeObserver; private lastWidth = 0; private work = () => {}; - - constructor() { this.work = debounced(this.invoke.bind(this), 5); } - public start() { // Monitor left panel and adjust header left position. this.headerMonitor = new ResizeObserver(this.work); this.headerMonitor.observe(this.panel()); } - public invoke(...args: any[]) { const [panel, header] = [this.panel(), this.header()]; const {left} = panel.querySelector('.vis-labelset')!.getBoundingClientRect(); @@ -193,21 +189,22 @@ export function recalculateHeader() { export function anchorHeader() { const store = anchorHeader as any as {lastTop: number;}; store.lastTop = store.lastTop ?? 0; - const panel = document.querySelector('.vis-panel.vis-left')!; - const header = document.getElementById('groupHeader')!; - const content = panel.querySelector('.vis-labelset')!; - const top = Math.ceil(panel.getBoundingClientRect().top); + const panelEl = document.querySelector('.vis-panel.vis-left')!; + const headerEl = document.getElementById('groupHeader')!; + const headerBottomEl = headerEl.querySelector('.bottom')! as HTMLElement; + const headerTopEl = headerEl.querySelector('.top')! as HTMLElement; + + const contentEl = panelEl.querySelector('.vis-labelset')!; + const top = Math.ceil(panelEl.getBoundingClientRect().top); if (top === store.lastTop) { return; } store.lastTop = top; - const headerHeight = Math.ceil(header.getBoundingClientRect().height); - const newTop = top - headerHeight + 1; - header.style.setProperty('top', `${newTop}px`); + headerTopEl.style.setProperty('height', `${top - 30}px`); // Also adjust the left property of the group-header, as it may have a scrool element. - const left = Math.ceil(content.getBoundingClientRect().left); - header.style.setProperty('left', `${left}px`); + const left = Math.ceil(contentEl.getBoundingClientRect().left); + headerEl.style.setProperty('left', `${left}px`); } diff --git a/timeline/index.html b/timeline/index.html index 59cbad4e..1e49736b 100644 --- a/timeline/index.html +++ b/timeline/index.html @@ -2,149 +2,13 @@ - - - - + + - -
@@ -163,7 +27,6 @@
-