vevet 1.4.27 → 2.0.1-dev.3

package/build/es/components/dragger/DraggerMove.js

@@ -0,0 +1,56 @@
+import { addEventListener, } from 'vevet-dom';
+import { Dragger } from './Dragger';
+/**
+ * Dragger with 'move' callbacks and motion.
+ */
+export class DraggerMove extends Dragger {
+    /**
+     * Step on move
+     */
+    get stepCoords() {
+        return {
+            x: this._coords.x - this._prevCoords.x,
+            y: this._coords.y - this._prevCoords.y,
+        };
+    }
+    /**
+     * Add runtime events
+     */
+    _addRuntimeEvents() {
+        super._addRuntimeEvents();
+        const { usePassive } = this.prop;
+        // move
+        this._runtimeEvents.push(addEventListener(window, 'mousemove', this._handleMove.bind(this), {
+            passive: usePassive,
+        }));
+        this._runtimeEvents.push(addEventListener(window, 'touchmove', this._handleMove.bind(this), {
+            passive: usePassive,
+        }));
+    }
+    /**
+     * Event on move
+     */
+    _handleMove(e) {
+        const evt = this._normalizeEvent(e);
+        if (!this.isDragging || evt.id !== this._pointerID) {
+            return false;
+        }
+        // update coordinates
+        this._prevCoords = { x: this._coords.x, y: this._coords.y };
+        this._coords = { x: evt.x, y: evt.y };
+        // call events
+        this.callbacks.tbt('move', {
+            evt: e,
+            start: this.startCoords,
+            coords: this.coords,
+            step: this.stepCoords,
+        });
+        return true;
+    }
+    /**
+     * Destroy the module
+     */
+    _destroy() {
+        super._destroy();
+    }
+}

package/build/es/components/loading/Preloader.js

@@ -0,0 +1,164 @@
+import { selectOne } from 'vevet-dom';
+import PCancelable from 'p-cancelable';
+import { Component } from '../../base/Component';
+import timeoutCallback from '../../utils/common/timeoutCallback';
+/**
+ * A page preloader
+ */
+export class Preloader extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // get preloader container
+        if (this.prop.container) {
+            const container = selectOne(this.prop.container);
+            if (container instanceof HTMLElement) {
+                this._container = container;
+            }
+        }
+        // add classes
+        if (this._container) {
+            this._container.classList.add(this.prefix);
+        }
+        // set default vars
+        this._startTime = +new Date();
+        this._endTime = Infinity;
+        this._toBeHidden = false;
+        this._isHidden = false;
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: `#${this.prefix}`, hide: 250 });
+    }
+    get prefix() {
+        return `${this._app.prefix}preloader`;
+    }
+    /**
+     * Preloader container
+     */
+    get container() {
+        return this._container;
+    }
+    /**
+     * Preloader start time
+     */
+    get startTime() {
+        return this._startTime;
+    }
+    /**
+     * Preloader end time
+     */
+    get endTime() {
+        return this._endTime;
+    }
+    /**
+     * Total time of page loading before the preloader is to be hidden
+     */
+    get totalTime() {
+        return this._endTime - this._startTime;
+    }
+    /**
+     * If the preloader is hidden
+     */
+    get isHidden() {
+        return this._isHidden;
+    }
+    _setEvents() {
+        super._setEvents();
+        this._onLoaded().then(() => {
+            this._endTime = +new Date();
+            this._handleLoaded();
+        });
+    }
+    /**
+     * Trace the moment when the page is fully loaded
+     */
+    _onLoaded() {
+        return new PCancelable((resolve) => {
+            if (this._app.pageLoad.loaded) {
+                resolve();
+            }
+            else {
+                this._pageLoadEvent = this._app.pageLoad.add('', () => {
+                    resolve();
+                });
+            }
+        });
+    }
+    /**
+     * When the page is fully loaded
+     */
+    _handleLoaded() {
+        this.callbacks.tbt('loaded', false);
+        // hide the preloader
+        if (typeof this.prop.hide !== 'boolean') {
+            this.hideContainer();
+        }
+    }
+    /**
+     * Hide the container
+     */
+    hideContainer(duration = typeof this.prop.hide !== 'boolean' ? this.prop.hide : 250) {
+        this.callbacks.tbt('hide', false);
+        this._toBeHidden = true;
+        return new PCancelable((resolve) => {
+            const container = this._container;
+            // if container is not to be hidden
+            if (!container) {
+                this._handleHidden();
+                resolve();
+                return;
+            }
+            // if need to hide the container
+            container.style.transition = `opacity ${duration}ms, visibility ${duration}ms`;
+            container.style.opacity = '0';
+            container.style.visibility = 'hidden';
+            timeoutCallback(() => {
+                container.style.display = 'none';
+                this._handleHidden();
+                resolve();
+            }, duration);
+        });
+    }
+    /**
+     * Handle the moment when the container is hidden
+     */
+    _handleHidden() {
+        this._isHidden = true;
+        this.callbacks.tbt('hidden', false);
+    }
+    /**
+     * Callback at the moment when the preloader starts hiding
+     */
+    onHide(callback) {
+        if (this._toBeHidden) {
+            callback();
+            return undefined;
+        }
+        return this.callbacks.add('hide', () => {
+            callback();
+        });
+    }
+    /**
+     * Callback at the moment when the preloader is hidden
+     */
+    onHidden(callback) {
+        if (this._isHidden) {
+            callback();
+            return undefined;
+        }
+        return this.callbacks.add('hidden', () => {
+            callback();
+        });
+    }
+    /**
+     * Destroy the module
+     */
+    _destroy() {
+        var _a;
+        super._destroy();
+        (_a = this._pageLoadEvent) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+}

