vevet 2.0.1-dev.5 → 2.0.2

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

@@ -1,10 +1,9 @@
-import { selectAll, SelectorAll } from 'vevet-dom';
 import { ScrollEventsBase, NScrollEventsBase } from './ScrollEventsBase';
 import { IRemovable } from '../../../utils/types/general';
 import { RequiredModuleProp } from '../../../utils/types/utility';
 import onScroll from '../../../utils/listeners/onScroll';
 import { intersectionObserverSupported } from '../../../utils/listeners';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import timeoutCallback from '../../../utils/common/timeoutCallback';
 
 
@@ -16,10 +15,17 @@ export namespace NScrollView {
      */
     export interface StaticProp extends NScrollEventsBase.StaticProp {
         /**
-         * Elements to seek
-         * @default '.v-scroll-view__el'
+         * If enabled, scrolling events will be created.
+         * You can use "false" to create just an instance of the ScrollView
+         * and later enable animations.
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * View elements.
+         * @default []
          */
-        elements?: SelectorAll;
+        elements?: Element[];
         /**
          * The moment at which the element is considered to be in the viewport.
          * The value is calculated from top to bottom or from left to right.
@@ -49,6 +55,10 @@ export namespace NScrollView {
          * @default true
          */
         useIntersectionObserver?: boolean;
+        /**
+         * @default 0
+         */
+        resizeTimeout?: number;
     }
 
     /**
@@ -96,13 +106,15 @@ export class ScrollView <
     > (): T {
         return {
             ...super._getDefaultProp(),
+            enabled: true,
             container: window,
-            elements: `.${this.prefix}__el`,
+            elements: [],
             threshold: 0.9,
             states: 'in',
             classToToggle: 'viewed',
             useDelay: false,
             useIntersectionObserver: true,
+            resizeTimeout: 0,
         };
     }
 
@@ -113,15 +125,27 @@ export class ScrollView <
      */
     protected _scrollEvent?: IRemovable;
     /**
-     * Intersection observer
+     * Intersection observer - type IN
      */
-    protected _intersectionObserver?: IntersectionObserver;
+    protected _intersectionObserverIn?: IntersectionObserver;
+    /**
+     * Intersection observer - type OUT
+     */
+    protected _intersectionObserverOut?: IntersectionObserver;
 
     /**
      * If first start
      */
     protected _firstStart: boolean;
 
+    protected _elements: NScrollView.El[];
+    /**
+     * Elements to seek
+     */
+    get elements () {
+        return this._elements;
+    }
+
 
 
     constructor (
@@ -131,11 +155,10 @@ export class ScrollView <
         super(initialProp, false);
 
         this._scrollEvent = undefined;
-        this._intersectionObserver = undefined;
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut = undefined;
         this._firstStart = true;
-
-        // get view elements
-        this.updateElements();
+        this._elements = [...this.prop.elements];
 
         // initialize the class
         if (init) {
@@ -145,7 +168,6 @@ export class ScrollView <
 
     public init () {
         super.init();
-        this.seekBounding();
     }
 
     // Set Module Events
@@ -154,14 +176,14 @@ export class ScrollView <
         this.resize();
         this.addViewportCallback('', () => {
             this.resize();
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
     }
 
     protected _onPropMutate () {
         super._onPropMutate();
-        this._removeViewEvents();
-        this.updateElements();
-        this._setViewEvents();
+        this.resize();
     }
 
     /**
@@ -169,7 +191,10 @@ export class ScrollView <
      */
     public resize () {
         this._removeViewEvents();
-        this._setViewEvents();
+        if (this.prop.enabled) {
+            this._setViewEvents();
+            this.seekBounding();
+        }
     }
 
     /**
@@ -184,24 +209,37 @@ export class ScrollView <
                 ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
             const yMargin = this._firstStart
                 ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observer
-            this._intersectionObserver = new IntersectionObserver(
-                this._handleIntersectionObserver.bind(this),
+            // create intersection observers
+            this._intersectionObserverIn = new IntersectionObserver(
+                this._handleIntersectionObserverIn.bind(this),
                 {
                     root: this.intersectionRoot,
                     threshold: 0,
                     rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
                 },
             );
-            // add elements
-            if (this.elements) {
+            this.elements.forEach((el) => {
+                this._intersectionObserverIn?.observe(el);
+            });
+            if (this.prop.states === 'inout') {
+                this._intersectionObserverOut = new IntersectionObserver(
+                    this._handleIntersectionObserverOut.bind(this),
+                    {
+                        root: this.intersectionRoot,
+                        threshold: 0,
+                        rootMargin: '0px 0px 0px 0px',
+                    },
+                );
                 this.elements.forEach((el) => {
-                    this._intersectionObserver?.observe(el);
+                    this._intersectionObserverOut?.observe(el);
                 });
             }
         } else {
             // set scroll bounding events
-            this._scrollEvent = onScroll(this.prop.container, this._handleScroll.bind(this));
+            this._scrollEvent = onScroll({
+                container: this.prop.container,
+                callback: this._handleScroll.bind(this),
+            });
         }
     }
 
@@ -214,57 +252,17 @@ export class ScrollView <
             this._scrollEvent.remove();
             this._scrollEvent = undefined;
         }
-        // destroy intersection observer
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
-        }
-    }
-
-
-
-    protected _elements!: NScrollView.El[];
-    /**
-     * Element to seek
-     */
-    get elements () {
-        return this._elements;
-    }
-
-    /**
-     * Update elements
-     */
-    public updateElements () {
-        // check if elements exist
-        if (typeof this.elements === 'undefined') {
-            this._elements = [];
-        }
-        // unobserve old elements
-        this.elements.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
-        });
-        // update elements
-        this._elements = Array.from(
-            selectAll(this.prop.elements as any, this.domParent || undefined),
-        ).filter(
-            (el) => !el.classList.contains(this.prop.classToToggle),
-        );
-        // add them to the observer
-        this._elements.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.observe(el);
-            }
-        });
+        // destroy intersection observers
+        this._intersectionObserverIn?.disconnect();
+        this._intersectionObserverIn = undefined;
+        this._intersectionObserverOut?.disconnect();
+        this._intersectionObserverOut = undefined;
     }
 
