vevet 2.17.0 → 3.0.0-beta.0

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

@@ -1,391 +0,0 @@
-import PCancelable from 'p-cancelable';
-import { selectAll } from 'vevet-dom';
-import { Component } from '../../base/Component';
-import { ProgressPreloader } from '../loading/ProgressPreloader';
-/**
- * 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._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();
-        }
-    }
-    get blocked() {
-        return this._blocked;
-    }
-    get created() {
-        return this._created;
-    }
-    get beforeShown() {
-        return this._beforeShown;
-    }
-    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', hasInnerPreloader: false });
-    }
-    /**
-     * 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 || 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;
-                // 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
-     */
-    _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 || 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
-     */
-    _show() {
-        const interactivePromise = this._ignorePreventPageShow();
-        this.addCallback('destroy', () => {
-            interactivePromise.cancel();
-        });
-        return new Promise((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.
-     */
-    _ignorePreventPageShow() {
-        return new PCancelable((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.
-     */
-    canShow() {
-        return new Promise((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.
-     */
-    hide() {
-        return new Promise((resolve, reject) => {
-            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
-     */
-    _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 || 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
-     */
-    _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 'show' callback.
-     * If the callback was added after the page was shown, it will be triggered immediately.
-     */
-    onBeforeShow() {
-        return new PCancelable((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((resolve) => {
-            if (this.hidden) {
-                resolve();
-            }
-            else {
-                this.addCallback('hide', () => {
-                    resolve();
-                }, {
-                    once: true,
-                });
-            }
-        });
-    }
-}

package/build/es/components/scroll/plugins/SmoothScrollDragPlugin.js

@@ -1,175 +0,0 @@
-import { DraggerMove } from '../../dragger/DraggerMove';
-import { Plugin } from '../../../base/Plugin';
-const draggingClassName = 'is-dragging';
-/**
- * A class for Plugins.
- */
-export class SmoothScrollDragPlugin extends Plugin {
-    constructor(initialProp) {
-        super(initialProp);
-        this._dragger = undefined;
-        this._componentEvents = [];
-        this._currentLerp = false;
-    }
-    _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { enabled: true, speed: 1, lerp: false, reverseDir: false, stopPropagation: false });
-    }
-    /**
-     * If is dragging at the moment
-     */
-    get isDragging() {
-        if (this._dragger) {
-            return this._dragger.isDragging;
-        }
-        return false;
-    }
-    _constructor() {
-        super._constructor();
-        this._toggleDragger();
-    }
-    _onPropMutate() {
-        super._onPropMutate();
-        this._toggleDragger();
-    }
-    /**
-     * Add or remove dragger
-     */
-    _toggleDragger() {
-        if (this.prop.enabled) {
-            this._addDragger();
-        }
-        else {
-            this._removeDragger();
-        }
-    }
-    /**
-     * Add dragger events
-     */
-    _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', (data) => {
-            this._handleDragMove(data);
-        });
-        this._dragger.addCallback('end', this._handleDragEnd.bind(this));
-        this._componentEvents.push(component.addCallback('wheel', () => {
-            var _a;
-            (_a = this._dragger) === null || _a === void 0 ? void 0 : _a.cancel();
-        }));
-    }
-    /**
-     * Remove dragger events
-     */
-    _removeDragger() {
-        if (!this._dragger) {
-            return;
-        }
-        this._dragger.destroy();
-        this._dragger = undefined;
-        this._componentEvents.forEach((evt) => {
-            evt.remove();
-        });
-        this._componentEvents = [];
-    }
-    /**
-     * Callback on dragging start
-     */
-    _handleDragStart() {
-        const { component } = this;
-        if (!component.prop.enabled) {
-            return;
-        }
-        // check scrollable area
-        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
-            return;
-        }
-        // change lerp
-        const { lerp } = this.prop;
-        if (typeof lerp !== 'boolean') {
-            this._currentLerp = component.prop.render.lerp;
-            component.changeProp({
-                render: {
-                    lerp,
-                },
-            });
-        }
-        // launch events
-        this._callbacks.tbt('start', false);
-    }
-    /**
-     * Callback on dragging move
-     */
-    _handleDragMove(data) {
-        const { component } = this;
-        if (!component.prop.enabled) {
-            return;
-        }
-        // check scrollable area
-        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
-            return;
-        }
-        const { evt } = data;
-        // get difference between coordinates and decide
-        // if we need to stop propagation
-        const { stopPropagation } = this.prop;
-        if (stopPropagation) {
-            if (!evt.cancelable) {
-                return;
-            }
-            const diffX = Math.abs(data.coords.x - data.start.x);
-            const diffY = Math.abs(data.coords.y - data.start.y);
-            if (((diffX > stopPropagation.threshold) && stopPropagation.dir === 'x')
-                || ((diffY > stopPropagation.threshold) && stopPropagation.dir === 'y')) {
-                if (evt.cancelable) {
-                    evt.preventDefault();
-                    evt.stopPropagation();
-                }
-            }
-        }
-        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;
-        // set classes
-        component.outer.classList.add(draggingClassName);
-        component.container.classList.add(draggingClassName);
-        // launch events
-        this._callbacks.tbt('move', false);
-    }
-    /**
-     * Callback on dragging end
-     */
-    _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;
-        }
-        // launch events
-        this._callbacks.tbt('end', false);
-    }
-    /**
-     * Destroy the plugin
-     */
-    _destroy() {
-        super._destroy();
-        this._removeDragger();
-    }
-}

package/build/es/components/scroll/plugins/SmoothScrollKeyboardPlugin.js

@@ -1,118 +0,0 @@
-import { childOf } from 'vevet-dom';
-import { Plugin } from '../../../base/Plugin';
-import timeoutCallback from '../../../utils/common/timeoutCallback';
-/**
- * A class for Plugins.
- */
-export class SmoothScrollKeyboardPlugin extends Plugin {
-    _setEvents() {
-        super._setEvents();
-        this.addEventListeners(window, 'keydown', (e) => {
-            this._handleKeydown(e);
-        });
-    }
-    /**
-     * Event on a key pressed
-     */
-    _handleKeydown(e) {
-        const component = this._component;
-        if (!component.prop.enabled) {
-            return;
-        }
-        // tab is active for everethyng, forms too
-        if (e.keyCode === 9) {
-            this._handleTab();
-            return;
-        }
-        // check if some element is under focus
-        // if some exists, ignore key events
-        const { activeElement } = document;
-        if (activeElement) {
-            if (activeElement instanceof HTMLInputElement
-                || activeElement instanceof HTMLTextAreaElement) {
-                return;
-            }
-        }
-        // check if the scroll container is in viewport
-        const { viewport } = this._app;
-        const bounding = component.outer.getBoundingClientRect();
-        if (!(bounding.left < viewport.width
-            && bounding.right > 0
-            && bounding.top < viewport.height
-            && bounding.bottom > 0)) {
-            return;
-        }
-        // update scroll values
-        const scrollIterator = 40;
-        switch (e.keyCode) {
-            // up
-            case 38:
-                component.targetTop -= scrollIterator;
-                break;
-            // down
-            case 40:
-                component.targetTop += scrollIterator;
-                break;
-            // right
-            case 39:
-                component.targetLeft += scrollIterator;
-                break;
-            // left
-            case 37:
-                component.targetLeft -= scrollIterator;
-                break;
-            // page down
-            case 34:
-                component.targetTop += scrollIterator * 10;
-                break;
-            // page up
-            case 33:
-                component.targetTop -= scrollIterator * 10;
-                break;
-            // home
-            case 36:
-                component.targetTop = 0;
-                component.targetLeft = 0;
-                break;
-            // end
-            case 35:
-                component.targetTop = component.scrollHeight;
-                component.targetLeft = component.scrollWidth;
-                break;
-            // space
-            case 32:
-                component.targetTop += scrollIterator * 5;
-                break;
-            default:
-                break;
-        }
-    }
-    /**
-     * Handle Tab key pressed
-     */
-    _handleTab() {
-        // get active element and scroll to it
-        timeoutCallback(() => {
-            const scroll = this._component;
-            const { activeElement } = document;
-            // skip elements that do not belong to the SmoothScroll outer
-            if (!(activeElement instanceof HTMLElement)
-                || !childOf(activeElement, scroll.outer)) {
-                return;
-            }
-            // get boundings
-            const scrollOuterBounding = scroll.outer.getBoundingClientRect();
-            const activeElementBounding = activeElement.getBoundingClientRect();
-            // get element position
-            const top = scroll.scrollTop
-                + (activeElementBounding.top - scrollOuterBounding.top)
-                - (scroll.clientHeight / 2 - activeElementBounding.height / 2);
-            const left = scroll.scrollLeft
-                + (activeElementBounding.left - scrollOuterBounding.left)
-                - (scroll.clientWidth / 2 - activeElementBounding.width / 2);
-            // apply new targets
-            scroll.targetTop = top;
-            scroll.targetLeft = left;
-        }, 120);
-    }
-}