package/build/es/components/loading/ProgressPreloader.js

@@ -0,0 +1,304 @@
+import { selectAll } from 'vevet-dom';
+import PCancelable from 'p-cancelable';
+import { AnimationFrame } from '../animation-frame/AnimationFrame';
+import lerp from '../../utils/math/lerp';
+import { Preloader } from './Preloader';
+import { Timeline } from '../timeline/Timeline';
+/**
+ * A page preloader with smooth progress calculation
+ */
+export class ProgressPreloader extends Preloader {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // set default vars
+        this._imgs = [];
+        this._videos = [];
+        this._customResources = [];
+        this._resourcesTotal = 1 + this.prop.resources;
+        this._resourcesLoaded = 0;
+        this._progress = 0;
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { resources: 0, loaders: {
+                img: true,
+                video: true,
+                custom: '.js-preload',
+            }, calc: {
+                lerp: 0.1,
+                forceEnd: 500,
+            } });
+    }
+    /**
+     * Image resources
+     */
+    get imgs() {
+        return this._imgs;
+    }
+    /**
+     * Video resources
+     */
+    get videos() {
+        return this._videos;
+    }
+    /**
+     * Custom resources
+     */
+    get customResources() {
+        return this._customResources;
+    }
+    /**
+     * Quantity of resources to be preloader
+     */
+    get resourcesTotal() {
+        return this._resourcesTotal;
+    }
+    /**
+     * Quantity of resources been already loaded
+     */
+    get resourcesLoaded() {
+        return this._resourcesLoaded;
+    }
+    /**
+     * Progress of resources loaded
+     */
+    get loadProgress() {
+        return this.resourcesLoaded / this.resourcesTotal;
+    }
+    /**
+     * Preloader progress
+     */
+    get progress() {
+        return this._progress;
+    }
+    set progress(val) {
+        this._progress = val;
+        this._handleProgress();
+    }
+    _constructor() {
+        super._constructor();
+        this._getResources();
+    }
+    _setEvents() {
+        super._setEvents();
+        const { calc } = this.prop;
+        const { lerp: lerpVal } = calc;
+        // create animation frame if needed
+        if (typeof lerpVal === 'number') {
+            this._animationFrame = new AnimationFrame();
+            this._animationFrame.addCallback('frame', () => {
+                this.progress = lerp(this.progress, this.loadProgress, lerpVal);
+            });
+            this._animationFrame.play();
+        }
+        // preload resources
+        this._preloadResources();
+        // iterate resources on page load
+        this._app.onPageLoaded().then(() => {
+            this._handleLoadedResource();
+        });
+    }
+    /**
+     * Seek the moment when the page is fully loaded
+     */
+    _onLoaded() {
+        return new PCancelable((resolve) => {
+            let callbackLaunched = false;
+            this.callbacks.add('progress', (data) => {
+                if (data.progress >= 1 && !callbackLaunched) {
+                    resolve();
+                    callbackLaunched = true;
+                }
+            }, {
+                protected: true,
+            });
+        });
+    }
+    /**
+     * Get resources to be preloader
+     */
+    _getResources() {
+        const { loaders } = this.prop;
+        // get images
+        if (loaders.img) {
+            const imgs = selectAll('img');
+            imgs.forEach((img) => {
+                this._imgs.push(img);
+                this._resourcesTotal += 1;
+            });
+        }
+        // get videos
+        if (loaders.video) {
+            const videos = selectAll('video');
+            videos.forEach((video) => {
+                this._videos.push(video);
+                this._resourcesTotal += 1;
+            });
+        }
+        // get custom resources
+        if (loaders.custom) {
+            this._customResources = Array.from(selectAll(loaders.custom));
+            this._resourcesTotal += this._customResources.length;
+        }
+    }
+    /**
+     * Preload all resources
+     */
+    _preloadResources() {
+        // check if no resources
+        if (this._resourcesTotal === 0) {
+            this._resourcesTotal = 1;
+            this._handleLoadedResource();
+        }
+        // preload images
+        this._imgs.forEach((img) => {
+            if (img.complete) {
+                this._handleLoadedResource();
+            }
+            else {
+                const image = new Image();
+                img.addEventListener('load', () => {
+                    this._handleLoadedResource();
+                });
+                img.addEventListener('error', () => {
+                    this._handleLoadedResource();
+                });
+                image.src = img.src;
+            }
+        });
+        // preload videos
+        this._videos.forEach((video) => {
+            if (video.readyState > 0) {
+                this._handleLoadedResource();
+            }
+            else {
+                if (video.preload === 'none') {
+                    this._handleLoadedResource();
+                    return;
+                }
+                video.addEventListener('error', () => {
+                    this._handleLoadedResource();
+                });
+                video.addEventListener('loadedmetadata', () => {
+                    this._handleLoadedResource();
+                });
+            }
+        });
+        // preload custom resources
+        this._customResources.forEach((el) => {
+            this._seekCustomResourceLoaded(el).then(() => {
+                this._handleLoadedResource();
+            });
+        });
+    }
+    /**
+     * Seek the moment when a custom resource is loaded
+     */
+    _seekCustomResourceLoaded(el) {
+        return new Promise((resolve) => {
+            // check if the element is loaded
+            if (el.isComplete || el.isLoaded) {
+                resolve();
+                return;
+            }
+            if (el.getAttribute('data-is-loaded')
+                || el.getAttribute('is-loaded')) {
+                resolve();
+                return;
+            }
+            // otherwise, seek the moment when it will be loaded
+            setTimeout(() => {
+                if (this.destroyed) {
+                    return;
+                }
+                this._seekCustomResourceLoaded(el).then(() => {
+                    resolve();
+                });
+            }, 50);
+        });
+    }
+    /**
+     * Iterate quantity of loaded resources.
+     * @param quantity - Only integers
+     */
+    addResourcesLoaded(quantity = 1) {
+        for (let index = 0; index < quantity; index += 1) {
+            this._handleLoadedResource();
+        }
+    }
+    /**
+     * Iterate quantity of total resources.
+     * @param quantity - Only integers
+     */
+    addResourcesTotal(quantity = 1) {
+        this._resourcesTotal += quantity;
+    }
+    /**
+     * Event on resource loaded
+     */
+    _handleLoadedResource() {
+        if (this.loadProgress >= 1) {
+            return;
+        }
+        this._resourcesLoaded += 1;
+        this.callbacks.tbt('resourceLoad', false);
+        // update current preloader progress if no animation set
+        if (!this._animationFrame) {
+            this.progress = this.loadProgress;
+        }
+    }
+    /**
+     * Event on progress change
+     */
+    _handleProgress() {
+        // launch callback
+        this.callbacks.tbt('progress', {
+            progress: this._progress,
+        });
+        // if full progress,
+        // we hide the preloader
+        if (this.progress >= 1) {
+            // destroy animations
+            if (this._animationFrame) {
+                this._animationFrame.destroy();
+                this._animationFrame = undefined;
+            }
+            return;
+        }
+        // otherwise, we check if there's a need to launch a timeline
+        // to end the animation
+        if (typeof this.prop.calc.forceEnd === 'number'
+            && this.loadProgress >= 1
+            && !this._endTimeline) {
+            // destroy animation frame
+            if (this._animationFrame) {
+                this._animationFrame.destroy();
+                this._animationFrame = undefined;
+            }
+            // create a timeline
+            this._endTimeline = new Timeline({
+                duration: this.prop.calc.forceEnd,
+            });
+            const startProgress = this.progress;
+            this._endTimeline.addCallback('progress', (data) => {
+                const diff = 1 - startProgress;
+                this.progress = startProgress + (diff * data.progress);
+            });
+            this._endTimeline.play();
+        }
+        // and since some time the preloader will be hidden automatically.
+        // See '_onLoaded' method.
+    }
+    /**
+     * Destroy the component
+     */
+    _destroy() {
+        super._destroy();
+        if (this._animationFrame) {
+            this._animationFrame.destroy();
+        }
+    }
+}