stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/overflow_indicator_controller.js

@@ -2,6 +2,61 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/overflow_indicator_controller.ts
 
+// src/utils/blur_deferral.ts
+var BlurDeferral = class {
+  /** Elements currently holding an update back, mapped to their `blur` listener. */
+  #pending = /* @__PURE__ */ new Map();
+  /** Called after a pending element blurs and has been detached. */
+  #onRelease;
+  /** @param onRelease - Invoked once `element` actually blurs; never on `release`. */
+  constructor(onRelease) {
+    this.#onRelease = onRelease;
+  }
+  /** Number of elements currently holding an update back. */
+  get size() {
+    return this.#pending.size;
+  }
+  /** Snapshot of the pending elements, safe to iterate while releasing them. */
+  get elements() {
+    return [...this.#pending.keys()];
+  }
+  /** Whether `element` is currently holding an update back. */
+  has(element) {
+    return this.#pending.has(element);
+  }
+  /** Holds an update back until `element` blurs. Idempotent (no stacked listeners). */
+  defer(element) {
+    if (this.#pending.has(element)) return;
+    const onBlur = () => {
+      this.#detach(element);
+      this.#onRelease(element);
+    };
+    this.#pending.set(element, onBlur);
+    element.addEventListener("blur", onBlur);
+  }
+  /** Defers `element` as the only pending entry, cancelling any others. */
+  deferOnly(element) {
+    for (const pending of this.elements) {
+      if (pending !== element) this.#detach(pending);
+    }
+    this.defer(element);
+  }
+  /** Cancels `element`'s deferral without completing it; no-ops when not pending. */
+  release(element) {
+    this.#detach(element);
+  }
+  /** Cancels every deferral without completing any of them. */
+  releaseAll() {
+    for (const element of this.elements) this.#detach(element);
+  }
+  /** Removes the `blur` listener for `element` and forgets it. */
+  #detach(element) {
+    const onBlur = this.#pending.get(element);
+    if (onBlur) element.removeEventListener("blur", onBlur);
+    this.#pending.delete(element);
+  }
+};
+
 // src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
@@ -58,7 +113,30 @@ var LayoutObserver = class {
   }
 };
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+function logicalScrollMetrics(element, horizontal) {
+  const max = Math.max(
+    0,
+    horizontal ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight
+  );
+  const raw = horizontal ? element.scrollLeft : element.scrollTop;
+  const position = horizontal && isRtl(element) ? -raw : raw;
+  return { position: Math.min(max, Math.max(0, position)), max };
+}
+function physicalScrollDelta(element, horizontal, logicalDelta) {
+  return horizontal && isRtl(element) ? -logicalDelta : logicalDelta;
+}
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/overflow_indicator_controller.ts
+var DIRECTION_BUTTON_SELECTOR = "[data-stimeo--overflow-indicator-direction-param]";
 var OverflowIndicatorController = class extends Controller {
   static targets = ["viewport"];
   static values = {
@@ -67,38 +145,59 @@ var OverflowIndicatorController = class extends Controller {
   };
   static actions = ["scrollByPage", "update"];
   static events = ["change"];
-  #layout = new LayoutObserver(() => this.update());
+  #layout = new LayoutObserver(() => {
+    if (this.#connected) this.update();
+  });
+  #connected = false;
+  #observedViewport = null;
+  #observedContent = /* @__PURE__ */ new Set();
   #mutationObserver = null;
+  /**
+   * Boundary buttons whose native `disabled` is held back while they hold focus.
+   *
+   * Completing the deferral is what actually disables the button, so the release
+   * callback — unlike {@link #cancelPendingButtonDisable} — applies it.
+   */
+  #pendingButtonDisables = new BlurDeferral((button) => {
+    this.#restorePendingMarkers(button);
+    if (!button.disabled) this.#disableButton(button);
+  });
   /** Last reported room, so `change` fires only on transitions. */
   #state = null;
   connect() {
-    if (!this.hasViewportTarget) return;
-    this.#layout.observe(this.viewportTarget);
-    this.#layout.observeViewport();
-    if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.update());
-      this.#mutationObserver.observe(this.viewportTarget, {
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
-    this.update();
+    this.#connected = true;
+    this.#syncViewport();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObservingViewport();
     this.#layout.disconnect();
