npm - @jsenv/dom - Versions diffs - 0.1.0 - Mend

@jsenv/dom 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/jsenv_dom.js +9653 -0
package/index.js +101 -0
package/package.json +47 -0
package/src/attr/add_attribute_effect.js +93 -0
package/src/attr/attributes.js +32 -0
package/src/demos/3_columns_resize_demo.html +84 -0
package/src/demos/3_rows_resize_demo.html +89 -0
package/src/demos/aside_and_main_demo.html +93 -0
package/src/demos/coordinates_demo.html +450 -0
package/src/demos/document_autoscroll_demo.html +517 -0
package/src/demos/drag_gesture_constraints_demo.html +701 -0
package/src/demos/drag_gesture_demo.html +1047 -0
package/src/demos/drag_gesture_element_to_impact_demo.html +445 -0
package/src/demos/drag_reference_element_demo.html +480 -0
package/src/demos/flex_details_set_demo.html +302 -0
package/src/demos/flex_details_set_demo_2.html +315 -0
package/src/demos/visible_rect_demo.html +525 -0
package/src/interaction/drag/constraint_feedback_line.js +92 -0
package/src/interaction/drag/drag_constraint.js +659 -0
package/src/interaction/drag/drag_debug_markers.js +635 -0
package/src/interaction/drag/drag_element_positioner.js +382 -0
package/src/interaction/drag/drag_gesture.js +566 -0
package/src/interaction/drag/drag_resize_demo.html +571 -0
package/src/interaction/drag/drag_to_move.js +301 -0
package/src/interaction/drag/drag_to_resize_gesture.js +68 -0
package/src/interaction/drag/drop_target_detection.js +148 -0
package/src/interaction/drag/sticky_frontiers.js +160 -0
package/src/interaction/element_log.js +8 -0
package/src/interaction/event_marker.js +14 -0
package/src/interaction/focus/active_element.js +33 -0
package/src/interaction/focus/arrow_navigation.js +599 -0
package/src/interaction/focus/element_is_focusable.js +57 -0
package/src/interaction/focus/element_is_visible.js +36 -0
package/src/interaction/focus/find_focusable.js +21 -0
package/src/interaction/focus/focus_group.js +91 -0
package/src/interaction/focus/focus_group_registry.js +12 -0
package/src/interaction/focus/focus_nav.js +12 -0
package/src/interaction/focus/focus_nav_event_marker.js +14 -0
package/src/interaction/focus/focus_trap.js +105 -0
package/src/interaction/focus/tab_navigation.js +128 -0
package/src/interaction/focus/tests/focus_group_skip_tab_test.html +206 -0
package/src/interaction/focus/tests/tree_focus_test.html +304 -0
package/src/interaction/focus/tests/tree_focus_test.jsx +261 -0
package/src/interaction/focus/tests/tree_focus_test_preact.html +13 -0
package/src/interaction/isolate_interactions.js +161 -0
package/src/interaction/keyboard.js +26 -0
package/src/interaction/scroll/capture_scroll.js +47 -0
package/src/interaction/scroll/is_scrollable.js +159 -0
package/src/interaction/scroll/scroll_container.js +110 -0
package/src/interaction/scroll/scroll_trap.js +44 -0
package/src/interaction/scroll/scrollbar_size.js +20 -0
package/src/interaction/scroll/wheel_through.js +138 -0
package/src/iterable_weak_set.js +66 -0
package/src/position/dom_coords.js +340 -0
package/src/position/offset_parent.js +15 -0
package/src/position/position_fixed.js +15 -0
package/src/position/position_sticky.js +213 -0
package/src/position/sticky_rect.js +79 -0
package/src/position/visible_rect.js +482 -0
package/src/pub_sub.js +28 -0
package/src/size/can_take_size.js +11 -0
package/src/size/details_content_full_height.js +63 -0
package/src/size/flex_details_set.js +974 -0
package/src/size/get_available_height.js +22 -0
package/src/size/get_available_width.js +22 -0
package/src/size/get_border_sizes.js +14 -0
package/src/size/get_height.js +4 -0
package/src/size/get_inner_height.js +15 -0
package/src/size/get_inner_width.js +15 -0
package/src/size/get_margin_sizes.js +10 -0
package/src/size/get_max_height.js +57 -0
package/src/size/get_max_width.js +47 -0
package/src/size/get_min_height.js +14 -0
package/src/size/get_min_width.js +14 -0
package/src/size/get_padding_sizes.js +10 -0
package/src/size/get_width.js +4 -0
package/src/size/hooks/use_available_height.js +27 -0
package/src/size/hooks/use_available_width.js +27 -0
package/src/size/hooks/use_max_height.js +10 -0
package/src/size/hooks/use_max_width.js +10 -0
package/src/size/hooks/use_resize_status.js +62 -0
package/src/size/resize.js +695 -0
package/src/size/resolve_css_size.js +32 -0
package/src/style/dom_styles.js +97 -0
package/src/style/style_composition.js +78 -0
package/src/style/style_controller.js +345 -0
package/src/style/style_parsing.js +317 -0
package/src/transition/demos/animation_resumption_test.xhtml +500 -0
package/src/transition/demos/height_toggle_test.xhtml +515 -0
package/src/transition/dom_transition.js +254 -0
package/src/transition/easing.js +48 -0
package/src/transition/group_transition.js +261 -0
package/src/transition/transform_style_parser.js +32 -0
package/src/transition/transition_playback.js +366 -0
package/src/transition/transition_timeline.js +79 -0
package/src/traversal.js +247 -0
package/src/ui_transition/demos/content_states_transition_demo.html +628 -0
package/src/ui_transition/demos/smooth_height_transition_demo.html +149 -0
package/src/ui_transition/demos/transition_testing.html +354 -0
package/src/ui_transition/ui_transition.js +1492 -0
package/src/utils.js +69 -0

