npm - @jsenv/dom - Versions diffs - 0.6.1 → 0.7.1 - Mend

@jsenv/dom 0.6.1 → 0.7.1

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 (109) hide show

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

package/src/demos/document_autoscroll_demo.html DELETED Viewed

@@ -1,517 +0,0 @@
-<!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>