coonlink-luxy 26.1.3 → 26.1.6

package/README.md

@@ -0,0 +1,38 @@
+# 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>
+```
+
+`#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
+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()
+```

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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;AAyOD,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED,wBAAgB,uBAAuB,IAAI,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAEjF"}

package/dist/index.js

@@ -46,12 +46,27 @@ class Engine {
         this.resizeObserver = null;
         this.pauseForOverlay = false;
         this.overlayObserver = null;
-        this.onScrollResume = () => { this.ensureTicking(); };
+        this.onScrollResume = () => {
+            if (Math.abs(getScrollTop() - this.wrapperOffset) > 0.5)
+                this.ensureTicking();
+        };
         this.onResize = () => {
             if (!this.wrapper)
                 return;
             const h = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
             document.body.style.height = `${h}px`;
+            if (this.scrollRaf === 0) {
+                const newST = getScrollTop();
+                const diff = Math.abs(newST - this.wrapperOffset);
+                if (diff > 0 && diff < 5) {
+                    const maxOff = Math.max(0, h - window.innerHeight);
+                    this.wrapperOffset = Math.max(0, Math.min(Math.round(newST), maxOff));
+                    this.scrollTop = newST;
+                    const y = Math.round(-this.wrapperOffset * 100) / 100;
+                    this.wrapper.style.transform = `translate3d(0, ${y}px, 0)`;
+                    return;
+                }
+            }
             this.ensureTicking();
         };
     }
@@ -96,6 +111,8 @@ class Engine {
             for (let i = 0; i < this.targets.length; i++)
                 this.targetsUpdate(this.targets[i]);
             if (this.isSettled()) {
+                this.wrapperOffset = Math.round(this.scrollTop);
+                this.wrapperUpdate();
                 this.scrollRaf = 0;
                 window.addEventListener('scroll', this.onScrollResume, { passive: true });
                 return;
@@ -125,11 +142,7 @@ class Engine {
         if (!this.settings.respectOpenModalOverlay)
             return;
         this.pauseForOverlay = hasOpenModalOverlay();
-        this.overlayObserver = new MutationObserver(() => {
-            this.syncOverlayPause();
-            if (!this.pauseForOverlay)
-                this.ensureTicking();
-        });
+        this.overlayObserver = new MutationObserver(() => this.syncOverlayPause());
         this.overlayObserver.observe(document.body, {
             childList: true, subtree: true, attributes: true, attributeFilter: ['data-state'],
         });

package/package.json

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