@threadlabs/looma 0.15.5 → 0.15.7

package/components/ui-tree/ui-tree.html

@@ -13,8 +13,8 @@
     >The deepest level a drag may produce, counting the top level as 1. A drop that would place the dragged item, or any item beneath it, deeper than this is
       refused and reported as reorder-rejected. 0 means no limit.</prop>
     <prop name="marquee" type="boolean" default="false"
-    >Scrolls a name too long for its row while that row is hovered or focused, then puts it back. Off by default: a tree of names that fit should not move. An
-      item may set its own marquee to opt in or out on its own.</prop>
+    >Scrolls a name too long for its row while that row is hovered or keyboard focused, rests at the end, then scrolls it again. Off by default: a tree of names
+      that fit should not move. An item may set its own marquee to opt in or out on its own.</prop>
     <event
       name="reorder"
       type="object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })"

package/components/ui-tree-item/ui-tree-item.html

@@ -35,8 +35,9 @@
     >Marks the item selected: it sets aria-selected and highlights the row. This is controlled state; respond to the parent Tree's select request by updating
       it.</prop>
     <prop name="marquee" type="boolean" default="false"
-    >Scrolls a name too long for its row while the row is hovered or focused, then puts it back. Off by default: a tree of short names should not move, and a
-      product decides whether reading the whole name matters more than a still list.</prop>
+    >Scrolls a name too long for its row while a pointer hovers the row or keyboard focus is in it, rests at the end, then scrolls it again from the start. A
+      touch does not start it. Off by default: a tree of short names should not move, and a product decides whether reading the whole name matters more than a
+      still list.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Makes the item unavailable: faded, skipped by keyboard navigation, unable to expand or be dragged, and closed to drops inside it.</prop>
     <state name="internalExpanded" :value="false"></state>
@@ -364,27 +365,27 @@
       );
     }
 
