npm - @jsenv/dom - Versions diffs - 0.6.0 → 0.7.0 - Mend

@jsenv/dom 0.6.0 → 0.7.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 (109) hide show

package/dist/jsenv_dom.js +262 -330
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 -1491
package/src/utils.js +0 -69
package/src/value_effect.js +0 -35

package/src/demos/drag_gesture_element_to_impact_demo.html DELETED Viewed

@@ -1,445 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Drag Gesture Demo - elementToImpact</title>
-    <style>
-      * {
-        box-sizing: border-box;
-      }
-      body {
-        margin: 0;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-        background: #f0f0f0;
-        min-height: 200vh; /* Make document scrollable */
-        min-width: 150vw; /* Make document scrollable horizontally too */
-      }
-      .demo-section {
-        margin: 40px auto;
-        max-width: 900px;
-      }
-      .demo-title {
-        background: white;
-        padding: 15px 20px;
-        border-radius: 8px 8px 0 0;
-        border-bottom: 2px solid #333;
-        margin: 0;
-        font-size: 18px;
-        font-weight: bold;
-        color: #333;
-      }
-      .container {
-        width: 800px;
-        height: 600px;
-        background: white;
-        position: relative;
-        margin: 0 auto;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        border-radius: 4px;
-        border: 20px solid #ddd;
-        /* Remove overflow and overscroll-behavior */
-      }
-      .content {
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(
-          45deg,
-          #f8f8f8 0%,
-          #e8e8e8 50%,
-          #d8d8d8 100%
-        );
-        position: relative;
-      }
-      .drag-handle {
-        width: 60px;
-        height: 40px;
-        background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
-        border: 2px solid #2c5aa0;
-        border-radius: 6px;
-        position: absolute;
-        cursor: grab;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: bold;
-        font-size: 10px;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
-        transition: all 0.2s ease;
-        user-select: none;
-      }
-      .drag-handle:hover {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-        transform: translateY(-1px);
-      }
-      .drag-handle[data-dragging] {
-        cursor: grabbing;
-        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
-        z-index: 1000;
-        transform: scale(1.05);
-      }
-      .target-element {
-        width: 120px;
-        height: 80px;
-        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
-        border: 3px solid #a93226;
-        border-radius: 8px;
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: bold;
-        font-size: 12px;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        transition: all 0.2s ease;
-        user-select: none;
-      }
-      .target-element[data-being-moved] {
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-        z-index: 999;
-        transform: scale(1.02);
-      }
-      .obstacle {
-        background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
-        border: 2px solid #5d6d6e;
-        border-radius: 6px;
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        font-weight: bold;
-        font-size: 11px;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        user-select: none;
-      }
-      .info {
-        max-width: 900px;
-        margin: 0 auto;
-        padding: 20px;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      .info h1 {
-        margin-top: 0;
-        color: #333;
-      }
-      .info ul {
-        line-height: 1.6;
-      }
-      .debug-toggle {
-        margin: 20px auto;
-        text-align: center;
-      }
-      .debug-toggle label {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        color: #333;
-        cursor: pointer;
-        background: white;
-        padding: 10px 15px;
-        border-radius: 4px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        transition: all 0.2s ease;
-      }
-      .debug-toggle label:hover {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-      }
-      .debug-toggle input[type="checkbox"] {
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-      }
-      .position-display {
-        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: 11px;
-        z-index: 10000;
-        line-height: 1.4;
-        min-width: 250px;
-      }
-      .position-display div {
-        margin: 2px 0;
-      }
-      .position-display .label {
-        font-weight: bold;
-        color: #ffeb3b;
-      }
-      .element-legend {
-        background: white;
-        padding: 15px;
-        border-radius: 6px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        margin: 20px auto;
-        max-width: 600px;
-        text-align: center;
-      }
-      .element-legend h4 {
-        margin: 0 0 15px 0;
-        font-size: 14px;
-        color: #333;
-      }
-      .legend-item {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        margin: 0 15px 10px 0;
-        font-size: 12px;
-      }
-      .legend-color {
-        width: 30px;
-        height: 20px;
-        border-radius: 4px;
-        border: 2px solid #333;
-      }
-      .legend-handle {
-        background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
-      }
-      .legend-target {
-        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
-      }
-      .legend-obstacle {
-        background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="info">
-      <h1>Drag Gesture Demo - elementToImpact</h1>
-      <p>
-        This demo demonstrates the <code>elementToImpact</code> feature where
-        you can drag from one element but actually move a different element:
-      </p>
-      <ul>
-        <li>
-          <strong>Blue handles:</strong> The elements you grab and drag from
-        </li>
-        <li>
-          <strong>Red targets:</strong> The elements that actually move when you
-          drag the handles
-        </li>
-        <li>
-          <strong>Gray obstacles:</strong> Static elements that provide
-          collision constraints
-        </li>
-        <li>
-          <strong>Key concept:</strong> Obstacles and frontiers are calculated
-          based on the target element's position, not the handle
-        </li>
-        <li>
-          <strong>Try it:</strong> Drag the blue handles and watch how the red
-          targets move while respecting obstacles
-        </li>
-      </ul>
-    </div>
-    <div class="debug-toggle">
-      <label>
-        <input type="checkbox" id="debugMarkersCheckbox" checked />
-        Show Debug Markers
-      </label>
-    </div>
-    <div class="element-legend">
-      <h4>Element Types</h4>
-      <div class="legend-item">
-        <div class="legend-color legend-handle"></div>
-        <span>Drag Handle (grab from here)</span>
-      </div>
-      <div class="legend-item">
-        <div class="legend-color legend-target"></div>
-        <span>Target Element (moves)</span>
-      </div>
-      <div class="legend-item">
-        <div class="legend-color legend-obstacle"></div>
-        <span>Obstacle (collision)</span>
-      </div>
-    </div>
-    <!-- Demo: Basic Handle → Target -->
-    <div class="demo-section">
-      <h2 class="demo-title">
-        Demo: Basic Handle → Target (drag blue handle to move red target)
-      </h2>
-      <div class="container" id="demoContainer">
-        <div class="content">
-          <!-- Drag handle positioned separately from target -->
-          <div class="drag-handle" id="handle1" style="left: 50px; top: 50px">
-            HANDLE
-          </div>
-          <!-- Target element that actually moves -->
-          <div
-            class="target-element"
-            id="target1"
-            style="left: 200px; top: 100px"
-          >
-            TARGET
-          </div>
-          <!-- Obstacles for collision detection -->
-          <div
-            class="obstacle"
-            data-drag-obstacle="demo"
-            style="left: 350px; top: 120px; width: 80px; height: 60px"
-          >
-            OBSTACLE 1
-          </div>
-          <div
-            class="obstacle"
-            data-drag-obstacle="demo"
-            style="left: 500px; top: 200px; width: 100px; height: 80px"
-          >
-            OBSTACLE 2
-          </div>
-          <div
-            class="obstacle"
-            data-drag-obstacle="demo"
-            style="left: 150px; top: 300px; width: 120px; height: 60px"
-          >
-            OBSTACLE 3
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Position Display -->
-    <div class="position-display" id="positionDisplay">
-      <div class="label">Drag Position Info</div>
-      <div id="demo1Info">Demo: Not dragging</div>
-      <div id="elementInfo">Elements: Hover to see info</div>
-    </div>
-    <script type="module">
-      import { createDragToMoveGestureController } from "@jsenv/dom";
-      const demo1Info = document.getElementById("demo1Info");
-      const elementInfo = document.getElementById("elementInfo");
-      // Demo 1: Basic Handle → Target
-      const handle1 = document.getElementById("handle1");
-      const target1 = document.getElementById("target1");
-      handle1.addEventListener("mousedown", (event) => {
-        console.log("Demo 1 - Handle drag started");
-        createDragToMoveGestureController({
-          name: "demo",
-          backdrop: false,
-          obstacleAttributeName: "data-drag-obstacle",
-          onGrab: (gestureInfo) => {
-            console.log("Demo 1 - Grab started", gestureInfo);
-            handle1.setAttribute("data-dragging", "");
-            target1.setAttribute("data-being-moved", "");
-            updateDemo1Info(gestureInfo, "Grabbed");
-          },
-          onDragStart: (gestureInfo) => {
-            console.log("Demo 1 - Drag started", gestureInfo);
-            updateDemo1Info(gestureInfo, "Drag Start");
-          },
-          onDrag: (gestureInfo, phase) => {
-            updateDemo1Info(gestureInfo, `Dragging (${phase})`);
-          },
-          onRelease: (gestureInfo) => {
-            console.log("Demo 1 - Drag released", gestureInfo);
-            handle1.removeAttribute("data-dragging");
-            target1.removeAttribute("data-being-moved");
-            updateDemo1Info(gestureInfo, "Released");
-          },
-        }).grabViaMouse(event, {
-          element: handle1,
-          elementToImpact: target1, // The key feature: drag handle1 but move target1
-        });
-      });
-      function updateDemo1Info(gestureInfo, status) {
-        const handleRect = handle1.getBoundingClientRect();
-        const targetRect = target1.getBoundingClientRect();
-        const handleX = handleRect.left + window.scrollX;
-        const targetX = targetRect.left + window.scrollX;
-        const targetY = targetRect.top + window.scrollY;
-        demo1Info.innerHTML = `Demo: ${status} | Handle: ${Math.round(handleX)}px | Target: ${Math.round(targetX)}, ${Math.round(targetY)}px`;
-      }
-      // Add hover effects to show element information
-      [handle1, target1].forEach((element) => {
-        element.addEventListener("mouseenter", () => {
-          const type = element.classList.contains("drag-handle")
-            ? "Handle"
-            : "Target";
-          const id = element.id;
-          elementInfo.textContent = `${type}: ${id} (${element.textContent})`;
-        });
-        element.addEventListener("mouseleave", () => {
-          elementInfo.textContent = "Elements: Hover to see info";
-        });
-      });
-      // Initial position updates
-      function updatePositions() {
-        if (!handle1.hasAttribute("data-dragging")) {
-          const handleRect = handle1.getBoundingClientRect();
-          const targetRect = target1.getBoundingClientRect();
-          const handleX = handleRect.left + window.scrollX;
-          const targetX = targetRect.left + window.scrollX;
-          const targetY = targetRect.top + window.scrollY;
-          demo1Info.innerHTML = `Demo: Ready | Handle: ${Math.round(handleX)}px | Target: ${Math.round(targetX)}, ${Math.round(targetY)}px`;
-        }
-      }
-      // Update positions on scroll
-      document.addEventListener("scroll", updatePositions);
-      updatePositions();
-    </script>
-  </body>
-</html>