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

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