coonlink-luxy 26.1.2 → 26.1.3

package/dist/index.d.ts

@@ -11,8 +11,6 @@ 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;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"}
+{"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',
@@ -14,16 +25,15 @@ function hasOpenModalOverlay() {
         '[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() {
@@ -36,9 +46,7 @@ class Engine {
         this.resizeObserver = null;
         this.pauseForOverlay = false;
         this.overlayObserver = null;
-        this.onScrollResume = () => {
-            this.ensureTicking();
-        };
+        this.onScrollResume = () => { this.ensureTicking(); };
         this.onResize = () => {
             if (!this.wrapper)
                 return;
@@ -48,9 +56,8 @@ class Engine {
         };
     }
     isSettled() {
-        if (Math.abs(this.scrollTop - this.wrapperOffset) > SETTLE_EPS) {
+        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++) {
@@ -86,14 +93,11 @@ class Engine {
             }
             this.scrollTop = getScrollTop();
             this.wrapperUpdate();
-            for (let i = 0; i < this.targets.length; i++) {
+            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,
-                });
+                window.addEventListener('scroll', this.onScrollResume, { passive: true });
                 return;
             }
             this.scrollRaf = window.requestAnimationFrame(tick);
@@ -127,29 +131,27 @@ class Engine {
                 this.ensureTicking();
         });
         this.overlayObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['data-state'],
+            childList: true, subtree: true, attributes: true, attributeFilter: ['data-state'],
         });
     }
     detachOverlayWatcher() {
-        this.overlayObserver?.disconnect();
+        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);
@@ -170,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,
@@ -181,53 +182,47 @@ class Engine {
         this.resizeObserver.observe(this.wrapper);
         window.addEventListener('resize', this.onResize);
         this.attachOverlayWatcher();
-        if (!this.pauseForOverlay) {
+        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;
         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.2",
+  "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,38 +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>
-```
-
-`#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()
-```