diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx index ff92c59..41a43b4 100644 --- a/example/tree-menu.tsx +++ b/example/tree-menu.tsx @@ -67,7 +67,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=> const initialClass = inElement.getAttribute("class")||""; const output = {} as StyleCalc; - inElement.setAttribute("style", `transition: none; overflow: hidden;`); + inElement.setAttribute("style", `transition: none;`); Object.entries(inClasses).forEach(([key, value])=> { inElement.setAttribute("class", value); @@ -88,31 +88,42 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re let userMode = initialState; let frameRequest = 0; let inTransition = false; + let interrupted = false; let measurements:StyleCalc; const transitions:Set = new Set(); const run = (inEvent:TransitionEvent)=> { - console.log("+", inEvent.propertyName); + //console.log("+", inEvent.propertyName); (inEvent.target == inElement) && transitions.add(inEvent.propertyName); }; const end = (inEvent:TransitionEvent)=> { - console.log("-", inEvent.propertyName); + //console.log("-", inEvent.propertyName); if (inEvent.target == inElement) { transitions.delete(inEvent.propertyName); if(transitions.size === 0) { - console.log("--done--", userMode); - inElement.setAttribute("style", "transition:none;"); - inElement.clientHeight; - frameRequest = requestAnimationFrame(()=> + console.log("--done--", userMode, "interrupted?", interrupted); + + measurements = StyleCalc(inElement, library); + const [, w, h] = measurements[userMode]; + + if(inElement.offsetHeight != h || inElement.offsetWidth != w) { - inElement.setAttribute("style", ""); - inTransition = false; - userDone(userMode); - }); + console.log(inElement.offsetHeight, "VERSUS", h); + anim(userMode, userDone); + } + else + { + frameRequest = requestAnimationFrame(()=> + { + inElement.setAttribute("style", ""); + inTransition = false; + userDone(userMode); + }); + } } } }; @@ -120,19 +131,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re const child =(e:CustomEvent)=> { if(e.target == inElement || !inTransition){ return; } - console.log("resize", e.detail); - const oldWidth = inElement.offsetWidth; - const oldHeight = inElement.offsetHeight; - //inElement.style.overflow = "hidden"; - inElement.style.width = oldWidth + e.detail[0] + "px"; - inElement.style.height = oldHeight + e.detail[1] + "px"; + interrupted = true; + //console.log("resize", e.detail); } inElement.addEventListener("transitionend", end); inElement.addEventListener("transitionrun", run); inElement.addEventListener("childresize", child); - return function(inState:string, inDone) + const anim = function(inState:string, inDone) { cancelAnimationFrame(frameRequest); @@ -146,7 +153,7 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re if(!inTransition) { measurements = StyleCalc(inElement, library); - console.log("measurements taken", measurements) + //console.log("measurements taken", measurements) } if(measurements) @@ -158,16 +165,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re inElement.style.width = oldWidth + "px"; inElement.style.height = oldHeight + "px"; inTransition = true; - console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`); - - inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]})) + //console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`); + //inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]})) frameRequest = requestAnimationFrame(()=> { inElement.style.height = height + "px"; inElement.style.width = width + "px"; inElement.className = classes; - console.log(` to: {${width} ${height}}`) + //console.log(` to: {${width} ${height}}`) }); } } @@ -178,4 +184,5 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re } } as CollapseControls; -} \ No newline at end of file + return anim; +} \ No newline at end of file