vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,256 @@
+import { StaticTimeline, NStaticTimeline } from './StaticTimeline';
+import { RequiredModuleProp } from '../../utils/types/utility';
+import boundVal from '../../utils/math/boundVal';
+
+
+
+export namespace NTimeline {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NStaticTimeline.StaticProp {
+        /**
+         * Reset the timeline progress on each finished play & reverse call
+         * @default false
+         */
+        reset?: boolean;
+        /**
+         * Destroy the timeline on animation end
+         * @default false
+         */
+        destroyOnEnd?: boolean;
+    }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NStaticTimeline.ChangeableProp {
+        /**
+         * Timeline duration
+         * @default 1000
+         */
+        duration?: number;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface ProgressArg {
+        progress: number;
+        easing: number;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NStaticTimeline.CallbacksTypes {
+        'start': false;
+        'end': false;
+    }
+
+}
+
+
+
+/**
+ * Timeline is an animation helper.
+ */
+export class Timeline <
+    StaticProp extends NTimeline.StaticProp = NTimeline.StaticProp,
+    ChangeableProp extends NTimeline.ChangeableProp = NTimeline.ChangeableProp,
+    CallbacksTypes extends NTimeline.CallbacksTypes = NTimeline.CallbacksTypes,
+> extends StaticTimeline <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    /**
+     * Get default properties
+     */
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            duration: 1000,
+            reset: false,
+            destroyOnEnd: false,
+        };
+    }
+
+
+
+    /**
+     * Check if timeline is playing
+     */
+    get isPlaying () {
+        return typeof this._animationFrame !== 'undefined';
+    }
+    protected _isPlaying: boolean;
+
+    /**
+     * Check if timeline is reversed
+     */
+    get isReversed () {
+        return this._isReversed;
+    }
+    protected _isReversed: boolean;
+
+    /**
+     * Check if timeline is paused
+     */
+    get isPaused () {
+        return this._isPaused;
+    }
+    protected _isPaused: boolean;
+
+    /**
+     * The animation frame
+     */
+    protected _animationFrame?: number;
+    /**
+     * Last time when animationFrame callback has been called
+     */
+    protected _animationFrameLastTime: number;
+
+
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+        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
+     */
+    public play () {
+        if (this._destroyed) {
+            return;
+        }
+        if (this.prop.reset && this.progress === 1) {
+            this._progress = 0;
+        }
+        this._isReversed = false;
+        this._isPaused = false;
+        if (!this.isPlaying) {
+            this._animationFrameLastTime = +new Date();
+            this._animate();
+        }
+    }
+
+    /**
+     * Play reversed timeline
+     */
+    public reverse () {
+        if (this._destroyed) {
+            return;
+        }
+        if (this.prop.reset && this.progress === 0) {
+            this._progress = 1;
+        }
+        this._isReversed = true;
+        this._isPaused = false;
+        if (!this.isPlaying) {
+            this._animationFrameLastTime = +new Date();
+            this._animate();
+        }
+    }
+
+    /**
+     * Pause animation
+     */
+    public pause () {
+        if (this._destroyed) {
+            return;
+        }
+        this._isPaused = true;
+        if (this._animationFrame) {
+            window.cancelAnimationFrame(this._animationFrame);
+        }
+        this._animationFrame = undefined;
+    }
+
+
+
+    /**
+     * Start animation
+     */
+    protected _animate () {
+        // stop if animation is paused
+        if (this._isPaused) {
+            return;
+        }
+        const { isReversed } = this;
+
+        // calculate difference between frames
+        const currentTime = +new Date();
+        const frameDiff = Math.abs(this._animationFrameLastTime - currentTime);
+        this._animationFrameLastTime = currentTime;
+
+        // calculate current progress
+        const progressIterator = frameDiff / this.prop.duration / (isReversed ? -1 : 1);
+        const progressTarget = boundVal(
+            this.progress + progressIterator,
+            [0, 1],
+        );
+        this.progress = progressTarget;
+
+        // end animation
+        if (
+            (progressTarget === 1 && !isReversed)
+            || (progressTarget === 0 && isReversed)
+        ) {
+            this._isReversed = false;
+            this._isPaused = false;
+            this._animationFrame = undefined;
+            return;
+        }
+
+        // continue animation
+        this._animationFrame = window.requestAnimationFrame(this._animate.bind(this));
+    }
+
+    /**
+     * Events on progress
+     */
+    protected _handleProgress () {
+        super._handleProgress();
+
+        const progress = this._progress;
+
+        // launch callbacks
+        if (progress === 0) {
+            this.callbacks.tbt('start', false);
+        } else if (progress === 1) {
+            this.callbacks.tbt('end', false);
+            if (this.prop.destroyOnEnd) {
+                this.destroy();
+            }
+        }
+    }
+
+
+
+    /**
+     * Destroy the timeline
+     */
+    protected _destroy () {
+        this.pause();
+        super._destroy();
+    }
+}

package/src/ts/index.ts

