coonlink-luxy 26.1.1 → 26.1.3

package/dist/index.d.ts

@@ -5,13 +5,12 @@ export type CoonlinkLuxyOptions = {
     targetSpeed?: number;
     targetPercentage?: number;
     respectReducedMotion?: boolean;
+    respectOpenModalOverlay?: boolean;
 };
 export interface CoonlinkLuxyInstance {
     init(options?: CoonlinkLuxyOptions): boolean;
     destroy(): void;
 }
-declare const defaults: Required<CoonlinkLuxyOptions>;
 export declare function createCoonlinkLuxy(): CoonlinkLuxyInstance;
-export declare function getCoonlinkLuxyDefaults(): Readonly<typeof defaults>;
-export {};
+export declare function getCoonlinkLuxyDefaults(): Readonly<Required<CoonlinkLuxyOptions>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAA;IAC5C,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,mBAAmB,CAO3C,CAAA;AAqKD,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED,wBAAgB,uBAAuB,IAAI,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAEnE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,OAAO,IAAI,IAAI,CAAC;CACjB;AA4ND,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED,wBAAgB,uBAAuB,IAAI,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAEjF"}

package/dist/index.js

@@ -1,3 +1,14 @@
+/*
+✨ CoonDev • https://dev.coonlink.com/
+
+ ▄█▄    ████▄ ████▄    ▄   ██▄   ▄███▄      ▄
+ █▀ ▀▄  █   █ █   █     █  █  █  █▀   ▀      █
+ █   ▀  █   █ █   █ ██   █ █   █ ██▄▄   █     █
+ █▄  ▄▀ ▀████ ▀████ █ █  █ █  █  █▄   ▄▀ █    █
+ ▀███▀              █  █ █ ███▀  ▀███▀    █  █
+                    █   ██                 █▐
+                                           ▐
+*/
 const defaults = {
     wrapper: '#luxy',
     targets: '.luxy-el',
@@ -5,18 +16,24 @@ const defaults = {
     targetSpeed: 0.02,
     targetPercentage: 0.1,
     respectReducedMotion: true,
+    respectOpenModalOverlay: true,
 };
+const SETTLE_EPS = 0.12;
+function hasOpenModalOverlay() {
+    return !!document.querySelector('[data-slot="dialog-overlay"][data-state="open"],' +
+        '[data-slot="alert-dialog-overlay"][data-state="open"],' +
+        '[data-slot="sheet-overlay"][data-state="open"]');
+}
 function extend(base, over) {
-    return { ...base, ...(over ?? {}) };
+    return { ...base, ...(over !== null && over !== void 0 ? over : {}) };
 }
 function getScrollTop() {
-    return (window.scrollY ??
-        document.documentElement.scrollTop ??
-        document.body.scrollTop ??
-        0);
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = window.scrollY) !== null && _a !== void 0 ? _a : document.documentElement.scrollTop) !== null && _b !== void 0 ? _b : document.body.scrollTop) !== null && _c !== void 0 ? _c : 0);
 }
 function readSpeedY(el) {
-    return el.getAttribute('data-speed-y') ?? el.getAttribute('data-speed-Y');
+    var _a;
+    return (_a = el.getAttribute('data-speed-y')) !== null && _a !== void 0 ? _a : el.getAttribute('data-speed-Y');
 }
 class Engine {
     constructor() {
@@ -27,25 +44,114 @@ class Engine {
         this.scrollTop = 0;
         this.scrollRaf = 0;
         this.resizeObserver = null;
+        this.pauseForOverlay = false;
+        this.overlayObserver = null;
+        this.onScrollResume = () => { this.ensureTicking(); };
         this.onResize = () => {
             if (!this.wrapper)
                 return;
             const h = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
             document.body.style.height = `${h}px`;
+            this.ensureTicking();
+        };
+    }
+    isSettled() {
+        if (Math.abs(this.scrollTop - this.wrapperOffset) > SETTLE_EPS)
+            return false;
+        const ts = this.settings.targetSpeed;
+        const st = this.scrollTop;
+        for (let i = 0; i < this.targets.length; i++) {
+            const t = this.targets[i];
+            const idealY = st * Number(ts) * Number(t.speedY);
+            if (Math.abs(idealY - t.top) > SETTLE_EPS)
+                return false;
+            if (t.horizontal) {
+                const idealX = st * Number(ts) * Number(t.speedX);
+                if (Math.abs(idealX - t.left) > SETTLE_EPS)
+                    return false;
+            }
+        }
+        return true;
+    }
+    stopScrollLoop() {
+        window.removeEventListener('scroll', this.onScrollResume);
+        if (this.scrollRaf) {
+            window.cancelAnimationFrame(this.scrollRaf);
+            this.scrollRaf = 0;
+        }
+    }
+    ensureTicking() {
+        if (this.pauseForOverlay || !this.wrapper)
+            return;
+        window.removeEventListener('scroll', this.onScrollResume);
+        if (this.scrollRaf !== 0)
+            return;
+        const tick = () => {
+            if (this.pauseForOverlay || !this.wrapper) {
+                this.scrollRaf = 0;
+                return;
+            }
+            this.scrollTop = getScrollTop();
+            this.wrapperUpdate();
+            for (let i = 0; i < this.targets.length; i++)
+                this.targetsUpdate(this.targets[i]);
+            if (this.isSettled()) {
+                this.scrollRaf = 0;
+                window.addEventListener('scroll', this.onScrollResume, { passive: true });
+                return;
+            }
+            this.scrollRaf = window.requestAnimationFrame(tick);
         };
+        this.scrollRaf = window.requestAnimationFrame(tick);
+    }
+    syncOverlayPause() {
+        if (!this.settings.respectOpenModalOverlay) {
+            this.pauseForOverlay = false;
+            return;
+        }
+        const blocked = hasOpenModalOverlay();
+        if (blocked === this.pauseForOverlay)
+            return;
+        this.pauseForOverlay = blocked;
+        if (blocked) {
+            this.stopScrollLoop();
+        }
+        else {
+            this.onResize();
+        }
+    }
+    attachOverlayWatcher() {
+        this.detachOverlayWatcher();
+        if (!this.settings.respectOpenModalOverlay)
+            return;
+        this.pauseForOverlay = hasOpenModalOverlay();
+        this.overlayObserver = new MutationObserver(() => {
+            this.syncOverlayPause();
+            if (!this.pauseForOverlay)
+                this.ensureTicking();
+        });
+        this.overlayObserver.observe(document.body, {
+            childList: true, subtree: true, attributes: true, attributeFilter: ['data-state'],
+        });
+    }
+    detachOverlayWatcher() {
+        var _a;
+        (_a = this.overlayObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.overlayObserver = null;
+        this.pauseForOverlay = false;
     }
     init(options) {
+        var _a;
         this.destroy();
         this.settings = extend(defaults, options);
         if (this.settings.respectReducedMotion) {
-            const mq = window.matchMedia?.('(prefers-reduced-motion: reduce)');
-            if (mq?.matches)
+            const mq = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)');
+            if (mq === null || mq === void 0 ? void 0 : mq.matches)
                 return false;
         }
         const el = document.querySelector(this.settings.wrapper);
-        if (!el || !(el instanceof HTMLElement)) {
+        if (!el || !(el instanceof HTMLElement))
             return false;
-        }
         this.wrapper = el;
         const nodeList = document.querySelectorAll(this.settings.targets);
         const scrollHeight = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
@@ -66,8 +172,7 @@ class Engine {
                 elm: node,
                 offset: offset ? parseInt(offset, 10) || 0 : 0,
                 horizontal: horizontal ? 1 : 0,
-                top: 0,
-                left: 0,
+                top: 0, left: 0,
                 speedX: speedX ? Number(speedX) || 1 : 1,
                 speedY: speedY ? Number(speedY) || 1 : 1,
                 percentage: percentage ? parseInt(percentage, 10) || 0 : 0,
@@ -76,61 +181,48 @@ class Engine {
         this.resizeObserver = new ResizeObserver(this.onResize);
         this.resizeObserver.observe(this.wrapper);
         window.addEventListener('resize', this.onResize);
-        const tickScroll = () => {
-            this.scrollTop = getScrollTop();
-            this.wrapperUpdate();
-            for (let i = 0; i < this.targets.length; i++) {
-                this.targetsUpdate(this.targets[i]);
-            }
-            this.scrollRaf = window.requestAnimationFrame(tickScroll);
-        };
-        this.scrollRaf = window.requestAnimationFrame(tickScroll);
+        this.attachOverlayWatcher();
+        if (!this.pauseForOverlay)
+            this.ensureTicking();
         return true;
     }
     wrapperUpdate() {
         if (!this.wrapper)
             return;
-        this.wrapperOffset +=
-            (this.scrollTop - this.wrapperOffset) * this.settings.wrapperSpeed;
+        this.wrapperOffset += (this.scrollTop - this.wrapperOffset) * this.settings.wrapperSpeed;
+        const maxOffset = Math.max(0, document.body.scrollHeight - window.innerHeight);
+        this.wrapperOffset = Math.max(0, Math.min(this.wrapperOffset, maxOffset));
         const y = Math.round(-this.wrapperOffset * 100) / 100;
         this.wrapper.style.transform = `translate3d(0, ${y}px, 0)`;
     }
     targetsUpdate(target) {
         const ts = this.settings.targetSpeed;
         const tp = this.settings.targetPercentage;
-        target.top +=
-            (this.scrollTop * Number(ts) * Number(target.speedY) - target.top) * tp;
-        target.left +=
-            (this.scrollTop * Number(ts) * Number(target.speedX) - target.left) * tp;
-        const targetOffsetTop = parseInt(String(target.percentage), 10) -
-            target.top -
-            parseInt(String(target.offset), 10);
+        target.top += (this.scrollTop * Number(ts) * Number(target.speedY) - target.top) * tp;
+        target.left += (this.scrollTop * Number(ts) * Number(target.speedX) - target.left) * tp;
+        const targetOffsetTop = parseInt(String(target.percentage), 10) - target.top - parseInt(String(target.offset), 10);
         let offsetY = Math.round(targetOffsetTop * -100) / 100;
         let offsetX = 0;
         if (target.horizontal) {
-            const targetOffsetLeft = parseInt(String(target.percentage), 10) -
-                target.left -
-                parseInt(String(target.offset), 10);
+            const targetOffsetLeft = parseInt(String(target.percentage), 10) - target.left - parseInt(String(target.offset), 10);
             offsetX = Math.round(targetOffsetLeft * -100) / 100;
         }
         target.elm.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
     }
     destroy() {
+        var _a;
+        this.detachOverlayWatcher();
+        this.stopScrollLoop();
         window.removeEventListener('resize', this.onResize);
-        this.resizeObserver?.disconnect();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
-        if (this.scrollRaf) {
-            window.cancelAnimationFrame(this.scrollRaf);
-            this.scrollRaf = 0;
-        }
         document.body.style.height = '';
         if (this.wrapper) {
             this.wrapper.removeAttribute('style');
             this.wrapper = null;
         }
-        for (let i = 0; i < this.targets.length; i++) {
+        for (let i = 0; i < this.targets.length; i++)
             this.targets[i].elm.removeAttribute('style');
-        }
         this.targets = [];
         this.wrapperOffset = 0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coonlink-luxy",
-  "version": "26.1.1",
+  "version": "26.1.3",
   "description": "Inertia scroll and parallax (luxy-style) with fixes for modern browsers, React/Next, and prefers-reduced-motion.",
   "homepage": "https://dev.coonlink.com",
   "keywords": [

package/README.md

@@ -1,36 +0,0 @@
-# coonlink-luxy
-
-Inertia scroll and parallax (same idea as [luxy.js](https://github.com/min30327/luxy.js)), with fixes for modern browsers, `data-speed-y`, and clean `destroy()` for React/Next.
-
-## Install
-
-```bash
-npm i coonlink-luxy
-```
-
-## Markup
-
-```html
-<div id="luxy">
-  <div class="luxy-el" data-speed-y="5" data-offset="-50">…</div>
-</div>
-```
-
-## Usage
-
-```ts
-import { createCoonlinkLuxy } from 'coonlink-luxy'
-
-const luxy = createCoonlinkLuxy()
-luxy.init({
-  wrapper: '#luxy',
-  targets: '.luxy-el',
-  wrapperSpeed: 0.08,
-  targetSpeed: 0.02,
-  targetPercentage: 0.1,
-  respectReducedMotion: true,
-})
-
-// SPA / React unmount:
-luxy.destroy()
-```