@fluid-topics/ft-wc-utils 1.1.100 → 1.1.101

package/build/FluidTopicsScrollHelper.d.ts

@@ -0,0 +1,22 @@
+import { Optional } from "./generic-types";
+type FluidTopicsScrollHelperInterface = {
+    lock<T extends Element>(manager: Object, scrollable: Optional<T>): T | undefined;
+    release(manager: Object, scrollable: Optional<Element>): void;
+    findFirstScrollableParent(element: HTMLElement): HTMLElement;
+    getAbsoluteScrollOffset(scrollable: HTMLElement, target: HTMLElement): number;
+    scrollIntoViewIfPossible(element: HTMLElement, options?: FtScrollIntoViewOptions): void;
+};
+declare global {
+    interface Window {
+        FluidTopicsScrollHelper: FluidTopicsScrollHelperInterface;
+    }
+}
+export interface FtScrollIntoViewOptions {
+    behavior?: ScrollIntoViewOptions["behavior"] | "instant";
+    /**
+     * position can be a number from 0 (=== "start") to 1 (=== "end").
+     */
+    position?: ScrollIntoViewOptions["block"] | number;
+}
+export declare const scrollHelper: FluidTopicsScrollHelperInterface;
+export {};

package/build/FluidTopicsScrollHelper.js

@@ -0,0 +1,96 @@
+var _a;
+import { minmax } from "./helpers";
+const locks = new Map();
+class FluidTopicsScrollHelper {
+    lock(manager, scrollable) {
+        if (scrollable) {
+            const existingManager = locks.get(scrollable);
+            if (existingManager == null || existingManager === manager) {
+                locks.set(scrollable, manager);
+                return scrollable;
+            }
+        }
+        return undefined;
+    }
+    release(manager, scrollable) {
+        if (scrollable && locks.get(scrollable) === manager) {
+            locks.delete(scrollable);
+        }
+    }
+    findFirstScrollableParent(element) {
+        let scrollableParent;
+        const findScrollableParent = (e) => {
+            var _a;
+            e.stopPropagation();
+            let scrollable, maybeScrollable;
+            for (let target of e.composedPath()) {
+                const element = target;
+                const mayScroll = this.elementCanScroll(element);
+                const definitelyScrolls = mayScroll && element.clientHeight && element.clientHeight < element.scrollHeight;
+                if (definitelyScrolls) {
+                    scrollable = element;
+                    break;
+                }
+                else if (mayScroll && maybeScrollable == null) {
+                    maybeScrollable = element;
+                }
+            }
+            scrollableParent = (_a = scrollable !== null && scrollable !== void 0 ? scrollable : maybeScrollable) !== null && _a !== void 0 ? _a : document.body;
+        };
+        element.addEventListener("find-scrollable-parent", findScrollableParent);
+        element.dispatchEvent(new Event("find-scrollable-parent", { composed: true }));
+        element.removeEventListener("find-scrollable-parent", findScrollableParent);
+        return scrollableParent;
+    }
+    elementCanScroll(element) {
+        try {
+            return ["auto", "scroll"].includes(getComputedStyle(element).overflowY);
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    getAbsoluteScrollOffset(scrollable, target) {
+        let offset = 0;
+        while (target && target.offsetParent !== scrollable.offsetParent) {
+            offset += target.offsetTop;
+            target = target.offsetParent;
+        }
+        return offset + target.offsetTop - scrollable.offsetTop;
+    }
+    computeTopOffsetRatio(position, nearestValue) {
+        if (typeof position === "number") {
+            return position;
+        }
+        switch (position) {
+            case "end":
+                return 1;
+            case "center":
+                return 0.5;
+            case "nearest":
+                return nearestValue;
+            default:
+                return 0;
+        }
+    }
+    scrollIntoViewIfPossible(element, options) {
+        const scrollableParent = this.findFirstScrollableParent(element);
+        if (element && this.lock(this, scrollableParent)) {
+            const targetOffset = this.getAbsoluteScrollOffset(scrollableParent, element);
+            const minScrollTop = targetOffset - scrollableParent.clientHeight + element.clientHeight;
+            const maxScrollTop = targetOffset;
+            const nearestValue = minmax(0, (maxScrollTop - scrollableParent.scrollTop) / (maxScrollTop - minScrollTop), 1);
+            const top = this.computeTopOffsetRatio(options === null || options === void 0 ? void 0 : options.position, nearestValue) * (minScrollTop - maxScrollTop) + maxScrollTop;
+            scrollableParent.scrollTo({
+                behavior: options === null || options === void 0 ? void 0 : options.behavior,
+                top: top
+            });
+        }
+        else {
+            console.warn(`Could not scroll element into view because the scrollable parent is already locked`, element, scrollableParent);
+        }
+        this.release(this, scrollableParent);
+    }
+}
+window.FluidTopicsScrollHelper = (_a = window.FluidTopicsScrollHelper) !== null && _a !== void 0 ? _a : new FluidTopicsScrollHelper();
+export const scrollHelper = window.FluidTopicsScrollHelper;