Skip to content

Commit

Permalink
fix inner panel (#13)
Browse files Browse the repository at this point in the history
  • Loading branch information
@martrapp
martrapp authored Aug 2, 2024
1 parent a5a3858 commit ce5578f
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 43 deletions.
5 changes: 5 additions & 0 deletions .changeset/afraid-ads-sniff.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@vtbag/inspection-chamber': patch
---

Fixes scrolling & closing of enlarged sub-panels.
4 changes: 3 additions & 1 deletion src/bench.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@
top: 25vh;
width: 50vw;
height: 50vh;
overflow: hidden;
background-color: #0000;
padding: 0.5em;
scrollbar-gutter: unset;
Expand Down Expand Up @@ -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);
Expand Down
106 changes: 65 additions & 41 deletions src/panel/inner.ts
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,76 @@
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<HTMLDivElement>('#vtbag-ui-panel')!;
innerPanel = top!.document.querySelector<HTMLDivElement>('#vtbag-ui-inner-panel')!;
let chamber: InspectionChamber | undefined = undefined;

export function initInnerPanel() {
setPanels();
reColor();
top!.document
.querySelector<HTMLButtonElement>('#vtbag-ui-light-dark')!
.addEventListener('click', reColor);

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<HTMLInputElement>('#vtbag-ui-opacity')!;
innerPanel.style.opacity = `${parseInt(opacity.value, 10) / 100}`;
const opacity = chamber!.innerPanel!.querySelector<HTMLInputElement>('#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<HTMLDivElement>('#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<HTMLHeadingElement>(':scope > div').forEach((el) => plugInPanel(el));
chamber!
.innerPanel!.querySelector<HTMLDivElement>('#vtbag-ui-inner-panel-close')!
.addEventListener('click', closeInner);
chamber!
.mainPanel!.querySelectorAll<HTMLHeadingElement>(':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<HTMLDivElement>('#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';
}
}

Expand All @@ -81,6 +79,32 @@ export function mayCloseInner() {
const empty = top!.document.querySelector<HTMLDivElement>(
`#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<HTMLDivElement>('#vtbag-ui-panel')!;
chamber!.innerPanel ??= top!.document.querySelector<HTMLDivElement>('#vtbag-ui-inner-panel')!;
}
5 changes: 4 additions & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ export type InspectionChamber = {
animationMap?: Map<string, Animation> | undefined;
longestAnimation?: Animation | undefined;
animationEndTime?: number | undefined;
styleMap?: Map<string, CSSStyleDeclaration> | undefined;
styleMap?: Map<string, CSSStyleDeclaration | false> | undefined;
keyframesMap?: Map<string, Keyframe[]> | undefined;
glow?: Animation | undefined;
twin?: HTMLElement | undefined;
updateNameVisibilityTimeout?: number | undefined;
mainPanel?: HTMLDivElement;
innerPanel?: HTMLDivElement;
pushBack?: HTMLDivElement | null;
};

declare global {
Expand Down

0 comments on commit ce5578f

Please sign in to comment.