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

working on border measurements

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-22 23:28:30 -04:00
parent cb46a1053d
commit cd71697405
1 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
example/tree-menu.tsx
View File

@ -21,8 +21,8 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string}; type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string};
const Classes:MenuClassStates = const Classes:MenuClassStates =
{ {
Keep: "relative transition-all border", Keep: "relative transition-all border(8 black) top-0",
Open: "h-auto w-auto top-10 duration-700", Open: "h-auto w-full top-0 duration-700",
Shut: "h-0 w-[300px] top-0 duration-300", Shut: "h-0 w-[300px] top-0 duration-300",
Move: "", Move: "",
Exit: "h-auto w-auto top-36 px-4 opacity-0" Exit: "h-auto w-auto top-36 px-4 opacity-0"
@ -83,7 +83,7 @@ export function Collapser(inElement:HTMLElement, initialState = false)
{ {
if (userMode) if (userMode)
{ {
inElement.setAttribute("style", ""); //inElement.setAttribute("style", "");
} }
inTransition = false; inTransition = false;
userDone(userMode); userDone(userMode);
@ -100,7 +100,8 @@ export function Collapser(inElement:HTMLElement, initialState = false)
Object.entries(inClasses).forEach(([key, value])=> Object.entries(inClasses).forEach(([key, value])=>
{ {
inElement.setAttribute("class", value); inElement.setAttribute("class", value);
output[key] = { width: inElement.clientWidth, height: inElement.clientHeight }; console.log(inElement.offsetHeight, inElement.clientHeight);
output[key] = { width: inElement.offsetWidth, height: inElement.offsetHeight };
}); });
inElement.removeAttribute("style"); inElement.removeAttribute("style");
inElement.setAttribute("class", initialClasses); inElement.setAttribute("class", initialClasses);
@ -125,14 +126,11 @@ export function Collapser(inElement:HTMLElement, initialState = false)
Open: inElement.getAttribute("data-class-open")||"", Open: inElement.getAttribute("data-class-open")||"",
Shut: inElement.getAttribute("data-class-shut")||"", Shut: inElement.getAttribute("data-class-shut")||"",
}); });
} console.log(measurements);
else
{
console.log("inbterrupt");
} }
inElement.style.width = inElement.clientWidth + "px"; inElement.style.width = inElement.offsetWidth + "px";
inElement.style.height = inElement.clientHeight + "px"; inElement.style.height = inElement.offsetHeight + "px";
inElement.style.overflow = "hidden"; inElement.style.overflow = "hidden";
inTransition = true; inTransition = true;