-    /* A hovered row reads its whole name: the label slides far enough to show the end, waits
-       there, and comes back. Only when it actually overflows — the controller measures by how
+    /* A hovered row reads its whole name: the label slides far enough to show the end, rests
+       there, and starts again. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
        and a duration from it, so every name moves at the same speed. */
     .row[data-ui-marquee] > .label > .label-text {
-      /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
-         and forth under the pointer is harder to read than one that arrives and holds. */
+      /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
+         long enough to read rather than sliding back and forth. */
       animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
       will-change: transform;
     }
 
     /* This comes after the hover fade, which it replaces at the same specificity. While the name
        slides, the label reaches back under the icon (the controller measures how far) with its text
-       where it was, and fades out across that stretch, gone by the icon's middle: the name slips
-       under the icon rather than stopping at a hard edge beside it. */
+       where it was, and fades out across the gap before the icon, fully gone where the icon begins
+       to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
       margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
       padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)));
       mask-image: linear-gradient(
         to right,
-        transparent calc(var(--_marquee-lead, 0px) / 2),
+        transparent var(--_marquee-icon-width, 0px),
         #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
@@ -394,7 +395,7 @@
     .row[data-ui-marquee] > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
-        transparent calc(var(--_marquee-lead, 0px) / 2),
+        transparent var(--_marquee-icon-width, 0px),
         #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))

package/components/ui-tree-item/ui-tree-item.js

@@ -105,6 +105,10 @@ export default function controller(host) {
    * overlay the label's end rather than taking width from it.
    */
   const MARQUEE_SPEED = 36; // CSS pixels per second, for every name: a clamped duration made short slides crawl.
+  const MARQUEE_REST = 1800; // Milliseconds the name holds at its end before the next pass.
+  let marqueeRestart;
+  let pointerHover = false;
+  let keyboardFocus = false;
   // The tree sets this for its items; an item's own prop overrides it either way.
   const marqueeWanted = () => host.state.marquee
     || getComputedStyle(element).getPropertyValue("--_ui-default-tree-item-marquee").trim() === "1";
@@ -122,21 +126,60 @@ export default function controller(host) {
     if (distance <= 0) return;
     const lead = icon?.width ? (rightToLeft ? icon.right - cell.right : cell.left - icon.left) : 0;
     row.style.setProperty("--_marquee-lead", `${Math.max(0, lead)}px`);
+    row.style.setProperty("--_marquee-icon-width", `${icon?.width ?? 0}px`);
     row.style.setProperty("--_marquee-distance", `${rightToLeft ? distance : -distance}px`);
     row.style.setProperty("--_marquee-duration", `${(distance / MARQUEE_SPEED).toFixed(2)}s`);
     row.dataset.uiMarquee = "";
   };
   const stopMarquee = () => {
+    clearTimeout(marqueeRestart);
     delete row.dataset.uiMarquee;
     row.style.removeProperty("--_marquee-lead");
+    row.style.removeProperty("--_marquee-icon-width");
     row.style.removeProperty("--_marquee-distance");
     row.style.removeProperty("--_marquee-duration");
   };
-  // Pointer and focus both count: a keyboard walk through a tree reads the same names.
-  row.addEventListener("pointerenter", startMarquee);
-  row.addEventListener("pointerleave", stopMarquee);
-  row.addEventListener("focusin", startMarquee);
-  row.addEventListener("focusout", stopMarquee);
+  // A hovering pointer and keyboard focus both count: a keyboard walk through a tree reads the same
+  // names. A touch does not, so a swipe down the list, or the focus a tap leaves, never starts it.
+  const onPointerEnter = (event) => {
+    if (event.pointerType === "touch") return;
+    pointerHover = true;
+    startMarquee();
+  };
+  const onPointerLeave = (event) => {
+    if (event.pointerType === "touch") return;
+    pointerHover = false;
+    if (!keyboardFocus) stopMarquee();
+  };
+  // Keyboard focus lands on the item itself as the tree roves, or on a control in its row; a nested
+  // item's focus is that item's own.
+  const ownFocus = (event) => event.target === element || row.contains(event.target);
+  const onFocusIn = (event) => {
+    if (!ownFocus(event) || !event.target.matches?.(":focus-visible")) return;
+    keyboardFocus = true;
+    startMarquee();
+  };
+  const onFocusOut = (event) => {
+    if (!ownFocus(event)) return;
+    keyboardFocus = false;
+    if (!pointerHover) stopMarquee();
+  };
+  // After a rest at the end, the name goes again from the start for as long as it is being read.
+  const onMarqueeEnd = (event) => {
+    if (event.target !== labelText || !("uiMarquee" in row.dataset)) return;
+    clearTimeout(marqueeRestart);
+    marqueeRestart = setTimeout(() => {
+      if (!pointerHover && !keyboardFocus) return;
+      delete row.dataset.uiMarquee;
+      void labelText.offsetWidth; // Flushes the finished animation, so the next one starts over.
+      row.dataset.uiMarquee = "";
+    }, MARQUEE_REST);
+  };
+  row.addEventListener("pointerenter", onPointerEnter);
+  row.addEventListener("pointerleave", onPointerLeave);
+  element.addEventListener("focusin", onFocusIn);
+  element.addEventListener("focusout", onFocusOut);
+  labelText?.addEventListener("animationend", onMarqueeEnd);
 
   // The label's fade has to end where the controls begin, and only the controls know their width.
   const actionsSize = new ResizeObserver(([entry]) => {
@@ -146,13 +189,15 @@ export default function controller(host) {
   if (actions) actionsSize.observe(actions);
 
   return () => {
+    clearTimeout(marqueeRestart);
     stop?.();
     observer.disconnect();
     actionsSize.disconnect();
-    row.removeEventListener("pointerenter", startMarquee);
-    row.removeEventListener("pointerleave", stopMarquee);
-    row.removeEventListener("focusin", startMarquee);
-    row.removeEventListener("focusout", stopMarquee);
+    row.removeEventListener("pointerenter", onPointerEnter);
+    row.removeEventListener("pointerleave", onPointerLeave);
+    element.removeEventListener("focusin", onFocusIn);
+    element.removeEventListener("focusout", onFocusOut);
+    labelText?.removeEventListener("animationend", onMarqueeEnd);
     element.removeEventListener("ui-tree-auto-expand", onAutoExpand);
     element.removeEventListener("ui-tree-structure-sync", onStructure);
     element.removeEventListener("ui-tree-roving-tab-stop", onRoving);