-    this.#mutationObserver?.disconnect();
-    this.#mutationObserver = null;
+    this.#clearPendingButtonDisables();
     this.#state = null;
   }
-  /** Re-measures remaining scroll room and reflects the state hooks. Public so it can be wired to the viewport's `scroll`. */
+  viewportTargetConnected() {
+    this.#syncViewport();
+  }
+  viewportTargetDisconnected(viewport) {
+    if (this.#observedViewport === viewport) this.#stopObservingViewport();
+    this.#syncViewport();
+  }
+  orientationValueChanged() {
+    if (this.#connected) this.update();
+  }
+  thresholdValueChanged() {
+    if (this.#connected) this.update();
+  }
+  /**
+   * Re-measures remaining scroll room and reflects the state hooks.
+   * Public so it can be wired to the viewport's `scroll`.
+   */
   update() {
     if (!this.hasViewportTarget) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
-    const t = this.thresholdValue;
-    const scrollPos = horizontal ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontal ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const t = this.#threshold;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontal);
     const start = scrollPos > t;
     const end = scrollPos < maxScroll - t;
     vp.setAttribute("data-overflow-start", start ? "true" : "false");
@@ -114,11 +213,13 @@ var OverflowIndicatorController = class extends Controller {
     if (!this.hasViewportTarget) return;
     const direction = this.#directionFromEvent(event);
     if (!direction) return;
+    if (this.#state && !this.#state[direction]) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
     const page = horizontal ? vp.clientWidth : vp.clientHeight;
-    const delta = direction === "start" ? -page : page;
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const logicalDelta = direction === "start" ? -page : page;
+    const delta = physicalScrollDelta(vp, horizontal, logicalDelta);
+    const behavior = prefersReducedMotion() ? "instant" : "smooth";
     if (horizontal) {
       vp.scrollBy({ left: delta, behavior });
     } else {
@@ -127,10 +228,16 @@ var OverflowIndicatorController = class extends Controller {
   }
   /** Mirrors remaining room onto any direction buttons by toggling `disabled`. */
   #syncButtons(start, end) {
-    const buttons = this.element.querySelectorAll(
-      "[data-stimeo--overflow-indicator-direction-param]"
-    );
+    for (const button of this.#pendingButtonDisables.elements) {
+      if (!button.isConnected || button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        this.#cancelPendingButtonDisable(button);
+      }
+    }
+    const buttons = this.element.querySelectorAll(DIRECTION_BUTTON_SELECTOR);
     for (const button of buttons) {
+      if (button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        continue;
+      }
       const direction = button.getAttribute("data-stimeo--overflow-indicator-direction-param");
       if (direction === "start") this.#toggleButton(button, start);
       else if (direction === "end") this.#toggleButton(button, end);
@@ -143,7 +250,11 @@ var OverflowIndicatorController = class extends Controller {
    * whole control disabled) is therefore never blindly re-enabled.
    */
   #toggleButton(button, hasRoom) {
+    if (!this.#pendingButtonDisables.has(button) && button.hasAttribute("data-overflow-indicator-pending-disabled")) {
+      this.#cancelPendingButtonDisable(button);
+    }
     if (hasRoom) {
+      this.#cancelPendingButtonDisable(button);
       if (button.hasAttribute("data-overflow-indicator-disabled")) {
         button.disabled = false;
         button.removeAttribute("data-overflow-indicator-disabled");
@@ -151,17 +262,125 @@ var OverflowIndicatorController = class extends Controller {
       return;
     }
     if (button.disabled) return;
+    if (document.activeElement === button) {
+      this.#deferButtonDisable(button);
+    } else {
+      this.#disableButton(button);
+    }
+  }
+  /**
+   * Keeps a boundary button focusable until native blur, exposing its temporary
+   * inoperability with `aria-disabled` and making its action a no-op meanwhile.
+   */
+  #deferButtonDisable(button) {
+    if (this.#pendingButtonDisables.has(button)) return;
+    button.setAttribute("data-overflow-indicator-pending-disabled", "");
+    button.setAttribute(
+      "data-overflow-indicator-aria-disabled",
+      button.getAttribute("aria-disabled") ?? ""
+    );
+    button.setAttribute("aria-disabled", "true");
+    this.#pendingButtonDisables.defer(button);
+  }
+  #disableButton(button) {
     button.disabled = true;
     button.setAttribute("data-overflow-indicator-disabled", "");
   }
+  /** Cancels a pending disable without applying it, restoring the displaced state. */
+  #cancelPendingButtonDisable(button) {
+    this.#pendingButtonDisables.release(button);
+    this.#restorePendingMarkers(button);
+  }
+  /**
+   * Drops the pending marker and gives back the `aria-disabled` it displaced.
+   *
+   * Reads the displaced value from the DOM rather than memory: a Turbo snapshot is
+   * cloned before `disconnect()` runs, so a restored page can arrive with markers
+   * this instance never wrote.
+   */
+  #restorePendingMarkers(button) {
+    button.removeAttribute("data-overflow-indicator-pending-disabled");
+    const displaced = button.getAttribute("data-overflow-indicator-aria-disabled");
+    if (displaced !== null) {
+      button.removeAttribute("data-overflow-indicator-aria-disabled");
+      if (button.getAttribute("aria-disabled") === "true") {
+        if (displaced === "") button.removeAttribute("aria-disabled");
+        else button.setAttribute("aria-disabled", displaced);
+      }
+    }
+  }
+  #clearPendingButtonDisables() {
+    for (const button of this.#pendingButtonDisables.elements) {
+      this.#cancelPendingButtonDisable(button);
+    }
+  }
+  /** Moves resize/mutation/load observation to the current viewport target. */
+  #syncViewport() {
+    if (!this.#connected) return;
+    const next = this.hasViewportTarget ? this.viewportTarget : null;
+    if (next === this.#observedViewport) return;
+    this.#stopObservingViewport();
+    if (!next) return;
+    this.#observedViewport = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#onContentLoad, true);
+    this.#syncContentObservation();
+    if (typeof MutationObserver !== "undefined") {
+      this.#mutationObserver = new MutationObserver(() => {
+        if (!this.#connected || this.#observedViewport !== next) return;
+        this.#syncContentObservation();
+        this.update();
+      });
+      this.#mutationObserver.observe(this.element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ["class", "style", "hidden"]
+      });
+    }
+    this.#state = null;
+    this.update();
+  }
+  /** Observes direct content boxes whose resize can change the viewport's scroll extent. */
+  #syncContentObservation() {
+    const next = new Set(this.#observedViewport?.children ?? []);
+    for (const content of this.#observedContent) {
+      if (!next.has(content)) {
+        this.#layout.unobserve(content);
+        this.#observedContent.delete(content);
+      }
+    }
+    for (const content of next) {
+      if (!this.#observedContent.has(content)) {
+        this.#observedContent.add(content);
+        this.#layout.observe(content);
+      }
+    }
+  }
+  #stopObservingViewport() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#observedViewport?.removeEventListener("load", this.#onContentLoad, true);
+    if (this.#observedViewport) this.#layout.unobserve(this.#observedViewport);
+    for (const content of this.#observedContent) this.#layout.unobserve(content);
+    this.#observedContent.clear();
+    this.#observedViewport = null;
+    this.#layout.unobserveViewport();
+  }
+  #onContentLoad = () => {
+    if (this.#connected) this.update();
+  };
+  get #threshold() {
+    const value = this.thresholdValue;
+    return Number.isFinite(value) ? Math.max(0, value) : 1;
+  }
   #directionFromEvent(event) {
     const params = event.params;
     const direction = params?.direction;
     return direction === "start" || direction === "end" ? direction : null;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { OverflowIndicatorController };