coonlink-luxy 26.1.1 → 26.1.2

package/README.md

@@ -16,6 +16,8 @@ npm i coonlink-luxy
 </div>
 ```
 
+`#luxy` gets a CSS `transform` while scrolling. Any child with `position: fixed` would be positioned against that transformed box, not the browser viewport — so pin overlays (modals, toasts, QR widgets) with a **React portal to `document.body`** (or keep them outside `#luxy`).
+
 ## Usage
 
 ```ts

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export type CoonlinkLuxyOptions = {
     targetSpeed?: number;
     targetPercentage?: number;
     respectReducedMotion?: boolean;
+    respectOpenModalOverlay?: boolean;
 };
 export interface CoonlinkLuxyInstance {
     init(options?: CoonlinkLuxyOptions): boolean;

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":["../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;IAC9B,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAClC,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,CAQ3C,CAAA;AAuQD,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED,wBAAgB,uBAAuB,IAAI,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAEnE"}

package/dist/index.js

@@ -5,7 +5,14 @@ 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 ?? {}) };
 }
@@ -27,13 +34,110 @@ 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() {
+        this.overlayObserver?.disconnect();
+        this.overlayObserver = null;
+        this.pauseForOverlay = false;
+    }
     init(options) {
         this.destroy();
         this.settings = extend(defaults, options);
@@ -76,15 +180,10 @@ 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() {
@@ -116,13 +215,11 @@ class Engine {
         target.elm.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
     }
     destroy() {
+        this.detachOverlayWatcher();
+        this.stopScrollLoop();
         window.removeEventListener('resize', this.onResize);
         this.resizeObserver?.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');

package/package.json

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