diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx index a8bf9c9..8709074 100644 --- a/example/tree-menu.tsx +++ b/example/tree-menu.tsx @@ -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 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