@jsenv/dom 0.1.0

package/index.js

@@ -0,0 +1,101 @@
+// state management
+export { createIterableWeakSet } from "./src/iterable_weak_set.js";
+export { createPubSub } from "./src/pub_sub.js";
+
+// style
+export { addWillChange, getStyle, setStyles } from "./src/style/dom_styles.js";
+export { createStyleController } from "./src/style/style_controller.js";
+
+// attributes
+export { addAttributeEffect } from "./src/attr/add_attribute_effect.js";
+export { setAttribute, setAttributes } from "./src/attr/attributes.js";
+
+// traversal
+export {
+  findAfter,
+  findAncestor,
+  findBefore,
+  findDescendant,
+} from "./src/traversal.js";
+
+// interaction/focus
+export {
+  activeElementSignal,
+  addActiveElementEffect,
+  useActiveElement,
+} from "./src/interaction/focus/active_element.js";
+export { elementIsFocusable } from "./src/interaction/focus/element_is_focusable.js";
+export { elementIsVisible } from "./src/interaction/focus/element_is_visible.js";
+export { findFocusable } from "./src/interaction/focus/find_focusable.js";
+export { initFocusGroup } from "./src/interaction/focus/focus_group.js";
+export { preventFocusNavViaKeyboard } from "./src/interaction/focus/focus_nav.js";
+export { preventFocusNav } from "./src/interaction/focus/focus_nav_event_marker.js";
+export { trapFocusInside } from "./src/interaction/focus/focus_trap.js";
+// interaction/keyboard
+export { canInterceptKeys } from "./src/interaction/keyboard.js";
+// interaction/scroll
+export { captureScrollState } from "./src/interaction/scroll/capture_scroll.js";
+export { isScrollable } from "./src/interaction/scroll/is_scrollable.js";
+export {
+  getScrollContainer,
+  getScrollContainerSet,
+  getSelfAndAncestorScrolls,
+} from "./src/interaction/scroll/scroll_container.js";
+export { trapScrollInside } from "./src/interaction/scroll/scroll_trap.js";
+export { allowWheelThrough } from "./src/interaction/scroll/wheel_through.js";
+// interaction/drag
+export { getDragCoordinates } from "./src/interaction/drag/drag_element_positioner.js";
+export {
+  createDragGestureController,
+  dragAfterThreshold,
+} from "./src/interaction/drag/drag_gesture.js";
+export { createDragToMoveGestureController } from "./src/interaction/drag/drag_to_move.js";
+export { startDragToResizeGesture } from "./src/interaction/drag/drag_to_resize_gesture.js";
+export { getDropTargetInfo } from "./src/interaction/drag/drop_target_detection.js";
+
+// position
+export { getScrollRelativeRect } from "./src/position/dom_coords.js";
+export { getPositionedParent } from "./src/position/offset_parent.js";
+export { initPositionSticky } from "./src/position/position_sticky.js";
+export { stickyAsRelativeCoords } from "./src/position/sticky_rect.js";
+export {
+  pickPositionRelativeTo,
+  visibleRectEffect,
+} from "./src/position/visible_rect.js";
+
+// size
+export { initFlexDetailsSet } from "./src/size/flex_details_set.js";
+export { getAvailableHeight } from "./src/size/get_available_height.js";
+export { getAvailableWidth } from "./src/size/get_available_width.js";
+export { getBorderSizes } from "./src/size/get_border_sizes.js";
+export { getHeight } from "./src/size/get_height.js";
+export { getInnerHeight } from "./src/size/get_inner_height.js";
+export { getInnerWidth } from "./src/size/get_inner_width.js";
+export { getMarginSizes } from "./src/size/get_margin_sizes.js";
+export { getMaxHeight } from "./src/size/get_max_height.js";
+export { getMaxWidth } from "./src/size/get_max_width.js";
+export { getMinHeight } from "./src/size/get_min_height.js";
+export { getMinWidth } from "./src/size/get_min_width.js";
+export { getPaddingSizes } from "./src/size/get_padding_sizes.js";
+export { getWidth } from "./src/size/get_width.js";
+export { resolveCSSSize } from "./src/size/resolve_css_size.js";
+// size hooks
+export { useAvailableHeight } from "./src/size/hooks/use_available_height.js";
+export { useAvailableWidth } from "./src/size/hooks/use_available_width.js";
+export { useMaxHeight } from "./src/size/hooks/use_max_height.js";
+export { useMaxWidth } from "./src/size/hooks/use_max_width.js";
+export { useResizeStatus } from "./src/size/hooks/use_resize_status.js";
+
+// transition
+export {
+  createHeightTransition,
+  createOpacityTransition,
+  createTranslateXTransition,
+  createWidthTransition,
+} from "./src/transition/dom_transition.js";
+export { EASING, cubicBezier } from "./src/transition/easing.js";
+export {
+  createTimelineTransition,
+  createTransition,
+} from "./src/transition/transition_playback.js";
+export { initUITransition } from "./src/ui_transition/ui_transition.js";

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@jsenv/dom",
+  "version": "0.1.0",
+  "description": "DOM utilities for writing frontend code",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jsenv/core",
+    "directory": "packages/frontend/dom"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "dmail",
+    "email": "dmaillard06@gmail.com"
+  },
+  "sideEffects": [
+    "./dist/jsenv_dom.js"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "dev:jsenv": "./index.js",
+      "default": "./dist/jsenv_dom.js"
+    },
+    "./details_content_full_height": "./src/size/details_content_full_height.js",
+    "./details_toggle_animation": "./src/details_toggle_animation.js",
+    "./resize": "./src/size/resize.js"
+  },
+  "files": [
+    "/dist/",
+    "/src/",
+    "/index.js"
+  ],
+  "scripts": {
+    "build": "node ./scripts/build.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@jsenv/core": "../../../",
+    "@jsenv/navi": "../navi",
+    "@preact/signals": "^2.3.2",
+    "preact": "^10.27.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/attr/add_attribute_effect.js

@@ -0,0 +1,93 @@
+export const addAttributeEffect = (attributeName, effect) => {
+  const cleanupWeakMap = new WeakMap();
+  const applyEffect = (element) => {
+    const cleanup = effect(element);
+    cleanupWeakMap.set(
+      element,
+      typeof cleanup === "function" ? cleanup : () => {},
+    );
+  };
+
+  const cleanupEffect = (element) => {
+    const cleanup = cleanupWeakMap.get(element);
+    if (cleanup) {
+      cleanup();
+      cleanupWeakMap.delete(element);
+    }
+  };
+
+  const checkElement = (element) => {
+    if (element.hasAttribute(attributeName)) {
+      applyEffect(element);
+    }
+    const elementWithAttributeCollection = element.querySelectorAll(
+      `[${attributeName}]`,
+    );
+    for (const elementWithAttribute of elementWithAttributeCollection) {
+      applyEffect(elementWithAttribute);
+    }
+  };
+
+  checkElement(document.body);
+  const mutationObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "childList") {
+        for (const addedNode of mutation.addedNodes) {
+          if (addedNode.nodeType !== Node.ELEMENT_NODE) {
+            continue;
+          }
+          checkElement(addedNode);
+        }
+
+        for (const removedNode of mutation.removedNodes) {
+          if (removedNode.nodeType !== Node.ELEMENT_NODE) {
+            continue;
+          }
+
+          // Clean up the removed node itself if it had the attribute
+          if (
+            removedNode.hasAttribute &&
+            removedNode.hasAttribute(attributeName)
+          ) {
+            cleanupEffect(removedNode);
+          }
+
+          // Clean up any children of the removed node that had the attribute
+          if (removedNode.querySelectorAll) {
+            const elementsWithAttribute = removedNode.querySelectorAll(
+              `[${attributeName}]`,
+            );
+            for (const element of elementsWithAttribute) {
+              cleanupEffect(element);
+            }
+          }
+        }
+      }
+      if (
+        mutation.type === "attributes" &&
+        mutation.attributeName === attributeName
+      ) {
+        const element = mutation.target;
+        if (element.hasAttribute(attributeName)) {
+          applyEffect(element);
+        } else {
+          cleanupEffect(element);
+        }
+      }
+    }
+  });
+  mutationObserver.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: [attributeName],
+  });
+
+  return () => {
+    mutationObserver.disconnect();
+    for (const cleanup of cleanupWeakMap.values()) {
+      cleanup();
+    }
+    cleanupWeakMap.clear();
+  };
+};

