vevet 2.4.0 → 2.6.0

package/build/types/components/scroll/section/ScrollSectionProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollSectionProgress.d.ts","sourceRoot":"","sources":["../../../../../src/ts/components/scroll/section/ScrollSectionProgress.ts"],"names":[],"mappings":"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"}

package/build/types/index.d.ts

@@ -29,6 +29,7 @@ import { ScrollEventsBase, NScrollEventsBase } from './components/scroll/scrolla
 import { ScrollView, NScrollView } from './components/scroll/scrollable/ScrollView';
 import { SmoothScrollKeyboardPlugin, NSmoothScrollKeyboardPlugin } from './components/scroll/plugins/SmoothScrollKeyboardPlugin';
 import { SmoothScrollDragPlugin, NSmoothScrollDragPlugin } from './components/scroll/plugins/SmoothScrollDragPlugin';
+import { ScrollSectionProgress, NScrollSectionProgress } from './components/scroll/section/ScrollSectionProgress';
 import { SplitText, NSplitText } from './components/text/SplitText';
 import { CustomCursor, NCustomCursor } from './components/cursor/CustomCursor';
 declare const utils: {
@@ -37,5 +38,5 @@ declare const utils: {
     math: typeof math;
     scroll: typeof scroll;
 };
-export { utils, GeneralTypes, Application, NApplication, Viewport, NViewport, PageLoad, NPageLoad, Callbacks, NCallbacks, MutableProp, NMutableProp, Module, NModule, Component, NComponent, Plugin, NPlugin, Page, NPage, WheelHandler, NWheelHandler, AnimationFrame, NAnimationFrame, StaticTimeline, NStaticTimeline, Timeline, NTimeline, Preloader, NPreloader, ProgressPreloader, NProgressPreloader, Dragger, NDragger, DraggerMove, NDraggerMove, DraggerDirection, NDraggerDirection, Ctx2D, NCtx2D, Ctx2DPrerender, NCtx2DPrerender, SmoothScroll, NSmoothScroll, ScrollBar, NScrollBar, ScrollEventsBase, NScrollEventsBase, ScrollView, NScrollView, SmoothScrollKeyboardPlugin, NSmoothScrollKeyboardPlugin, SmoothScrollDragPlugin, NSmoothScrollDragPlugin, SplitText, NSplitText, CustomCursor, NCustomCursor, };
+export { utils, GeneralTypes, Application, NApplication, Viewport, NViewport, PageLoad, NPageLoad, Callbacks, NCallbacks, MutableProp, NMutableProp, Module, NModule, Component, NComponent, Plugin, NPlugin, Page, NPage, WheelHandler, NWheelHandler, AnimationFrame, NAnimationFrame, StaticTimeline, NStaticTimeline, Timeline, NTimeline, Preloader, NPreloader, ProgressPreloader, NProgressPreloader, Dragger, NDragger, DraggerMove, NDraggerMove, DraggerDirection, NDraggerDirection, Ctx2D, NCtx2D, Ctx2DPrerender, NCtx2DPrerender, SmoothScroll, NSmoothScroll, ScrollBar, NScrollBar, ScrollEventsBase, NScrollEventsBase, ScrollView, NScrollView, SmoothScrollKeyboardPlugin, NSmoothScrollKeyboardPlugin, SmoothScrollDragPlugin, NSmoothScrollDragPlugin, ScrollSectionProgress, NScrollSectionProgress, SplitText, NSplitText, CustomCursor, NCustomCursor, };
 //# sourceMappingURL=index.d.ts.map

package/build/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ts/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ts/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vevet",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "VEVET - A JavaScript library",
   "browserslist": [
     "since 2015"

package/src/ts/components/scroll/scrollable/ScrollView.ts

@@ -5,6 +5,7 @@ import onScroll from '../../../utils/listeners/onScroll';
 import { intersectionObserverSupported } from '../../../utils/listeners';
 import clamp from '../../../utils/math/clamp';
 import timeoutCallback from '../../../utils/common/timeoutCallback';
+import { NViewport } from '../../../app/events/Viewport';
 
 
 
@@ -55,6 +56,11 @@ export namespace NScrollView {
          * @default true
          */
         useIntersectionObserver?: boolean;
+        /**
+         * Viewport target on resize
+         * @default ''
+         */
+        viewportTarget?: keyof NViewport.CallbacksTypes;
         /**
          * @default 0
          */
@@ -114,6 +120,7 @@ export class ScrollView <
             classToToggle: 'viewed',
             useDelay: false,
             useIntersectionObserver: true,
+            viewportTarget: '',
             resizeTimeout: 0,
         };
     }
@@ -174,7 +181,7 @@ export class ScrollView <
     protected _setEvents () {
         super._setEvents();
         this.resize();
-        this.addViewportCallback('', () => {
+        this.addViewportCallback(this.prop.viewportTarget, () => {
             this.resize();
         }, {
             timeout: this.prop.resizeTimeout,

package/src/ts/components/scroll/section/ScrollSectionProgress.ts

@@ -0,0 +1,344 @@
+import { selectOne } from 'vevet-dom';
+import PCancelable from 'p-cancelable';
+import { IRemovable } from '../../../utils/types/general';
+import { RequiredModuleProp } from '../../../utils/types/utility';
+import onScroll from '../../../utils/listeners/onScroll';
+import { Component, NComponent } from '../../../base/Component';
+import { NViewport } from '../../../app/events/Viewport';
+import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
+import clampScope from '../../../utils/math/clampScope';
+import getScrollValues from '../../../utils/scroll/getScrollValues';
+
+
+
+export namespace NScrollSectionProgress {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NComponent.StaticProp {
+        /**
+         * The scrollable container
+         * @default window
+         */
+        container?: string | Element | SmoothScroll | Window;
+        /**
+         * The scrollable element
+         */
+        section: string | Element;
+        /**
+         * Viewport target on resize
+         * @default ''
+         */
+        viewportTarget?: keyof NViewport.CallbacksTypes;
+        /**
+         * @default 0
+         */
+        resizeTimeout?: number;
+    }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NComponent.ChangeableProp { }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NComponent.CallbacksTypes {
+        'render': false;
+        'resize': false;
+    }
+
+}
+
+
+
+/**
+ * Elements into viewport
+ */
+export class ScrollSectionProgress <
+    StaticProp extends NScrollSectionProgress.StaticProp
+        = NScrollSectionProgress.StaticProp,
+    ChangeableProp extends NScrollSectionProgress.ChangeableProp
+        = NScrollSectionProgress.ChangeableProp,
+    CallbacksTypes extends NScrollSectionProgress.CallbacksTypes
+        = NScrollSectionProgress.CallbacksTypes,
+> extends Component <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            container: window,
+            viewportTarget: '',
+            resizeTimeout: 0,
+        };
+    }
+
+    /**
+     * Scroll container
+     */
+    protected _scrollContainer: Element | SmoothScroll | Window;
+    get scrollContainer () {
+        return this._scrollContainer;
+    }
+
+    /**
+     * Section element
+     */
+    protected _section: Element;
+    get section () {
+        return this._section;
+    }
+
+    /**
+     * Scroll event
+     */
+    protected _scrollEvent?: IRemovable;
+    /**
+     * Loaded event
+     */
+    protected _loadedEvent?: PCancelable<any>;
+
+    /**
+     * Scrolling scope
+     */
+    protected _scopeScroll: [number, number];
+    get scopeScroll () {
+        return this._scopeScroll;
+    }
+
+    /**
+     * 'In' scope relative to the global progress
+     */
+    protected _scopeIn: [number, number];
+    protected get scopeIn () {
+        return this._scopeIn;
+    }
+
+    /**
+     * 'Move' scope relative to the global progress
+     */
+    protected _scopeMove: [number, number];
+    get scopeMove () {
+        return this._scopeMove;
+    }
+
+    /**
+     * 'Move' scope relative to the global progress
+     */
+    protected _scopeOut: [number, number];
+    get scopeOut () {
+        return this._scopeOut;
+    }
+
+    protected _progress: number;
+    /**
+     * Global progress
+     */
+    get progress () {
+        return this._progress;
+    }
+    set progress (val) {
+        this._progress = val;
+    }
+
+
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+        init = true,
+    ) {
+        super(initialProp, false);
+
+        // get scroll container
+        if (typeof this.prop.container === 'string') {
+            this._scrollContainer = selectOne(this.prop.container) as Element;
+        } else {
+            this._scrollContainer = this.prop.container;
+        }
+
+        // get section element
+        if (typeof this.prop.section === 'string') {
+            this._section = selectOne(this.prop.section) as Element;
+        } else {
+            this._section = this.prop.section;
+        }
+
+        // set defaults
+        this._progress = -0.001;
+        this._scopeScroll = [0, 0];
+        this._scopeIn = [0, 0];
+        this._scopeMove = [0, 0];
+        this._scopeOut = [0, 0];
+
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+
+    public init () {
+        super.init();
+    }
+
+    // Set Module Events
+    protected _setEvents () {
+        super._setEvents();
+
+        // set resize events
+        this.addViewportCallback(this.prop.viewportTarget, () => {
+            this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
+        });
+
+        // resize on page loaded
+        this._loadedEvent = this._app.onPageLoaded();
+        this._loadedEvent.then(() => {
+            this.resize();
+        }).catch(() => {});
+
+        // set scroll events
+        this._scrollEvent = onScroll({
+            container: this.prop.container,
+            callback: this._handleScroll.bind(this),
+        });
+    }
+
+    protected _onPropMutate () {
+        super._onPropMutate();
+        this.resize();
+    }
+
+
+
+    /**
+     * 'in' progress
+     */
+    get progressIn () {
+        return clampScope(
+            this.progress,
+            this.scopeIn,
+        ) || 0;
+    }
+
+    /**
+     * 'out' progress
+     */
+    get progressOut () {
+        return clampScope(
+            this.progress,
+            this.scopeOut,
+        ) || 0;
+    }
+
+    /**
+     * 'move' progress
+     */
+    get progressMove () {
+        return clampScope(
+            this.progress,
+            this.scopeMove,
+        ) || 0;
+    }
+
+
+
+    /**
+     * Handle scroll event
+     */
+    protected _handleScroll () {
+        // calculate scopes
+        const scrollData = getScrollValues(this.scrollContainer);
+        if (!scrollData) {
+            return;
+        }
+        this._render(scrollData);
+    }
+
+
+
+    /**
+     * Resize the scene
+     */
+    public resize () {
+        // calculate scopes
+        const scrollData = getScrollValues(this.scrollContainer);
+        if (!scrollData) {
+            return;
+        }
+
+        // get sizes
+        const bounding = this.section.getBoundingClientRect();
+        const vHeight = this._app.viewport.height;
+
+        // calculate scroll scope
+        const inStart = scrollData.scrollTop + bounding.top - vHeight;
+        const moveEnd = scrollData.scrollTop + bounding.top + bounding.height;
+        const scrollLine = moveEnd - inStart;
+        this._scopeScroll = [inStart, moveEnd];
+
+        // calculate scopes
+        this._scopeIn = [0, vHeight / scrollLine];
+        this._scopeOut = [1 - vHeight / scrollLine, 1];
+        this._scopeMove = [this._scopeIn[1], this._scopeOut[0]];
+
+        // launch callbacks
+        this.callbacks.tbt('resize', false);
+
+        // render the scene
+        this._render(scrollData, true);
+    }
+
+    /**
+     * Render the scene
+     */
+    protected _render (
+        scrollData: ReturnType<typeof getScrollValues>,
+        force = false,
+    ) {
+        const canRender = this._canRender(scrollData, force);
+        if (!canRender) {
+            return;
+        }
+        this.callbacks.tbt('render', false);
+    }
+
+    /**
+     * Check if the section can be rendered
+     */
+    protected _canRender (
+        scrollData: ReturnType<typeof getScrollValues>,
+        force = false,
+    ) {
+        if (!scrollData) {
+            return false;
+        }
+        const { scrollTop } = scrollData;
+        const prevProgress = this.progress;
+
+        const progress = clampScope(
+            scrollTop,
+            [this._scopeScroll[0], this._scopeScroll[1]],
+        ) || 0;
+        this.progress = progress;
+
+        return force || (progress !== prevProgress);
+    }
+
+
+    /**
+     * Destroy the module
+     */
+    protected _destroy () {
+        super._destroy();
+        this._scrollEvent?.remove();
+        this._loadedEvent?.cancel();
+    }
+}

package/src/ts/index.ts

@@ -40,6 +40,7 @@ import { ScrollEventsBase, NScrollEventsBase } from './components/scroll/scrolla
 import { ScrollView, NScrollView } from './components/scroll/scrollable/ScrollView';
 import { SmoothScrollKeyboardPlugin, NSmoothScrollKeyboardPlugin } from './components/scroll/plugins/SmoothScrollKeyboardPlugin';
 import { SmoothScrollDragPlugin, NSmoothScrollDragPlugin } from './components/scroll/plugins/SmoothScrollDragPlugin';
+import { ScrollSectionProgress, NScrollSectionProgress } from './components/scroll/section/ScrollSectionProgress';
 
 import { SplitText, NSplitText } from './components/text/SplitText';
 
@@ -93,6 +94,7 @@ export {
     ScrollView, NScrollView,
     SmoothScrollKeyboardPlugin, NSmoothScrollKeyboardPlugin,
     SmoothScrollDragPlugin, NSmoothScrollDragPlugin,
+    ScrollSectionProgress, NScrollSectionProgress,
 
     SplitText, NSplitText,