{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; let transitions = new Set(); const run = (inEvent:TransitionEvent)=> { if (inEvent.target == inElement) { console.log("transition", inEvent.target) transitions.add(inEvent.propertyName); } }; const end = (inEvent:TransitionEvent)=> { if (inEvent.target == inElement) { transitions.delete(inEvent.propertyName); if(transitions.size === 0) { if (userMode) { inElement.setAttribute("style", ""); } userDone(userMode); } } }; inElement.addEventListener("transitionend", end); inElement.addEventListener("transitionrun", run); return function(inOpen, inMs, inDone) { cancelAnimationFrame(frameRequest); if(arguments.length) { userDone = inDone|| ((m)=>{}) as DoneCallback; userMode = inOpen === true; // 1) capture current state and possible classes const h1 = inElement.clientHeight; const w1 = inElement.clientWidth; const classesInitial = inElement.getAttribute("class"); const classesKeep = inElement.getAttribute("data-class-keep"); const classesEnd = inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`); // 2) disable transitions to get immediate results inElement.setAttribute("style", ""); inElement.style.transition = "width none, height none"; // 3) add new classes and capture new height inElement.className = classesKeep + " " + classesEnd; const h2 = inElement.clientHeight; const w2 = inElement.clientWidth; // 4) put everything back (and turn on overflow hidden) inElement.style.height = h1+"px"; inElement.style.width = w1+"px"; inElement.style.overflow = "hidden"; inElement.className = classesInitial ?? ""; console.log(`BEFORE classes:"${inElement.className}" width:"${w1}" height:"${h1}"`); frameRequest = requestAnimationFrame(()=> { inElement.style.transition = ""; frameRequest = requestAnimationFrame(()=> { inElement.style.height = `${h2}px`; inElement.style.width = `${w2}px`; inElement.className = classesKeep + " " + classesEnd; console.log(`AFTER classes:"${inElement.className}" width:"${w2}" height:"${h2}"`); }); }); } else { inElement.removeEventListener("transitionrun", run); inElement.removeEventListener("transitionend", end); } } as CollapseControls; }