package/src/attr/attributes.js

@@ -0,0 +1,32 @@
+export const setAttribute = (element, name, value) => {
+  if (element.hasAttribute(name)) {
+    const prevValue = element.getAttribute(name);
+    element.setAttribute(name, value);
+    return () => {
+      element.setAttribute(name, prevValue);
+    };
+  }
+  element.setAttribute(name, value);
+  return () => {
+    element.removeAttribute(name);
+  };
+};
+
+const createSetMany = (setter) => {
+  return (element, description) => {
+    const cleanupCallbackSet = new Set();
+    for (const name of Object.keys(description)) {
+      const value = description[name];
+      const restoreStyle = setter(element, name, value);
+      cleanupCallbackSet.add(restoreStyle);
+    }
+    return () => {
+      for (const cleanupCallback of cleanupCallbackSet) {
+        cleanupCallback();
+      }
+      cleanupCallbackSet.clear();
+    };
+  };
+};
+
+export const setAttributes = createSetMany(setAttribute);

package/src/demos/3_columns_resize_demo.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+  <head>
+    <title>3 columns resize x demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+  <body>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      #app {
+        display: flex;
+        flex-direction: row;
+        width: 600px;
+        border: 1px solid black;
+        box-sizing: content-box;
+      }
+
+      [data-resize-handle] {
+        flex-grow: 1;
+        min-width: 50px;
+      }
+    </style>
+
+    <div id="app">
+      <div
+        id="a"
+        data-resize="horizontal"
+        data-resize-handle
+        style="background: blue; height: 100px"
+      ></div>
+      <div
+        id="b"
+        data-resize="horizontal"
+        data-resize-handle
+        style="background: red; height: 200px"
+      ></div>
+      <div
+        id="c"
+        data-resize="horizontal"
+        data-resize-handle
+        style="background: green; height: 100px"
+      ></div>
+    </div>
+
+    <label>
+      width:
+      <input type="number" id="container_width" />
+    </label>
+
+    <script type="module">
+      import "@jsenv/dom/resize";
+
+      const resizeCollection = document.querySelectorAll("[data-resize]");
+      for (const resize of resizeCollection) {
+        const sizeInLocalStorage = localStorage.getItem(`${resize.id}_width`);
+        if (sizeInLocalStorage) {
+          resize.style.width = `${sizeInLocalStorage}px`;
+        }
+        resize.addEventListener("resize", (event) => {
+          console.log("resize event", event.target.id, resize.id);
+          localStorage.setItem(`${resize.id}_width`, event.detail.width);
+        });
+      }
+
+      const input = document.querySelector("input");
+      input.oninput = () => {
+        const width = input.value;
+        document.querySelector("#app").style.width = `${width}px`;
+      };
+      input.value = document
+        .querySelector("#app")
+        .getBoundingClientRect().width;
+    </script>
+  </body>
+</html>

