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

43
example/tree-menu.tsx
View File

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