npm - @jsenv/dom - Versions diffs - 0.8.7 → 0.9.0 - Mend

@jsenv/dom 0.8.7 → 0.9.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 (2) hide show

package/dist/jsenv_dom.js +104 -73
package/package.json +9 -4

package/dist/jsenv_dom.js CHANGED Viewed

@@ -104,29 +104,31 @@ const getElementSignature = (element) => {
   if (element.nodeType === Node.TEXT_NODE) {
     return `#text(${getElementSignature(element.nodeValue)})`;
   }
+  if (element instanceof HTMLElement) {
+    const tagName = element.tagName.toLowerCase();
+    const dataUIName = element.getAttribute("data-ui-name");
+    if (dataUIName) {
+      return `${tagName}[data-ui-name="${dataUIName}"]`;
+    }
+    if (element === document.body) {
+      return "<body>";
+    }
+    if (element === document.documentElement) {
+      return "<html>";
+    }
+    const elementId = element.id;
+    if (elementId) {
+      return `${tagName}#${elementId}`;
+    }
+    const className = element.className;
+    if (className) {
+      return `${tagName}.${className.split(" ").join(".")}`;
+    }
-  const tagName = element.tagName.toLowerCase();
-  const dataUIName = element.getAttribute("data-ui-name");
-  if (dataUIName) {
-    return `${tagName}[data-ui-name="${dataUIName}"]`;
+    const parentSignature = getElementSignature(element.parentElement);
+    return `${parentSignature} > ${tagName}`;
   }
-  if (element === document.body) {
-    return "<body>";
-  }
-  if (element === document.documentElement) {
-    return "<html>";
-  }
-  const elementId = element.id;
-  if (elementId) {
-    return `${tagName}#${elementId}`;
-  }
-  const className = element.className;
-  if (className) {
-    return `${tagName}.${className.split(" ").join(".")}`;
-  }
-  const parentSignature = getElementSignature(element.parentElement);
-  return `${parentSignature} > ${tagName}`;
+  return String(element);
 };
 const createIterableWeakSet = () => {
@@ -7078,12 +7080,12 @@ const createConstraintFeedbackLine = () => {
 import.meta.css = /* css */ `
   .navi_constraint_feedback_line {
     position: fixed;
-    pointer-events: none;
     z-index: 9998;
+    border-top: 2px dotted rgba(59, 130, 246, 0.7);
     visibility: hidden;
-    transition: opacity 0.15s ease;
     transform-origin: left center;
-    border-top: 2px dotted rgba(59, 130, 246, 0.7);
+    transition: opacity 0.15s ease;
+    pointer-events: none;
   }
   .navi_constraint_feedback_line[data-visible] {
@@ -7524,11 +7526,11 @@ import.meta.css = /* css */ `
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 999998;
     width: 100vw;
     height: 100vh;
-    overflow: hidden;
     pointer-events: none;
-    z-index: 999998;
+    overflow: hidden;
     --marker-size: ${MARKER_SIZE}px;
   }
@@ -7593,33 +7595,33 @@ import.meta.css = /* css */ `
   .navi_debug_marker_label {
     position: absolute;
-    font-size: 12px;
+    padding: 2px 6px;
+    color: rgb(from var(--marker-color) r g b / 1);
     font-weight: bold;
+    font-size: 12px;
+    white-space: nowrap;
     background: rgba(255, 255, 255, 0.9);
-    padding: 2px 6px;
-    border-radius: 3px;
     border: 1px solid;
-    white-space: nowrap;
-    pointer-events: none;
-    color: rgb(from var(--marker-color) r g b / 1);
     border-color: rgb(from var(--marker-color) r g b / 1);
+    border-radius: 3px;
+    pointer-events: none;
   }
   /* Label positioning based on side data attributes */
   /* Left side markers - vertical with 90° rotation */
   .navi_debug_marker[data-left] .navi_debug_marker_label {
-    left: 10px;
     top: 20px;
+    left: 10px;
     transform: rotate(90deg);
     transform-origin: left center;
   }
   /* Right side markers - vertical with -90° rotation */
   .navi_debug_marker[data-right] .navi_debug_marker_label {
+    top: 20px;
     right: 10px;
     left: auto;
-    top: 20px;
     transform: rotate(-90deg);
     transform-origin: right center;
   }
@@ -7632,16 +7634,16 @@ import.meta.css = /* css */ `
   /* Bottom side markers - horizontal, label on the line */
   .navi_debug_marker[data-bottom] .navi_debug_marker_label {
-    bottom: 0px;
     top: auto;
+    bottom: 0px;
     left: 20px;
   }
   .navi_obstacle_marker {
     position: absolute;
+    z-index: 9999;
     background-color: orange;
     opacity: 0.6;
-    z-index: 9999;
     pointer-events: none;
   }
@@ -7649,20 +7651,20 @@ import.meta.css = /* css */ `
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 12px;
-    font-weight: bold;
     color: white;
+    font-weight: bold;
+    font-size: 12px;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
+    transform: translate(-50%, -50%);
     pointer-events: none;
   }
   .navi_element_marker {
     position: absolute;
+    z-index: 9997;
     background-color: var(--element-color-alpha, rgba(255, 0, 150, 0.3));
     border: 2px solid var(--element-color, rgb(255, 0, 150));
     opacity: 0.9;
-    z-index: 9997;
     pointer-events: none;
   }
@@ -7670,23 +7672,23 @@ import.meta.css = /* css */ `
     position: absolute;
     top: -25px;
     right: 0;
-    font-size: 11px;
-    font-weight: bold;
+    padding: 2px 6px;
     color: var(--element-color, rgb(255, 0, 150));
+    font-weight: bold;
+    font-size: 11px;
+    white-space: nowrap;
     background: rgba(255, 255, 255, 0.9);
-    padding: 2px 6px;
-    border-radius: 3px;
     border: 1px solid var(--element-color, rgb(255, 0, 150));
-    white-space: nowrap;
+    border-radius: 3px;
     pointer-events: none;
   }
   .navi_reference_element_marker {
     position: absolute;
+    z-index: 9998;
     background-color: rgba(0, 150, 255, 0.3);
     border: 2px dashed rgba(0, 150, 255, 0.7);
     opacity: 0.8;
-    z-index: 9998;
     pointer-events: none;
   }
@@ -7694,14 +7696,14 @@ import.meta.css = /* css */ `
     position: absolute;
     top: -25px;
     left: 0;
-    font-size: 11px;
-    font-weight: bold;
+    padding: 2px 6px;
     color: rgba(0, 150, 255, 1);
+    font-weight: bold;
+    font-size: 11px;
+    white-space: nowrap;
     background: rgba(255, 255, 255, 0.9);
-    padding: 2px 6px;
-    border-radius: 3px;
     border: 1px solid rgba(0, 150, 255, 0.7);
-    white-space: nowrap;
+    border-radius: 3px;
     pointer-events: none;
   }
 `;
@@ -8359,7 +8361,7 @@ const createDragToMoveGestureController = ({
     { element, referenceElement, elementToMove, convertScrollablePosition },
   ) => {
     const direction = dragGesture.gestureInfo.direction;
-    dragGesture.gestureInfo.name;
+    // const dragGestureName = dragGesture.gestureInfo.name;
     const scrollContainer = dragGesture.gestureInfo.scrollContainer;
     const elementImpacted = elementToMove || element;
     const translateXAtGrab = dragStyleController.getUnderlyingValue(
@@ -8416,7 +8418,9 @@ const createDragToMoveGestureController = ({
             autoScrollArea,
             {
               scrollContainer,
-              direction},
+              direction,
+              // dragGestureName,
+            },
           );
         }
         if (autoScrollAreaPadding > 0) {
@@ -8869,10 +8873,10 @@ const getWidth = (element) => {
 installImportMetaCss(import.meta);
 import.meta.css = /* css */ `
   [data-position-sticky-placeholder] {
-    opacity: 0 !important;
     position: static !important;
     width: auto !important;
     height: auto !important;
+    opacity: 0 !important;
   }
 `;
@@ -9989,7 +9993,6 @@ const createTransition = ({
               `Debug breakpoint hit at ${(breakpoint * 100).toFixed(1)}% progress`,
             );
             const notifyDebuggerEnd = notifyDebuggerStart();
-            debugger;
             notifyDebuggerEnd();
           }
           if (effect === "pause") {
@@ -11613,7 +11616,7 @@ const initFlexDetailsSet = (
     }
   };
-  const applyAllocatedSpaces = (resizeDetails) => {
+  const applyAllocatedSpaces = ({ reason, animated }) => {
     const changeSet = new Set();
     let maxChange = 0;
@@ -11621,9 +11624,8 @@ const initFlexDetailsSet = (
       const allocatedSpace = allocatedSpaceMap.get(child);
       const allocatedSize = spaceToSize(allocatedSpace, child);
       const space = spaceMap.get(child);
-      const size = spaceToSize(space, child);
+      const size = spaceToSize(space === undefined ? 0 : space, child);
       const sizeChange = Math.abs(size - allocatedSize);
       if (size === allocatedSize) {
         continue;
       }
@@ -11656,16 +11658,18 @@ const initFlexDetailsSet = (
     }
     // Don't animate if changes are too small (avoids imperceptible animations that hide scrollbars)
-    const shouldAnimate =
-      resizeDetails.animated && maxChange >= ANIMATION_THRESHOLD_PX;
+    const shouldAnimate = animated && maxChange >= ANIMATION_THRESHOLD_PX;
-    if (debug && resizeDetails.animated && !shouldAnimate) {
+    if (debug && animated && !shouldAnimate) {
       console.debug(
         `🚫 Skipping animation: max change ${maxChange.toFixed(2)}px < ${ANIMATION_THRESHOLD_PX}px threshold`,
       );
     }
     if (!shouldAnimate) {
+      if (debug) {
+        console.debug(`Applying size changes without animation`);
+      }
       const sizeChangeEntries = [];
       for (const { element, target, sideEffect } of changeSet) {
         element.style.height = `${target}px`;
@@ -11675,19 +11679,26 @@ const initFlexDetailsSet = (
         }
         sizeChangeEntries.push({ element, value: target });
       }
-      onSizeChange?.(sizeChangeEntries, resizeDetails);
+      onSizeChange?.(sizeChangeEntries, { reason, animated });
       return;
     }
+    if (debug) {
+      console.debug(`Start animating size changes`);
+    }
     // Create height animations for each element in changeSet
     const transitions = Array.from(changeSet).map(({ element, target }) => {
       const transition = createHeightTransition(element, target, {
         duration: HEIGHT_TRANSITION_DURATION,
+        // because we also set inline height when we don't want animation and it should win
+        // we could also commit styles for animation or cancel any animation so that when we explicitely set height
+        // sync the transition gets overriden
+        styleSynchronizer: "inline_style",
       });
       return transition;
     });
-    const transition = transitionController.animate(transitions, {
+    const transition = transitionController.update(transitions, {
       onChange: (changeEntries, isLast) => {
         // Apply side effects for each animated element
         for (const { transition, value } of changeEntries) {
@@ -11711,7 +11722,7 @@ const initFlexDetailsSet = (
           );
           onSizeChange(
             sizeChangeEntries,
-            isLast ? { ...resizeDetails, animated: false } : resizeDetails,
+            isLast ? { reason, animated: false } : { reason, animated },
           );
         }
       },
@@ -11956,23 +11967,23 @@ const initFlexDetailsSet = (
     }
   };
-  const updateSpaceDistribution = (resizeDetails) => {
+  const updateSpaceDistribution = ({ reason, animated }) => {
     if (debug) {
-      console.group(`updateSpaceDistribution: ${resizeDetails.reason}`);
+      console.group(`updateSpaceDistribution: ${reason}`);
     }
     prepareSpaceDistribution();
-    distributeAvailableSpace(resizeDetails.reason);
+    distributeAvailableSpace(reason);
     distributeRemainingSpace({
       childToGrow: openedDetailsArray[openedDetailsArray.length - 1],
       childToShrinkFrom: lastChild,
     });
     if (
-      resizeDetails.reason === "initial_space_distribution" ||
-      resizeDetails.reason === "content_change"
+      reason === "initial_space_distribution" ||
+      reason === "content_change"
     ) {
       spaceMap.clear(); // force to set size at start
     }
-    applyAllocatedSpaces(resizeDetails);
+    applyAllocatedSpaces({ reason, animated });
     saveCurrentSizeAsRequestedSizes();
     if (debug) {
       console.groupEnd();
@@ -12013,6 +12024,19 @@ const initFlexDetailsSet = (
       }
     }
     if (someNew || someOld) {
+      for (const child of container.children) {
+        if (!child.dispatchEvent) {
+          // ignore text nodes
+          continue;
+        }
+        child.dispatchEvent(
+          new CustomEvent("resizablechange", {
+            detail: {
+              resizable: resizableDetailsIdSet.has(child.id),
+            },
+          }),
+        );
+      }
       onResizableDetailsChange?.(resizableDetailsIdSet);
     }
   };
@@ -12229,11 +12253,18 @@ const initFlexDetailsSet = (
         if (currentAllocatedSpaceMap) {
           allocatedSpaceMap = currentAllocatedSpaceMap;
           saveCurrentSizeAsRequestedSizes({ replaceExistingAttributes: true });
-          if (onRequestedSizeChange) {
-            for (const [child, allocatedSpace] of allocatedSpaceMap) {
-              const size = spaceToSize(allocatedSpace, child);
+          for (const [child, allocatedSpace] of allocatedSpaceMap) {
+            const size = spaceToSize(allocatedSpace, child);
+            if (onRequestedSizeChange) {
               onRequestedSizeChange(child, size);
             }
+            child.dispatchEvent(
+              new CustomEvent("resizeend", {
+                detail: {
+                  size,
+                },
+              }),
+            );
           }
           onMouseResizeEnd?.();
         }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "description": "DOM utilities for writing frontend code",
   "repository": {
     "type": "git",
@@ -18,8 +18,13 @@
   "type": "module",
   "exports": {
     ".": {
-      "dev:jsenv": "./index.js",
-      "default": "./dist/jsenv_dom.js"
+      "node": {
+        "default": "./index_node.js"
+      },
+      "browser": {
+        "dev:jsenv": "./index.js",
+        "default": "./dist/jsenv_dom.js"
+      }
     },
     "./details_content_full_height": "./src/size/details_content_full_height.js",
     "./details_toggle_animation": "./src/details_toggle_animation.js",
@@ -37,7 +42,7 @@
     "@jsenv/core": "../../../",
     "@jsenv/navi": "../navi",
     "@jsenv/snapshot": "../../tooling/snapshot",
-    "@preact/signals": "2.5.0",
+    "@preact/signals": "2.8.1",
     "preact": "11.0.0-beta.0"
   },
   "publishConfig": {