@nightshadeui/scroller 2.16.0

package/out/ScrollerController.d.ts

@@ -0,0 +1,16 @@
+import type { ScrollerParams } from './types.js';
+export declare class ScrollerController {
+    readonly params: ScrollerParams;
+    private el;
+    private frame;
+    private state;
+    private onScroll;
+    constructor(params?: ScrollerParams);
+    get t(): number;
+    mount(el: HTMLElement): void;
+    unmount(): void;
+    update(): void;
+    private updateNow;
+    private computeT;
+}
+//# sourceMappingURL=ScrollerController.d.ts.map

package/out/ScrollerController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollerController.d.ts","sourceRoot":"","sources":["../src/ScrollerController.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,qBAAa,kBAAkB;IAWvB,QAAQ,CAAC,MAAM,EAAE,cAAc;IATnC,OAAO,CAAC,EAAE,CAA4B;IACtC,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,KAAK,CAEV;IAEH,OAAO,CAAC,QAAQ,CAAuB;gBAG1B,MAAM,GAAE,cAAmB;IAGxC,IAAI,CAAC,WAEJ;IAED,KAAK,CAAC,EAAE,EAAE,WAAW;IAMrB,OAAO;IAMP,MAAM;IAKN,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,QAAQ;CAkBnB"}

package/out/ScrollerController.js

@@ -0,0 +1,48 @@
+import { reactive } from 'vue';
+export class ScrollerController {
+    constructor(params = {}) {
+        this.params = params;
+        this.el = null;
+        this.frame = 0;
+        this.state = reactive({
+            t: 0,
+        });
+        this.onScroll = () => this.update();
+    }
+    get t() {
+        return this.state.t;
+    }
+    mount(el) {
+        this.el = el;
+        window.addEventListener('scroll', this.onScroll, { passive: true });
+        this.update();
+    }
+    unmount() {
+        this.el = null;
+        window.removeEventListener('scroll', this.onScroll);
+        cancelAnimationFrame(this.frame);
+    }
+    update() {
+        cancelAnimationFrame(this.frame);
+        this.frame = requestAnimationFrame(() => this.updateNow());
+    }
+    updateNow() {
+        if (!this.el) {
+            return;
+        }
+        this.state.t = this.computeT(this.el);
+    }
+    computeT(el) {
+        const { start = 0, end = 1, startAnchor = 'top', endAnchor = 'bottom', } = this.params;
+        const h = window.innerHeight;
+        const rect = el.getBoundingClientRect();
+        const startAnchorY = startAnchor === 'top' ? rect.top : rect.top + rect.height;
+        const endAnchorY = endAnchor === 'top' ? rect.top : rect.top + rect.height;
+        const startY = startAnchorY - h * (1 - start);
+        const endY = endAnchorY - h * (1 - end);
+        const extent = endY - startY;
+        const t = (0 - startY) / extent;
+        return Math.min(1, Math.max(0, t));
+    }
+}
+//# sourceMappingURL=ScrollerController.js.map

package/out/ScrollerController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollerController.js","sourceRoot":"","sources":["../src/ScrollerController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAI/B,MAAM,OAAO,kBAAkB;IAU3B,YACa,SAAyB,EAAE;QAA3B,WAAM,GAAN,MAAM,CAAqB;QAThC,OAAE,GAAuB,IAAI,CAAC;QAC9B,UAAK,GAAG,CAAC,CAAC;QACV,UAAK,GAAG,QAAQ,CAAC;YACrB,CAAC,EAAE,CAAC;SACP,CAAC,CAAC;QAEK,aAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;IAIpC,CAAC;IAEJ,IAAI,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACxB,CAAC;IAED,KAAK,CAAC,EAAe;QACjB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpE,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAED,OAAO;QACH,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC;QACf,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACF,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IAC/D,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACX,OAAO;QACX,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC1C,CAAC;IAEO,QAAQ,CAAC,EAAe;QAC5B,MAAM,EACF,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,CAAC,EACP,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,QAAQ,GACvB,GAAG,IAAI,CAAC,MAAM,CAAC;QAChB,MAAM,CAAC,GAAG,MAAM,CAAC,WAAW,CAAC;QAC7B,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QACxC,MAAM,YAAY,GAAG,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;QAC/E,MAAM,UAAU,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3E,MAAM,MAAM,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;QAC9C,MAAM,IAAI,GAAG,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QACxC,MAAM,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;QAC7B,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;QAChC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;CAEJ"}

package/out/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ScrollerController.js';
+export * from './types.js';
+export * from './useScroller.js';
+//# sourceMappingURL=index.d.ts.map

package/out/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/out/index.js

@@ -0,0 +1,4 @@
+export * from './ScrollerController.js';
+export * from './types.js';
+export * from './useScroller.js';
+//# sourceMappingURL=index.js.map

package/out/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/out/types.d.ts

@@ -0,0 +1,8 @@
+export type ScrollerAnchor = 'top' | 'bottom';
+export interface ScrollerParams {
+    start?: number;
+    end?: number;
+    startAnchor?: ScrollerAnchor;
+    endAnchor?: ScrollerAnchor;
+}
+//# sourceMappingURL=types.d.ts.map

package/out/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,SAAS,CAAC,EAAE,cAAc,CAAC;CAC9B"}

