{JSON.stringify(stateGet)}
>; }; type DoneCallback =(openState:boolean)=>void; export type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void; export function Collapser(inElement:HTMLElement, initialState = false) { let userDone:DoneCallback = (openState) => {}; let userMode = initialState; let frameRequest = 0; const done = (inEvent:TransitionEvent)=> { if (inEvent.propertyName == "height" && inEvent.target == inElement) { inEvent.stopPropagation(); if (userMode) { inElement.style.height = "auto"; inElement.style.overflow = "visible"; } userDone(userMode); } }; inElement.addEventListener("transitionend", done); return function(inOpen, inMs, inDone) { cancelAnimationFrame(frameRequest); if(arguments.length) { userDone = inDone|| ((m)=>{}) as DoneCallback; userMode = inOpen === true; inElement.style.height = inElement.clientHeight + "px"; inElement.style.overflow = "hidden"; inElement.style.transition = "none"; const h1 = inElement.clientHeight; const classesStart = inElement.className; inElement.style.height = ""; inElement.className = classesStart + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`); const h2 = inElement.clientHeight; console.log("when classes are (", inElement.className , ") height is", h2); inElement.style.height = h1+"px"; inElement.className = classesStart; console.log("LOOK", h1, h2); frameRequest = requestAnimationFrame(()=> { inElement.style.transition = ""; frameRequest = requestAnimationFrame(()=> { inElement.style.height = `${h2}px`; }); }); } else { inElement.removeEventListener("transitionend", done); } } as CollapseControls; }