vevet 2.0.1-dev.5 → 2.0.2

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,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/{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,9 +1,17 @@
-import boundVal from './boundVal';
+import clamp from './clamp';
 import lerp from './lerp';
-import scopeProgress from './scopeProgress';
+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,
+    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/spreadScope.ts

@@ -0,0 +1,18 @@
+/**
+ * Distribute scope progress among a certain quantity of timelines.
+ */
+export default function spreadScope (
+    quantity: number,
+    shift: number,
+) {
+    const timelines: 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;
+}