vevet 1.4.27 → 2.0.1-dev.3

package/src/ts/components/page/Page.ts

@@ -0,0 +1,421 @@
+import PCancelable from 'p-cancelable';
+import { Component, NComponent } from '../../base/Component';
+import { RequiredModuleProp } from '../../utils/types/utility';
+
+
+
+export namespace NPage {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NComponent.StaticProp {
+        /**
+         * The name of the page
+         * @default 'home'
+         */
+        name?: string;
+    }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NComponent.ChangeableProp { }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NComponent.CallbacksTypes {
+        'create': false;
+        'show': false;
+        'hide': false;
+        'destroy': false;
+    }
+
+}
+
+
+
+/**
+ * Page is a class that may be used to initialize a page.
+ * The reason to use this class is that it allows to set a definite name for the page and manipulate
+ * with its states: creation, show, hide, and destruction.
+ * Notice that the states must be called a definite order: create -> show -> hide -> destroy
+ * and vice versa.
+ */
+export class Page <
+    StaticProp extends NPage.StaticProp = NPage.StaticProp,
+    ChangeableProp extends NPage.ChangeableProp = NPage.ChangeableProp,
+    CallbacksTypes extends NPage.CallbacksTypes = NPage.CallbacksTypes,
+> extends Component <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    /**
+     * If the page is created
+     */
+    protected _created: boolean;
+    get created () {
+        return this._created;
+    }
+
+    /**
+     * If the page is shown
+     */
+    protected _shown: boolean;
+    get shown () {
+        return this._shown;
+    }
+
+    /**
+     * If the page is hidden
+     */
+    protected _hidden: boolean;
+    get hidden () {
+        return this._hidden;
+    }
+
+    /**
+     * If the page was loaded through AJAX
+     */
+    protected _viaAJAX: boolean;
+    get viaAJAX () {
+        return this._viaAJAX;
+    }
+
+    get pageClassName () {
+        return `${this._app.prefix}page-${this.prop.name}`;
+    }
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+        init = true,
+    ) {
+        super(initialProp, false);
+
+        // set default vars
+        this._created = false;
+        this._shown = false;
+        this._hidden = false;
+        this._destroyed = false;
+        this._viaAJAX = false;
+
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            name: 'home',
+        };
+    }
+
+
+
+    /**
+     * Create the page.
+     * @param viaAJAX - If the page was loaded through AJAX
+     */
+    public create (
+        viaAJAX = false,
+    ) {
+        return new Promise<void>((
+            resolve, reject,
+        ) => {
+            this.canCreate().then(() => {
+                if (this.created) {
+                    return;
+                }
+                // update vars
+                this._created = true;
+                this._shown = false;
+                this._hidden = false;
+                this._destroyed = false;
+                this._viaAJAX = viaAJAX;
+
+                // update page
+                this._app.page = this as unknown as Page;
+                // add page class
+                this._app.html.classList.add(this.pageClassName);
+
+                // actions
+                this._create().then(() => {
+                    this.callbacks.tbt('create', false);
+                    resolve();
+                });
+            }).catch(() => {
+                reject();
+            });
+        });
+    }
+
+    /**
+     * Use this method to do some actions when creating a page
+     */
+    protected _create () {
+        return new Promise<void>((
+            resolve,
+        ) => {
+            resolve();
+        });
+    }
+
+    /**
+     * Check if the page can be created.
+     */
+    public canCreate () {
+        return new Promise<void>((
+            resolve, reject,
+        ) => {
+            if (!this.created) {
+                resolve();
+                return;
+            }
+            reject();
+        });
+    }
+
+
+
+    /**
+     * Show the page.
+     */
+    public show () {
+        return new Promise<void>((
+            resolve, reject,
+        ) => {
+            this.canShow().then(() => {
+                if (this.shown) {
+                    return;
+                }
+                // update vars
+                this._created = true;
+                this._shown = true;
+                this._hidden = false;
+                this._destroyed = false;
+
+                // actions
+                this._show().then(() => {
+                    this.callbacks.tbt('show', false);
+                    resolve();
+                });
+                // launch events
+            }).catch(() => {
+                reject();
+            });
+        });
+    }
+
+    /**
+     * Use this method to do some actions when showing a page
+     */
+    protected _show () {
+        return new Promise<void>((
+            resolve,
+        ) => {
+            resolve();
+        });
+    }
+
+    /**
+     * Check if the page can be shown.
+     */
+    public canShow () {
+        return new Promise<void>((
+            resolve, reject,
+        ) => {
+            if (this.created && !this.shown) {
+                resolve();
+                return;
+            }
+            reject();
+        });
+    }
+
+
+
+    /**
+     * Hide the page.
+     */
+    public hide () {
+        return new Promise((
+            resolve: (...arg: any) => void,
+            reject: (...arg: any) => void,
+        ) => {
+            this.canHide().then(() => {
+                if (this.hidden) {
+                    return;
+                }
+                // update vars
+                this._created = true;
+                this._shown = false;
+                this._hidden = true;
+                this._destroyed = false;
+
+                // actions
+                this._hide().then(() => {
+                    this.callbacks.tbt('hide', false);
+                    resolve();
+                });
+            }).catch(() => {
+                reject();
+            });
+        });
+    }
+
+    /**
+     * Use this method to do some actions when hiding a page
+     */
+    protected _hide () {
+        return new Promise<void>((
+            resolve,
+        ) => {
+            resolve();
+        });
+    }
+
+    /**
+     * Check if the page can be hidden.
+     */
+    public canHide () {
+        return new Promise<void>((
+            resolve, reject,
+        ) => {
+            if (this.created && this.shown && !this.hidden) {
+                resolve();
+                return;
+            }
+            reject();
+        });
+    }
+
+
+
+    /**
+     * Destroy the page.
+     */
+    public destroy () {
+        return new Promise((
+            resolve: (...arg: any) => void,
+            reject: (...arg: any) => void,
+        ) => {
+            this.canDestroy().then(() => {
+                if (this.destroyed) {
+                    return;
+                }
+                // change vars
+                this._created = false;
+                this._shown = false;
+                this._hidden = true;
+                this._destroyed = true;
+
+                // update page
+                this._app.page = false;
+                // remove page class
+                this._app.html.classList.remove(this.pageClassName);
+
+                // actions
+                this._destroy().then(() => {
+                    resolve();
+                });
+            }).catch(() => {
+                reject();
+            });
+        });
+    }
+
+    /**
+     * Use this method to do some actions when destroying a page
+     */
+    protected _destroy () {
+        return new Promise<void>((
+            resolve,
+        ) => {
+            super._destroy();
+            resolve();
+        });
+    }
+
+    /**
+     * Check if the page can be destroyed.
+     */
+    public canDestroy () {
+        return new Promise<void>((
+            resolve, reject,
+        ) => {
+            if (this.created && this.hidden && !this.destroyed) {
+                resolve();
+                return;
+            }
+            reject();
+        });
+    }
+
+
+
+    /**
+     * Add a 'create' callback.
+     * If the callback was added after the page was created, it will be triggered immediately.
+     */
+    onCreate () {
+        return new PCancelable<void>((
+            resolve,
+        ) => {
+            if (this.created) {
+                resolve();
+            } else {
+                this.addCallback('create', () => {
+                    resolve();
+                }, {
+                    once: true,
+                });
+            }
+        });
+    }
+
+    /**
+     * Add a 'show' callback.
+     * If the callback was added after the page was shown, it will be triggered immediately.
+     */
+    onShow () {
+        return new PCancelable<void>((
+            resolve,
+        ) => {
+            if (this.shown) {
+                resolve();
+            } else {
+                this.addCallback('show', () => {
+                    resolve();
+                }, {
+                    once: true,
+                });
+            }
+        });
+    }
+
+    /**
+     * Add a 'hide' callback.
+     * If the callback was added after the page was hidden, it will be triggered immediately.
+     */
+    onHide () {
+        return new PCancelable<void>((
+            resolve,
+        ) => {
+            if (this.hidden) {
+                resolve();
+            } else {
+                this.addCallback('hide', () => {
+                    resolve();
+                }, {
+                    once: true,
+                });
+            }
+        });
+    }
+}