-
-
     /**
      * Event on IntersectionObserver
      */
-    protected _handleIntersectionObserver (
+    protected _handleIntersectionObserverIn (
         data: IntersectionObserverEntry[],
     ) {
         const parentBounding = this._firstStart ? this.scrollContainerBounding : false;
@@ -274,11 +272,13 @@ export class ScrollView <
             if (this._firstStart && !!parentBounding && entry.isIntersecting) {
                 delay = this._elementInViewportData(entry.target, parentBounding).delay;
             }
-            this._handleInOut(
-                entry.target,
-                entry.isIntersecting,
-                delay,
-            );
+            if (entry.isIntersecting) {
+                this._handleInOut(
+                    entry.target,
+                    entry.isIntersecting,
+                    delay,
+                );
+            }
         }
         this._processUnusedElements();
         // change states
@@ -288,6 +288,24 @@ export class ScrollView <
         }
     }
 
+    /**
+     * Event on IntersectionObserver
+     */
+    protected _handleIntersectionObserverOut (
+        data: IntersectionObserverEntry[],
+    ) {
+        for (let index = 0; index < data.length; index += 1) {
+            const entry = data[index];
+            if (!entry.isIntersecting) {
+                this._handleInOut(
+                    entry.target,
+                    entry.isIntersecting,
+                    0,
+                );
+            }
+        }
+    }
+
     /**
      * Event on Scroll
      */
@@ -313,7 +331,9 @@ export class ScrollView <
             const el = this.elements[index];
             const elData = this._elementInViewportData(el, scrollContainerBounding);
             const delay = elData.isIntersecting ? elData.delay : 0;
-            this._handleInOut(el, elData.isIntersecting, delay);
+            if (typeof elData.isIntersecting === 'boolean') {
+                this._handleInOut(el, elData.isIntersecting, delay);
+            }
         }
         this._processUnusedElements();
 
@@ -335,7 +355,7 @@ export class ScrollView <
         const bounding = el.getBoundingClientRect();
 
         // check if the element is intersecting
-        let isIntersecting = false;
+        let isIntersecting: undefined | boolean;
         if (
             bounding.top < parentBounding.top + parentBounding.height * threshold
             && bounding.left < parentBounding.left + parentBounding.width * threshold
@@ -350,13 +370,18 @@ export class ScrollView <
             } else {
                 isIntersecting = true;
             }
