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

package/build/es/components/scroll/smooth-scroll/SmoothScroll.js

@@ -8,40 +8,73 @@ import { lerp } from '../../../utils/math';
  * Create smooth scrolling.
  */
 export class SmoothScroll extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        const { selectors } = this.prop;
+        // set default variables
+        this._targetLeft = 0;
+        this._targetTop = 0;
+        this._scrollLeft = 0;
+        this._scrollTop = 0;
+        this._scrollWidth = 0;
+        this._scrollHeight = 0;
+        this._clientWidth = 0;
+        this._clientHeight = 0;
+        this._instant = false;
+        this._animationFrame = undefined;
+        this._outerAnimationFrameEvent = undefined;
+        this._currentFPS = 60;
+        // get outer elements
+        this._outer = selectOne(selectors.outer);
+        if (!(this._outer instanceof HTMLElement)) {
+            throw new Error(`${selectors.outer} is not a HTMLElement`);
+        }
+        this._outer.classList.add(this.prefix);
+        // get or create container
+        const existingContainer = selectOne(`.${this.prefix}__container`, this.outer);
+        if (isElement(existingContainer)) {
+            this._container = existingContainer;
+            this._containerExists = true;
+        }
+        else {
+            this._container = createElement('div', {
+                class: `${this.prefix}__container`,
+                parent: this.outer,
+                children: Array.from(this.outer.children),
+            });
+            this._containerExists = false;
+        }
+        // get scrollable elements
+        if (selectors.elements) {
+            this._elements = Array.from(selectAll(selectors.elements, this._outer));
+        }
+        else {
+            this._elements = [this._container];
+        }
+        this._elementsLength = this._elements.length;
+        // add will-change
+        if (this.prop.useWillChange) {
+            this._elements.forEach((el) => {
+                el.style.willChange = 'transform';
+            });
+        }
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
     get prefix() {
         return `${this._app.prefix}smooth-scroll`;
     }
-    /**
-     * Scroll parent
-     */
-    _outer;
     get outer() {
         return this._outer;
     }
-    /**
-     * Scroll container. If the element does not exist indide the outer,
-     * it will be created automatically
-     */
-    _container;
     get container() {
         return this._container;
     }
-    /**
-     * If the container element existed before the class initialization
-     */
-    _containerExists;
-    /**
-     * Scrollable elements
-     */
-    _elements;
     get elements() {
         return this._elements;
     }
-    _elementsLength;
-    /**
-     * Scroll target value
-     */
-    _targetLeft;
     get targetLeft() {
         return this._targetLeft;
     }
