routie dev init since i didn't adhere to any proper guidance up until now

2026-04-29 22:27:29 -06:00
commit e1dabb71e2
15301 changed files with 3562618 additions and 0 deletions
@@ -0,0 +1,73 @@
+export default function (expandedParentClass = '', type = 'y') {
+  return {
+    onBeforeEnter(el) {
+      el._parent = el.parentNode;
+      el._initialStyle = {
+        transition: el.style.transition,
+        overflow: el.style.overflow,
+        width: el.style.width,
+        height: el.style.height
+      };
+    },
+    onEnter(el) {
+      const initialStyle = el._initialStyle;
+      if (!initialStyle) return;
+      el.style.setProperty('transition', 'none', 'important');
+      // Hide overflow to account for collapsed margins in the calculated height
+      el.style.overflow = 'hidden';
+      const offsetWidth = `${el.offsetWidth}px`;
+      const offsetHeight = `${el.offsetHeight}px`;
+      if (['x', 'both'].includes(type)) el.style.width = '0';
+      if (['y', 'both'].includes(type)) el.style.height = '0';
+      void el.offsetHeight; // force reflow
+
+      el.style.transition = initialStyle.transition;
+      if (expandedParentClass && el._parent) {
+        el._parent.classList.add(expandedParentClass);
+      }
+      requestAnimationFrame(() => {
+        if (['x', 'both'].includes(type)) el.style.width = offsetWidth;
+        if (['y', 'both'].includes(type)) el.style.height = offsetHeight;
+      });
+    },
+    onAfterEnter: resetStyles,
+    onEnterCancelled: resetStyles,
+    onLeave(el) {
+      el._initialStyle = {
+        transition: '',
+        overflow: el.style.overflow,
+        width: el.style.width,
+        height: el.style.height
+      };
+      el.style.overflow = 'hidden';
+      if (['x', 'both'].includes(type)) el.style.width = `${el.offsetWidth}px`;
+      if (['y', 'both'].includes(type)) el.style.height = `${el.offsetHeight}px`;
+      void el.offsetHeight; // force reflow
+
+      requestAnimationFrame(() => {
+        if (['x', 'both'].includes(type)) el.style.width = '0';
+        if (['y', 'both'].includes(type)) el.style.height = '0';
+      });
+    },
+    onAfterLeave,
+    onLeaveCancelled: onAfterLeave
+  };
+  function onAfterLeave(el) {
+    if (expandedParentClass && el._parent) {
+      el._parent.classList.remove(expandedParentClass);
+    }
+    resetStyles(el);
+  }
+  function resetStyles(el) {
+    if (!el._initialStyle) return;
+    const {
+      width: w,
+      height: h
+    } = el._initialStyle;
+    el.style.overflow = el._initialStyle.overflow;
+    if (w != null && ['x', 'both'].includes(type)) el.style.width = w;
+    if (h != null && ['y', 'both'].includes(type)) el.style.height = h;
+    delete el._initialStyle;
+  }
+}
+//# sourceMappingURL=expand-transition.js.map