From 049e4c0f0e3ae0659b1b4abae88433b6d211d7d3 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Wed, 24 May 2023 15:40:03 -0400 Subject: [PATCH] StyleCalc started --- example/tree-menu.tsx | 132 ++++++++++++++++++++++-------------------- 1 file changed, 70 insertions(+), 62 deletions(-) diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx index 96acb87..6121015 100644 --- a/example/tree-menu.tsx +++ b/example/tree-menu.tsx @@ -19,13 +19,11 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=> const refControl:React.MutableRefObject = React.useRef( null ); type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string}; + const base = `relative transition-all border(8 black) overflow-hidden`; const Classes:MenuClassStates = { - Keep: "relative transition-all border(8 black) ", - Open: "h-auto w-1/2 top-8 duration-700", - Shut: "h-0 w-[300px] top-0 duration-300", - Move: "", - Exit: "h-auto w-auto top-36 px-4 opacity-0" + Open: `${base} h-auto top-8 duration-700`, + Shut: `${base} h-0 top-0 duration-300`, }; const Window = window as {TwindInst?:(c:string)=>string}; if(Window.TwindInst) @@ -36,8 +34,8 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=> } } - React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []); - React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open]) + React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, "Shut", Classes), []); + React.useEffect(()=> {refControl.current && refControl.current(stateGet.open ? "Open" : "Shut", ()=>stateSet({done:true}))}, [stateGet.open]) return
}> { (!stateGet.open && stateGet.done) ? null : props.children} @@ -54,96 +52,105 @@ export const Button =()=> ; }; +type StyleSize = [classes:string, width:number, height:number]; +type StylePack = Record; +type StyleCalc = Record; +const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=> +{ + const initialStyle = inElement.getAttribute("style")||""; + const initialClass = inElement.getAttribute("class")||""; + const output = {} as StyleCalc; + + + inElement.setAttribute("style", `transition: none; overflow: hidden;`); + inElement.clientHeight; + Object.entries(inClasses).forEach(([key, value])=> + { + inElement.setAttribute("class", value); + inElement.clientHeight; + output[key] = [value, inElement.offsetWidth, inElement.offsetHeight]; + }); + inElement.setAttribute("style", initialStyle); + inElement.setAttribute("class", initialClass); + inElement.clientHeight; + + return output; +}; + + type DoneCallback =(openState:boolean)=>void; -export type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void; -export function Collapser(inElement:HTMLElement, initialState = false) +export type CollapseControls =(inOpen?:string, inDone?:DoneCallback)=>void; +export function Collapser(inElement:HTMLElement, initialState:string, library:Record) { let userDone:DoneCallback = (openState) => {}; let userMode = initialState; let frameRequest = 0; let inTransition = false; - - let transitions = new Set(); - let measurements:false|Record + let measurements:StyleCalc; + const transitions:Set = new Set(); const run = (inEvent:TransitionEvent)=> { - if (inEvent.target == inElement) - { - transitions.add(inEvent.propertyName); - } + console.log("+", inEvent.propertyName); + (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) { - if (userMode) + console.log("--done--", userMode); + inElement.setAttribute("style", "transition:none;"); + inElement.clientHeight; + frameRequest = requestAnimationFrame(()=> { - inElement.setAttribute("style", "transition:none;"); - inElement.clientHeight; - frameRequest = requestAnimationFrame(()=>{inElement.setAttribute("style", "")}); - } - inTransition = false; - userDone(userMode); + inElement.setAttribute("style", ""); + inTransition = false; + userDone(userMode); + }); } - } }; - - const getMeasurements =(inClasses:Record)=> - { - inElement.setAttribute("style", `transition: none;`); - const initialClasses = inElement.getAttribute("class")||""; - const output = {} as Record; - Object.entries(inClasses).forEach(([key, value])=> - { - inElement.setAttribute("class", value); - output[key] = { width: inElement.offsetWidth, height: inElement.offsetHeight }; - }); - inElement.removeAttribute("style"); - inElement.setAttribute("class", initialClasses); - return output; - }; inElement.addEventListener("transitionend", end); inElement.addEventListener("transitionrun", run); - return function(inOpen, inMs, inDone) + return function(inState:string, inDone) { cancelAnimationFrame(frameRequest); if(arguments.length) { - userDone = inDone|| ((m)=>{}) as DoneCallback; - userMode = inOpen === true; + if(!library[inState]){ return; } - if((inOpen || !measurements) && !inTransition) + userDone = inDone|| ((m)=>{}) as DoneCallback; + userMode = inState; + + if(!inTransition) { - const keep = inElement.getAttribute("data-class-keep")+" "; - measurements = getMeasurements({ - Open: keep + inElement.getAttribute("data-class-open"), - Shut: keep + inElement.getAttribute("data-class-shut"), - }); + measurements = StyleCalc(inElement, library); + console.log("measurements taken", measurements) } - inElement.style.overflow = "hidden"; - inElement.style.width = inElement.offsetWidth + "px"; - inElement.style.height = inElement.offsetHeight + "px"; - - inTransition = true; - - frameRequest = requestAnimationFrame(()=> + if(measurements) { - const measure = inOpen ? measurements.Open : measurements.Shut; - inElement.style.width = measure.width + "px"; - inElement.style.height = measure.height + "px"; - inElement.className = inElement.getAttribute("data-class-keep") + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`); - - }); + const [classes, width, height] = measurements[inState] as StyleSize; + inElement.style.overflow = "hidden"; + inElement.style.width = inElement.offsetWidth + "px"; + inElement.style.height = inElement.offsetHeight + "px"; + inTransition = true; + console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`) + frameRequest = requestAnimationFrame(()=> + { + inElement.style.width = width + "px"; + inElement.style.height = height + "px"; + inElement.className = classes; + console.log(` to: {${width} ${height}}`) + }); + } } else { @@ -151,4 +158,5 @@ export function Collapser(inElement:HTMLElement, initialState = false) inElement.removeEventListener("transitionend", end); } } as CollapseControls; + } \ No newline at end of file