vevet 2.17.0 → 3.0.0-beta.1

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

@@ -1,164 +0,0 @@
-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

@@ -1,361 +0,0 @@
-import { selectAll } from 'vevet-dom';
-import PCancelable from 'p-cancelable';
-import { AnimationFrame } from '../animation-frame/AnimationFrame';
-import clamp from '../../utils/math/clamp';
-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',
-                ignoreClassName: 'js-preload-ignore',
-            }, 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) => {
-                if (img.classList.contains(loaders.ignoreClassName)) {
-                    return;
-                }
-                this._imgs.push(img);
-                this._resourcesTotal += 1;
-            });
-        }
-        // get videos
-        if (loaders.video) {
-            const videos = selectAll('video');
-            videos.forEach((video) => {
-                if (video.classList.contains(loaders.ignoreClassName)) {
-                    return;
-                }
-                this._videos.push(video);
-                this._resourcesTotal += 1;
-            });
-        }
-        // get custom resources
-        if (loaders.custom) {
-            Array.from(selectAll(loaders.custom)).forEach((el) => {
-                // note that each custom resource may have the attribute "data-load-count"
-                // which defines how many resources should be added to the loading queue.
-                // here we check this quantity and duplicate elements
-                let loadCount = parseInt(el.getAttribute('data-load-count') || '1', 10);
-                loadCount = Number.isNaN(loadCount) ? 1 : clamp(loadCount, [1, Infinity]);
-                for (let index = 1; index <= loadCount; index += 1) {
-                    const targetProgress = index / loadCount;
-                    this._customResources.push({
-                        el,
-                        targetProgress,
-                    });
-                }
-            });
-            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.currentSrc || 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((data) => {
-            this._seekCustomResourceLoaded(data).then(() => {
-                this._handleLoadedResource();
-            });
-        });
-    }
-    /**
-     * Seek the moment when a custom resource is loaded
-     */
-    _seekCustomResourceLoaded(data) {
-        return new Promise((resolve) => {
-            const { el, targetProgress } = data;
-            // get loaded value
-            let loadProgress = 0;
-            // from "isComplete" property
-            if (typeof el.isComplete !== 'undefined') {
-                if (typeof el.isComplete === 'boolean') {
-                    if (el.isComplete) {
-                        loadProgress = targetProgress;
-                    }
-                }
-                else if (typeof el.isComplete === 'number') {
-                    loadProgress = el.isComplete;
-                }
-            }
-            else if (typeof el.isLoaded !== 'undefined') {
-                // from "isLoaded" property
-                if (typeof el.isLoaded === 'boolean') {
-                    if (el.isLoaded) {
-                        loadProgress = targetProgress;
-                    }
-                }
-                else if (typeof el.isLoaded === 'number') {
-                    loadProgress = el.isLoaded;
-                }
-            }
-            // if loadProgress is still incomplete,
-            // we check the "data-is-loaded" attribute
-            if (loadProgress === 0) {
-                const isLoadedAttr = el.getAttribute('data-is-loaded');
-                if (isLoadedAttr !== null && isLoadedAttr !== '') {
-                    const isLoadedAttrNum = parseFloat(isLoadedAttr);
-                    // if the value is non-numeric, we define the the resource is loaded
-                    if (Number.isNaN(isLoadedAttrNum)) {
-                        loadProgress = targetProgress;
-                    }
-                    else {
-                        loadProgress = isLoadedAttrNum;
-                    }
-                }
-            }
-            // console.log(loadProgress, targetLoadProgress);
-            // and we finally check if the target progress was reached
-            if (loadProgress >= targetProgress) {
-                resolve();
-                return;
-            }
-            // otherwise, seek the moment when it will be loaded
-            setTimeout(() => {
-                if (this.destroyed) {
-                    return;
-                }
-                this._seekCustomResourceLoaded(data).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();
-        }
-    }
-}