{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; // 1) capture current height and possible classes const h1 = inElement.clientHeight; const classesInitial = inElement.getAttribute("class"); const classesStart = inElement.getAttribute("data-class"); const classesEnd = inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`); // 2) disable transitions to get immediate results inElement.style.transition = "none"; inElement.style.height = ""; // 3) add new classes and capture new height inElement.className = classesStart + " " + classesEnd; const h2 = inElement.clientHeight; // 4) put everything back (and turn on overflow hidden) inElement.style.height = h1+"px"; inElement.style.overflow = "hidden"; inElement.className = classesInitial; console.log(`before: classes are "${inElement.className}"`); console.log("LOOK", h1, h2); frameRequest = requestAnimationFrame(()=> { inElement.style.transition = ""; frameRequest = requestAnimationFrame(()=> { inElement.style.height = `${h2}px`; inElement.className = classesStart + " " + classesEnd; console.log(`after: classes are "${inElement.className}"`); }); }); } else { inElement.removeEventListener("transitionend", done); } } as CollapseControls; }