vevet 2.0.1-dev.2 → 2.0.1-dev.23

package/src/ts/components/scroll/scrollbar/Bar.ts

@@ -101,6 +101,9 @@ export default class Bar {
             left: 0,
             top: 0,
         };
+        this._scrollEvent = undefined;
+        this._actionTimeout = undefined;
+        this._dragger = undefined;
 
         // create outer
         let outerClassNames = `${prefix} ${prefix}_${dir}`;
@@ -160,8 +163,11 @@ export default class Bar {
         this._listeners.push(addEventListener(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
 
         // set scroll events
-        this._scrollEvent = onScroll(this.prop.container, (data) => {
-            this._handleScroll(data);
+        this._scrollEvent = onScroll({
+            container: this.prop.container,
+            callback: (data) => {
+                this._handleScroll(data);
+            },
         });
 
         // set dragger

package/src/ts/components/scroll/smooth-scroll/SmoothScroll.ts

@@ -366,6 +366,8 @@ export class SmoothScroll <
         this._clientWidth = 0;
         this._clientHeight = 0;
         this._instant = false;
+        this._animationFrame = undefined;
+        this._outerAnimationFrameEvent = undefined;
         this._currentFPS = 60;
 
         // get outer elements
@@ -399,9 +401,11 @@ export class SmoothScroll <
         }
         this._elementsLength = this._elements.length;
         // add will-change
-        this._elements.forEach((el) => {
-            el.style.willChange = 'transform';
-        });
+        if (this.prop.useWillChange) {
+            this._elements.forEach((el) => {
+                el.style.willChange = 'transform';
+            });
+        }
 
         // initialize the class
         if (init) {
@@ -505,6 +509,11 @@ export class SmoothScroll <
             this.targetTop = parseInt(this.targetTop.toFixed(0), 10);
         }
 
+        // set scroll classes
+        const hasScroll = this.maxScrollableHeight > 0 || this.maxScrollableWidth > 0;
+        outer.classList.toggle('has-scroll', hasScroll);
+        outer.classList.toggle('no-scroll', !hasScroll);
+
         // render elements
         this._updateElementsProp();
         // this.render();

package/src/ts/components/text/SplitText.ts

@@ -1,4 +1,5 @@
 import { createElement, selectOne } from 'vevet-dom';
+import { NViewport } from '../../app/events/Viewport';
 import { Component, NComponent } from '../../base/Component';
 import { RequiredModuleProp } from '../../utils/types/utility';
 
@@ -25,6 +26,11 @@ export namespace NSplitText {
          * @default false
          */
         appendLines?: boolean;
+        /**
+         * Viewport resize event target
+         * @default ''
+         */
+        viewportTarget?: keyof NViewport.CallbacksTypes;
     }
 
     /**
@@ -84,6 +90,7 @@ export class SplitText <
             container: `#${this.prefix}`,
             appendLetters: true,
             appendLines: false,
+            viewportTarget: '',
         };
     }
 
@@ -153,7 +160,7 @@ export class SplitText <
 
         // get initial text
         this._initHTML = this._container.innerHTML;
-        this._initText = (this._container.innerText || 'no rendered text').trim();
+        this._initText = (this._container.innerText || this._container.innerHTML || 'no rendered text').trim();
         this._initText = this._initText.replace(/\s+\n/gm, '\n');
 
         // set default vars
@@ -174,7 +181,7 @@ export class SplitText <
         // split the text
         this.splitText();
         if (this.prop.appendLines) {
-            this.addViewportCallback('', () => {
+            this.addViewportCallback(this.prop.viewportTarget, () => {
                 this.splitText();
             });
         }
@@ -228,6 +235,7 @@ export class SplitText <
             // get type of the char
             const charCode = char.charCodeAt(0);
             const isWhitespace = charCode === 32 || charCode === 160;
+            const isSeparator = [45, 8208, 8211, 8212, 8722].includes(charCode);
             const isNewLine = charCode === 10;
 
             // add elements
@@ -251,6 +259,23 @@ export class SplitText <
             if (!this.prop.appendLetters) {
                 currentWord.el.innerHTML = currentWord.content;
             }
+
+            // go to next word if needed
+            if (isSeparator) {
+                wordIndex += 1;
+            }
+        });
+
+        // only filled words
+        this._words = this._words.filter((word, index) => {
+            if (word.content.length === 0) {
+                if (index > 0) {
+                    this._words[index - 1].whitespace = word.whitespace;
+                    this._words[index - 1].br = word.br;
+                }
+                return false;
+            }
+            return true;
         });
     }
 

package/src/ts/components/timeline/Timeline.ts

@@ -126,6 +126,7 @@ export class Timeline <
         this._isPlaying = false;
         this._isReversed = false;
         this._isPaused = false;
+        this._animationFrame = undefined;
         this._animationFrameLastTime = 0;
 
         if (init) {

package/src/ts/handlers/wheel/WheelHandler.ts

@@ -0,0 +1,269 @@
+import { addEventListener, IAddEventListener } from 'vevet-dom';
+import normalizeWheel from 'normalize-wheel';
+import { Module, NModule } from '../../base/Module';
+import { RequiredModuleProp } from '../../utils/types/utility';
+
+
+
+export namespace NWheelHandler {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NModule.StaticProp {
+        /**
+         * Container to listen to.
+         * False for window
+         * @default false
+         */
+        container?: false | Element | Window;
+    }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NModule.ChangeableProp {
+        /**
+         * If events are enabled
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * If need to stop propagation
+         * @default false
+         */
+        stopPropagation?: boolean;
+        /**
+         * Amount of pixels to trigger a callback
+         * @default 100
+         */
+        threshold?: number;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NModule.CallbacksTypes {
+        'up': false;
+        'down': false;
+        'left': false;
+        'right': false;
+    }
+
+}
+
+
+
+/**
+ * Wheel events: up & down, left & right without repeating
+
+ */
+export class WheelHandler <
+    StaticProp extends NWheelHandler.StaticProp = NWheelHandler.StaticProp,
+    ChangeableProp extends NWheelHandler.ChangeableProp = NWheelHandler.ChangeableProp,
+    CallbacksTypes extends NWheelHandler.CallbacksTypes = NWheelHandler.CallbacksTypes,
+> extends Module <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            container: false,
+            enabled: true,
+            stopPropagation: false,
+            threshold: 20,
+        };
+    }
+
+    /**
+     * Listener contianer
+     */
+    get container () {
+        if (!this.prop.container) {
+            return window;
+        }
+        return this.prop.container;
+    }
+
+    /**
+     * Wheel listener
+     */
+    protected _wheelListener?: IAddEventListener;
+
+    /**
+     * If need to temporary disable wheel
+     */
+    protected _lockWheel: boolean;
+    /**
+     * Used to prevent from triggering callback multiple times while wheel events
+     */
+    protected _lockWheelTimeout?: any;
+
+
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+        init = true,
+    ) {
+        super(initialProp, false);
+        this._wheelListener = undefined;
+        this._lockWheel = false;
+        if (init) {
+            this.init();
+        }
+    }
+
+
+
+    // Set Module Events
+    protected _setEvents () {
+        super._setEvents();
+
+        if (!(this.container instanceof Window)) {
+            this._listeners.push(addEventListener(this.container, 'mouseenter', this._handleMouseEnter.bind(this)));
+            this._listeners.push(addEventListener(this.container, 'mouseleave', this._handleMouseLeave.bind(this)));
+        } else {
+            this._toggleWheelEvent();
+        }
+    }
+
+    protected _onPropMutate () {
+        super._onPropMutate();
+        this._toggleWheelEvent();
+    }
+
+
+
+    /**
+     * Handle element mouse enter
+     */
+    protected _handleMouseEnter () {
+        if (this.prop.enabled) {
+            this._createWheelEvent();
+        }
+    }
+
+    /**
+     * Handle element mouse leave
+     */
+    protected _handleMouseLeave () {
+        this._destroyWheelEvent();
+    }
+
+
+
+    /**
+     * Set wheel event
+     */
+    protected _toggleWheelEvent () {
+        if (this.prop.enabled) {
+            this._createWheelEvent();
+        } else {
+            this._destroyWheelEvent();
+        }
+    }
+
+    /**
+     * Create a wheel event
+     */
+    protected _createWheelEvent () {
+        if (this._wheelListener) {
+            return;
+        }
+        // reset gaining
+        this._lockWheel = false;
+        if (this._lockWheelTimeout) {
+            clearTimeout(this._lockWheelTimeout);
+        }
+        // create a listener
+        this._wheelListener = addEventListener(
+            this.container,
+            'wheel',
+            // throttle(this._handleWheel.bind(this), 200),
+            this._handleWheel.bind(this),
+        );
+    }
+
+    /**
+     * Destroy the wheel event
+     */
+    protected _destroyWheelEvent () {
+        if (!this._wheelListener) {
+            return;
+        }
+        this._wheelListener.remove();
+        this._wheelListener = undefined;
+    }
+
+
+
+    /**
+     * Handle wheel event
+     */
+    protected _handleWheel (
+        evt: WheelEvent,
+    ) {
+        if (!this._wheelListener) {
+            return;
+        }
+
+        // stop propagation
+        if (this.prop.stopPropagation) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+
+        // if locked
+        if (this._lockWheel) {
+            if (this._lockWheelTimeout) {
+                clearTimeout(this._lockWheelTimeout);
+            }
+            this._lockWheelTimeout = setTimeout(() => {
+                this._lockWheel = false;
+            }, 300);
+            return;
+        }
+
+        // data
+        const delta = normalizeWheel(evt);
+        const { threshold } = this.prop;
+
+        // launch events
+        let eventFired = false;
+        // Y
+        if (delta.pixelY > threshold) {
+            this._callbacks.tbt('down', false);
+            eventFired = true;
+        } else if (delta.pixelY < threshold * -1) {
+            this._callbacks.tbt('up', false);
+            eventFired = true;
+        }
+        // X
+        if (delta.pixelX > threshold) {
+            this._callbacks.tbt('right', false);
+            eventFired = true;
+        } else if (delta.pixelX < threshold * -1) {
+            this._callbacks.tbt('left', false);
+            eventFired = true;
+        }
+
+        // lock events
+        if (eventFired) {
+            this._lockWheel = true;
+        }
+    }
+
+
+
+    /**
+     * Destroy the module
+     */
+    protected _destroy () {
+        super._destroy();
+        this._destroyWheelEvent();
+    }
+}

