SethTrowbridge/eno
1
0
Fork 0
Code Issues1 Pull Requests Packages Projects1 Releases2 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

20
example/tree-menu.tsx
View File

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