From f78e7c81073b7b16204ed2efb87bf42729f69b4c Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sun, 28 May 2023 13:21:38 -0400
Subject: [PATCH] cleanup

---
 example/tree-menu.tsx | 41 ++++++++---------------------------------
 1 file changed, 8 insertions(+), 33 deletions(-)

diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index 41a43b4..8cb3701 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -34,14 +34,12 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
         Classes[stateName as keyof MenuClassStates] = Window.TwindInst(Classes[stateName as keyof MenuClassStates]);
       }
     }
-
-    const initialKey = stateGet.open ? "Open" : "Shut";
-
+    
     React.useEffect(()=> {
       refElement.current?.setAttribute("style", "");
-      refControl.current = refElement.current && Collapser(refElement.current, initialKey, Classes);
+      refControl.current = refElement.current && Collapser(refElement.current, stateGet.open ? "Open" : "Shut", Classes);
     }, []);
-    React.useEffect(()=> {refControl.current && refControl.current(initialKey, ()=>stateSet({done:true}))}, [stateGet.open])
+    React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open])
 
     return <div ref={refElement as React.Ref<HTMLDivElement>} class={Classes.Shut} style="transition:none;">
       { (!stateGet.open && stateGet.done) ? null : props.children}
@@ -74,7 +72,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
     output[key] =  [value, inElement.offsetWidth, inElement.offsetHeight];
   });
   inElement.setAttribute("class", initialClass);
-  inElement.offsetHeight;
+  inElement.offsetHeight; // this has be be exactly here
   inElement.setAttribute("style", initialStyle);
 
   return output;
@@ -92,27 +90,18 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
     let measurements:StyleCalc;
     const transitions:Set<string> = new Set();
 
-    const run = (inEvent:TransitionEvent)=>
-    {
-      //console.log("+", inEvent.propertyName);
-      (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
-    };
+    const run = (inEvent:TransitionEvent)=> (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
     const end = (inEvent:TransitionEvent)=>
     {
-      //console.log("-", inEvent.propertyName);
       if (inEvent.target == inElement)
       {
         transitions.delete(inEvent.propertyName);
         if(transitions.size === 0)
         {
-          console.log("--done--", userMode, "interrupted?", interrupted);
-
           measurements = StyleCalc(inElement, library);
           const [, w, h] = measurements[userMode];
-          
           if(inElement.offsetHeight != h || inElement.offsetWidth != w)
           {
-            console.log(inElement.offsetHeight, "VERSUS", h);
             anim(userMode, userDone);
           }
           else
@@ -127,18 +116,6 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         }
       }
     };
-
-    const child =(e:CustomEvent)=>
-    {
-      if(e.target == inElement || !inTransition){ return; }
-      interrupted = true;
-      //console.log("resize", e.detail);
-    }
-
-    inElement.addEventListener("transitionend", end);
-    inElement.addEventListener("transitionrun", run);
-    inElement.addEventListener("childresize", child);
-
     const anim = function(inState:string, inDone)
     {
       cancelAnimationFrame(frameRequest);
@@ -153,7 +130,6 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         if(!inTransition)
         {
           measurements = StyleCalc(inElement, library);
-         //console.log("measurements taken", measurements)
         }
 
         if(measurements)
@@ -161,19 +137,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
             const [classes, width, height] = measurements[inState] as StyleSize;
             const oldWidth = inElement.offsetWidth;
             const oldHeight = inElement.offsetHeight;
-            //inElement.style.overflow = "hidden";
             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]}))
 
             frameRequest = requestAnimationFrame(()=>
             {
               inElement.style.height = height + "px";
               inElement.style.width = width + "px";
               inElement.className = classes;
-              //console.log(`  to: {${width} ${height}}`)
             });
         }
       }
@@ -184,5 +156,8 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
       }
     } as CollapseControls;
 
+    inElement.addEventListener("transitionend", end);
+    inElement.addEventListener("transitionrun", run);
+
     return anim;
 } 
\ No newline at end of file