vevet 2.0.1-dev.8 → 2.0.6

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,37 @@ 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;
+        });
+
+        // post-processing
+        let prevWord: NSplitText.Word | undefined;
+        this._words.forEach((word) => {
+            if (prevWord) {
+                if (prevWord.whitespace) {
+                    word.el.classList.add('pre-whitespace');
+                }
+            }
+            if (word.whitespace) {
+                word.el.classList.add('has-whitespace');
+            }
+            prevWord = word;
         });
     }
 

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;

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

@@ -1,6 +1,6 @@
 import { StaticTimeline, NStaticTimeline } from './StaticTimeline';
 import { RequiredModuleProp } from '../../utils/types/utility';
-import boundVal from '../../utils/math/boundVal';
+import clamp from '../../utils/math/clamp';
 
 
 
@@ -205,7 +205,7 @@ export class Timeline <
 
         // calculate current progress
         const progressIterator = frameDiff / this.prop.duration / (isReversed ? -1 : 1);
-        const progressTarget = boundVal(
+        const progressTarget = clamp(
             this.progress + progressIterator,
             [0, 1],
         );

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

@@ -1,64 +1,127 @@
-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 {
-    passive?: boolean;
+    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,
-    props?: Props,
-): IRemovable {
-    const listeners: IAddEventListener[] = [];
+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 (selector instanceof SmoothScroll) {
-        selector.addCallback('scroll', () => {
-            callback({
-                scrollTop: selector.scrollTop,
-                scrollLeft: selector.scrollLeft,
-            });
+    // 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,
                 },
-                props ? {
-                    passive: props.passive,
-                } : undefined,
             ));
         }
     }
 
     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/{boundVal.ts → clamp.ts}

@@ -1,9 +1,9 @@
 /**
- * Bound a value between two points
+ * Clamp the value between two points
  */
-export default function boundVal (
+export default function clamp (
     val: number,
-    scope: [number, number] = [0, 1],
+    scope = [0, 1],
 ) {
     if (val < scope[0]) {
         return scope[0];

package/src/ts/utils/math/clampScope.ts

@@ -0,0 +1,16 @@
+import scoped from './scoped';
+import clamp from './clamp';
+
+/**
+ * Get progress relatively to the scope and clamp it within two points
+ */
+export default function clampScoped (
+    val: number,
+    scope = [0, 1],
+    clampScope = [0, 1],
+) {
+    return clamp(
+        scoped(val, scope),
+        clampScope,
+    );
+}

package/src/ts/utils/math/inScope.ts

@@ -0,0 +1,9 @@
+/**
+ * Check if the value is within the scope
+ */
+export default function inScope (
+    val: number,
+    scopeValue = [0, 1],
+) {
+    return val >= scopeValue[0] && val <= scopeValue[1];
+}

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

@@ -1,11 +1,17 @@
-import boundVal from './boundVal';
+import clamp from './clamp';
 import lerp from './lerp';
-import scopeProgress from './scopeProgress';
-import spreadScopeProgress from './spreadScopeProgress';
+import scoped from './scoped';
+import spreadScope from './spreadScope';
+import inScope from './inScope';
+import clampScope from './clampScope';
+import wrap from './wrap';
 
 export {
-    boundVal,
+    clamp,
     lerp,
-    scopeProgress,
-    spreadScopeProgress,
+    scoped,
+    spreadScope,
+    inScope,
+    clampScope,
+    wrap,
 };

package/src/ts/utils/math/scoped.ts

@@ -0,0 +1,17 @@
+/**
+ * Get progress relatively to the scope.
+ *
+ * @example
+ *
+ * scope(.35, [0, 1]);
+ * // => .5
+ * scope(.35, [.25, 1]);
+ * // => .133
+ */
+export default function scoped (
+    val: number,
+    scopeValue = [0, 1],
+) {
+    const result = (val - scopeValue[0]) / (scopeValue[1] - scopeValue[0]);
+    return result;
+}

package/src/ts/utils/math/{spreadScopeProgress.ts → spreadScope.ts}

@@ -1,11 +1,11 @@
 /**
  * Distribute scope progress among a certain quantity of timelines.
  */
-export default function spreadScopeProgress (
+export default function spreadScope (
     quantity: number,
     shift: number,
 ) {
-    const timelines: [number, number][] = [];
+    const timelines: number[][] = [];
     // duration for each element
     const duration = 1 / (quantity - shift * (quantity - 1));
     // calculate 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;
+}