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

@jsenv/dom 0.6.1 → 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 +259 -314
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/drag_reference_element_demo.html DELETED Viewed

@@ -1,480 +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 Reference Element Demo</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-        background: #f0f0f0;
-      }
-      .demo-section {
-        margin: 40px auto;
-        max-width: 1000px;
-      }
-      .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;
-      }
-      .demo-container {
-        display: flex;
-        gap: 20px;
-        align-items: flex-start;
-        justify-content: center;
-        background: white;
-        padding: 20px;
-        border-radius: 0 0 8px 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
-      .scroll-container {
-        width: 600px;
-        height: 400px;
-        background: #e8f4fd;
-        overflow: auto;
-        border: 2px solid #2196f3;
-        border-radius: 4px;
-        position: relative;
-      }
-      .scroll-content {
-        width: 500px;
-        height: 400px;
-        background:
-          linear-gradient(
-            90deg,
-            transparent 49px,
-            #ddd 50px,
-            #ddd 51px,
-            transparent 52px
-          ),
-          linear-gradient(
-            0deg,
-            transparent 49px,
-            #ddd 50px,
-            #ddd 51px,
-            transparent 52px
-          );
-        background-size: 50px 50px;
-        position: relative;
-      }
-      .document-area {
-        width: 300px;
-        height: 200px;
-        background: #f8f8f8;
-        border: 2px solid #666;
-        border-radius: 4px;
-        position: relative;
-        overflow: visible;
-      }
-      .reference-element {
-        width: 60px;
-        height: 40px;
-        background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
-        border: 2px solid #e65100;
-        border-radius: 6px;
-        position: absolute;
-        cursor: pointer;
-        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: box-shadow 0.2s ease;
-      }
-      .reference-element:hover {
-        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-      }
-      .element-to-move {
-        width: 80px;
-        height: 60px;
-        background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
-        border: 2px solid #1b5e20;
-        border-radius: 8px;
-        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 4px 8px rgba(0, 0, 0, 0.2);
-        transition: box-shadow 0.2s ease;
-        pointer-events: none; /* Only the reference element should be clickable */
-      }
-      .element-to-move[data-dragging] {
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-        z-index: 1000;
-      }
-      .info {
-        max-width: 1000px;
-        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;
-      }
-      .controls {
-        background: #f9f9f9;
-        padding: 15px;
-        border-radius: 6px;
-        min-width: 280px;
-      }
-      .controls h4 {
-        margin: 0 0 10px 0;
-        font-size: 14px;
-        color: #333;
-      }
-      .controls button {
-        width: 100%;
-        padding: 8px 12px;
-        margin-bottom: 5px;
-        border: none;
-        border-radius: 3px;
-        cursor: pointer;
-        font-size: 12px;
-        font-weight: bold;
-      }
-      .controls button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      .grab-btn {
-        background: #4caf50;
-        color: white;
-      }
-      .drag-btn {
-        background: #2196f3;
-        color: white;
-      }
-      .release-btn {
-        background: #f44336;
-        color: white;
-      }
-      .status {
-        margin-top: 10px;
-        padding: 8px;
-        background: white;
-        border-radius: 3px;
-        font-family: monospace;
-        font-size: 10px;
-        color: #666;
-        border: 1px solid #ddd;
-      }
-      .legend {
-        display: flex;
-        gap: 20px;
-        margin: 15px 0;
-        font-size: 12px;
-      }
-      .legend-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .legend-color {
-        width: 16px;
-        height: 16px;
-        border-radius: 3px;
-        border: 1px solid #333;
-      }
-      .legend-ref {
-        background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
-      }
-      .legend-move {
-        background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="info">
-      <h1>Drag Reference Element Demo</h1>
-      <p>
-        This demo tests drag operations where the
-        <strong>reference element</strong> (what you click/drag) is in a
-        different positioning context from the <strong>element</strong> (what
-        actually moves).
-      </p>
-      <div class="legend">
-        <div class="legend-item">
-          <div class="legend-color legend-ref"></div>
-          <span>Reference Element (click to drag)</span>
-        </div>
-        <div class="legend-item">
-          <div class="legend-color legend-move"></div>
-          <span>Element (moves when dragging reference)</span>
-        </div>
-      </div>
-      <p><strong>Test Scenarios:</strong></p>
-      <ul>
-        <li>
-          <strong>Case 1:</strong> Document scroll container, different positioned
-          parents - Reference and element share the document as scroll container but
-          have different offsetParents
-        </li>
-        <li>
-          <strong>Case 2:</strong> Reference in scroll container, element in document -
-          Reference element in custom scroll container, element positioned relative to document
-        </li>
-      </ul>
-    </div>
-    <!-- Case 1: Document scroll container, different positioned parents -->
-    <div class="demo-section">
-      <h2 class="demo-title">
-        Case 1: Document Scroll Container, Different Positioned Parents
-      </h2>
-      <div class="demo-container">
-        <!-- Reference element in a positioned container -->
-        <div
-          style="
-            position: relative;
-            top: 20px;
-            left: 30px;
-            width: 100px;
-            height: 80px;
-            background: rgba(255, 152, 0, 0.1);
-            border: 1px dashed #ff9800;
-          "
-        >
-          <div
-            class="reference-element"
-            id="case1-ref"
-            style="top: 10px; left: 10px"
-          >
-            REF
-          </div>
-        </div>
-        <!-- Element in a different positioned container -->
-        <div
-          style="
-            position: relative;
-            top: 50px;
-            left: 400px;
-            width: 120px;
-            height: 100px;
-            background: rgba(76, 175, 80, 0.1);
-            border: 1px dashed #4caf50;
-          "
-        >
-          <div
-            class="element-to-move"
-            id="case1-element"
-            style="top: 20px; left: 20px"
-          >
-            ELEMENT
-          </div>
-        </div>
-        <div style="
-          background: #f9f9f9;
-          padding: 15px;
-          border-radius: 6px;
-          min-width: 280px;
-        ">
-          <h4 style="margin: 0 0 10px 0; font-size: 14px; color: #333;">Instructions</h4>
-          <p style="margin: 0; font-size: 12px; color: #666;">
-            Click and drag the orange REF element to move the green ELEMENT.
-            Both elements are in the document (same scroll container) but have different positioned parents.
-          </p>
-        </div>
-      </div>
-    </div>
-            Drag Down
-          </button>
-          <button class="release-btn" id="case1-release" disabled>
-            Release
-          </button>
-          <div class="status" id="case1-status">
-            Ready - Click orange REF to drag green ELEMENT (same scroll,
-            different parents)
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Case 2: Reference in scroll container, element in document -->
-    <div class="demo-section">
-      <h2 class="demo-title">
-        Case 2: Reference in Scroll Container, Element in Document
-      </h2>
-      <div class="demo-container">
-        <!-- Reference element in scroll container -->
-        <div class="scroll-container" id="case2-ref-scroll">
-          <div class="scroll-content">
-            <div
-              style="
-                position: relative;
-                top: 40px;
-                left: 80px;
-                width: 100px;
-                height: 80px;
-                background: rgba(255, 152, 0, 0.1);
-                border: 1px dashed #ff9800;
-              "
-            >
-              <div
-                class="reference-element"
-                id="case2-ref"
-                style="top: 15px; left: 15px"
-              >
-                REF
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Element in document -->
-        <div
-          style="
-            position: relative;
-            top: 60px;
-            left: 120px;
-            width: 120px;
-            height: 100px;
-            background: rgba(76, 175, 80, 0.1);
-            border: 1px dashed #4caf50;
-          "
-        >
-          <div
-            class="element-to-move"
-            id="case2-element"
-            style="top: 25px; left: 25px"
-          >
-            ELEMENT
-          </div>
-        </div>
-        <div style="
-          background: #f9f9f9;
-          padding: 15px;
-          border-radius: 6px;
-          min-width: 280px;
-        ">
-          <h4 style="margin: 0 0 10px 0; font-size: 14px; color: #333;">Instructions</h4>
-          <p style="margin: 0; font-size: 12px; color: #666;">
-            Click and drag the orange REF element (in scroll container) to move the green ELEMENT (in document).
-            Tests cross-coordinate system drag operation.
-          </p>
-        </div>
-      </div>
-    </div>
-    </div>
-    <script type="module">
-      import { createDragToMoveGestureController } from "@jsenv/dom";
-      // Case configurations
-      const cases = [
-        {
-          id: "case1",
-          label: "Doc Diff Parents",
-          referenceElement: document.getElementById("case1-ref"),
-          element: document.getElementById("case1-element"),
-        },
-        {
-          id: "case2",
-          label: "Scroll → Doc",
-          referenceElement: document.getElementById("case2-ref"),
-          element: document.getElementById("case2-element"),
-        },
-      ];
-      function setupCase(caseConfig) {
-        const { label, referenceElement, element } = caseConfig;
-        // Create drag gesture controller
-        const createController = () => {
-          return createDragToMoveGestureController({
-            backdrop: false,
-            onGrab: () => {
-              console.log(`${label} - Grabbed`);
-              element.setAttribute("data-dragging", "");
-            },
-            onDragStart: () => {
-              console.log(`${label} - Drag started`);
-            },
-            onDrag: (gestureInfo, phase) => {
-              console.log(`${label} - Dragging (${phase})`);
-            },
-            onRelease: () => {
-              console.log(`${label} - Released`);
-              element.removeAttribute("data-dragging");
-            },
-          });
-        };
-        // Mouse drag setup
-        referenceElement.addEventListener("mousedown", (event) => {
-          event.preventDefault();
-          const dragGestureController = createController();
-          dragGestureController.grabViaMouse(event, {
-            element,
-            referenceElement,
-          });
-        });
-      }
-      // Setup all cases
-      cases.forEach(setupCase);
-      // Add some initial scroll to containers for testing
-      document.addEventListener("DOMContentLoaded", () => {
-        const case2RefScroll = document.getElementById("case2-ref-scroll");
-        if (case2RefScroll) {
-          case2RefScroll.scrollLeft = 30;
-          case2RefScroll.scrollTop = 20;
-        }
-      });
-    </script>
-  </body>
-</html>