mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Keeping utility for accordion and observer for the future.
This commit is contained in:
parent
eca732ae1d
commit
4ca9e4a4fd
1 changed files with 27 additions and 0 deletions
27
src/lib/util/accordion.ts
Normal file
27
src/lib/util/accordion.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
export default function (node: HTMLElement) {
|
||||||
|
const setHeight = (detail: HTMLDetailsElement, open = false) => {
|
||||||
|
detail.open = open;
|
||||||
|
const rect = detail.getBoundingClientRect();
|
||||||
|
detail.dataset.width = `${rect.width}`;
|
||||||
|
detail.style.setProperty(open ? `--expanded` : `--collapsed`, `${rect.height}px`);
|
||||||
|
};
|
||||||
|
const RO = new ResizeObserver((entries) => {
|
||||||
|
return entries.forEach((entry) => {
|
||||||
|
const detail: HTMLDetailsElement = entry.target;
|
||||||
|
const width: number = parseInt(detail.dataset.width, 10);
|
||||||
|
if (width !== parseInt(entry.contentRect.width, 10)) {
|
||||||
|
detail.removeAttribute('style');
|
||||||
|
setHeight(detail);
|
||||||
|
setHeight(detail, true);
|
||||||
|
detail.open = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
RO.observe(node);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
RO.unobserve(node);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue