vevet 1.4.27 → 2.0.1-dev.3

package/build/es/components/page/Page.js

@@ -0,0 +1,283 @@
+import PCancelable from 'p-cancelable';
+import { Component } from '../../base/Component';
+/**
+ * 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 extends Component {
+    constructor(initialProp, 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();
+        }
+    }
+    get created() {
+        return this._created;
+    }
+    get shown() {
+        return this._shown;
+    }
+    get hidden() {
+        return this._hidden;
+    }
+    get viaAJAX() {
+        return this._viaAJAX;
+    }
+    get pageClassName() {
+        return `${this._app.prefix}page-${this.prop.name}`;
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { name: 'home' });
+    }
+    /**
+     * Create the page.
+     * @param viaAJAX - If the page was loaded through AJAX
+     */
+    create(viaAJAX = false) {
+        return new Promise((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;
+                // 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
+     */
+    _create() {
+        return new Promise((resolve) => {
+            resolve();
+        });
+    }
+    /**
+     * Check if the page can be created.
+     */
+    canCreate() {
+        return new Promise((resolve, reject) => {
+            if (!this.created) {
+                resolve();
+                return;
+            }
+            reject();
+        });
+    }
+    /**
+     * Show the page.
+     */
+    show() {
+        return new Promise((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
+     */
+    _show() {
+        return new Promise((resolve) => {
+            resolve();
+        });
+    }
+    /**
+     * Check if the page can be shown.
+     */
+    canShow() {
+        return new Promise((resolve, reject) => {
+            if (this.created && !this.shown) {
+                resolve();
+                return;
+            }
+            reject();
+        });
+    }
+    /**
+     * Hide the page.
+     */
+    hide() {
+        return new Promise((resolve, reject) => {
+            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
+     */
+    _hide() {
+        return new Promise((resolve) => {
+            resolve();
+        });
+    }
+    /**
+     * Check if the page can be hidden.
+     */
+    canHide() {
+        return new Promise((resolve, reject) => {
+            if (this.created && this.shown && !this.hidden) {
+                resolve();
+                return;
+            }
+            reject();
+        });
+    }
+    /**
+     * Destroy the page.
+     */
+    destroy() {
+        return new Promise((resolve, reject) => {
+            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
+     */
+    _destroy() {
+        return new Promise((resolve) => {
+            super._destroy();
+            resolve();
+        });
+    }
+    /**
+     * Check if the page can be destroyed.
+     */
+    canDestroy() {
+        return new Promise((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((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((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((resolve) => {
+            if (this.hidden) {
+                resolve();
+            }
+            else {
+                this.addCallback('hide', () => {
+                    resolve();
+                }, {
+                    once: true,
+                });
+            }
+        });
+    }
+}