vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,84 @@
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggerMove = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var Dragger_1 = require("./Dragger");
+/**
+ * Dragger with 'move' callbacks and motion.
+ */
+var DraggerMove = /** @class */ (function (_super) {
+    __extends(DraggerMove, _super);
+    function DraggerMove() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(DraggerMove.prototype, "stepCoords", {
+        /**
+         * Step on move
+         */
+        get: function () {
+            return {
+                x: this._coords.x - this._prevCoords.x,
+                y: this._coords.y - this._prevCoords.y,
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Add runtime events
+     */
+    DraggerMove.prototype._addRuntimeEvents = function () {
+        _super.prototype._addRuntimeEvents.call(this);
+        var usePassive = this.prop.usePassive;
+        // move
+        this._runtimeEvents.push(vevet_dom_1.addEventListener(window, 'mousemove', this._handleMove.bind(this), {
+            passive: usePassive,
+        }));
+        this._runtimeEvents.push(vevet_dom_1.addEventListener(window, 'touchmove', this._handleMove.bind(this), {
+            passive: usePassive,
+        }));
+    };
+    /**
+     * Event on move
+     */
+    DraggerMove.prototype._handleMove = function (e) {
+        var 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
+     */
+    DraggerMove.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+    };
+    return DraggerMove;
+}(Dragger_1.Dragger));
+exports.DraggerMove = DraggerMove;

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

@@ -0,0 +1,229 @@
+"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.Preloader = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var p_cancelable_1 = __importDefault(require("p-cancelable"));
+var Component_1 = require("../../base/Component");
+var timeoutCallback_1 = __importDefault(require("../../utils/common/timeoutCallback"));
+/**
+ * A page preloader
+ */
+var Preloader = /** @class */ (function (_super) {
+    __extends(Preloader, _super);
+    function Preloader(initialProp, init) {
+        if (init === void 0) { init = true; }
+        var _this = _super.call(this, initialProp, false) || this;
+        // get preloader container
+        if (_this.prop.container) {
+            var container = vevet_dom_1.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();
+        }
+        return _this;
+    }
+    Preloader.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: "#" + this.prefix, hide: 250 });
+    };
+    Object.defineProperty(Preloader.prototype, "prefix", {
+        get: function () {
+            return this._app.prefix + "preloader";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Preloader.prototype, "container", {
+        /**
+         * Preloader container
+         */
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Preloader.prototype, "startTime", {
+        /**
+         * Preloader start time
+         */
+        get: function () {
+            return this._startTime;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Preloader.prototype, "endTime", {
+        /**
+         * Preloader end time
+         */
+        get: function () {
+            return this._endTime;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Preloader.prototype, "totalTime", {
+        /**
+         * Total time of page loading before the preloader is to be hidden
+         */
+        get: function () {
+            return this._endTime - this._startTime;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Preloader.prototype, "isHidden", {
+        /**
+         * If the preloader is hidden
+         */
+        get: function () {
+            return this._isHidden;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Preloader.prototype._setEvents = function () {
+        var _this = this;
+        _super.prototype._setEvents.call(this);
+        this._onLoaded().then(function () {
+            _this._endTime = +new Date();
+            _this._handleLoaded();
+        });
+    };
+    /**
+     * Trace the moment when the page is fully loaded
+     */
+    Preloader.prototype._onLoaded = function () {
+        var _this = this;
+        return new p_cancelable_1.default(function (resolve) {
+            if (_this._app.pageLoad.loaded) {
+                resolve();
+            }
+            else {
+                _this._pageLoadEvent = _this._app.pageLoad.add('', function () {
+                    resolve();
+                });
+            }
+        });
+    };
+    /**
+     * When the page is fully loaded
+     */
+    Preloader.prototype._handleLoaded = function () {
+        this.callbacks.tbt('loaded', false);
+        // hide the preloader
+        if (typeof this.prop.hide !== 'boolean') {
+            this.hideContainer();
+        }
+    };
+    /**
+     * Hide the container
+     */
+    Preloader.prototype.hideContainer = function (duration) {
+        var _this = this;
+        if (duration === void 0) { duration = typeof this.prop.hide !== 'boolean' ? this.prop.hide : 250; }
+        this.callbacks.tbt('hide', false);
+        this._toBeHidden = true;
+        return new p_cancelable_1.default(function (resolve) {
+            var 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_1.default(function () {
+                container.style.display = 'none';
+                _this._handleHidden();
+                resolve();
+            }, duration);
+        });
+    };
+    /**
+     * Handle the moment when the container is hidden
+     */
+    Preloader.prototype._handleHidden = function () {
+        this._isHidden = true;
+        this.callbacks.tbt('hidden', false);
+    };
+    /**
+     * Callback at the moment when the preloader starts hiding
+     */
+    Preloader.prototype.onHide = function (callback) {
+        if (this._toBeHidden) {
+            callback();
+            return undefined;
+        }
+        return this.callbacks.add('hide', function () {
+            callback();
+        });
+    };
+    /**
+     * Callback at the moment when the preloader is hidden
+     */
+    Preloader.prototype.onHidden = function (callback) {
+        if (this._isHidden) {
+            callback();
+            return undefined;
+        }
+        return this.callbacks.add('hidden', function () {
+            callback();
+        });
+    };
+    /**
+     * Destroy the module
+     */
+    Preloader.prototype._destroy = function () {
+        var _a;
+        _super.prototype._destroy.call(this);
+        (_a = this._pageLoadEvent) === null || _a === void 0 ? void 0 : _a.remove();
+    };
+    return Preloader;
+}(Component_1.Component));
+exports.Preloader = Preloader;

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

@@ -0,0 +1,377 @@
+"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 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',
+            }, 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 = 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 = vevet_dom_1.selectAll('img');
+            imgs.forEach(function (img) {
+                _this._imgs.push(img);
+                _this._resourcesTotal += 1;
+            });
+        }
+        // get videos
+        if (loaders.video) {
+            var videos = vevet_dom_1.selectAll('video');
+            videos.forEach(function (video) {
+                _this._videos.push(video);
+                _this._resourcesTotal += 1;
+            });
+        }
+        // get custom resources
+        if (loaders.custom) {
+            this._customResources = Array.from(vevet_dom_1.selectAll(loaders.custom));
+            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.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 (el) {
+            _this._seekCustomResourceLoaded(el).then(function () {
+                _this._handleLoadedResource();
+            });
+        });
+    };
+    /**
+     * Seek the moment when a custom resource is loaded
+     */
+    ProgressPreloader.prototype._seekCustomResourceLoaded = function (el) {
+        var _this = this;
+        return new Promise(function (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(function () {
+                if (_this.destroyed) {
+                    return;
+                }
+                _this._seekCustomResourceLoaded(el).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;