package/out/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/out/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/out/useScroller.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollerParams } from './types.js';
+export declare function useScroller(params?: ScrollerParams): {
+    t: import("vue").Ref<number, number>;
+    scrollerEl: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    updateScroller: () => void;
+};
+//# sourceMappingURL=useScroller.d.ts.map

package/out/useScroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroller.d.ts","sourceRoot":"","sources":["../src/useScroller.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB;;;;EAkBtD"}

package/out/useScroller.js

@@ -0,0 +1,22 @@
+import { onMounted, onUnmounted, ref, toRef } from 'vue';
+import { ScrollerController } from './ScrollerController.js';
+export function useScroller(params = {}) {
+    const scrollerEl = ref(null);
+    const scroller = new ScrollerController(params);
+    onMounted(() => {
+        const el = scrollerEl.value;
+        if (!el) {
+            return;
+        }
+        scroller.mount(el);
+    });
+    onUnmounted(() => {
+        scroller.unmount();
+    });
+    return {
+        t: toRef(scroller, 't'),
+        scrollerEl,
+        updateScroller: () => scroller.update(),
+    };
+}
+//# sourceMappingURL=useScroller.js.map

package/out/useScroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroller.js","sourceRoot":"","sources":["../src/useScroller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,MAAM,UAAU,WAAW,CAAC,SAAyB,EAAE;IACnD,MAAM,UAAU,GAAG,GAAG,CAAqB,IAAI,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,IAAI,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,EAAE,EAAE,CAAC;YACN,OAAO;QACX,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IACH,WAAW,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IACH,OAAO;QACH,CAAC,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC;QACvB,UAAU;QACV,cAAc,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE;KAC1C,CAAC;AACN,CAAC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@nightshadeui/scroller",
+    "version": "2.16.0",
+    "description": "Scroll progress composable for Nightshade Vue apps",
+    "author": "Boris Okunskiy",
+    "license": "ISC",
+    "type": "module",
+    "sideEffects": false,
+    "exports": {
+        ".": {
+            "types": "./out/index.d.ts",
+            "import": "./out/index.js",
+            "default": "./out/index.js"
+        },
+        "./src": {
+            "types": "./src/index.ts",
+            "import": "./src/index.ts",
+            "default": "./src/index.ts"
+        }
+    },
+    "files": [
+        "out",
+        "src"
+    ],
+    "scripts": {
+        "build": "tsc -b"
+    },
+    "peerDependencies": {
+        "vue": "^3.5.22"
+    }
+}

package/src/ScrollerController.ts

@@ -0,0 +1,65 @@
+import { reactive } from 'vue';
+
+import type { ScrollerParams } from './types.js';
+
+export class ScrollerController {
+
+    private el: HTMLElement | null = null;
+    private frame = 0;
+    private state = reactive({
+        t: 0,
+    });
+
+    private onScroll = () => this.update();
+
+    constructor(
+        readonly params: ScrollerParams = {},
+    ) {}
+
+    get t() {
+        return this.state.t;
+    }
+
+    mount(el: HTMLElement) {
+        this.el = el;
+        window.addEventListener('scroll', this.onScroll, { passive: true });
+        this.update();
+    }
+
+    unmount() {
+        this.el = null;
+        window.removeEventListener('scroll', this.onScroll);
+        cancelAnimationFrame(this.frame);
+    }
+
+    update() {
+        cancelAnimationFrame(this.frame);
+        this.frame = requestAnimationFrame(() => this.updateNow());
+    }
+
+    private updateNow() {
+        if (!this.el) {
+            return;
+        }
+        this.state.t = this.computeT(this.el);
+    }
+
+    private computeT(el: HTMLElement) {
+        const {
+            start = 0,
+            end = 1,
+            startAnchor = 'top',
+            endAnchor = 'bottom',
+        } = this.params;
+        const h = window.innerHeight;
+        const rect = el.getBoundingClientRect();
+        const startAnchorY = startAnchor === 'top' ? rect.top : rect.top + rect.height;
+        const endAnchorY = endAnchor === 'top' ? rect.top : rect.top + rect.height;
+        const startY = startAnchorY - h * (1 - start);
+        const endY = endAnchorY - h * (1 - end);
+        const extent = endY - startY;
+        const t = (0 - startY) / extent;
+        return Math.min(1, Math.max(0, t));
+    }
+
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './ScrollerController.js';
+export * from './types.js';
+export * from './useScroller.js';

package/src/types.ts

@@ -0,0 +1,8 @@
+export type ScrollerAnchor = 'top' | 'bottom';
+
+export interface ScrollerParams {
+    start?: number;
+    end?: number;
+    startAnchor?: ScrollerAnchor;
+    endAnchor?: ScrollerAnchor;
+}

package/src/useScroller.ts

@@ -0,0 +1,24 @@
+import { onMounted, onUnmounted, ref, toRef } from 'vue';
+
+import { ScrollerController } from './ScrollerController.js';
+import type { ScrollerParams } from './types.js';
+
+export function useScroller(params: ScrollerParams = {}) {
+    const scrollerEl = ref<HTMLElement | null>(null);
+    const scroller = new ScrollerController(params);
+    onMounted(() => {
+        const el = scrollerEl.value;
+        if (!el) {
+            return;
+        }
+        scroller.mount(el);
+    });
+    onUnmounted(() => {
+        scroller.unmount();
+    });
+    return {
+        t: toRef(scroller, 't'),
+        scrollerEl,
+        updateScroller: () => scroller.update(),
+    };
+}