@@ -0,0 +1,94 @@
+import * as common from './utils/common';
+import * as listeners from './utils/listeners';
+import * as math from './utils/math';
+
+import * as GeneralTypes from './utils/types/general';
+
+import { Application, NApplication } from './app/Application';
+import { Viewport, NViewport } from './app/events/Viewport';
+import { PageLoad, NPageLoad } from './app/events/PageLoad';
+
+import { Callbacks, NCallbacks } from './base/Callbacks';
+import { MutableProp, NMutableProp } from './base/MutableProp';
+import { Module, NModule } from './base/Module';
+import { Component, NComponent } from './base/Component';
+import { Plugin, NPlugin } from './base/Plugin';
+
+import { Page, NPage } from './components/page/Page';
+
+import { AnimationFrame, NAnimationFrame } from './components/animation-frame/AnimationFrame';
+
+import { StaticTimeline, NStaticTimeline } from './components/timeline/StaticTimeline';
+import { Timeline, NTimeline } from './components/timeline/Timeline';
+
+import { Preloader, NPreloader } from './components/loading/Preloader';
+import { ProgressPreloader, NProgressPreloader } from './components/loading/ProgressPreloader';
+
+import { Dragger, NDragger } from './components/dragger/Dragger';
+import { DraggerMove, NDraggerMove } from './components/dragger/DraggerMove';
+import { DraggerDirection, NDraggerDirection } from './components/dragger/DraggerDirection';
+
+import { Ctx2D, NCtx2D } from './components/canvas/Ctx2D';
+import { Ctx2DPrerender, NCtx2DPrerender } from './components/canvas/Ctx2DPrerender';
+
+import { SmoothScroll, NSmoothScroll } from './components/scroll/smooth-scroll/SmoothScroll';
+import { ScrollBar, NScrollBar } from './components/scroll/scrollbar/ScrollBar';
+import { ScrollEventsBase, NScrollEventsBase } from './components/scroll/scrollable/ScrollEventsBase';
+import { ScrollView, NScrollView } from './components/scroll/scrollable/ScrollView';
+import { SmoothScrollKeyboardPlugin, NSmoothScrollKeyboardPlugin } from './components/scroll/plugins/SmoothScrollKeyboardPlugin';
+import { SmoothScrollDragPlugin, NSmoothScrollDragPlugin } from './components/scroll/plugins/SmoothScrollDragPlugin';
+
+import { SplitText, NSplitText } from './components/text/SplitText';
+
+import { CustomCursor, NCustomCursor } from './components/cursor/CustomCursor';
+
+const utils = {
+    common,
+    listeners,
+    math,
+};
+
+
+
+export {
+    utils,
+    GeneralTypes,
+
+    Application, NApplication,
+    Viewport, NViewport,
+    PageLoad, NPageLoad,
+
+    Callbacks, NCallbacks,
+    MutableProp, NMutableProp,
+    Module, NModule,
+    Component, NComponent,
+    Plugin, NPlugin,
+
+    Page, NPage,
+
+    AnimationFrame, NAnimationFrame,
+
+    StaticTimeline, NStaticTimeline,
+    Timeline, NTimeline,
+
+    Preloader, NPreloader,
+    ProgressPreloader, NProgressPreloader,
+
+    Dragger, NDragger,
+    DraggerMove, NDraggerMove,
+    DraggerDirection, NDraggerDirection,
+
+    Ctx2D, NCtx2D,
+    Ctx2DPrerender, NCtx2DPrerender,
+
+    SmoothScroll, NSmoothScroll,
+    ScrollBar, NScrollBar,
+    ScrollEventsBase, NScrollEventsBase,
+    ScrollView, NScrollView,
+    SmoothScrollKeyboardPlugin, NSmoothScrollKeyboardPlugin,
+    SmoothScrollDragPlugin, NSmoothScrollDragPlugin,
+
+    SplitText, NSplitText,
+
+    CustomCursor, NCustomCursor,
+};

package/src/ts/utils/common/index.ts

@@ -0,0 +1,9 @@
+import randID from './randID';
+import mergeWithoutArrays from './mergeWithoutArrays';
+import timeoutCallback from './timeoutCallback';
+
+export {
+    randID,
+    mergeWithoutArrays,
+    timeoutCallback,
+};

package/src/ts/utils/common/mergeWithoutArrays.ts

@@ -0,0 +1,20 @@
+import mergeWith from 'lodash.mergewith';
+
+/**
+ * Deep merge of two objects except for arrays.
+ * The function doesn't change the "object" and "source".
+ */
+export default function mergeWithoutArrays <
+    A extends Record<string, any>,
+    B extends Record<string, any>,
+> (
+    object: A,
+    source: B,
+): A & B {
+    return mergeWith(object, source, (objValue, srcValue) => {
+        if (Array.isArray(objValue)) {
+            return srcValue as Record<string, any>;
+        }
+        return undefined;
+    });
+}

package/src/ts/utils/common/randID.ts