package/src/demos/document_autoscroll_demo.html ADDED Viewed

@@ -0,0 +1,517 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document Auto-Scroll Demo</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 20px;
+        font-family: Arial, sans-serif;
+        background: #f0f0f0;
+        min-height: 300vh; /* Make page tall enough to scroll */
+        min-width: 200vw;
+      }
+      .demo-header {
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      .demo-title {
+        margin: 0 0 10px 0;
+        font-size: 24px;
+        color: #333;
+      }
+      .demo-description {
+        margin: 0;
+        color: #666;
+        line-height: 1.5;
+      }
+      .draggable-element {
+        width: 120px;
+        height: 80px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: 10px solid #333;
+        /* border-radius: 12px; */
+        cursor: grab;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: bold;
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        transition: box-shadow 0.2s ease;
+        z-index: 1000;
+        user-select: none;
+      }
+      .draggable-element:hover {
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+      }
+      .draggable-element[data-dragging] {
+        cursor: grabbing;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+      }
+      .content-section {
+        background: white;
+        margin: 40px 0;
+        padding: 40px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        text-align: center;
+      }
+      .content-section:nth-child(even) {
+        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+        color: #1976d2;
+      }
+      .content-section:nth-child(odd) {
+        background: linear-gradient(135deg, #f3e5f5, #ce93d8);
+        color: #7b1fa2;
+      }
+      .scroll-indicator {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 10px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 12px;
+        z-index: 2000;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="demo-header">
+      <h1 class="demo-title">Document Auto-Scroll Demo</h1>
+      <p class="demo-description">
+        This demo tests document auto-scrolling behavior when dragging an
+        element.
+        <br /><strong>Instructions:</strong> Drag the purple element near the
+        top or bottom edges of the viewport to trigger auto-scrolling. <br />The
+        document itself is the scrollable parent, so scrolling should work
+        throughout the entire page.
+      </p>
+    </div>
+    <div
+      data-draggable
+      class="draggable-element"
+      style="position: absolute; left: 300px"
+    >
+      Drag Me
+    </div>
+    <div style="position: relative; inset: 0; left: 350px; top: 100px">
+      <div class="draggable-element" data-draggable style="position: absolute">
+        Drag Me (custom positioned parent)
+      </div>
+    </div>
+    <!-- Programmatic Controls -->
+    <div
+      style="
+        background: white;
+        padding: 15px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        max-width: 300px;
+      "
+    >
+      <h3 style="margin: 0 0 15px 0; font-size: 16px; color: #333">
+        Programmatic Controls
+      </h3>
+      <div style="display: flex; flex-direction: column; gap: 8px">
+        <button
+          id="grabBtn"
+          style="
+            padding: 10px 15px;
+            background: #4caf50;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: bold;
+          "
+        >
+          Grab Element
+        </button>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px">
+          <button
+            id="dragLeftBtn"
+            disabled
+            style="
+              padding: 8px 12px;
+              background: #9c27b0;
+              color: white;
+              border: none;
+              border-radius: 4px;
+              cursor: pointer;
+              font-size: 12px;
+              opacity: 0.5;
+            "
+          >
+            ← Left
+          </button>
+          <button
+            id="dragRightBtn"
+            disabled
+            style="
+              padding: 8px 12px;
+              background: #2196f3;
+              color: white;
+              border: none;
+              border-radius: 4px;
+              cursor: pointer;
+              font-size: 12px;
+              opacity: 0.5;
+            "
+          >
+            Right →
+          </button>
+          <button
+            id="dragUpBtn"
+            disabled
+            style="
+              padding: 8px 12px;
+              background: #607d8b;
+              color: white;
+              border: none;
+              border-radius: 4px;
+              cursor: pointer;
+              font-size: 12px;
+              opacity: 0.5;
+            "
+          >
+            ↑ Up
+          </button>
+          <button
+            id="dragDownBtn"
+            disabled
+            style="
+              padding: 8px 12px;
+              background: #ff9800;
+              color: white;
+              border: none;
+              border-radius: 4px;
+              cursor: pointer;
+              font-size: 12px;
+              opacity: 0.5;
+            "
+          >
+            ↓ Down
+          </button>
+        </div>
+        <button
+          id="releaseBtn"
+          disabled
+          style="
+            padding: 10px 15px;
+            background: #f44336;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: bold;
+            opacity: 0.5;
+          "
+        >
+          Release Element
+        </button>
+      </div>
+      <div
+        id="status"
+        style="
+          margin-top: 15px;
+          padding: 10px;
+          background: #f9f9f9;
+          border-radius: 4px;
+          font-family: monospace;
+          font-size: 12px;
+          color: #666;
+          border-left: 4px solid #2196f3;
+        "
+      >
+        Ready - Click "Grab Element" to start programmatic control
+      </div>
+    </div>
+    <div
+      data-drag-obstacle
+      style="
+        position: absolute;
+        left: 100px;
+        top: 450px;
+        background: red;
+        width: 50px;
+        height: 50px;
+      "
+    >
+      absolute
+    </div>
+    <div
+      data-drag-obstacle
+      style="
+        position: fixed;
+        left: 280px;
+        top: 100px;
+        background: violet;
+        width: 50px;
+        height: 50px;
+      "
+    >
+      fixed
+    </div>
+    <div
+      data-drag-obstacle
+      style="
+        position: sticky;
+        left: 280px;
+        top: 300px;
+        background: green;
+        width: 50px;
+        height: 50px;
+      "
+    >
+      sticky
+    </div>
+    <div class="scroll-indicator" id="scrollIndicator">Scroll: 0px</div>
+    <div class="content-section">
+      <h2>Section 1</h2>
+      <p>
+        Drag the element above towards the top edge of your viewport to test
+        upward auto-scrolling.
+      </p>
+    </div>
+    <div class="content-section">
+      <h2>Section 2</h2>
+      <p>
+        This is some content to make the page scrollable. Keep dragging down to
+        test auto-scroll behavior.
+      </p>
+    </div>
+    <div class="content-section">
+      <h2>Section 3</h2>
+      <p>
+        More content for testing. Drag the element near the bottom edge to
+        trigger downward scrolling.
+      </p>
+    </div>
+    <div class="content-section">
+      <h2>Section 4</h2>
+      <p>
+        Continue testing the auto-scroll behavior as you drag near viewport
+        edges.
+      </p>
+    </div>
+    <div class="content-section">
+      <h2>Section 5</h2>
+      <p>
+        Final section. The auto-scroll should work smoothly in both directions.
+      </p>
+    </div>
+    <script type="module">
+      import { createDragToMoveGestureController } from "@jsenv/dom";
+      const draggableElements = document.querySelectorAll("[data-draggable]");
+      const dragElement = draggableElements[0];
+      for (const draggable of draggableElements) {
+        draggable.onpointerdown = (e) => {
+          // Set up the manual drag behavior
+          manualDragGestureController.grabViaPointer(e, {
+            element: draggable,
+            onStart: () => {
+              draggable.setAttribute("data-dragging", "");
+              updateStatus(
+                "Manual drag started - document auto-scroll enabled",
+              );
+            },
+            onEnd: () => {
+              draggable.removeAttribute("data-dragging");
+              updateStatus("Manual drag ended");
+            },
+          });
+        };
+      }
+      const scrollIndicator = document.getElementById("scrollIndicator");
+      // Update scroll indicator
+      const updateScrollIndicator = () => {
+        const scrollY = window.scrollY || document.documentElement.scrollTop;
+        scrollIndicator.textContent = `Scroll: ${Math.round(scrollY)}px`;
+      };
+      // Initialize scroll indicator
+      updateScrollIndicator();
+      window.addEventListener("scroll", updateScrollIndicator);
+      // Manual drag gesture (mouse-based)
+      const manualDragGestureController = createDragToMoveGestureController({
+        threshold: 0,
+        areaConstraint: "scroll",
+      });
+      // Programmatic Controls
+      const controls = {
+        grabBtn: document.getElementById("grabBtn"),
+        dragLeftBtn: document.getElementById("dragLeftBtn"),
+        dragRightBtn: document.getElementById("dragRightBtn"),
+        dragUpBtn: document.getElementById("dragUpBtn"),
+        dragDownBtn: document.getElementById("dragDownBtn"),
+        releaseBtn: document.getElementById("releaseBtn"),
+        statusDiv: document.getElementById("status"),
+        dragGesture: null,
+      };
+      function updateStatus(message) {
+        controls.statusDiv.textContent = message;
+        console.log("Document Auto-Scroll Demo:", message);
+      }
+      function updateButtonStates(grabbed = false) {
+        controls.grabBtn.disabled = grabbed;
+        controls.dragLeftBtn.disabled = !grabbed;
+        controls.dragRightBtn.disabled = !grabbed;
+        controls.dragUpBtn.disabled = !grabbed;
+        controls.dragDownBtn.disabled = !grabbed;
+        controls.releaseBtn.disabled = !grabbed;
+        // Update visual disabled state
+        const dragButtons = [
+          controls.dragLeftBtn,
+          controls.dragRightBtn,
+          controls.dragUpBtn,
+          controls.dragDownBtn,
+          controls.releaseBtn,
+        ];
+        dragButtons.forEach((btn) => {
+          btn.style.opacity = grabbed ? "1" : "0.5";
+          btn.style.cursor = grabbed ? "pointer" : "not-allowed";
+        });
+        controls.grabBtn.style.opacity = grabbed ? "0.5" : "1";
+        controls.grabBtn.style.cursor = grabbed ? "not-allowed" : "pointer";
+      }
+      // Grab button
+      controls.grabBtn.addEventListener("click", () => {
+        if (controls.dragGesture) return;
+        const dragOptions = {
+          threshold: 0,
+          backdrop: false,
+          onGrab: (gestureInfo) => {
+            updateStatus("Element grabbed programmatically - ready to drag");
+            console.log("Programmatic grab:", gestureInfo);
+          },
+          onDragStart: (gestureInfo) => {
+            updateStatus("Programmatic drag started with document auto-scroll");
+            dragElement.setAttribute("data-dragging", "");
+            console.log("Programmatic drag start:", gestureInfo);
+          },
+          onDrag: (gestureInfo, phase) => {
+            updateStatus(
+              `Dragging programmatically (${phase}) - auto-scroll active`,
+            );
+            console.log("Programmatic drag:", gestureInfo, phase);
+          },
+          onRelease: (gestureInfo) => {
+            updateStatus("Programmatic drag released");
+            dragElement.removeAttribute("data-dragging");
+            console.log("Programmatic release:", gestureInfo);
+            controls.dragGestureController = null;
+            controls.dragInstance = null;
+            updateButtonStates(false);
+          },
+        };
+        controls.dragGestureController =
+          createDragToMoveGestureController(dragOptions);
+        controls.dragGesture = controls.dragGestureController.grab({
+          element: dragElement,
+        });
+        updateButtonStates(true);
+      });
+      // Drag direction buttons
+      controls.dragLeftBtn.addEventListener("click", () => {
+        if (!controls.dragGesture) return;
+        const currentGestureInfo = controls.dragGesture.gestureInfo;
+        const newX = currentGestureInfo.moveX - 100;
+        updateStatus("Dragging left by 100px - testing document auto-scroll");
+        controls.dragGesture.drag(newX, undefined);
+      });
+      controls.dragRightBtn.addEventListener("click", () => {
+        if (!controls.dragGesture) return;
+        const currentGestureInfo = controls.dragGesture.gestureInfo;
+        const newX = currentGestureInfo.moveX + 100;
+        updateStatus("Dragging right by 100px - testing document auto-scroll");
+        controls.dragGesture.drag(newX, undefined);
+      });
+      controls.dragUpBtn.addEventListener("click", () => {
+        if (!controls.dragGesture) return;
+        const currentGestureInfo = controls.dragGesture.gestureInfo;
+        const newY = currentGestureInfo.moveY - 100;
+        updateStatus("Dragging up by 100px - testing upward auto-scroll");
+        controls.dragGesture.drag(undefined, newY);
+      });
+      controls.dragDownBtn.addEventListener("click", () => {
+        if (!controls.dragGesture) return;
+        const currentGestureInfo = controls.dragGesture.gestureInfo;
+        const newY = currentGestureInfo.moveY + 100;
+        updateStatus("Dragging down by 100px - testing downward auto-scroll");
+        controls.dragGesture.drag(undefined, newY);
+      });
+      // Release button
+      controls.releaseBtn.addEventListener("click", () => {
+        if (!controls.dragGesture) return;
+        updateStatus("Releasing programmatic drag");
+        controls.dragGesture.release();
+      });
+      // Initialize
+      updateButtonStates(false);
+      console.log(
+        "Document auto-scroll demo with programmatic controls initialized",
+      );
+      document.addEventListener("DOMContentLoaded", () => {
+        setTimeout(() => {
+          window.scrollTo(100, 0);
+        }, 200);
+      });
+    </script>
+  </body>
+</html>