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

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