SethTrowbridge/eno
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

account for border

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-23 18:32:31 -04:00
parent cd71697405
commit d576917f8f
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
example/tree-menu.tsx
View File

@ -64,7 +64,7 @@ export function Collapser(inElement:HTMLElement, initialState = false)
let inTransition = false; let inTransition = false;
let transitions = new Set(); let transitions = new Set();
let measurements = false; let measurements:false|Record<string, { width: number; height: number; }>
const run = (inEvent:TransitionEvent)=> const run = (inEvent:TransitionEvent)=>
{ {
@ -83,7 +83,7 @@ export function Collapser(inElement:HTMLElement, initialState = false)
{ {
if (userMode) if (userMode)
{ {
//inElement.setAttribute("style", ""); inElement.setAttribute("style", "");
} }
inTransition = false; inTransition = false;
userDone(userMode); userDone(userMode);
@ -100,7 +100,6 @@ export function Collapser(inElement:HTMLElement, initialState = false)
Object.entries(inClasses).forEach(([key, value])=> Object.entries(inClasses).forEach(([key, value])=>
{ {
inElement.setAttribute("class", value); inElement.setAttribute("class", value);
console.log(inElement.offsetHeight, inElement.clientHeight);
output[key] = { width: inElement.offsetWidth, height: inElement.offsetHeight }; output[key] = { width: inElement.offsetWidth, height: inElement.offsetHeight };
}); });
inElement.removeAttribute("style"); inElement.removeAttribute("style");
@ -122,9 +121,10 @@ export function Collapser(inElement:HTMLElement, initialState = false)
if((inOpen || !measurements) && !inTransition) if((inOpen || !measurements) && !inTransition)
{ {
const keep = inElement.getAttribute("data-class-keep")+" ";
measurements = getMeasurements({ measurements = getMeasurements({
Open: inElement.getAttribute("data-class-open")||"", Open: keep + inElement.getAttribute("data-class-open"),
Shut: inElement.getAttribute("data-class-shut")||"", Shut: keep + inElement.getAttribute("data-class-shut"),
}); });
console.log(measurements); console.log(measurements);
} }
@ -137,11 +137,11 @@ export function Collapser(inElement:HTMLElement, initialState = false)
frameRequest = requestAnimationFrame(()=> frameRequest = requestAnimationFrame(()=>
{ {
const measure = inOpen ? measurements.Open : measurements.Shut; const measure = inOpen ? measurements.Open : measurements.Shut;
inElement.style.width = measure.width + "px"; inElement.style.width = measure.width + "px";
inElement.style.height = measure.height + "px"; inElement.style.height = measure.height + "px";
inElement.className = inElement.getAttribute("data-class-keep") + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`); inElement.className = inElement.getAttribute("data-class-keep") + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
}); });
} }
else else