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/transition/demos/animation_resumption_test.xhtml ADDED Viewed

@@ -0,0 +1,500 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Animation Resumption Test</title>
+    <style>
+      body {
+        margin: 0;
+        font-family: system-ui;
+        padding: 20px;
+        background: #f0f0f0;
+      }
+      .controls {
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      .control-group {
+        margin-bottom: 16px;
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .control-group label {
+        font-weight: bold;
+        min-width: 120px;
+      }
+      button {
+        padding: 8px 16px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background: #f8f9fa;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      button:hover {
+        background: #e9ecef;
+      }
+      button.active {
+        background: #0066cc;
+        color: white;
+        border-color: #0066cc;
+      }
+      input[type="range"] {
+        width: 200px;
+      }
+      input[type="number"] {
+        width: 80px;
+        padding: 4px 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .test-element {
+        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+        border: 2px solid #333;
+        border-radius: 8px;
+        color: white;
+        font-weight: bold;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 20px 0;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        transition: box-shadow 0.2s;
+        position: relative;
+      }
+      .test-element[data-height-animated] {
+        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
+      }
+      .test-element[data-width-animated] {
+        box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
+      }
+      .test-element[data-transition-opacity] {
+        box-shadow: 0 6px 20px rgba(255, 255, 0, 0.4);
+      }
+      .test-element[data-animated] {
+        box-shadow: 0 8px 24px rgba(0, 102, 204, 0.5);
+      }
+      .status {
+        background: white;
+        padding: 16px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+      .status-item {
+        margin: 8px 0;
+        padding: 8px;
+        border-radius: 4px;
+        background: #f8f9fa;
+      }
+      .status-item.playing {
+        background: #d4edda;
+        border-left: 4px solid #28a745;
+      }
+      .status-item.paused {
+        background: #fff3cd;
+        border-left: 4px solid #ffc107;
+      }
+      .status-item.ended {
+        background: #f8d7da;
+        border-left: 4px solid #dc3545;
+      }
+      .debug-log {
+        background: #1e1e1e;
+        color: #00ff00;
+        padding: 16px;
+        border-radius: 8px;
+        font-family: monospace;
+        font-size: 12px;
+        height: 200px;
+        overflow-y: auto;
+        margin-top: 20px;
+      }
+      .progress-bar {
+        width: 100%;
+        height: 20px;
+        background: #e9ecef;
+        border-radius: 10px;
+        overflow: hidden;
+        margin: 8px 0;
+      }
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
+        transition: width 0.1s linear;
+        border-radius: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Animation Target Update Test</h1>
+    <p>
+      Test dynamic animation target updates using the new updateTarget API in
+      animation_playback.js
+    </p>
+    <div class="controls">
+      <h3>Animation Controls</h3>
+      <div class="control-group">
+        <label>Duration:</label>
+        <input type="number" id="duration" value="3000" min="100" step="100" />
+        <span>ms</span>
+      </div>
+      <div class="control-group">
+        <label>Animation Type:</label>
+        <button id="height-btn" class="active">Height</button>
+        <button id="width-btn">Width</button>
+        <button id="opacity-btn">Opacity</button>
+        <button id="combined-btn">Combined</button>
+      </div>
+      <div class="control-group">
+        <label>Height Target:</label>
+        <input type="range" id="height-slider" min="50" max="400" value="200" />
+        <input type="number" id="height-value" value="200" min="50" max="400" />
+        <span>px</span>
+      </div>
+      <div class="control-group">
+        <label>Width Target:</label>
+        <input type="range" id="width-slider" min="100" max="600" value="300" />
+        <input type="number" id="width-value" value="300" min="100" max="600" />
+        <span>px</span>
+      </div>
+      <div class="control-group">
+        <label>Opacity Target:</label>
+        <input
+          type="range"
+          id="opacity-slider"
+          min="0"
+          max="1"
+          step="0.1"
+          value="0.5"
+        />
+        <input
+          type="number"
+          id="opacity-value"
+          value="0.5"
+          min="0"
+          max="1"
+          step="0.1"
+        />
+      </div>
+      <div class="control-group">
+        <label>Actions:</label>
+        <button id="start-btn">Start Animation</button>
+        <button id="interrupt-btn" disabled>Update Target</button>
+        <button id="pause-btn" disabled>Pause</button>
+        <button id="resume-btn" disabled>Resume</button>
+        <button id="reset-btn">Reset Element</button>
+      </div>
+    </div>
+    <div class="status">
+      <h3>Animation Status</h3>
+      <div id="status-content">
+        <div class="status-item">Ready to start animation</div>
+      </div>
+      <div class="progress-bar">
+        <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
+      </div>
+      <div id="progress-text">Progress: 0%</div>
+    </div>
+    <div
+      id="test-element"
+      class="test-element"
+      style="width: 200px; height: 150px; opacity: 1"
+    >
+      Test Element
+    </div>
+    <div class="debug-log" id="debug-log"></div>
+    <script type="module">
+      import {
+        createHeightAnimation,
+        createWidthAnimation,
+        createOpacityAnimation,
+        createPlaybackGroup,
+      } from "@jsenv/dom";
+      const testElement = document.getElementById("test-element");
+      const debugLog = document.getElementById("debug-log");
+      const statusContent = document.getElementById("status-content");
+      const progressFill = document.getElementById("progress-fill");
+      const progressText = document.getElementById("progress-text");
+      // Controls
+      const durationInput = document.getElementById("duration");
+      const heightSlider = document.getElementById("height-slider");
+      const heightValue = document.getElementById("height-value");
+      const widthSlider = document.getElementById("width-slider");
+      const widthValue = document.getElementById("width-value");
+      const opacitySlider = document.getElementById("opacity-slider");
+      const opacityValue = document.getElementById("opacity-value");
+      // Buttons
+      const heightBtn = document.getElementById("height-btn");
+      const widthBtn = document.getElementById("width-btn");
+      const opacityBtn = document.getElementById("opacity-btn");
+      const combinedBtn = document.getElementById("combined-btn");
+      const startBtn = document.getElementById("start-btn");
+      const interruptBtn = document.getElementById("interrupt-btn");
+      const pauseBtn = document.getElementById("pause-btn");
+      const resumeBtn = document.getElementById("resume-btn");
+      const resetBtn = document.getElementById("reset-btn");
+      let currentAnimation = null;
+      let animationType = "height";
+      // Sync slider and number inputs
+      heightSlider.oninput = () => {
+        heightValue.value = heightSlider.value;
+      };
+      heightValue.oninput = () => {
+        heightSlider.value = heightValue.value;
+      };
+      widthSlider.oninput = () => {
+        widthValue.value = widthSlider.value;
+      };
+      widthValue.oninput = () => {
+        widthSlider.value = widthValue.value;
+      };
+      opacitySlider.oninput = () => {
+        opacityValue.value = opacitySlider.value;
+      };
+      opacityValue.oninput = () => {
+        opacitySlider.value = opacityValue.value;
+      };
+      // Animation type selection
+      [heightBtn, widthBtn, opacityBtn, combinedBtn].forEach((btn) => {
+        btn.onclick = () => {
+          document
+            .querySelectorAll(".control-group button")
+            .forEach((b) => b.classList.remove("active"));
+          btn.classList.add("active");
+          animationType = btn.id.replace("-btn", "");
+          log(`Animation type changed to: ${animationType}`);
+        };
+      });
+      function log(message) {
+        const timestamp = new Date().toLocaleTimeString();
+        debugLog.innerHTML += `[${timestamp}] ${message}<br>`;
+        debugLog.scrollTop = debugLog.scrollHeight;
+      }
+      function updateStatus(message, type = "") {
+        statusContent.innerHTML = `<div class="status-item ${type}">${message}</div>`;
+      }
+      function updateProgress(progress) {
+        const percentage = Math.round(progress * 100);
+        progressFill.style.width = `${percentage}%`;
+        progressText.textContent = `Progress: ${percentage}%`;
+      }
+      function updateButtons(playing) {
+        startBtn.disabled = playing;
+        interruptBtn.disabled = !playing;
+        pauseBtn.disabled =
+          !playing ||
+          (currentAnimation && currentAnimation.playState === "finished");
+        resumeBtn.disabled =
+          playing ||
+          !currentAnimation ||
+          currentAnimation.playState !== "paused";
+      }
+      function resetElement() {
+        if (currentAnimation) {
+          currentAnimation.cancel();
+          currentAnimation = null;
+        }
+        testElement.style.width = "200px";
+        testElement.style.height = "150px";
+        testElement.style.opacity = "1";
+        testElement.style.transform = "";
+        updateStatus("Element reset to initial state");
+        updateProgress(0);
+        updateButtons(false);
+        log("Element reset to initial state");
+      }
+      function createAnimation() {
+        const duration = parseInt(durationInput.value);
+        log(`Creating ${animationType} animation (duration: ${duration}ms)`);
+        const commonOptions = {
+          duration,
+        };
+        switch (animationType) {
+          case "height":
+            return createHeightAnimation(
+              testElement,
+              parseInt(heightValue.value),
+              commonOptions,
+            );
+          case "width":
+            return createWidthAnimation(
+              testElement,
+              parseInt(widthValue.value),
+              commonOptions,
+            );
+          case "opacity":
+            return createOpacityAnimation(
+              testElement,
+              parseFloat(opacityValue.value),
+              commonOptions,
+            );
+          case "combined": {
+            const animations = [
+              createHeightAnimation(testElement, parseInt(heightValue.value), {
+                ...commonOptions,
+              }),
+              createWidthAnimation(testElement, parseInt(widthValue.value), {
+                ...commonOptions,
+              }),
+              createOpacityAnimation(
+                testElement,
+                parseFloat(opacityValue.value),
+                {
+                  ...commonOptions,
+                },
+              ),
+            ];
+            const animGroup = createPlaybackGroup(animations);
+            return animGroup;
+          }
+          default:
+            log(`Unknown animation type: ${animationType}`);
+            return null;
+        }
+      }
+      startBtn.onclick = () => {
+        if (currentAnimation) {
+          currentAnimation.cancel();
+        }
+        currentAnimation = createAnimation();
+        // Set up progress callback using channels
+        currentAnimation.channels.progress.add(({ progress }) => {
+          updateProgress(progress);
+        });
+        currentAnimation.play();
+        updateStatus("Animation started", "playing");
+        updateButtons(true);
+        log(`Started ${animationType} animation`);
+        // Handle animation end
+        currentAnimation.channels.finish.add(() => {
+          updateStatus("Animation completed", "ended");
+          updateButtons(false);
+          log("Animation completed");
+        });
+      };
+      interruptBtn.onclick = () => {
+        if (!currentAnimation || currentAnimation.playState === "finished") {
+          return;
+        }
+        log(`Interrupting animation and updating target`);
+        // Update target using the new updateTarget method
+        switch (animationType) {
+          case "height":
+            currentAnimation.updateTarget(parseInt(heightValue.value));
+            log(`Updated height target to ${heightValue.value}px`);
+            break;
+          case "width":
+            currentAnimation.updateTarget(parseInt(widthValue.value));
+            log(`Updated width target to ${widthValue.value}px`);
+            break;
+          case "opacity":
+            currentAnimation.updateTarget(parseFloat(opacityValue.value));
+            log(`Updated opacity target to ${opacityValue.value}`);
+            break;
+          case "combined":
+            // For combined animations, we need to update each individual animation
+            log(`Combined animations don't support updateTarget yet`);
+            break;
+          default:
+            log(`Unknown animation type: ${animationType}`);
+            break;
+        }
+        updateStatus("Animation target updated", "playing");
+      };
+      pauseBtn.onclick = () => {
+        if (currentAnimation && currentAnimation.pause) {
+          currentAnimation.pause();
+          updateStatus("Animation paused", "paused");
+          updateButtons(false);
+          log("Animation paused");
+        }
+      };
+      resumeBtn.onclick = () => {
+        if (currentAnimation && currentAnimation.play) {
+          currentAnimation.play();
+          updateStatus("Animation resumed", "playing");
+          updateButtons(true);
+          log("Animation resumed");
+        }
+      };
+      resetBtn.onclick = resetElement;
+      // Initialize
+      log("Animation target update test initialized with new updateTarget API");
+      updateStatus("Ready to start animation");
+      updateButtons(false);
+    </script>
+  </body>
+</html>