@@ -0,0 +1,9 @@
+/**
+ * Generate a random ID
+ */
+export default function randID (
+    prefix = 'id',
+) {
+    const id = `${+new Date()}_${Math.round(Math.random() * 1000)}`;
+    return `${prefix}_${id}`;
+}

package/src/ts/utils/common/timeoutCallback.ts

@@ -0,0 +1,16 @@
+/**
+ * Launch a function in a certain amount of time
+ * If the timeout argument is zero, the callback will be launched synchronously
+ */
+export default function timeoutCallback (
+    callback: Function,
+    timeout: number,
+) {
+    if (timeout === 0) {
+        callback();
+    } else {
+        setTimeout(() => {
+            callback();
+        }, timeout);
+    }
+}

package/src/ts/utils/errors.ts

@@ -0,0 +1,6 @@
+export const vevetAppErrorText = `Vevet.Application does not exist yet. 
+Call "new Vevet.Application()" before using all the stuff`;
+
+export function throwVevetAppError () {
+    throw new Error(vevetAppErrorText);
+}

package/src/ts/utils/listeners/index.ts

@@ -0,0 +1,7 @@
+import onScroll from './onScroll';
+import intersectionObserverSupported from './intersectionObserverSupported';
+
+export {
+    onScroll,
+    intersectionObserverSupported,
+};

package/src/ts/utils/listeners/intersectionObserverSupported.ts

@@ -0,0 +1,10 @@
+export default function intersectionObserverSupported () {
+    if (
+        !('IntersectionObserver' in window)
+        || !('IntersectionObserverEntry' in window)
+        || !('intersectionRatio' in window.IntersectionObserverEntry.prototype)
+    ) {
+        return false;
+    }
+    return true;
+}

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

@@ -0,0 +1,56 @@
+import { addEventListener, IAddEventListener, selectOne } from 'vevet-dom';
+import { SmoothScroll } from '../../components/scroll/smooth-scroll/SmoothScroll';
+import { IRemovable } from '../types/general';
+
+/**
+ * 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,
+            });
+        });
+    } else {
+        let outer: Element | Window;
+        if (typeof selector === 'string') {
+            outer = selectOne(selector) as Element;
+        } else {
+            outer = selector;
+        }
+        if (outer) {
+            listeners.push(addEventListener(
+                outer,
+                'scroll',
+                () => {
+                    const scrollTop = outer instanceof Window
+                        ? outer.pageYOffset : outer.scrollTop;
+                    const scrollLeft = outer instanceof Window
+                        ? outer.pageXOffset : outer.scrollLeft;
+                    callback({
+                        scrollTop,
+                        scrollLeft,
+                    });
+                },
+            ));
+        }
+    }
+
+    return {
+        remove: () => {
+            listeners.forEach((listener) => {
+                listener.remove();
+            });
+        },
+    };
+}

package/src/ts/utils/math/boundVal.ts

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

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

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

package/src/ts/utils/math/lerp.ts

@@ -0,0 +1,16 @@
+/**
+ * Linear interpolation
+ */
+export default function lerp (
+    current: number,
+    target: number,
+    ease: number,
+    approximationLeft = 0.001,
+) {
+    const val = current * (1 - ease) + target * ease;
+    const diff = Math.abs(target - val);
+    if (diff <= approximationLeft) {
+        return target;
+    }
+    return val;
+}

package/src/ts/utils/math/scopeProgress.ts

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

package/src/ts/utils/types/general.ts

@@ -0,0 +1,7 @@
+export interface IRemovable {
+    remove: () => void;
+}
+
+export interface IDestroyable {
+    destroy: () => void;
+}

package/src/ts/utils/types/utility.ts

@@ -0,0 +1,34 @@
+interface ModuleLike {
+    prop: any;
+    prefix: string;
+    name: string;
+    destroy: () => void;
+}
+
+export declare type Primitive = string | number | boolean | bigint | symbol | undefined | null;
+export declare type Builtin =
+    Primitive | Function | Date | Error | RegExp | Element | Window | ModuleLike;
+
+declare type DeepRequired<T> = T extends Builtin
+    ? NonNullable<T>
+    : T extends Map<infer K, infer V>
+    ? Map<DeepRequired<K>, DeepRequired<V>>
+    : T extends ReadonlyMap<infer K, infer V>
+    ? ReadonlyMap<DeepRequired<K>, DeepRequired<V>>
+    : T extends WeakMap<infer K, infer V>
+    ? WeakMap<DeepRequired<K>, DeepRequired<V>>
+    : T extends Set<infer U>
+    ? Set<DeepRequired<U>>
+    : T extends ReadonlySet<infer U>
+    ? ReadonlySet<DeepRequired<U>>
+    : T extends WeakSet<infer U>
+    ? WeakSet<DeepRequired<U>>
+    : T extends Promise<infer U>
+    ? Promise<DeepRequired<U>>
+    : T extends {}
+    ? {
+        [K in keyof T]-?: DeepRequired<T[K]>;
+    }
+    : NonNullable<T>;
+
+export declare type RequiredModuleProp<T> = DeepRequired<T>;