package/src/demos/3_rows_resize_demo.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html>
+  <head>
+    <title>3 rows resize x demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+  <body>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      #app {
+        display: flex;
+        flex-direction: column;
+        height: 600px;
+        border: 1px solid black;
+        box-sizing: content-box;
+        width: 300px;
+        margin-left: 200px;
+        margin-top: 50px;
+      }
+
+      [data-resize-handle] {
+        flex-grow: 1;
+        min-height: 50px;
+      }
+    </style>
+
+    <div id="app">
+      <div
+        id="a"
+        data-resize="vertical"
+        data-resize-handle
+        data-resize-absolute
+        style="background: blue; width: 100px"
+      ></div>
+      <div
+        id="b"
+        data-resize="vertical"
+        data-resize-handle
+        data-resize-absolute
+        style="background: red; width: 200px"
+      ></div>
+      <div
+        id="c"
+        data-resize="vertical"
+        data-resize-handle
+        data-resize-absolute
+        style="background: green; width: 100px"
+      ></div>
+    </div>
+
+    <label>
+      height:
+      <input type="number" id="container_size" />
+    </label>
+
+    <script type="module">
+      import "@jsenv/dom/resize";
+
+      const resizeCollection = document.querySelectorAll("[data-resize]");
+      for (const resize of resizeCollection) {
+        const sizeInLocalStorage = localStorage.getItem(`${resize.id}_height`);
+        if (sizeInLocalStorage) {
+          resize.style.height = `${sizeInLocalStorage}px`;
+        }
+        resize.addEventListener("resize", (event) => {
+          localStorage.setItem(`${resize.id}_height`, event.detail.height);
+        });
+      }
+
+      const input = document.querySelector("input");
+      input.oninput = () => {
+        const size = input.value;
+        document.querySelector("#app").style.height = `${size}px`;
+      };
+      input.value = document
+        .querySelector("#app")
+        .getBoundingClientRect().height;
+    </script>
+  </body>
+</html>

