vevet 2.16.1 → 3.0.0-beta.0

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

@@ -1,434 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressPreloader = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var p_cancelable_1 = __importDefault(require("p-cancelable"));
-var AnimationFrame_1 = require("../animation-frame/AnimationFrame");
-var clamp_1 = __importDefault(require("../../utils/math/clamp"));
-var lerp_1 = __importDefault(require("../../utils/math/lerp"));
-var Preloader_1 = require("./Preloader");
-var Timeline_1 = require("../timeline/Timeline");
-/**
- * A page preloader with smooth progress calculation
- */
-var ProgressPreloader = /** @class */ (function (_super) {
-    __extends(ProgressPreloader, _super);
-    function ProgressPreloader(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        // 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();
-        }
-        return _this;
-    }
-    ProgressPreloader.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { resources: 0, loaders: {
-                img: true,
-                video: true,
-                custom: '.js-preload',
-                ignoreClassName: 'js-preload-ignore',
-            }, calc: {
-                lerp: 0.1,
-                forceEnd: 500,
-            } });
-    };
-    Object.defineProperty(ProgressPreloader.prototype, "imgs", {
-        /**
-         * Image resources
-         */
-        get: function () {
-            return this._imgs;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ProgressPreloader.prototype, "videos", {
-        /**
-         * Video resources
-         */
-        get: function () {
-            return this._videos;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ProgressPreloader.prototype, "customResources", {
-        /**
-         * Custom resources
-         */
-        get: function () {
-            return this._customResources;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ProgressPreloader.prototype, "resourcesTotal", {
-        /**
-         * Quantity of resources to be preloader
-         */
-        get: function () {
-            return this._resourcesTotal;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ProgressPreloader.prototype, "resourcesLoaded", {
-        /**
-         * Quantity of resources been already loaded
-         */
-        get: function () {
-            return this._resourcesLoaded;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ProgressPreloader.prototype, "loadProgress", {
-        /**
-         * Progress of resources loaded
-         */
-        get: function () {
-            return this.resourcesLoaded / this.resourcesTotal;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ProgressPreloader.prototype, "progress", {
-        /**
-         * Preloader progress
-         */
-        get: function () {
-            return this._progress;
-        },
-        set: function (val) {
-            this._progress = val;
-            this._handleProgress();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ProgressPreloader.prototype._constructor = function () {
-        _super.prototype._constructor.call(this);
-        this._getResources();
-    };
-    ProgressPreloader.prototype._setEvents = function () {
-        var _this = this;
-        _super.prototype._setEvents.call(this);
-        var calc = this.prop.calc;
-        var lerpVal = calc.lerp;
-        // create animation frame if needed
-        if (typeof lerpVal === 'number') {
-            this._animationFrame = new AnimationFrame_1.AnimationFrame();
-            this._animationFrame.addCallback('frame', function () {
-                _this.progress = (0, lerp_1.default)(_this.progress, _this.loadProgress, lerpVal);
-            });
-            this._animationFrame.play();
-        }
-        // preload resources
-        this._preloadResources();
-        // iterate resources on page load
-        this._app.onPageLoaded().then(function () {
-            _this._handleLoadedResource();
-        });
-    };
-    /**
-     * Seek the moment when the page is fully loaded
-     */
-    ProgressPreloader.prototype._onLoaded = function () {
-        var _this = this;
-        return new p_cancelable_1.default(function (resolve) {
-            var callbackLaunched = false;
-            _this.callbacks.add('progress', function (data) {
-                if (data.progress >= 1 && !callbackLaunched) {
-                    resolve();
-                    callbackLaunched = true;
-                }
-            }, {
-                protected: true,
-            });
-        });
-    };
-    /**
-     * Get resources to be preloader
-     */
-    ProgressPreloader.prototype._getResources = function () {
-        var _this = this;
-        var loaders = this.prop.loaders;
-        // get images
-        if (loaders.img) {
-            var imgs = (0, vevet_dom_1.selectAll)('img');
-            imgs.forEach(function (img) {
-                if (img.classList.contains(loaders.ignoreClassName)) {
-                    return;
-                }
-                _this._imgs.push(img);
-                _this._resourcesTotal += 1;
-            });
-        }
-        // get videos
-        if (loaders.video) {
-            var videos = (0, vevet_dom_1.selectAll)('video');
-            videos.forEach(function (video) {
-                if (video.classList.contains(loaders.ignoreClassName)) {
-                    return;
-                }
-                _this._videos.push(video);
-                _this._resourcesTotal += 1;
-            });
-        }
-        // get custom resources
-        if (loaders.custom) {
-            Array.from((0, vevet_dom_1.selectAll)(loaders.custom)).forEach(function (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
-                var loadCount = parseInt(el.getAttribute('data-load-count') || '1', 10);
-                loadCount = Number.isNaN(loadCount) ? 1 : (0, clamp_1.default)(loadCount, [1, Infinity]);
-                for (var index = 1; index <= loadCount; index += 1) {
-                    var targetProgress = index / loadCount;
-                    _this._customResources.push({
-                        el: el,
-                        targetProgress: targetProgress,
-                    });
-                }
-            });
-            this._resourcesTotal += this._customResources.length;
-        }
-    };
-    /**
-     * Preload all resources
-     */
-    ProgressPreloader.prototype._preloadResources = function () {
-        var _this = this;
-        // check if no resources
-        if (this._resourcesTotal === 0) {
-            this._resourcesTotal = 1;
-            this._handleLoadedResource();
-        }
-        // preload images
-        this._imgs.forEach(function (img) {
-            if (img.complete) {
-                _this._handleLoadedResource();
-            }
-            else {
-                var image = new Image();
-                img.addEventListener('load', function () {
-                    _this._handleLoadedResource();
-                });
-                img.addEventListener('error', function () {
-                    _this._handleLoadedResource();
-                });
-                image.src = img.currentSrc || img.src;
-            }
-        });
-        // preload videos
-        this._videos.forEach(function (video) {
-            if (video.readyState > 0) {
-                _this._handleLoadedResource();
-            }
-            else {
-                if (video.preload === 'none') {
-                    _this._handleLoadedResource();
-                    return;
-                }
-                video.addEventListener('error', function () {
-                    _this._handleLoadedResource();
-                });
-                video.addEventListener('loadedmetadata', function () {
-                    _this._handleLoadedResource();
-                });
-            }
-        });
-        // preload custom resources
-        this._customResources.forEach(function (data) {
-            _this._seekCustomResourceLoaded(data).then(function () {
-                _this._handleLoadedResource();
-            });
-        });
-    };
-    /**
-     * Seek the moment when a custom resource is loaded
-     */
-    ProgressPreloader.prototype._seekCustomResourceLoaded = function (data) {
-        var _this = this;
-        return new Promise(function (resolve) {
-            var el = data.el, targetProgress = data.targetProgress;
-            // get loaded value
-            var 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) {
-                var isLoadedAttr = el.getAttribute('data-is-loaded');
-                if (isLoadedAttr !== null && isLoadedAttr !== '') {
-                    var 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(function () {
-                if (_this.destroyed) {
-                    return;
-                }
-                _this._seekCustomResourceLoaded(data).then(function () {
-                    resolve();
-                });
-            }, 50);
-        });
-    };
-    /**
-     * Iterate quantity of loaded resources.
-     * @param quantity - Only integers
-     */
-    ProgressPreloader.prototype.addResourcesLoaded = function (quantity) {
-        if (quantity === void 0) { quantity = 1; }
-        for (var index = 0; index < quantity; index += 1) {
-            this._handleLoadedResource();
-        }
-    };
-    /**
-     * Iterate quantity of total resources.
-     * @param quantity - Only integers
-     */
-    ProgressPreloader.prototype.addResourcesTotal = function (quantity) {
-        if (quantity === void 0) { quantity = 1; }
-        this._resourcesTotal += quantity;
-    };
-    /**
-     * Event on resource loaded
-     */
-    ProgressPreloader.prototype._handleLoadedResource = function () {
-        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
-     */
-    ProgressPreloader.prototype._handleProgress = function () {
-        var _this = this;
-        // 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_1.Timeline({
-                duration: this.prop.calc.forceEnd,
-            });
-            var startProgress_1 = this.progress;
-            this._endTimeline.addCallback('progress', function (data) {
-                var diff = 1 - startProgress_1;
-                _this.progress = startProgress_1 + (diff * data.progress);
-            });
-            this._endTimeline.play();
-        }
-        // and since some time the preloader will be hidden automatically.
-        // See '_onLoaded' method.
-    };
-    /**
-     * Destroy the component
-     */
-    ProgressPreloader.prototype._destroy = function () {
-        _super.prototype._destroy.call(this);
-        if (this._animationFrame) {
-            this._animationFrame.destroy();
-        }
-    };
-    return ProgressPreloader;
-}(Preloader_1.Preloader));
-exports.ProgressPreloader = ProgressPreloader;