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/interaction/drag/drag_resize_demo.html DELETED Viewed

@@ -1,571 +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 to Resize Demo</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 20px;
-        font-family: system-ui, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
-      }
-      .demo-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        background: white;
-        border-radius: 12px;
-        padding: 30px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
-      }
-      h1 {
-        text-align: center;
-        color: #333;
-        margin-bottom: 10px;
-      }
-      .subtitle {
-        text-align: center;
-        color: #666;
-        margin-bottom: 40px;
-      }
-      .demo-section {
-        margin-bottom: 50px;
-        padding: 20px;
-        border: 2px dashed #e0e0e0;
-        border-radius: 8px;
-        position: relative;
-      }
-      .demo-section h2 {
-        margin-top: 0;
-        color: #444;
-      }
-      .demo-section p {
-        color: #666;
-        margin-bottom: 20px;
-      }
-      /* Resizable Elements */
-      .resizable {
-        position: relative;
-        background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
-        border: 2px solid #3498db;
-        border-radius: 8px;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: bold;
-        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-        box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
-        transition: box-shadow 0.3s ease;
-        user-select: none;
-      }
-      .resizable:hover {
-        box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
-      }
-      .resizable.dragging {
-        box-shadow: 0 12px 30px rgba(79, 172, 254, 0.5);
-        z-index: 1000;
-      }
-      /* Resize Handles */
-      .resize-handle {
-        position: absolute;
-        background: #2980b9;
-        border: 2px solid white;
-        border-radius: 50%;
-        cursor: pointer;
-        opacity: 0.7;
-        transition: all 0.2s ease;
-        z-index: 10;
-      }
-      .resize-handle:hover {
-        opacity: 1;
-        transform: scale(1.2);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-      }
-      .resize-handle.dragging {
-        opacity: 1;
-        transform: scale(1.3);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-      }
-      /* Handle positions */
-      .resize-handle.right {
-        right: -8px;
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: e-resize;
-        width: 16px;
-        height: 16px;
-      }
-      .resize-handle.bottom {
-        bottom: -8px;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: s-resize;
-        width: 16px;
-        height: 16px;
-      }
-      .resize-handle.corner {
-        bottom: -8px;
-        right: -8px;
-        cursor: se-resize;
-        width: 20px;
-        height: 20px;
-        background: #e74c3c;
-      }
-      /* Demo specific layouts */
-      .basic-resize {
-        width: 200px;
-        height: 150px;
-        margin: 20px;
-      }
-      .constrained-resize {
-        width: 180px;
-        height: 120px;
-        margin: 20px;
-      }
-      .grid-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 20px;
-        margin: 20px 0;
-      }
-      .obstacle {
-        background: #e74c3c;
-        color: white;
-        padding: 20px;
-        border-radius: 8px;
-        text-align: center;
-        font-weight: bold;
-        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
-      }
-      /* Constraint feedback */
-      .constraint-feedback {
-        position: fixed;
-        pointer-events: none;
-        background: rgba(52, 152, 219, 0.8);
-        color: white;
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: bold;
-        z-index: 9999;
-        opacity: 0;
-        transition: opacity 0.15s ease;
-      }
-      .constraint-feedback.visible {
-        opacity: 1;
-      }
-      /* Status display */
-      .status {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        background: rgba(0, 0, 0, 0.8);
-        color: white;
-        padding: 15px;
-        border-radius: 8px;
-        font-family: monospace;
-        font-size: 12px;
-        line-height: 1.4;
-        min-width: 200px;
-        z-index: 10000;
-      }
-      .controls {
-        margin: 20px 0;
-        text-align: center;
-      }
-      .controls button {
-        background: #3498db;
-        color: white;
-        border: none;
-        padding: 10px 20px;
-        border-radius: 5px;
-        margin: 0 5px;
-        cursor: pointer;
-        font-weight: bold;
-        transition: background 0.3s ease;
-      }
-      .controls button:hover {
-        background: #2980b9;
-      }
-      .controls button:active {
-        transform: translateY(1px);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="demo-container">
-      <h1>🎯 Drag to Resize Demo</h1>
-      <p class="subtitle">
-        Interactive demonstration of constraint-based resizing with drag
-        gestures
-      </p>
-      <!-- Basic Resize -->
-      <div class="demo-section">
-        <h2>📐 Basic Resize</h2>
-        <p>
-          Resize elements by dragging the handles. Supports horizontal,
-          vertical, and corner resize.
-        </p>
-        <div class="resizable basic-resize" id="basic1">
-          <div>Basic Resize Box</div>
-          <div class="resize-handle right" data-direction="horizontal"></div>
-          <div class="resize-handle bottom" data-direction="vertical"></div>
-          <div class="resize-handle corner" data-direction="both"></div>
-        </div>
-        <div class="resizable basic-resize" id="basic2">
-          <div>Another Box</div>
-          <div class="resize-handle right" data-direction="horizontal"></div>
-          <div class="resize-handle bottom" data-direction="vertical"></div>
-          <div class="resize-handle corner" data-direction="both"></div>
-        </div>
-      </div>
-      <!-- Constrained Resize -->
-      <div class="demo-section">
-        <h2>🚧 Constrained Resize</h2>
-        <p>
-          Resize with minimum and maximum size constraints. Try resizing beyond
-          the limits!
-        </p>
-        <div
-          class="resizable constrained-resize"
-          id="constrained1"
-          data-min-width="120"
-          data-max-width="400"
-          data-min-height="80"
-          data-max-height="300"
-        >
-          <div>Min: 120×80<br />Max: 400×300</div>
-          <div class="resize-handle right" data-direction="horizontal"></div>
-          <div class="resize-handle bottom" data-direction="vertical"></div>
-          <div class="resize-handle corner" data-direction="both"></div>
-        </div>
-        <div
-          class="resizable constrained-resize"
-          id="constrained2"
-          data-min-width="100"
-          data-max-width="300"
-          data-min-height="100"
-          data-max-height="200"
-        >
-          <div>Min: 100×100<br />Max: 300×200</div>
-          <div class="resize-handle right" data-direction="horizontal"></div>
-          <div class="resize-handle bottom" data-direction="vertical"></div>
-          <div class="resize-handle corner" data-direction="both"></div>
-        </div>
-      </div>
-      <!-- Obstacle Resize -->
-      <div class="demo-section">
-        <h2>🚫 Obstacle Avoidance</h2>
-        <p>
-          Resize elements that cannot overlap with obstacles (red boxes). The
-          drag system prevents collision!
-        </p>
-        <div style="position: relative; height: 400px">
-          <div
-            class="obstacle"
-            style="
-              position: absolute;
-              top: 50px;
-              right: 50px;
-              width: 100px;
-              height: 80px;
-            "
-          >
-            Obstacle A
-          </div>
-          <div
-            class="obstacle"
-            style="
-              position: absolute;
-              bottom: 50px;
-              left: 200px;
-              width: 120px;
-              height: 60px;
-            "
-          >
-            Obstacle B
-          </div>
-          <div
-            class="resizable"
-            id="obstacle-resize"
-            style="
-              position: absolute;
-              top: 200px;
-              left: 50px;
-              width: 150px;
-              height: 100px;
-            "
-          >
-            <div>Try to resize me!</div>
-            <div class="resize-handle right" data-direction="horizontal"></div>
-            <div class="resize-handle bottom" data-direction="vertical"></div>
-            <div class="resize-handle corner" data-direction="both"></div>
-          </div>
-        </div>
-      </div>
-      <!-- Scroll Resize -->
-      <div class="demo-section">
-        <h2>🖱️ Scroll Resize</h2>
-        <p>
-          Hold and drag with scroll wheel for precise resizing. Great for
-          fine-tuning dimensions!
-        </p>
-        <div
-          class="resizable"
-          id="scroll-resize"
-          style="width: 200px; height: 150px; margin: 20px"
-        >
-          <div>Scroll + Drag Resize</div>
-          <div class="resize-handle right" data-direction="horizontal"></div>
-          <div class="resize-handle bottom" data-direction="vertical"></div>
-          <div class="resize-handle corner" data-direction="both"></div>
-        </div>
-      </div>
-      <!-- Controls -->
-      <div class="controls">
-        <button onclick="resetAllSizes()">🔄 Reset All Sizes</button>
-        <button onclick="toggleConstraints()">🚧 Toggle Constraints</button>
-        <button onclick="addObstacle()">➕ Add Obstacle</button>
-        <button onclick="toggleScrollMode()">🖱️ Toggle Scroll Mode</button>
-      </div>
-    </div>
-    <!-- Status Display -->
-    <div class="status" id="status">
-      <div><strong>Resize Status</strong></div>
-      <div id="statusContent">Ready to resize...</div>
-    </div>
-    <!-- Constraint Feedback -->
-    <div class="constraint-feedback" id="feedback"></div>
-    <script type="module">
-      import { createDragGestureController } from "./drag_gesture.js";
-      // Global state
-      let constraintsEnabled = true;
-      let scrollModeEnabled = true;
-      let activeResizes = new Map();
-      // Status update
-      function updateStatus(content) {
-        document.getElementById("statusContent").innerHTML = content;
-      }
-      // Initialize resize functionality
-      function initializeResize(element) {
-        const handles = element.querySelectorAll(".resize-handle");
-        handles.forEach((handle) => {
-          const direction = handle.dataset.direction;
-          // Setup drag for resize handle
-          const cleanup = createDragGestureController({
-            onGrab: () => {
-              // Handle can be grabbed
-              return {
-                element, // The element that will be visually impacted
-                elementToImpact: element, // The element that will receive position changes
-              };
-            },
-            onDragStart: () => {
-              handle.classList.add("dragging");
-              element.classList.add("dragging");
-              const rect = element.getBoundingClientRect();
-              activeResizes.set(element.id, {
-                startWidth: rect.width,
-                startHeight: rect.height,
-                startX: rect.left,
-                startY: rect.top,
-                direction,
-              });
-              updateStatus(
-                `Resizing ${element.id}<br>Direction: ${direction}<br>Start: ${Math.round(rect.width)}×${Math.round(rect.height)}`,
-              );
-            },
-            onDrag: (info) => {
-              const resizeInfo = activeResizes.get(element.id);
-              if (!resizeInfo) return;
-              let newWidth = resizeInfo.startWidth;
-              let newHeight = resizeInfo.startHeight;
-              // Calculate new dimensions based on direction
-              if (direction === "horizontal" || direction === "both") {
-                newWidth = Math.max(
-                  parseInt(element.dataset.minWidth) || 50,
-                  Math.min(
-                    parseInt(element.dataset.maxWidth) || 800,
-                    resizeInfo.startWidth + info.xFromStart,
-                  ),
-                );
-              }
-              if (direction === "vertical" || direction === "both") {
-                newHeight = Math.max(
-                  parseInt(element.dataset.minHeight) || 30,
-                  Math.min(
-                    parseInt(element.dataset.maxHeight) || 600,
-                    resizeInfo.startHeight + info.yFromStart,
-                  ),
-                );
-              }
-              // Apply new dimensions
-              element.style.width = `${newWidth}px`;
-              element.style.height = `${newHeight}px`;
-              updateStatus(
-                `Resizing ${element.id}<br>Direction: ${direction}<br>Size: ${Math.round(newWidth)}×${Math.round(newHeight)}<br>Delta: ${Math.round(info.xFromStart)}, ${Math.round(info.yFromStart)}`,
-              );
-            },
-            onRelease: () => {
-              handle.classList.remove("dragging");
-              element.classList.remove("dragging");
-              const resizeInfo = activeResizes.get(element.id);
-              if (resizeInfo) {
-                const rect = element.getBoundingClientRect();
-                updateStatus(
-                  `Resize Complete!<br>Element: ${element.id}<br>Final Size: ${Math.round(rect.width)}×${Math.round(rect.height)}<br>Total Change: ${Math.round(rect.width - resizeInfo.startWidth)}×${Math.round(rect.height - resizeInfo.startHeight)}`,
-                );
-                activeResizes.delete(element.id);
-              }
-            },
-          });
-          // Add drag gesture to handle
-          handle.addEventListener("mousedown", cleanup);
-          // Store cleanup function
-          handle._dragCleanup = cleanup;
-        });
-      }
-      // Initialize all resizable elements
-      document.querySelectorAll(".resizable").forEach(initializeResize);
-      // Global functions for controls
-      window.resetAllSizes = function () {
-        document.querySelectorAll(".resizable").forEach((element) => {
-          if (element.classList.contains("basic-resize")) {
-            element.style.width = "200px";
-            element.style.height = "150px";
-          } else if (element.classList.contains("constrained-resize")) {
-            element.style.width = "180px";
-            element.style.height = "120px";
-          }
-        });
-        updateStatus("All sizes reset!");
-      };
-      window.toggleConstraints = function () {
-        constraintsEnabled = !constraintsEnabled;
-        updateStatus(
-          `Constraints ${constraintsEnabled ? "enabled" : "disabled"}`,
-        );
-        // Reinitialize all resizable elements with new constraint settings
-        document.querySelectorAll(".resize-handle").forEach((handle) => {
-          if (handle._dragCleanup) {
-            handle._dragCleanup();
-          }
-        });
-        document.querySelectorAll(".resizable").forEach(initializeResize);
-      };
-      window.toggleScrollMode = function () {
-        scrollModeEnabled = !scrollModeEnabled;
-        updateStatus(
-          `Scroll mode ${scrollModeEnabled ? "enabled" : "disabled"}`,
-        );
-        // Reinitialize all resizable elements
-        document.querySelectorAll(".resize-handle").forEach((handle) => {
-          if (handle._dragCleanup) {
-            handle._dragCleanup();
-          }
-        });
-        document.querySelectorAll(".resizable").forEach(initializeResize);
-      };
-      window.addObstacle = function () {
-        const section = document.querySelector(
-          ".demo-section:nth-of-type(3) > div",
-        );
-        const obstacle = document.createElement("div");
-        obstacle.className = "obstacle";
-        obstacle.style.cssText = `
-        position: absolute;
-        top: ${Math.random() * 200 + 50}px;
-        left: ${Math.random() * 300 + 100}px;
-        width: 80px;
-        height: 60px;
-      `;
-        obstacle.textContent = `Obstacle ${document.querySelectorAll(".obstacle").length + 1}`;
-        section.appendChild(obstacle);
-        updateStatus("New obstacle added!");
-        // Reinitialize obstacle-aware resize
-        const obstacleResize = document.getElementById("obstacle-resize");
-        const handles = obstacleResize.querySelectorAll(".resize-handle");
-        handles.forEach((handle) => {
-          if (handle._dragCleanup) {
-            handle._dragCleanup();
-          }
-        });
-        initializeResize(obstacleResize);
-      };
-      updateStatus("Drag resize demo loaded!<br>Try resizing the boxes above.");
-    </script>
-  </body>
-</html>