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/ui_transition/demos/smooth_height_transition_demo.html ADDED Viewed

@@ -0,0 +1,149 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Smooth height transition demo</title>
+    <style>
+      body {
+        margin: 0;
+        font-family: system-ui;
+      }
+      .controls {
+        padding: 20px;
+        border-bottom: 1px solid #ccc;
+        background: #f5f5f5;
+      }
+      .demo-container {
+        padding: 20px;
+      }
+      /* The element we'll apply the smooth transition to */
+      #dynamic-content {
+        background: white;
+        border: 2px solid #666;
+        padding: 16px;
+        margin: 20px 0;
+        width: 300px;
+        /* we'll handle height transitions in JS */
+      }
+      /* Some preset content styles for testing */
+      .content-block {
+        background: #f0f0f0;
+        margin: 8px 0;
+        padding: 12px;
+      }
+      button {
+        margin: 0 8px 8px 0;
+        padding: 8px 16px;
+      }
+      textarea {
+        display: block;
+        width: 300px;
+        height: 100px;
+        margin: 8px 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="controls">
+      <h3>Test Controls</h3>
+      <div>
+        <button id="small-content">Small Content</button>
+        <button id="medium-content">Medium Content</button>
+        <button id="large-content">Large Content</button>
+      </div>
+      <div>
+        <button id="add-block">Add Block</button>
+        <button id="remove-block">Remove Block</button>
+      </div>
+      <div>
+        <p>Custom content:</p>
+        <textarea id="custom-content">
+Hello, this is some initial content.</textarea
+        >
+      </div>
+    </div>
+    <div class="demo-container">
+      <div id="dynamic-content" class="ui-transition-container">
+        <div class="ui-transition-outer-wrapper">
+          <div class="ui-transition-measure-wrapper">
+            <div class="ui-transition-slot">
+              <div class="content-block">Initial content block</div>
+            </div>
+          </div>
+        </div>
+        <div class="ui-transition-overlay"></div>
+      </div>
+    </div>
+    <script type="module">
+      import { initUITransition } from "../ui_transition.js";
+      const dynamicContent = document.getElementById("dynamic-content");
+      const { slot } = initUITransition(dynamicContent);
+      // Setup event listeners
+      document
+        .getElementById("small-content")
+        .addEventListener("click", () => setPresetContent("small"));
+      document
+        .getElementById("medium-content")
+        .addEventListener("click", () => setPresetContent("medium"));
+      document
+        .getElementById("large-content")
+        .addEventListener("click", () => setPresetContent("large"));
+      document.getElementById("add-block").addEventListener("click", addBlock);
+      document
+        .getElementById("remove-block")
+        .addEventListener("click", removeBlock);
+      document
+        .getElementById("custom-content")
+        .addEventListener("input", (e) => updateCustomContent(e.target.value));
+      // Test helpers
+      const presetContents = {
+        small: `<div class="content-block">Small content</div>`,
+        medium: `
+          <div class="content-block">Medium content</div>
+          <div class="content-block">With multiple blocks</div>
+          <div class="content-block">To test transitions</div>
+        `,
+        large: `
+          <div class="content-block">Large content</div>
+          <div class="content-block">With many blocks</div>
+          <div class="content-block">To properly test</div>
+          <div class="content-block">How the transitions work</div>
+          <div class="content-block">With varying amounts of content</div>
+          <div class="content-block">And different heights</div>
+        `,
+      };
+      function setPresetContent(size) {
+        slot.innerHTML = presetContents[size];
+      }
+      function addBlock() {
+        const block = document.createElement("div");
+        block.className = "content-block";
+        block.textContent = `New content block ${slot.children.length + 1}`;
+        slot.appendChild(block);
+      }
+      function removeBlock() {
+        const blocks = slot.getElementsByClassName("content-block");
+        if (blocks.length > 0) {
+          blocks[blocks.length - 1].remove();
+        }
+      }
+      function updateCustomContent(text) {
+        slot.innerHTML = `<div class="content-block">${text}</div>`;
+      }
+    </script>
+  </body>
+</html>

package/src/ui_transition/demos/transition_testing.html ADDED Viewed

@@ -0,0 +1,354 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>UI Transition Testing</title>
+    <style>
+      body {
+        margin: 0;
+        font-family: system-ui;
+        padding: 20px;
+      }
+      .controls {
+        margin-bottom: 20px;
+        padding: 16px;
+        background: #f5f5f5;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+      .button-group {
+        margin-bottom: 12px;
+      }
+      button {
+        margin: 0 8px 8px 0;
+        padding: 8px 16px;
+      }
+      .description {
+        color: #666;
+        font-size: 0.9em;
+        margin: 8px 0;
+      }
+      /* Test content styles */
+      #transition-box {
+        border: 2px solid #666;
+        /* padding: 16px; */
+        width: 300px;
+        margin-top: 20px;
+      }
+      .test-content {
+        padding: 20px;
+        background: #f0f0f0;
+        margin: 8px 0;
+        text-align: center;
+      }
+      .test-content.loading {
+        background: #e3f2fd;
+      }
+      .test-content.content {
+        background: #e8f5e9;
+      }
+      /* Debug info */
+      #debug-info {
+        margin-top: 20px;
+        font-family: monospace;
+        white-space: pre-wrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="controls">
+      <div class="button-group">
+        <button id="start-transition">Start Transition</button>
+        <button id="slow-loading">Slow Loading (3s)</button>
+        <button id="pause-transition" disabled>Pause Transition</button>
+        <button id="resume-transition" disabled>Resume Transition</button>
+      </div>
+      <div class="button-group">
+        <button id="insert-content" disabled>Insert Content</button>
+        <button id="change-to-fade" disabled>Change to Cross-fade</button>
+        <button id="change-to-slide" disabled>Change to Slide-left</button>
+        <button id="reset">Reset</button>
+      </div>
+      <div>
+        <label>
+          Content Transition Duration (ms):
+          <input
+            type="number"
+            id="transition-duration"
+            value="3000"
+            min="100"
+            step="100"
+            style="width: 80px"
+          />
+        </label>
+        <label style="margin-left: 20px">
+          Phase Transition Duration (ms):
+          <input
+            type="number"
+            id="phase-duration"
+            value="300"
+            min="100"
+            step="100"
+            style="width: 80px"
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Content Transition Type:
+          <select id="content-transition-type">
+            <option value="slide-left">Slide Left</option>
+            <option value="cross-fade">Cross Fade</option>
+          </select>
+        </label>
+        <label style="margin-left: 20px">
+          Phase Transition Type:
+          <select id="phase-transition-type">
+            <option value="cross-fade">Cross Fade</option>
+            <option value="slide-left">Slide Left</option>
+          </select>
+        </label>
+      </div>
+      <div class="description">
+        <strong>Content Transitions:</strong> Between different content keys (a
+        → b → c)<br />
+        <strong>Phase Transitions:</strong> Between loading/content states for
+        same content key (loading → content)<br />
+        Test smooth transition interruptions: Start a transition, then click
+        "Insert Content" mid-animation to see smooth easing continuation.
+      </div>
+    </div>
+    <div
+      id="transition-box"
+      class="ui_transition_container"
+      data-size-transition
+      data-content-transition="slide-left"
+      data-content-transition-duration="3000"
+      data-phase-transition="cross-fade"
+      data-phase-transition-duration="300"
+    >
+      <div class="ui_transition_outer_wrapper">
+        <div class="ui_transition_measure_wrapper">
+          <div class="ui_transition_slot">
+            <div
+              class="test-content content"
+              data-content-key="a"
+              data-ui-name="a-content"
+            >
+              Initial Content
+            </div>
+          </div>
+          <div class="ui_transition_phase_overlay"></div>
+        </div>
+      </div>
+      <div class="ui_transition_content_overlay"></div>
+    </div>
+    <div id="debug-info"></div>
+    <script type="module">
+      import { initUITransition } from "../ui_transition.js";
+      const box = document.getElementById("transition-box");
+      const debugInfo = document.getElementById("debug-info");
+      const durationInput = document.getElementById("transition-duration");
+      const phaseDurationInput = document.getElementById("phase-duration");
+      const contentTypeSelect = document.getElementById(
+        "content-transition-type",
+      );
+      const phaseTypeSelect = document.getElementById("phase-transition-type");
+      const startButton = document.getElementById("start-transition");
+      const slowLoadingButton = document.getElementById("slow-loading");
+      const pauseButton = document.getElementById("pause-transition");
+      const resumeButton = document.getElementById("resume-transition");
+      const insertButton = document.getElementById("insert-content");
+      const changeToFadeButton = document.getElementById("change-to-fade");
+      const changeToSlideButton = document.getElementById("change-to-slide");
+      const resetButton = document.getElementById("reset");
+      let uiTransition = initUITransition(box);
+      // Update duration when input changes
+      durationInput.addEventListener("change", () => {
+        box.dataset.contentTransitionDuration = durationInput.value;
+      });
+      phaseDurationInput.addEventListener("change", () => {
+        box.dataset.phaseTransitionDuration = phaseDurationInput.value;
+      });
+      // Update transition types when selects change
+      contentTypeSelect.addEventListener("change", () => {
+        box.dataset.contentTransition = contentTypeSelect.value;
+      });
+      phaseTypeSelect.addEventListener("change", () => {
+        box.dataset.phaseTransition = phaseTypeSelect.value;
+      });
+      function updateDebugInfo() {
+        if (!uiTransition) return;
+        const state = uiTransition.getState();
+        debugInfo.textContent = JSON.stringify(
+          {
+            isPaused: state.isPaused,
+            contentTransitionInProgress: state.contentTransitionInProgress,
+            phaseTransitionInProgress: state.phaseTransitionInProgress,
+            contentDuration: box.dataset.contentTransitionDuration,
+            phaseDuration: box.dataset.phaseTransitionDuration,
+            contentType: box.dataset.contentTransition,
+            phaseType: box.dataset.phaseTransition,
+          },
+          null,
+          2,
+        );
+      }
+      // Update debug info periodically
+      setInterval(updateDebugInfo, 100);
+      function setContent(content) {
+        uiTransition.slot.innerHTML = content;
+      }
+      startButton.addEventListener("click", () => {
+        // Set loading state with same content key for phase transition
+        setContent(`
+          <div class="test-content loading" data-content-key="b" data-ui-name="b-loading" data-content-phase>
+            Loading...
+          </div>
+        `);
+        // Enable relevant buttons
+        pauseButton.disabled = false;
+        insertButton.disabled = false;
+        changeToFadeButton.disabled = false;
+        changeToSlideButton.disabled = false;
+        startButton.disabled = true;
+        updateDebugInfo();
+      });
+      slowLoadingButton.addEventListener("click", () => {
+        // Set slow loading state with same content key for phase transition
+        setContent(`
+          <div class="test-content loading" data-content-key="slow" data-ui-name="slow-loading" data-content-phase>
+            Slow Loading (3 seconds)...
+          </div>
+        `);
+        // Simulate slow loading, then show content with SAME content key
+        setTimeout(() => {
+          setContent(`
+            <div class="test-content content" data-content-key="slow" data-ui-name="slow-content">
+              Slow Content Loaded!
+            </div>
+          `);
+        }, 3000);
+        // Enable relevant buttons
+        pauseButton.disabled = false;
+        slowLoadingButton.disabled = true;
+        updateDebugInfo();
+      });
+      pauseButton.addEventListener("click", () => {
+        // Will be implemented when we add pause to the animation controller
+        uiTransition.pause();
+        pauseButton.disabled = true;
+        resumeButton.disabled = false;
+        updateDebugInfo();
+      });
+      resumeButton.addEventListener("click", () => {
+        // Will be implemented when we add resume to the animation controller
+        uiTransition.resume();
+        resumeButton.disabled = true;
+        pauseButton.disabled = false;
+        updateDebugInfo();
+      });
+      insertButton.addEventListener("click", () => {
+        // Replace loading with content (same content key for phase transition)
+        setContent(`
+          <div class="test-content content" style="background-color: orange" data-content-key="b" data-ui-name="b-content">
+            New Content
+          </div>
+        `);
+        // Disable buttons
+        insertButton.disabled = true;
+        updateDebugInfo();
+      });
+      changeToFadeButton.addEventListener("click", () => {
+        // Change transition type to cross-fade mid-animation
+        box.dataset.contentTransition = "cross-fade";
+        // Trigger content change to see smooth transition type change
+        setContent(`
+          <div class="test-content content" style="background-color: lightblue" data-content-key="c" data-ui-name="c-fade">
+            Cross-fade Content
+          </div>
+        `);
+        changeToFadeButton.disabled = true;
+        updateDebugInfo();
+      });
+      changeToSlideButton.addEventListener("click", () => {
+        // Change transition type back to slide-left mid-animation
+        box.dataset.contentTransition = "slide-left";
+        // Trigger content change to see smooth transition type change
+        setContent(`
+          <div class="test-content content" style="background-color: lightgreen" data-content-key="d" data-ui-name="d-slide">
+            Slide-left Content
+          </div>
+        `);
+        changeToSlideButton.disabled = true;
+        updateDebugInfo();
+      });
+      resetButton.addEventListener("click", () => {
+        // Reset to initial state
+        if (uiTransition) {
+          uiTransition.cleanup();
+        }
+        setContent(`
+          <div class="test-content content" data-content-key="a" data-ui-name="a-content">
+            Initial Content
+          </div>
+        `);
+        uiTransition = initUITransition(box);
+        // Reset buttons
+        startButton.disabled = false;
+        slowLoadingButton.disabled = false;
+        pauseButton.disabled = true;
+        resumeButton.disabled = true;
+        insertButton.disabled = true;
+        changeToFadeButton.disabled = true;
+        changeToSlideButton.disabled = true;
+        updateDebugInfo();
+      });
+    </script>
+  </body>
+</html>