@@ -62,10 +95,6 @@ export class SmoothScroll extends Component {
     get targetLeftBound() {
         return this._targetLeft;
     }
-    /**
-     * Scroll target value
-     */
-    _targetTop;
     get targetTop() {
         return this._targetTop;
     }
@@ -86,10 +115,6 @@ export class SmoothScroll extends Component {
     get targetTopBound() {
         return this._targetTop;
     }
-    /**
-     * Scroll left
-     */
-    _scrollLeft;
     get scrollLeft() {
         return this._scrollLeft;
     }
@@ -98,10 +123,6 @@ export class SmoothScroll extends Component {
         this._scrollLeft = this._targetLeft;
         this._enable();
     }
-    /**
-     * Scroll top
-     */
-    _scrollTop;
     get scrollTop() {
         return this._scrollTop;
     }
@@ -110,31 +131,15 @@ export class SmoothScroll extends Component {
         this._scrollTop = this._targetTop;
         this._enable();
     }
-    /**
-     * Scroll width
-     */
-    _scrollWidth;
     get scrollWidth() {
         return this._scrollWidth;
     }
-    /**
-     * Scroll height
-     */
-    _scrollHeight;
     get scrollHeight() {
         return this._scrollHeight;
     }
-    /**
-     * Parent width
-     */
-    _clientWidth;
     get clientWidth() {
         return this._clientWidth;
     }
-    /**
-     * Parent height
-     */
-    _clientHeight;
     get clientHeight() {
         return this._clientHeight;
     }
@@ -150,100 +155,19 @@ export class SmoothScroll extends Component {
     get maxScrollableHeight() {
         return this.scrollHeight - this.clientHeight;
     }
-    /**
-     * If the approximation between the target and current scroll values must be instantaneous
-     */
-    _instant;
-    /**
-     * Inner AnimationFrame.
-     * The AnimationFrame is not create if an outer AnimationFrame is passed in properties.
-     */
-    _animationFrame;
-    /**
-     * AnimationFrame callback is used for outer AnimationFrame only.
-     */
-    _outerAnimationFrameEvent;
-    /**
-     * Current FPS. Used to normalize LERP ease
-     */
-    _currentFPS;
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        const { selectors } = this.prop;
-        // set default variables
-        this._targetLeft = 0;
-        this._targetTop = 0;
-        this._scrollLeft = 0;
-        this._scrollTop = 0;
-        this._scrollWidth = 0;
-        this._scrollHeight = 0;
-        this._clientWidth = 0;
-        this._clientHeight = 0;
-        this._instant = false;
-        this._currentFPS = 60;
-        // get outer elements
-        this._outer = selectOne(selectors.outer);
-        if (!(this._outer instanceof HTMLElement)) {
-            throw new Error(`${selectors.outer} is not a HTMLElement`);
-        }
-        this._outer.classList.add(this.prefix);
-        // get or create container
-        const existingContainer = selectOne(`.${this.prefix}__container`, this.outer);
-        if (isElement(existingContainer)) {
-            this._container = existingContainer;
-            this._containerExists = true;
-        }
-        else {
-            this._container = createElement('div', {
-                class: `${this.prefix}__container`,
-                parent: this.outer,
-                children: Array.from(this.outer.children),
-            });
-            this._containerExists = false;
-        }
-        // get scrollable elements
-        if (selectors.elements) {
-            this._elements = Array.from(selectAll(selectors.elements, this._outer));
-        }
-        else {
-            this._elements = [this._container];
-        }
-        this._elementsLength = this._elements.length;
-        // add will-change
-        this._elements.forEach((el) => {
-            el.style.willChange = 'transform';
-        });
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            selectors: {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { selectors: {
                 outer: `#${this.prefix}`,
                 elements: false,
-            },
-            enabled: true,
-            animationFrame: false,
-            recalculateSizes: true,
-            useWheel: true,
-            autoStop: true,
-            isHorizontal: false,
-            stopPropagation: true,
-            useWillChange: true,
-            render: {
+            }, enabled: true, animationFrame: false, recalculateSizes: true, useWheel: true, autoStop: true, isHorizontal: false, stopPropagation: true, useWillChange: true, render: {
                 lerp: 0.1,
                 lerpToFixed: 2,
                 approximation: 0.1,
                 normalizeLerp: false,
-            },
-            overscroll: {
+            }, overscroll: {
                 friction: 0.5,
                 max: 250,
-            },
-        };
+            } });
     }
     // Extra constructor
     _constructor() {
@@ -299,6 +223,10 @@ export class SmoothScroll extends Component {
             this.targetLeft = parseInt(this.targetLeft.toFixed(0), 10);
             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/build/es/components/text/SplitText.js

@@ -4,48 +4,6 @@ import { Component } from '../../base/Component';
  * Split text into letters, words & lines
  */
 export class SplitText extends Component {
-    _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            container: `#${this.prefix}`,
-            appendLetters: true,
-            appendLines: false,
-        };
-    }
-    get prefix() {
-        return `${this._app.prefix}split-text`;
-    }
-    /**
-     * Initial text
-     */
-    _initText;
-    /**
-     * Initial HTML content
-     */
-    _initHTML;
-    /**
-     * If the text is already split into letters and words
-     */
-    _isPrimarySplit;
-    /**
-     * Text container
-     */
-    get container() {
-        return this._container;
-    }
-    _container;
-    get letters() {
-        return this._letters;
-    }
-    _letters;
-    get words() {
-        return this._words;
-    }
-    _words;
-    get lines() {
-        return this._lines;
-    }
-    _lines;
     constructor(initialProp, init = true) {
         super(initialProp, false);
         // get text container
@@ -61,7 +19,7 @@ export class SplitText extends Component {
         }
         // 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
         this._isPrimarySplit = false;
@@ -73,12 +31,33 @@ export class SplitText extends Component {
             this.init();
         }
     }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, appendLetters: true, appendLines: false, viewportTarget: '' });
