vevet 2.17.0 → 3.0.0-beta.0

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

@@ -1,537 +0,0 @@
-import PCancelable from 'p-cancelable';
-import { selectAll } from 'vevet-dom';
-import { Component, NComponent } from '../../base/Component';
-import { RequiredModuleProp } from '../../utils/types/utility';
-import { ProgressPreloader } from '../loading/ProgressPreloader';
-
-
-
-export namespace NPage {
-
-    /**
-     * Static properties
-     */
-    export interface StaticProp extends NComponent.StaticProp {
-        /**
-         * The name of the page
-         * @default 'home'
-         */
-        name?: string;
-        hasInnerPreloader?: boolean;
-    }
-
-    /**
-     * Changeable properties
-     */
-    export interface ChangeableProp extends NComponent.ChangeableProp { }
-
-    /**
-     * Available callbacks
-     */
-    export interface CallbacksTypes extends NComponent.CallbacksTypes {
-        'create': false;
-        'beforeshow': 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
-> {
-    protected _blocked: boolean;
-    protected get blocked () {
-        return this._blocked;
-    }
-
-    /**
-     * If the page is created
-     */
-    protected _created: boolean;
-    get created () {
-        return this._created;
-    }
-
-    /**
-     * If 'beforeshow' callback is called
-     */
-    protected _beforeShown: boolean;
-    get beforeShown () {
-        return this._beforeShown;
-    }
-    /**
-     * 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._blocked = false;
-        this._created = false;
-        this._beforeShown = 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',
-            hasInnerPreloader: false,
-        };
-    }
-
-
-
-    /**
-     * 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 || this.blocked) {
-                    reject();
-                    return;
-                }
-                // update vars
-                this._blocked = true;
-                this._beforeShown = false;
-                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);
-                    this._blocked = false;
-                    this._created = true;
-                    resolve();
-                }).catch(() => {
-                    reject();
-                });
-            }).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 || this.blocked) {
-                    reject();
-                    return;
-                }
-                // update vars
-                this._blocked = true;
-                this._created = true;
-                this._hidden = false;
-                this._destroyed = false;
-
-                // actions
-                this.callbacks.tbt('beforeshow', false);
-                this._beforeShown = true;
-                this._show().then(() => {
-                    this.callbacks.tbt('show', false);
-                    this._blocked = false;
-                    this._shown = true;
-                    resolve();
-                }).catch(() => {
-                    reject();
-                });
-                // launch events
-            }).catch(() => {
-                reject();
-            });
-        });
-    }
-
-    /**
-     * Use this method to do some actions when showing a page
-     */
-    protected _show () {
-        const interactivePromise = this._ignorePreventPageShow();
-        this.addCallback('destroy', () => {
-            interactivePromise.cancel();
-        });
-        return new Promise<void>((resolve, reject) => {
-            interactivePromise.then(() => {
-                resolve();
-            }).catch(() => {
-                reject();
-            });
-        });
-    }
-
-    /**
-     * Some elements may have the attribute `data-prevent-page-show="true"`
-     * This means that the page should not be interactive (and scrollable).
-     * Here we search for such elements.
-     * When there's no elements with this attribute, the page is interactive.
-     */
-    protected _ignorePreventPageShow () {
-        return new PCancelable<void>((resolve, reject) => {
-            if (this._destroyed) {
-                reject();
-            }
-            const elements = selectAll('[data-prevent-page-show]');
-            if (elements.length === 0) {
-                resolve();
-            } else {
-                setTimeout(() => {
-                    this._ignorePreventPageShow().then(() => {
-                        resolve();
-                    }).catch(() => {
-                        reject();
-                    });
-                }, 30);
-            }
-        });
-    }
-
-    /**
-     * Check if the page can be shown.
-     */
-    public canShow () {
-        return new Promise<void>((
-            resolve, reject,
-        ) => {
-            if (this.created && !this.shown) {
-                // inner preloader
-                if (this.prop.hasInnerPreloader) {
-                    const preloader = new ProgressPreloader({
-                        parent: this,
-                        container: false,
-                        hide: false,
-                        loaders: {
-                            img: false,
-                            video: false,
-                            custom: '.js-preload-inner',
-                        },
-                        calc: {
-                            lerp: false,
-                        },
-                    });
-                    preloader.addCallback('loaded', () => {
-                        resolve();
-                    });
-                } else {
-                    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 || this.blocked) {
-                    reject();
-                    return;
-                }
-                // update vars
-                this._blocked = true;
-                this._created = true;
-                this._beforeShown = false;
-                this._shown = false;
-                this._destroyed = false;
-
-                // actions
-                this._hide().then(() => {
-                    this.callbacks.tbt('hide', false);
-                    this._blocked = false;
-                    this._hidden = true;
-                    resolve();
-                }).catch(() => {
-                    reject();
-                });
-            }).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 || this.blocked) {
-                    reject();
-                    return;
-                }
-                // change vars
-                this._blocked = true;
-                this._created = false;
-                this._beforeShown = false;
-                this._shown = false;
-                this._hidden = true;
-
-                // update page
-                this._app.page = false;
-                // remove page class
-                this._app.html.classList.remove(this.pageClassName);
-
-                // actions
-                this._destroy().then(() => {
-                    this._blocked = false;
-                    this._destroyed = true;
-                    resolve();
-                }).catch(() => {
-                    reject();
-                });
-            }).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 'show' callback.
-     * If the callback was added after the page was shown, it will be triggered immediately.
-     */
-    onBeforeShow () {
-        return new PCancelable<void>((
-            resolve,
-        ) => {
-            if (this.shown || this.beforeShown) {
-                resolve();
-            } else {
-                this.addCallback('beforeshow', () => {
-                    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,
-                });
-            }
-        });
-    }
-}