package/src/demos/aside_and_main_demo.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Aside and main demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+  <body>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      #app {
+        display: flex;
+        flex-direction: row;
+      }
+
+      aside {
+        background: #f0f0f0;
+        border-right: 1px solid #ccc;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+        width: 200px;
+        min-width: 100px;
+      }
+
+      main {
+        min-width: 200px;
+        padding-bottom: 0;
+        min-width: 200px; /* Prevents content area from becoming too narrow */
+        box-sizing: border-box;
+        min-height: 100vh; /* Ensures content area is at least viewport height */
+        overflow-x: auto; /* Horizontal scrollbar appears when content is wider than available space */
+        scrollbar-gutter: stable; /* Reserves space for scrollbar to prevent layout shifts */
+        flex: 1;
+      }
+
+      .main_body {
+        width: fit-content;
+        padding: 20px; /* Consistent padding around main content */
+      }
+
+      aside > [data-resize-handle] {
+        position: absolute;
+        z-index: 1; /* Ensures resize handle appears above sidebar content */
+        width: 5px;
+        right: -2.5px; /* Centers the handle on the border */
+        top: 0;
+        bottom: 0;
+        cursor: ew-resize; /* Indicates horizontal resize capability */
+      }
+      aside > [data-resize-handle]:hover,
+      aside[data-resizing] > [data-resize-handle] {
+        background-color: blue;
+        opacity: 0.5;
+      }
+    </style>
+
+    <div id="app">
+      <aside data-resize="horizontal" data-resize-absolute>
+        <div data-resize-handle></div>
+      </aside>
+      <main>
+        <div class="main_body">
+          <h1 title="Explore and manager your database">Database Manager</h1>
+
+          <div style="background: blue; width: 600px; height: 600px"></div>
+        </div>
+      </main>
+    </div>
+
+    <script type="module">
+      import "@jsenv/dom/resize";
+
+      const aside = document.querySelector("aside");
+      const widthInLocalStorage = localStorage.getItem("sidebar_width");
+      if (widthInLocalStorage) {
+        aside.style.width = `${widthInLocalStorage}px`;
+      }
+
+      aside.addEventListener("resizeend", (event) => {
+        localStorage.setItem("sidebar_width", event.detail.width);
+      });
+    </script>
+  </body>
+</html>