+    }
+    get prefix() {
+        return `${this._app.prefix}split-text`;
+    }
+    /**
+     * Text container
+     */
+    get container() {
+        return this._container;
+    }
+    get letters() {
+        return this._letters;
+    }
+    get words() {
+        return this._words;
+    }
+    get lines() {
+        return this._lines;
+    }
     _setEvents() {
         super._setEvents();
         // split the text
         this.splitText();
         if (this.prop.appendLines) {
-            this.addViewportCallback('', () => {
+            this.addViewportCallback(this.prop.viewportTarget, () => {
                 this.splitText();
             });
         }
@@ -124,6 +103,7 @@ export class SplitText extends Component {
             // 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
             if (isWhitespace) {
@@ -144,6 +124,21 @@ export class SplitText extends Component {
             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/build/es/components/timeline/StaticTimeline.js

@@ -8,18 +8,22 @@ import boundVal from '../../utils/math/boundVal';
  * no play & pause methods.
  */
 export class StaticTimeline extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default vars
+        this._progress = 0;
+        this._easing = 0;
+        this._nestedTimelines = [];
+        if (init) {
+            this.init();
+        }
+    }
     /**
      * Get default properties
      */
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            easing: this._app.prop.easing,
-            scope: [0, 1],
-            useNestedEasingProgress: false,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { easing: this._app.prop.easing, scope: [0, 1], useNestedEasingProgress: false });
     }
-    _progress;
     /**
      * Absolute progress of the timeline
      */
@@ -30,27 +34,12 @@ export class StaticTimeline extends Component {
         this._progress = val;
         this._handleProgress();
     }
-    _easing;
     /**
      * Easing progress of the timeline
      */
     get easing() {
         return this._easing;
     }
-    /**
-     * Nested timelines
-     */
-    _nestedTimelines;
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // set default vars
-        this._progress = 0;
-        this._easing = 0;
-        this._nestedTimelines = [];
-        if (init) {
-            this.init();
-        }
-    }
     /**
      * Add a nested timeline
      */

package/build/es/components/timeline/Timeline.js

@@ -4,16 +4,23 @@ import boundVal from '../../utils/math/boundVal';
  * Timeline is an animation helper.
  */
 export class Timeline extends StaticTimeline {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default variables
+        this._isPlaying = false;
+        this._isReversed = false;
+        this._isPaused = false;
+        this._animationFrame = undefined;
+        this._animationFrameLastTime = 0;
+        if (init) {
+            this.init();
+        }
+    }
     /**
      * Get default properties
      */
     _getDefaultProp() {
-        return {
-            ...super._getDefaultProp(),
-            duration: 1000,
-            reset: false,
-            destroyOnEnd: false,
-        };
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { duration: 1000, reset: false, destroyOnEnd: false });
     }
     /**
      * Check if timeline is playing
@@ -21,40 +28,18 @@ export class Timeline extends StaticTimeline {
     get isPlaying() {
         return typeof this._animationFrame !== 'undefined';
     }
-    _isPlaying;
     /**
      * Check if timeline is reversed
      */
     get isReversed() {
         return this._isReversed;
     }
-    _isReversed;
     /**
      * Check if timeline is paused
      */
     get isPaused() {
         return this._isPaused;
     }
-    _isPaused;
-    /**
-     * The animation frame
-     */
-    _animationFrame;
-    /**
-     * Last time when animationFrame callback has been called
-     */
-    _animationFrameLastTime;
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        // set default variables
-        this._isPlaying = false;
-        this._isReversed = false;
-        this._isPaused = false;
-        this._animationFrameLastTime = 0;
-        if (init) {
-            this.init();
-        }
-    }
     /**
      * Play the timeline
      */

