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/coordinates_demo.html ADDED Viewed

@@ -0,0 +1,450 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Coordinates Systems Demo</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
+        /* Make document 10,000px wide */
+        width: 10000px;
+        height: 100vh;
+        position: relative;
+      }
+      .info-panel {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+        background: rgba(255, 255, 255, 0.95);
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        font-family: monospace;
+        font-size: 12px;
+        line-height: 1.4;
+        z-index: 1000;
+        max-width: 400px;
+        border-left: 4px solid #2196f3;
+      }
+      .info-section {
+        margin-bottom: 15px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
+      }
+      .info-section:last-child {
+        border-bottom: none;
+        margin-bottom: 0;
+      }
+      .info-title {
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 5px;
+        font-size: 13px;
+      }
+      .info-value {
+        color: #666;
+        margin-left: 10px;
+      }
+      .red-square {
+        width: 100px;
+        height: 100px;
+        background: #f44336;
+        position: absolute;
+        /* Center horizontally in the 10,000px wide document */
+        left: calc(5000px - 50px); /* 5000px (middle) - 50px (half width) */
+        top: 200px;
+        border: 2px solid #d32f2f;
+        border-radius: 4px;
+        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 8px rgba(0, 0, 0, 0.3);
+      }
+      .scrollable-container {
+        width: 200px;
+        height: 200px;
+        /* Make the scrollable content 4000px wide */
+        overflow-x: scroll;
+        overflow-y: hidden;
+        position: absolute;
+        /* Center horizontally in the 10,000px wide document */
+        left: calc(5000px - 100px); /* 5000px (middle) - 100px (half width) */
+        top: 400px;
+        background: white;
+        border: 3px solid #333;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      }
+      .scrollable-content {
+        width: 1000px;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          #e3f2fd,
+          #bbdefb,
+          #90caf9,
+          #64b5f6,
+          #42a5f5
+        );
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+      .blue-square {
+        width: 100px;
+        height: 100px;
+        background: #2196f3;
+        position: absolute;
+        /* Center horizontally in the 4000px wide scrollable content */
+        left: 550px; /* 2000px (middle) - 50px (half width) */
+        border: 2px solid #1976d2;
+        border-radius: 4px;
+        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 8px rgba(0, 0, 0, 0.3);
+      }
+      .scroll-indicators {
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 15px;
+        border-radius: 8px;
+        font-family: monospace;
+        font-size: 11px;
+        z-index: 1000;
+        line-height: 1.4;
+      }
+      .coordinate-info {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        background: rgba(255, 255, 255, 0.95);
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        font-family: monospace;
+        font-size: 12px;
+        line-height: 1.4;
+        z-index: 1000;
+        max-width: 350px;
+        border-left: 4px solid #ff9800;
+      }
+      .setup-instructions {
+        position: fixed;
+        bottom: 10px;
+        right: 10px;
+        background: rgba(76, 175, 80, 0.9);
+        color: white;
+        padding: 15px;
+        border-radius: 8px;
+        font-size: 12px;
+        z-index: 1000;
+        max-width: 250px;
+        text-align: center;
+      }
+      .auto-setup-btn {
+        background: #fff;
+        color: #4caf50;
+        border: none;
+        padding: 8px 15px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-weight: bold;
+        margin-top: 10px;
+        font-size: 11px;
+      }
+      .auto-setup-btn:hover {
+        background: #f0f0f0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="info-panel" id="infoPanel">
+      <div class="info-section">
+        <div class="info-title">🔴 Red Square Coordinates</div>
+        <div class="info-value">
+          getBoundingClientRect().left: <span id="redLeft">-</span>px
+        </div>
+        <div class="info-value">
+          offsetLeft: <span id="redOffsetLeft">-</span>px
+        </div>
+        <div class="info-value">
+          Absolute position: <span id="redAbsolute">-</span>
+        </div>
+      </div>
+      <div class="info-section">
+        <div class="info-title">🔵 Blue Square Coordinates</div>
+        <div class="info-value">
+          getBoundingClientRect().left: <span id="blueLeft">-</span>px
+        </div>
+        <div class="info-value">
+          offsetLeft: <span id="blueOffsetLeft">-</span>px
+        </div>
+        <div class="info-value">
+          Relative to container: <span id="blueRelative">-</span>
+        </div>
+      </div>
+      <div class="info-section">
+        <div class="info-title">📦 Scrollable Container</div>
+        <div class="info-value">
+          getBoundingClientRect().left: <span id="containerLeft">-</span>px
+        </div>
+        <div class="info-value">
+          scrollLeft: <span id="containerScrollLeft">-</span>px
+        </div>
+        <div class="info-value">
+          scrollWidth: <span id="containerScrollWidth">-</span>px
+        </div>
+        <div class="info-value">
+          clientWidth: <span id="containerClientWidth">-</span>px
+        </div>
+      </div>
+    </div>
+    <div class="coordinate-info" id="coordinateInfo">
+      <div class="info-section">
+        <div class="info-title">🖼️ Viewport Info</div>
+        <div class="info-value">
+          scrollWidth: <span id="docScrollWidth">-</span>px
+        </div>
+        <div class="info-value">
+          scrollLeft: <span id="docScrollLeft">-</span>px
+        </div>
+        <div class="info-value">
+          Width: <span id="docOffsetWidth">-</span>px
+        </div>
+        <div class="info-value">
+          Available width:
+          <span id="docClientWidth">-</span>px
+        </div>
+      </div>
+      <div class="info-section">
+        <div class="info-title">🎯 Mouse Position</div>
+        <div class="info-value">
+          clientX: <span id="mouseClientX">-</span>px
+        </div>
+        <div class="info-value">pageX: <span id="mousePageX">-</span>px</div>
+        <div class="info-value">
+          screenX: <span id="mouseScreenX">-</span>px
+        </div>
+      </div>
+    </div>
+    <div class="scroll-indicators" id="scrollIndicators" style="opacity: 0">
+      <div><strong>Scroll Status:</strong></div>
+      <div>Document: <span id="docScrollStatus">Not centered</span></div>
+      <div>Container: <span id="containerScrollStatus">Not centered</span></div>
+      <div><strong>Target Positions:</strong></div>
+      <div>
+        Doc center: 5000px - 50vw = <span id="docTargetScroll">-</span>px
+      </div>
+      <div>
+        Container center: 2000px - 100px =
+        <span id="containerTargetScroll">1900</span>px
+      </div>
+    </div>
+    <div class="setup-instructions">
+      <div><strong>Setup Instructions:</strong></div>
+      <div>1. Scroll document to middle</div>
+      <div>2. Scroll blue container to middle</div>
+      <div>3. Observe coordinate changes</div>
+      <button class="auto-setup-btn" onclick="autoSetup()">Auto Setup</button>
+    </div>
+    <div class="red-square" id="redSquare">RED</div>
+    <div class="scrollable-container" id="scrollableContainer">
+      <div class="scrollable-content">
+        <div class="blue-square" id="blueSquare">BLUE</div>
+      </div>
+    </div>
+    <script>
+      const elements = {
+        redSquare: document.getElementById("redSquare"),
+        blueSquare: document.getElementById("blueSquare"),
+        scrollableContainer: document.getElementById("scrollableContainer"),
+        // Red square info
+        redLeft: document.getElementById("redLeft"),
+        redOffsetLeft: document.getElementById("redOffsetLeft"),
+        redAbsolute: document.getElementById("redAbsolute"),
+        // Blue square info
+        blueLeft: document.getElementById("blueLeft"),
+        blueOffsetLeft: document.getElementById("blueOffsetLeft"),
+        blueRelative: document.getElementById("blueRelative"),
+        // Container info
+        containerLeft: document.getElementById("containerLeft"),
+        containerScrollLeft: document.getElementById("containerScrollLeft"),
+        containerScrollWidth: document.getElementById("containerScrollWidth"),
+        containerClientWidth: document.getElementById("containerClientWidth"),
+        // Document info
+        docScrollLeft: document.getElementById("docScrollLeft"),
+        docScrollWidth: document.getElementById("docScrollWidth"),
+        docClientWidth: document.getElementById("docClientWidth"),
+        bodyWidth: document.getElementById("bodyWidth"),
+        // Viewport info
+        offsetWidth: document.getElementById("docOffsetWidth"),
+        // Mouse info
+        mouseClientX: document.getElementById("mouseClientX"),
+        mousePageX: document.getElementById("mousePageX"),
+        mouseScreenX: document.getElementById("mouseScreenX"),
+        // Status indicators
+        docScrollStatus: document.getElementById("docScrollStatus"),
+        containerScrollStatus: document.getElementById("containerScrollStatus"),
+        docTargetScroll: document.getElementById("docTargetScroll"),
+      };
+      function updateCoordinateInfo() {
+        // Red square coordinates
+        const redRect = elements.redSquare.getBoundingClientRect();
+        elements.redLeft.textContent = Math.round(redRect.left);
+        elements.redOffsetLeft.textContent = elements.redSquare.offsetLeft;
+        elements.redAbsolute.textContent = `left: ${elements.redSquare.style.left}`;
+        // Blue square coordinates
+        const blueRect = elements.blueSquare.getBoundingClientRect();
+        elements.blueLeft.textContent = Math.round(blueRect.left);
+        elements.blueOffsetLeft.textContent = elements.blueSquare.offsetLeft;
+        elements.blueRelative.textContent = `left: ${elements.blueSquare.style.left}`;
+        // Container coordinates
+        const containerRect =
+          elements.scrollableContainer.getBoundingClientRect();
+        elements.containerLeft.textContent = Math.round(containerRect.left);
+        elements.containerScrollLeft.textContent =
+          elements.scrollableContainer.scrollLeft;
+        elements.containerScrollWidth.textContent =
+          elements.scrollableContainer.scrollWidth;
+        elements.containerClientWidth.textContent =
+          elements.scrollableContainer.clientWidth;
+        // Document coordinates
+        const docScrollLeft = document.documentElement.scrollLeft;
+        elements.docScrollLeft.textContent = Math.round(docScrollLeft);
+        elements.docScrollWidth.textContent =
+          document.documentElement.scrollWidth;
+        elements.docClientWidth.textContent =
+          document.documentElement.clientWidth;
+        // Viewport info
+        elements.offsetWidth.textContent = window.innerWidth;
+        // Calculate target scroll positions
+        const docTargetScroll = 5000 - window.innerWidth / 2;
+        elements.docTargetScroll.textContent = Math.round(docTargetScroll);
+        // Update scroll status
+        const docScrollDiff = Math.abs(docScrollLeft - docTargetScroll);
+        elements.docScrollStatus.textContent =
+          docScrollDiff < 10
+            ? "✅ Centered"
+            : `❌ Off by ${Math.round(docScrollDiff)}px`;
+        const containerScrollDiff = Math.abs(
+          elements.scrollableContainer.scrollLeft - 1900,
+        );
+        elements.containerScrollStatus.textContent =
+          containerScrollDiff < 10
+            ? "✅ Centered"
+            : `❌ Off by ${Math.round(containerScrollDiff)}px`;
+      }
+      window.autoSetup = function () {
+        // Calculate the exact center positions
+        const docCenterScroll =
+          document.documentElement.scrollWidth / 2 - window.innerWidth / 2;
+        const containerCenterScroll =
+          elements.scrollableContainer.scrollWidth / 2;
+        // Scroll document to center
+        window.scrollTo({
+          left: docCenterScroll,
+          behavior: "smooth",
+        });
+        // Wait a bit for document scroll to start, then scroll container
+        setTimeout(() => {
+          elements.scrollableContainer.scrollTo({
+            left: containerCenterScroll,
+            behavior: "smooth",
+          });
+        }, 100);
+      };
+      // Track mouse movement
+      document.addEventListener("mousemove", (e) => {
+        elements.mouseClientX.textContent = e.clientX;
+        elements.mousePageX.textContent = e.pageX;
+        elements.mouseScreenX.textContent = e.screenX;
+      });
+      // Update info on scroll
+      window.addEventListener("scroll", updateCoordinateInfo);
+      elements.scrollableContainer.addEventListener(
+        "scroll",
+        updateCoordinateInfo,
+      );
+      // Update info on resize
+      window.addEventListener("resize", updateCoordinateInfo);
+      // Initial update
+      updateCoordinateInfo();
+      // Auto-update every 100ms to catch any changes
+      setInterval(updateCoordinateInfo, 100);
+      // Automatically run the setup after page loads
+      setTimeout(() => {
+        window.autoSetup();
+      }, 500);
+      console.log("Coordinates Demo initialized");
+      console.log("Document width:", document.body.offsetWidth, "px");
+      console.log("Red square at:", elements.redSquare.style.left);
+      console.log(
+        "Blue square at:",
+        elements.blueSquare.style.left,
+        "(relative to scrollable content)",
+      );
+    </script>
+  </body>
+</html>