+        } else if (
+            bounding.top > parentBounding.top + parentBounding.height
+            || bounding.left > parentBounding.left + parentBounding.width
+        ) {
+            isIntersecting = false;
         }
 
         // calculate delay only if it is enabled & calculations
         // are done for the first time
         let delay = 0;
         if (!!useDelay && this._firstStart) {
-            const progress = boundVal(
+            const progress = clamp(
                 useDelay.dir === 'x'
                     ? (bounding.left - parentBounding.left) / parentBounding.width
                     : (bounding.top - parentBounding.top) / parentBounding.height,
@@ -371,8 +396,6 @@ export class ScrollView <
         };
     }
 
-
-
     /**
      * Event that is triggered when an element appears or disappears
      */
@@ -393,9 +416,11 @@ export class ScrollView <
         el.scrollViewIn = inViewport;
 
         // toggle classes
-        timeoutCallback(() => {
-            el.classList.toggle(this.prop.classToToggle, inViewport);
-        }, delay);
+        if (this.prop.classToToggle) {
+            timeoutCallback(() => {
+                el.classList.toggle(this.prop.classToToggle, inViewport);
+            }, delay);
+        }
 
         // process callbacks
         if (inViewport && (states === 'in' || states === 'inout')) {
@@ -419,14 +444,58 @@ export class ScrollView <
         // remove unused elements
         const elementsToRemove = this._elements.filter((el) => el.scrollViewIn);
         elementsToRemove.forEach((el) => {
-            if (this._intersectionObserver) {
-                this._intersectionObserver.unobserve(el);
-            }
+            this._intersectionObserverIn?.unobserve(el);
+            this._intersectionObserverOut?.unobserve(el);
         });
         this._elements = this._elements.filter((el) => !el.scrollViewIn);
     }
 
 
+    /**
+     * Add a view element
+     */
+    public addElement (
+        element: Element,
+    ): IRemovable {
+        const viewEl = element as NScrollView.El;
+        viewEl.scrollViewIn = undefined;
+        this._elements.push(element);
+        this._intersectionObserverIn?.observe(element);
+        this._intersectionObserverOut?.observe(element);
+        if (this.prop.enabled) {
+            this.seekBounding();
+        }
+        return {
+            remove: () => {
+                this.removeElement(element);
+            },
+        };
+    }
+
+    /**
+     * Remove a view element
+     */
+    public removeElement (
+        element: Element,
+    ) {
+        const viewEl = element as NScrollView.El;
+        viewEl.scrollViewIn = undefined;
+        this._elements = this._elements.filter((el) => el !== element);
+        this._intersectionObserverIn?.unobserve(element);
+        this._intersectionObserverOut?.unobserve(element);
+    }
+
+    /**
+     * Remove all view elements
+     */
+    public removeElements () {
+        this._elements.forEach((el) => {
+            this.removeElement(el);
+        });
+        this._elements = [];
+    }
+
+
 
     /**
      * Destroy the module

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

@@ -1,7 +1,7 @@
 import { addEventListener, createElement, IAddEventListener } from 'vevet-dom';
 import { IRemovable } from '../../../utils/types/general';
 import onScroll from '../../../utils/listeners/onScroll';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import { DraggerMove, NDraggerMove } from '../../dragger/DraggerMove';
 import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
 
@@ -163,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
@@ -290,7 +293,7 @@ export default class Bar {
      */
     protected _renderThumb () {
         // calculate progress
-        const progress = boundVal(
+        const progress = clamp(
             this._scrollVal / this.scrollLine,
             [0, 1],
         );
@@ -318,7 +321,7 @@ export default class Bar {
         // calculate thumb sizes
         if (this.prop.autoSize) {
             if (this.isX) {
-                const barSize = boundVal(
+                const barSize = clamp(
                     this._outerWidth / (this.scrollWidth / (
                         this.scrollWidth - scrollLine
                     )),
@@ -326,7 +329,7 @@ export default class Bar {
                 );
                 thumb.style.width = `${barSize}px`;
             } else {
-                const barSize = boundVal(
+                const barSize = clamp(
                     this._outerHeight / (this.scrollHeight / (
                         this.scrollHeight - scrollLine
                     )),

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

@@ -50,6 +50,10 @@ export namespace NScrollBar {
          * @default false
          */
         optimizeCalculations?: boolean;
+        /**
+         * @default 0
+         */
+        resizeTimeout?: number;
         /**
          * If the scroll bar is draggable
          * @default true
@@ -101,6 +105,7 @@ export class ScrollBar <
             autoHide: true,
             minSize: 50,
             optimizeCalculations: false,
+            resizeTimeout: 0,
             isDraggable: true,
             draggableScrollBehavior: 'smooth',
         };
@@ -245,6 +250,8 @@ export class ScrollBar <
         } else {
             this.addViewportCallback('', () => {
                 this.resize();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
         this.resize();

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

@@ -6,7 +6,7 @@ import { Component, NComponent } from '../../../base/Component';
 import { RequiredModuleProp } from '../../../utils/types/utility';
 import { AnimationFrame } from '../../animation-frame/AnimationFrame';
 import { ScrollableElement } from '../types';
-import boundVal from '../../../utils/math/boundVal';
+import clamp from '../../../utils/math/clamp';
 import { NCallbacks } from '../../../base/Callbacks';
 import { lerp } from '../../../utils/math';
 
@@ -41,6 +41,10 @@ export namespace NSmoothScroll {
          * @default false
          */
         animationFrame?: false | AnimationFrame;
+        /**
+         * @default 0
+         */
+        resizeTimeout?: number;
     }
 
     /**
@@ -215,7 +219,7 @@ export class SmoothScroll <
             ? -this.prop.overscroll.max : 0;
         const max = this.maxScrollableWidth
             + (!!this.prop.overscroll && this.prop.isHorizontal ? this.prop.overscroll.max : 0);
-        this._targetLeft = boundVal(
+        this._targetLeft = clamp(
             val,
             [min, max],
         );
@@ -247,7 +251,7 @@ export class SmoothScroll <
             ? -this.prop.overscroll.max : 0;
         const max = this.maxScrollableHeight
             + (!!this.prop.overscroll && !this.prop.isHorizontal ? this.prop.overscroll.max : 0);
-        this._targetTop = boundVal(
+        this._targetTop = clamp(
             val,
             [min, max],
         );
@@ -401,9 +405,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) {
@@ -423,6 +429,7 @@ export class SmoothScroll <
             enabled: true,
             animationFrame: false,
             recalculateSizes: true,
+            resizeTimeout: 0,
             useWheel: true,
             autoStop: true,
             isHorizontal: false,
@@ -453,6 +460,8 @@ export class SmoothScroll <
         this.resize();
         this.addViewportCallback('', () => {
             this.resize(true);
+        }, {
+            timeout: this.prop.resizeTimeout,
         });
 
         // wheel
@@ -490,8 +499,8 @@ export class SmoothScroll <
         // get sizes
         this._clientWidth = outer.clientWidth;
         this._clientHeight = outer.clientHeight;
-        this._scrollWidth = boundVal(container.clientWidth, [this.clientWidth, Infinity]);
-        this._scrollHeight = boundVal(container.clientHeight, [this.clientHeight, Infinity]);
+        this._scrollWidth = clamp(container.clientWidth, [this.clientWidth, Infinity]);
+        this._scrollHeight = clamp(container.clientHeight, [this.clientHeight, Infinity]);
 
         // force instant change
         // it means that after resizing, scrolling will be instantaneous for a while

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,15 @@ export namespace NSplitText {
          * @default false
          */
         appendLines?: boolean;
+        /**
+         * Viewport resize event target
+         * @default ''
+         */
+        viewportTarget?: keyof NViewport.CallbacksTypes;
+        /**
+         * @default 0
+         */
+        resizeTimeout?: number;
     }
 
     /**
@@ -84,6 +94,8 @@ export class SplitText <
             container: `#${this.prefix}`,
             appendLetters: true,
             appendLines: false,
+            viewportTarget: '',
+            resizeTimeout: 0,
         };
     }
 
@@ -153,8 +165,12 @@ export class SplitText <
 
         // get initial text
         this._initHTML = this._container.innerHTML;
-        this._initText = (this._container.innerText || 'no rendered text').trim();
+        const innerText = this._container.innerText.trim() || this._container.innerHTML.trim();
+        this._initText = innerText || 'no rendered text';
         this._initText = this._initText.replace(/\s+\n/gm, '\n');
+        this._initText = this._initText.replace(/<br>/gm, String.fromCharCode(10));
+        this._initText = this._initText.replace(/<br\/>/gm, String.fromCharCode(10));
+        this._initText = this._initText.replace(/<br \/>/gm, String.fromCharCode(10));
 
         // set default vars
         this._isPrimarySplit = false;
@@ -174,8 +190,10 @@ export class SplitText <
         // split the text
         this.splitText();
         if (this.prop.appendLines) {
-            this.addViewportCallback('', () => {
+            this.addViewportCallback(this.prop.viewportTarget, () => {
                 this.splitText();
+            }, {
+                timeout: this.prop.resizeTimeout,
             });
         }
     }
@@ -228,6 +246,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 +270,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/StaticTimeline.ts

@@ -2,8 +2,8 @@ import easingProgress from 'easing-progress';
 import { NApplication } from '../../app/Application';
 import { Component, NComponent } from '../../base/Component';
 import { RequiredModuleProp } from '../../utils/types/utility';
-import scopeProgress from '../../utils/math/scopeProgress';
-import boundVal from '../../utils/math/boundVal';
+import scoped from '../../utils/math/scoped';
+import clamp from '../../utils/math/clamp';
 
 
 
@@ -174,8 +174,8 @@ export class StaticTimeline <
         for (let index = 0, l = length; index < l; index += 1) {
             const tm = this._nestedTimelines[index];
             // calculate progress of this very timeline
-            const tmProgress = boundVal(
-                scopeProgress(progressForNested, tm.prop.nestedScope),
+            const tmProgress = clamp(
+                scoped(progressForNested, tm.prop.nestedScope),
                 [0, 1],
             );
             tm.progress = tmProgress;