package/build/es/handlers/wheel/WheelHandler.js

@@ -0,0 +1,153 @@
+import { addEventListener } from 'vevet-dom';
+import normalizeWheel from 'normalize-wheel';
+import { Module } from '../../base/Module';
+/**
+ * Wheel events: up & down, left & right without repeating
+
+ */
+export class WheelHandler extends Module {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        this._wheelListener = undefined;
+        this._lockWheel = false;
+        if (init) {
+            this.init();
+        }
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: false, enabled: true, stopPropagation: false, threshold: 20 });
+    }
+    /**
+     * Listener contianer
+     */
+    get container() {
+        if (!this.prop.container) {
+            return window;
+        }
+        return this.prop.container;
+    }
+    // Set Module Events
+    _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();
+        }
+    }
+    _onPropMutate() {
+        super._onPropMutate();
+        this._toggleWheelEvent();
+    }
+    /**
+     * Handle element mouse enter
+     */
+    _handleMouseEnter() {
+        if (this.prop.enabled) {
+            this._createWheelEvent();
+        }
+    }
+    /**
+     * Handle element mouse leave
+     */
+    _handleMouseLeave() {
+        this._destroyWheelEvent();
+    }
+    /**
+     * Set wheel event
+     */
+    _toggleWheelEvent() {
+        if (this.prop.enabled) {
+            this._createWheelEvent();
+        }
+        else {
+            this._destroyWheelEvent();
+        }
+    }
+    /**
+     * Create a wheel event
+     */
+    _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
+     */
+    _destroyWheelEvent() {
+        if (!this._wheelListener) {
+            return;
+        }
+        this._wheelListener.remove();
+        this._wheelListener = undefined;
+    }
+    /**
+     * Handle wheel event
+     */
+    _handleWheel(evt) {
+        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
+     */
+    _destroy() {
+        super._destroy();
+        this._destroyWheelEvent();
+    }
+}

package/build/es/index.js

@@ -11,6 +11,7 @@ import { Module } from './base/Module';
 import { Component } from './base/Component';
 import { Plugin } from './base/Plugin';
 import { Page } from './components/page/Page';
+import { WheelHandler } from './handlers/wheel/WheelHandler';
 import { AnimationFrame } from './components/animation-frame/AnimationFrame';
 import { StaticTimeline } from './components/timeline/StaticTimeline';
 import { Timeline } from './components/timeline/Timeline';
@@ -34,4 +35,4 @@ const utils = {
     listeners,
     math,
 };
-export { utils, GeneralTypes, Application, Viewport, PageLoad, Callbacks, MutableProp, Module, Component, Plugin, Page, AnimationFrame, StaticTimeline, Timeline, Preloader, ProgressPreloader, Dragger, DraggerMove, DraggerDirection, Ctx2D, Ctx2DPrerender, SmoothScroll, ScrollBar, ScrollEventsBase, ScrollView, SmoothScrollKeyboardPlugin, SmoothScrollDragPlugin, SplitText, CustomCursor, };
+export { utils, GeneralTypes, Application, Viewport, PageLoad, Callbacks, MutableProp, Module, Component, Plugin, Page, WheelHandler, AnimationFrame, StaticTimeline, Timeline, Preloader, ProgressPreloader, Dragger, DraggerMove, DraggerDirection, Ctx2D, Ctx2DPrerender, SmoothScroll, ScrollBar, ScrollEventsBase, ScrollView, SmoothScrollKeyboardPlugin, SmoothScrollDragPlugin, SplitText, CustomCursor, };