From ce5578f71e9a9d11288c902984f89d52b7211ee9 Mon Sep 17 00:00:00 2001 From: Martin Trapp <94928215+martrapp@users.noreply.github.com> Date: Fri, 2 Aug 2024 14:26:16 +0200 Subject: [PATCH] fix inner panel (#13) --- .changeset/afraid-ads-sniff.md | 5 ++ src/bench.txt | 4 +- src/panel/inner.ts | 106 ++++++++++++++++++++------------- src/types.ts | 5 +- 4 files changed, 77 insertions(+), 43 deletions(-) create mode 100644 .changeset/afraid-ads-sniff.md diff --git a/.changeset/afraid-ads-sniff.md b/.changeset/afraid-ads-sniff.md new file mode 100644 index 0000000..d9211ba --- /dev/null +++ b/.changeset/afraid-ads-sniff.md @@ -0,0 +1,5 @@ +--- +'@vtbag/inspection-chamber': patch +--- + +Fixes scrolling & closing of enlarged sub-panels. diff --git a/src/bench.txt b/src/bench.txt index d6303e9..8a69f8d 100644 --- a/src/bench.txt +++ b/src/bench.txt @@ -244,6 +244,7 @@ top: 25vh; width: 50vw; height: 50vh; + overflow: hidden; background-color: #0000; padding: 0.5em; scrollbar-gutter: unset; @@ -411,7 +412,8 @@ #vtbag-ui-inner-panel > div:nth-of-type(3) { padding: 8px; min-width: 100%; - min-height: calc(100% - 6ex); + height: calc(100% - 6ex); + overflow: auto; } #vtbag-ui-opacity { transform: translate(8px, -5px); diff --git a/src/panel/inner.ts b/src/panel/inner.ts index 668b83a..a125188 100644 --- a/src/panel/inner.ts +++ b/src/panel/inner.ts @@ -1,16 +1,14 @@ import { initDragging } from '../dragging'; +import { InspectionChamber } from '../types'; import { mayViewTransition } from './transition'; -let mainPanel: HTMLDivElement; -let innerPanel: HTMLDivElement; -let pushBack: HTMLDivElement | null = null; - const INNER_POSITION = 2; +const ELEMENTS_INCLUDING_CONTENT = 5; -export function initInnerPanel() { - mainPanel = top!.document.querySelector('#vtbag-ui-panel')!; - innerPanel = top!.document.querySelector('#vtbag-ui-inner-panel')!; +let chamber: InspectionChamber | undefined = undefined; +export function initInnerPanel() { + setPanels(); reColor(); top!.document .querySelector('#vtbag-ui-light-dark')! @@ -18,61 +16,61 @@ export function initInnerPanel() { function reColor() { const dark = top!.document.documentElement.style.colorScheme.startsWith('dark'); - innerPanel.style.backgroundColor = dark ? '#000' : '#fff'; - innerPanel.style.color = !dark ? '#000' : '#fff'; + chamber!.innerPanel!.style.backgroundColor = dark ? '#000' : '#fff'; + chamber!.innerPanel!.style.color = !dark ? '#000' : '#fff'; } - initDragging(innerPanel.children[0] as HTMLElement, (x: number, y: number) => { - innerPanel.style.left = `${x}px`; - innerPanel.style.top = `${y}px`; + initDragging(chamber!.innerPanel!.children[0] as HTMLElement, (x: number, y: number) => { + chamber!.innerPanel!.style.left = `${x}px`; + chamber!.innerPanel!.style.top = `${y}px`; }); - initDragging(innerPanel.children[innerPanel.children.length-1] as HTMLElement, (x: number, y: number) => { - const rect = innerPanel.getBoundingClientRect(); - innerPanel.style.width = `${Math.max(200, x - rect.x + 32)}px`; - innerPanel.style.height = `${Math.max(200, y - rect.y + 32)}px`; - }); + initDragging( + chamber!.innerPanel!.children[chamber!.innerPanel!.children.length - 1] as HTMLElement, + (x: number, y: number) => { + const rect = chamber!.innerPanel!.getBoundingClientRect(); + chamber!.innerPanel!.style.width = `${Math.max(200, x - rect.x + 32)}px`; + chamber!.innerPanel!.style.height = `${Math.max(200, y - rect.y + 32)}px`; + } + ); - const opacity = innerPanel.querySelector('#vtbag-ui-opacity')!; - innerPanel.style.opacity = `${parseInt(opacity.value, 10) / 100}`; + const opacity = chamber!.innerPanel!.querySelector('#vtbag-ui-opacity')!; + chamber!.innerPanel!.style.opacity = `${parseInt(opacity.value, 10) / 100}`; opacity.addEventListener('input', (e) => { - innerPanel.style.opacity = `${parseInt((e.target as HTMLInputElement).value, 10) / 100}`; + chamber!.innerPanel!.style.opacity = `${parseInt((e.target as HTMLInputElement).value, 10) / 100}`; }); - innerPanel - .querySelector('#vtbag-ui-inner-panel-close')! - .addEventListener('click', () => { - mayViewTransition(() => { - mainPanel.insertBefore(innerPanel.children[INNER_POSITION], pushBack); - pushBack = null; - innerPanel.style.display = 'none'; - }, 'close inner panel'); - }); - mainPanel.querySelectorAll(':scope > div').forEach((el) => plugInPanel(el)); + chamber! + .innerPanel!.querySelector('#vtbag-ui-inner-panel-close')! + .addEventListener('click', closeInner); + chamber! + .mainPanel!.querySelectorAll(':scope > div') + .forEach((el) => plugInPanel(el)); } export function plugInPanel(el: HTMLHeadingElement) { el.querySelector(':scope > h4')?.addEventListener('click', (e) => { mayViewTransition(() => { const div = (e.target as HTMLElement).closest('#vtbag-ui-panel > div')!; - innerPanel.children.length > INNER_POSITION + 2 && - mainPanel.insertBefore(innerPanel.children[INNER_POSITION], pushBack); - pushBack = null; + pushItBack(); if (div) { - pushBack = div.nextElementSibling as HTMLDivElement; - innerPanel.insertBefore(div, innerPanel.children[INNER_POSITION]); - innerPanel.style.display = 'block'; + chamber!.pushBack = div.nextElementSibling as HTMLDivElement; + chamber!.innerPanel!.insertBefore(div, chamber!.innerPanel!.children[INNER_POSITION]); + chamber!.innerPanel!.style.display = 'block'; } else { - innerPanel.style.display = 'none'; + chamber!.innerPanel!.style.display = 'none'; } }, 'inner panel'); }); } export function mightHideMode() { - const id = innerPanel.children[INNER_POSITION].id; + const id = chamber!.innerPanel!.children[INNER_POSITION].id; if (id === 'vtbag-ui-slow-motion' || id === 'vtbag-ui-control') { - mainPanel.insertBefore(innerPanel.children[INNER_POSITION], pushBack); - innerPanel.style.display = 'none'; + chamber!.mainPanel!.insertBefore( + chamber!.innerPanel!.children[INNER_POSITION], + chamber!.pushBack ?? null + ); + chamber!.innerPanel!.style.display = 'none'; } } @@ -81,6 +79,32 @@ export function mayCloseInner() { const empty = top!.document.querySelector( `#vtbag-ui-inner-panel:has( > div:nth-of-type(${INNER_POSITION + 1}):empty)` ); - empty && (empty.style.display = 'none'); + if (empty) { + empty.style.display = 'none'; + closeInner(); + } }, 100); } + +function closeInner() { + setPanels(); + mayViewTransition(() => { + pushItBack(); + chamber!.innerPanel!.style.display = 'none'; + }, 'close inner panel'); +} + +function pushItBack() { + chamber!.innerPanel!.children.length === ELEMENTS_INCLUDING_CONTENT && + chamber!.mainPanel!.insertBefore( + chamber!.innerPanel!.children[INNER_POSITION], + chamber!.pushBack ?? null + ); + chamber!.pushBack = null; +} + +function setPanels() { + chamber ??= top!.__vtbag.inspectionChamber; + chamber!.mainPanel ??= top!.document.querySelector('#vtbag-ui-panel')!; + chamber!.innerPanel ??= top!.document.querySelector('#vtbag-ui-inner-panel')!; +} diff --git a/src/types.ts b/src/types.ts index 0be2be0..7566a7a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -7,11 +7,14 @@ export type InspectionChamber = { animationMap?: Map | undefined; longestAnimation?: Animation | undefined; animationEndTime?: number | undefined; - styleMap?: Map | undefined; + styleMap?: Map | undefined; keyframesMap?: Map | undefined; glow?: Animation | undefined; twin?: HTMLElement | undefined; updateNameVisibilityTimeout?: number | undefined; + mainPanel?: HTMLDivElement; + innerPanel?: HTMLDivElement; + pushBack?: HTMLDivElement | null; }; declare global {