package/src/ts/components/scroll/plugins/SmoothScrollDragPlugin.ts

@@ -0,0 +1,251 @@
+import { DraggerMove, NDraggerMove } from '../../dragger/DraggerMove';
+import { Plugin, NPlugin } from '../../../base/Plugin';
+import { NCallbacks } from '../../../base/Callbacks';
+import { SmoothScroll as SmoothScrollInstance } from '../smooth-scroll/SmoothScroll';
+import { RequiredModuleProp } from '../../../utils/types/utility';
+
+const draggingClassName = 'is-dragging';
+
+
+
+export namespace NSmoothScrollDragPlugin {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NPlugin.StaticProp {}
+
+    /**
+     * Changeable Properties
+     */
+    export interface ChangeableProp extends NPlugin.ChangeableProp {
+        /**
+         * If dragger is enabled
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * Dragger speed
+         * @default 1
+         */
+        speed?: number;
+        /**
+         * Linear interpolation of SmoothScroll.
+         * If false, the current value will be used.
+         * @default false
+         */
+        lerp?: number | false;
+        /**
+         * If need to reverse dragger direction
+         * @default false
+         */
+        reverseDir?: boolean;
+    }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NPlugin.CallbacksTypes {}
+
+}
+
+
+
+/**
+ * A class for Plugins.
+ */
+export class SmoothScrollDragPlugin<
+    StaticProp extends NSmoothScrollDragPlugin.StaticProp
+        = NSmoothScrollDragPlugin.StaticProp,
+    ChangeableProp extends NSmoothScrollDragPlugin.ChangeableProp
+        = NSmoothScrollDragPlugin.ChangeableProp,
+    CallbacksTypes extends NSmoothScrollDragPlugin.CallbacksTypes
+        = NSmoothScrollDragPlugin.CallbacksTypes
+> extends Plugin <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes,
+    SmoothScrollInstance
+> {
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...super._getDefaultProp(),
+            enabled: true,
+            speed: 1,
+            lerp: false,
+            reverseDir: false,
+        };
+    }
+
+    /**
+     * Dragger component
+     */
+    protected _dragger?: DraggerMove;
+    /**
+     * Component events
+     */
+    protected _componentEvents: NCallbacks.AddedCallback[];
+
+    /**
+     * If is dragging at the moment
+     */
+    get isDragging () {
+        if (this._dragger) {
+            return this._dragger.isDragging;
+        }
+        return false;
+    }
+
+    /**
+     * Current lerp of SmoothScroll
+     */
+    protected _currentLerp: number | false;
+
+
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+    ) {
+        super(initialProp);
+        this._componentEvents = [];
+        this._currentLerp = false;
+    }
+
+    protected _constructor () {
+        super._constructor();
+        this._toggleDragger();
+    }
+
+    protected _onPropMutate () {
+        super._onPropMutate();
+        this._toggleDragger();
+    }
+
+
+
+    /**
+     * Add or remove dragger
+     */
+    protected _toggleDragger () {
+        if (this.prop.enabled) {
+            this._addDragger();
+        } else {
+            this._removeDragger();
+        }
+    }
+
+    /**
+     * Add dragger events
+     */
+    protected _addDragger () {
+        if (this._dragger) {
+            return;
+        }
+        const { component } = this;
+
+        this._dragger = new DraggerMove({
+            container: component.outer,
+        });
+        this._dragger.addCallback('start', this._handleDragStart.bind(this));
+        this._dragger.addCallback('move', this._handleDragMove.bind(this));
+        this._dragger.addCallback('end', this._handleDragEnd.bind(this));
+
+        this._componentEvents.push(
+            component.addCallback('wheel', () => {
+                this._dragger?.cancel();
+            }),
+        );
+    }
+
+    /**
+     * Remove dragger events
+     */
+    protected _removeDragger () {
+        if (!this._dragger) {
+            return;
+        }
+
+        this._dragger.destroy();
+        this._dragger = undefined;
+
+        this._componentEvents.forEach((evt) => {
+            evt.remove();
+        });
+        this._componentEvents = [];
+    }
+
+
+
+    /**
+     * Callback on dragging start
+     */
+    protected _handleDragStart () {
+        const { component } = this;
+        if (!component.prop.enabled) {
+            return;
+        }
+        // set classes
+        component.outer.classList.add(draggingClassName);
+        component.container.classList.add(draggingClassName);
+        // change lerp
+        const { lerp } = this.prop;
+        if (typeof lerp !== 'boolean') {
+            this._currentLerp = component.prop.render.lerp;
+            component.changeProp({
+                render: {
+                    lerp,
+                },
+            });
+        }
+    }
+
+    /**
+     * Callback on dragging move
+     */
+    protected _handleDragMove (
+        data: NDraggerMove.CallbacksTypes['move'],
+    ) {
+        const { component } = this;
+        if (!component.prop.enabled) {
+            return;
+        }
+        const { speed, reverseDir } = this.prop;
+        // get coordinates
+        const x = data.step.x * speed;
+        const y = data.step.y * speed;
+        // update scroll values
+        component.targetLeft -= !reverseDir ? x : y;
+        component.targetTop -= !reverseDir ? y : x;
+    }
+
+    /**
+     * Callback on dragging end
+     */
+    protected _handleDragEnd () {
+        const { component } = this;
+        // set classes
+        component.outer.classList.remove(draggingClassName);
+        component.container.classList.remove(draggingClassName);
+        // restore SmoothScroll Lerp
+        if (typeof this._currentLerp !== 'boolean') {
+            component.changeProp({
+                render: {
+                    lerp: this._currentLerp,
+                },
+            });
+            this._currentLerp = false;
+        }
+    }
+
+
+
+    /**
+     * Destroy the plugin
+     */
+    protected _destroy () {
+        super._destroy();
+        this._removeDragger();
+    }
+}