package/src/ts/index.ts

@@ -16,6 +16,8 @@ import { Plugin, NPlugin } from './base/Plugin';
 
 import { Page, NPage } from './components/page/Page';
 
+import { WheelHandler, NWheelHandler } from './handlers/wheel/WheelHandler';
+
 import { AnimationFrame, NAnimationFrame } from './components/animation-frame/AnimationFrame';
 
 import { StaticTimeline, NStaticTimeline } from './components/timeline/StaticTimeline';
@@ -66,6 +68,8 @@ export {
 
     Page, NPage,
 
+    WheelHandler, NWheelHandler,
+
     AnimationFrame, NAnimationFrame,
 
     StaticTimeline, NStaticTimeline,

package/src/ts/utils/listeners/onScroll.ts

@@ -1,46 +1,107 @@
-import { addEventListener, IAddEventListener, selectOne } from 'vevet-dom';
-import { SmoothScroll } from '../../components/scroll/smooth-scroll/SmoothScroll';
+import { addEventListener, selectOne } from 'vevet-dom';
 import { IRemovable } from '../types/general';
+import { SmoothScroll } from '../../components/scroll/smooth-scroll/SmoothScroll';
+import { randID } from '../common';
+
+type Container = string | Element | SmoothScroll | Window;
+
+interface ArgData {
+    scrollTop: number;
+    scrollLeft: number;
+}
+
+interface Instance {
+    id: string;
+    container: Container;
+    callbacks: {
+        id: string;
+        callback: (
+            data: ArgData,
+        ) => void;
+    }[];
+    isPassive: boolean;
+    listeners: IRemovable[];
+}
+
+interface Props {
+    container: Container;
+    callback: (data: ArgData) => void;
+    isPassive?: boolean;
+}
+
+let instances: Instance[] = [];
 
 /**
  * Add OnScroll event
  */
-export default function onScroll (
-    selector: string | Element | SmoothScroll | Window,
-    callback: (arg: {
-        scrollTop: number,
-        scrollLeft: number
-    }) => void,
-): IRemovable {
-    const listeners: IAddEventListener[] = [];
-
-    if (selector instanceof SmoothScroll) {
-        selector.addCallback('scroll', () => {
-            callback({
-                scrollTop: selector.scrollTop,
-                scrollLeft: selector.scrollLeft,
-            });
+export default function onScroll ({
+    container,
+    callback,
+    isPassive = false,
+}: Props): IRemovable {
+    // check if listeners for this element already exist
+    let instance = instances.find((data) => (
+        data.container === container && data.isPassive === isPassive
+    ))!;
+    const callbackId = randID('scroll-event');
+
+    // if a listener exists, we just add a new callback to its stack
+    if (instance) {
+        instance.callbacks.push({
+            id: callbackId,
+            callback,
         });
     } else {
-        let outer: Element | Window;
-        if (typeof selector === 'string') {
-            outer = selectOne(selector) as Element;
+        // otherwise we create a new instance
+        instance = {
+            id: randID('scroll-event-instance'),
+            container,
+            callbacks: [{
+                id: callbackId,
+                callback,
+            }],
+            isPassive,
+            listeners: [],
+        };
+        instances.push(instance);
+
+        // vars
+        const { listeners } = instance;
+
+        // smooth scroll events
+        if (container instanceof SmoothScroll) {
+            listeners.push(
+                container.addCallback('scroll', () => {
+                    const { scrollTop, scrollLeft } = container;
+                    for (let index = 0; index < instance.callbacks.length; index += 1) {
+                        instance.callbacks[index].callback({
+                            scrollTop,
+                            scrollLeft,
+                        });
+                    }
+                }),
+            );
         } else {
-            outer = selector;
-        }
-        if (outer) {
+            // dom scroll events
+            const isWindow = container instanceof Window;
+            const domContainer = selectOne(container) as any;
             listeners.push(addEventListener(
-                outer,
+                domContainer,
                 'scroll',
                 () => {
-                    const scrollTop = outer instanceof Window
-                        ? outer.pageYOffset : outer.scrollTop;
-                    const scrollLeft = outer instanceof Window
-                        ? outer.pageXOffset : outer.scrollLeft;
-                    callback({
-                        scrollTop,
-                        scrollLeft,
-                    });
+                    const scrollTop = isWindow
+                        ? domContainer.pageYOffset : domContainer.scrollTop;
+                    const scrollLeft = isWindow
+                        ? domContainer.pageXOffset : domContainer.scrollLeft;
+                    for (let index = 0; index < instance.callbacks.length; index += 1) {
+                        instance.callbacks[index].callback({
+                            scrollTop,
+                            scrollLeft,
+                        });
+                    }
+                },
+                {
+                    passive: isPassive,
                 },
             ));
         }
@@ -48,9 +109,19 @@ export default function onScroll (
 
     return {
         remove: () => {
-            listeners.forEach((listener) => {
-                listener.remove();
+            const newCallbacks = instance.callbacks.filter((item) => {
+                if (item.id !== callbackId) {
+                    return true;
+                }
+                return false;
             });
+            instance.callbacks = newCallbacks;
+            if (newCallbacks.length === 0) {
+                instance.listeners.forEach((listener) => {
+                    listener.remove();
+                });
+                instances = instances.filter((item) => item.id !== instance.id);
+            }
         },
     };
 }

package/src/ts/utils/math/index.ts

@@ -1,9 +1,13 @@
 import boundVal from './boundVal';
 import lerp from './lerp';
 import scopeProgress from './scopeProgress';
+import spreadScopeProgress from './spreadScopeProgress';
+import wrap from './wrap';
 
 export {
     boundVal,
     lerp,
     scopeProgress,
+    spreadScopeProgress,
+    wrap,
 };

package/src/ts/utils/math/spreadScopeProgress.ts

@@ -0,0 +1,18 @@
+/**
+ * Distribute scope progress among a certain quantity of timelines.
+ */
+export default function spreadScopeProgress (
+    quantity: number,
+    shift: number,
+) {
+    const timelines: [number, number][] = [];
+    // duration for each element
+    const duration = 1 / (quantity - shift * (quantity - 1));
+    // calculate timelines
+    for (let index = 0; index < quantity; index += 1) {
+        const start = (duration * (1 - shift)) * index;
+        const end = start + duration;
+        timelines.push([start, end]);
+    }
+    return timelines;
+}

package/src/ts/utils/math/wrap.ts

@@ -0,0 +1,18 @@
+/**
+ * Wrap values
+ */
+export default function wrap (
+    min: number,
+    max: number,
+    value: number,
+) {
+    const range = max - min;
+    return conditionalReturn(value, (val) => ((range + ((val - min) % range)) % range) + min);
+}
+
+function conditionalReturn (
+    value: number,
+    func: (val: number) => number,
+) {
+    return value || value === 0 ? func(value) : func;
+}