diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index bd7330f762..f5630ed7cd 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -25,51 +25,116 @@ let divBack: HTMLElement let divBar: HTMLElement let divTrack: HTMLElement - let divEl: HTMLElement - let isBack: boolean = false + let divTHead: HTMLElement + let elTHead: Element + let isBack: boolean = false // ? + let isTHead: boolean = false + let hasTHeads: boolean = false // ? let isScrolling: boolean = false + let enabledChecking: boolean = false let dY: number + let visibleEl: number | undefined = undefined const checkBack = (): void => { - const rectScroll = divScroll.getBoundingClientRect() - const el = divBox.querySelector('.scroller-back') - if (el && divScroll) { - const rectEl = el.getBoundingClientRect() - const bottom = document.body.clientHeight - rectScroll.bottom - let top = rectEl.top - if (top < rectScroll.top) top = rectScroll.top - if (top > rectScroll.bottom) top = rectScroll.top + rectScroll.height - divBack.style.left = rectScroll.left + 'px' - divBack.style.right = document.body.clientWidth - rectScroll.right + 'px' - divBack.style.top = top + 'px' - divBack.style.bottom = bottom + 'px' - divBack.style.height = 'auto' - divBack.style.width = 'auto' - divBack.style.visibility = 'visible' - isBack = true - } else { - divBack.style.visibility = 'hidden' - isBack = false + if (divBox) { + const el = divBox.querySelector('.scroller-back') + if (el && divScroll) { + const rectScroll = divScroll.getBoundingClientRect() + const rectEl = el.getBoundingClientRect() + const bottom = document.body.clientHeight - rectScroll.bottom + let top = rectEl.top + if (top < rectScroll.top) top = rectScroll.top + if (top > rectScroll.bottom) top = rectScroll.top + rectScroll.height + divBack.style.left = rectScroll.left + 'px' + divBack.style.right = document.body.clientWidth - rectScroll.right + 'px' + divBack.style.top = top + 'px' + divBack.style.bottom = bottom + 'px' + divBack.style.height = 'auto' + divBack.style.width = 'auto' + divBack.style.visibility = 'visible' + isBack = true + } else { + divBack.style.visibility = 'hidden' + isBack = false + } } } - let observer = new IntersectionObserver(changes => { - for (const change of changes) { - if (divBack) { - let rect = change.intersectionRect - if (rect) { - divBack.style.left = rect.left + 'px' - divBack.style.right = document.body.clientWidth - rect.right + 'px' - divBack.style.top = rect.top + 'px' - divBack.style.bottom = document.body.clientHeight - rect.bottom + 'px' - if (change.target) { - const temp: HTMLElement = change.target as HTMLElement - divBack.style.backgroundColor = temp.style.backgroundColor - } - } else divBack.style.visibility = 'hidden' - } + const checkTHeadSizes = (): void => { + if (elTHead && divTHead && divScroll) { + const elements = divTHead.querySelectorAll('div') + elements.forEach((el, i) => { + const th = elTHead.children.item(i) + if (th) el.style.width = th.clientWidth + 'px' + }) } - }, { root: null, threshold: .1 }) + } + + const clearTHead = (): void => { + visibleEl = undefined + divTHead.innerHTML = '' + divTHead.style.visibility = 'hidden' + divTHead.style.opacity = '0' + isTHead = false + } + + const fillTHead = (el: Element): boolean => { + const tr: Element | null = el.children.item(0) + if (tr) { + for (let i = 0; i < tr.children.length; i++) { + const th = tr.children.item(i) + if (th) { + let newStyle = `flex-shrink: 0; width: ${th.clientWidth}px; ` + if ((i === 0 && !enabledChecking) || (i === 1 && enabledChecking)) newStyle += `padding-right: 1.5rem;` + else if (i === tr.children.length - 1) newStyle += `padding-left: 1.5rem;` + else if (i === 0 && enabledChecking) newStyle += `padding: 0 .75rem;` + else newStyle += `padding: 0 1.5rem;` + if (th.classList.contains('sorted')) newStyle += ` margin-right: .25rem;` + divTHead.insertAdjacentHTML('beforeend', `