SethTrowbridge/eno
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

resize if interrupted

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-28 10:53:56 -04:00
parent 31c1455fcb
commit 505545ff55
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
example/tree-menu.tsx
View File

@ -67,7 +67,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
const initialClass = inElement.getAttribute("class")||""; const initialClass = inElement.getAttribute("class")||"";
const output = {} as StyleCalc; const output = {} as StyleCalc;
inElement.setAttribute("style", `transition: none; overflow: hidden;`); inElement.setAttribute("style", `transition: none;`);
Object.entries(inClasses).forEach(([key, value])=> Object.entries(inClasses).forEach(([key, value])=>
{ {
inElement.setAttribute("class", value); inElement.setAttribute("class", value);
@ -88,31 +88,42 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
let userMode = initialState; let userMode = initialState;
let frameRequest = 0; let frameRequest = 0;
let inTransition = false; let inTransition = false;
let interrupted = false;
let measurements:StyleCalc; let measurements:StyleCalc;
const transitions:Set<string> = new Set(); const transitions:Set<string> = new Set();
const run = (inEvent:TransitionEvent)=> const run = (inEvent:TransitionEvent)=>
{ {
console.log("+", inEvent.propertyName); //console.log("+", inEvent.propertyName);
(inEvent.target == inElement) && transitions.add(inEvent.propertyName); (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
}; };
const end = (inEvent:TransitionEvent)=> const end = (inEvent:TransitionEvent)=>
{ {
console.log("-", inEvent.propertyName); //console.log("-", inEvent.propertyName);
if (inEvent.target == inElement) if (inEvent.target == inElement)
{ {
transitions.delete(inEvent.propertyName); transitions.delete(inEvent.propertyName);
if(transitions.size === 0) if(transitions.size === 0)
{ {
console.log("--done--", userMode); console.log("--done--", userMode, "interrupted?", interrupted);
inElement.setAttribute("style", "transition:none;");
inElement.clientHeight; measurements = StyleCalc(inElement, library);
frameRequest = requestAnimationFrame(()=> const [, w, h] = measurements[userMode];
if(inElement.offsetHeight != h || inElement.offsetWidth != w)
{ {
inElement.setAttribute("style", ""); console.log(inElement.offsetHeight, "VERSUS", h);
inTransition = false; anim(userMode, userDone);
userDone(userMode); }
}); else
{
frameRequest = requestAnimationFrame(()=>
{
inElement.setAttribute("style", "");
inTransition = false;
userDone(userMode);
});
}
} }
} }
}; };
@ -120,19 +131,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
const child =(e:CustomEvent)=> const child =(e:CustomEvent)=>
{ {
if(e.target == inElement || !inTransition){ return; } if(e.target == inElement || !inTransition){ return; }
console.log("resize", e.detail); interrupted = true;
const oldWidth = inElement.offsetWidth; //console.log("resize", e.detail);
const oldHeight = inElement.offsetHeight;
//inElement.style.overflow = "hidden";
inElement.style.width = oldWidth + e.detail[0] + "px";
inElement.style.height = oldHeight + e.detail[1] + "px";
} }
inElement.addEventListener("transitionend", end); inElement.addEventListener("transitionend", end);
inElement.addEventListener("transitionrun", run); inElement.addEventListener("transitionrun", run);
inElement.addEventListener("childresize", child); inElement.addEventListener("childresize", child);
return function(inState:string, inDone) const anim = function(inState:string, inDone)
{ {
cancelAnimationFrame(frameRequest); cancelAnimationFrame(frameRequest);
@ -146,7 +153,7 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
if(!inTransition) if(!inTransition)
{ {
measurements = StyleCalc(inElement, library); measurements = StyleCalc(inElement, library);
console.log("measurements taken", measurements) //console.log("measurements taken", measurements)
} }
if(measurements) if(measurements)
@ -158,16 +165,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
inElement.style.width = oldWidth + "px"; inElement.style.width = oldWidth + "px";
inElement.style.height = oldHeight + "px"; inElement.style.height = oldHeight + "px";
inTransition = true; inTransition = true;
console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`); //console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`);
//inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]}))
inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]}))
frameRequest = requestAnimationFrame(()=> frameRequest = requestAnimationFrame(()=>
{ {
inElement.style.height = height + "px"; inElement.style.height = height + "px";
inElement.style.width = width + "px"; inElement.style.width = width + "px";
inElement.className = classes; inElement.className = classes;
console.log(` to: {${width} ${height}}`) //console.log(` to: {${width} ${height}}`)
}); });
} }
} }
@ -178,4 +184,5 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
} }
} as CollapseControls; } as CollapseControls;
} return anim;
}