vevet 1.4.27 → 2.0.1-dev.3

package/dist/js/PreloaderModule.js

@@ -1,724 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Module2 = _interopRequireDefault(require("./Module"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-var _easing = _interopRequireDefault(require("./easing"));
-
-var _timeoutCallback = _interopRequireDefault(require("./timeoutCallback"));
-
-var _TimelineModule = _interopRequireDefault(require("./TimelineModule"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
-
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var selectEl = require('select-el');
-
-var lerp = require('lerp');
-/**
- * @classdesc A page preloader.
- * Available targets:
- *  <ul>
- *      <li>progress - callback on progress. Each callback will receive {@linkcode Vevet.PreloaderModule.Callback} as an argument.</li>
- *      <li>hide - when the preloader must begin hiding.</li>
- *      <li>hidden - when the preloader is already hidden.</li>
- *  </ul>
- * <br><br> <b>import {PreloaderModule} from 'vevet';</b>
- * 
- * @vevetModuleCallback { Vevet.PreloaderModule : progress : Vevet.PreloaderModule.Callback}
- * @vevetModuleCallback { Vevet.PreloaderModule : hide :  }
- * @vevetModuleCallback { Vevet.PreloaderModule : hidden :  }
- * 
- * @class
- * @memberof Vevet
- * @augments Vevet.Module
- * @requires Vevet.TimelineModule
- */
-
-
-var PreloaderModule = /*#__PURE__*/function (_Module) {
-  _inherits(PreloaderModule, _Module);
-
-  var _super = _createSuper(PreloaderModule);
-
-  /**
-   * @memberof Vevet.PreloaderModule
-   * @typedef {object} Properties
-   * @augments Vevet.Module.Properties
-   * 
-   * @property {string|HTMLElement} [selector=.v-preloader] - *** The selector of the preloader element.
-   * @property {number} [animation=750] - Duration of animation when hiding.
-   * @property {number} [animationInner=25] - Inner animation before the preloader hides.
-   * @property {Vevet.PreloaderModule.Progress} [progress]
-   * @property {boolean} [hide] - Defines if the preloader will be hidden automatically 
-   * when all resources are loaded.
-   */
-
-  /**
-   * @memberof Vevet.PreloaderModule
-   * @typedef {object} Progress
-   * @property {boolean} [on=false] - If enabled, the progress of loading resources will be enabled.
-   * @property {number} [k=0.1] - The higher number, the faster animation.
-   * @property {boolean} [forceEnd=false] - When resources are loaded and the progress is still not 100%,
-   * this allows to end animation in a certain period of time.
-   * @property {number} [forceEndDuration=3000] - Duration of the force-ednd-animation.
-   * @property {boolean} [images=true] - Load images.
-   * @property {string|false} [bgSelector=*:not(script)] - If you are loading images, you may also need to load
-   * background images. To do this, set a background selector or make it false to skip this step.
-   * @property {boolean} [videos=true] - Load videos.
-   * @property {number} [resources=0] - Amount of resources to be loaded. 
-   * It's a rare case when you need to set it. 
-   * F.e., whe you want to imitate loading resources when there's actually none of them.
-   * @property {string|Array<number>|Function} [easing] - Easing function. 
-   * The default value is equal to {@linkcode Vevet.Application#easing}.
-   */
-
-  /**
-   * @alias Vevet.PreloaderModule
-   * 
-   * @param {Vevet.PreloaderModule.Properties} [data]
-   */
-  function PreloaderModule(data) {
-    _classCallCheck(this, PreloaderModule);
-
-    return _super.call(this, data);
-  }
-
-  _createClass(PreloaderModule, [{
-    key: "prefix",
-    get: function get() {
-      return "".concat(this._v.prefix, "preloader");
-    }
-    /**
-     * @readonly
-     * @type {Vevet.PreloaderModule.Properties}
-     */
-
-  }, {
-    key: "defaultProp",
-    get: function get() {
-      return (0, _merge.default)(_get(_getPrototypeOf(PreloaderModule.prototype), "defaultProp", this), {
-        selector: '.' + this._prefix,
-        animation: 750,
-        animationInner: 25,
-        progress: {
-          on: false,
-          k: .01,
-          forceEnd: false,
-          forceEndDuration: 3000,
-          easing: this._vp.easing,
-          images: true,
-          bgSelector: '*:not(script)',
-          videos: true,
-          resources: 0
-        },
-        hide: true
-      });
-    }
-    /**
-     * @member Vevet.PreloaderModule#prop
-     * @memberof Vevet.PreloaderModule
-     * @readonly
-     * @type {Vevet.PreloaderModule.Properties}
-     */
-
-    /**
-     * @member Vevet.PreloaderModule#_prop
-     * @memberof Vevet.PreloaderModule
-     * @protected
-     * @type {Vevet.PreloaderModule.Properties}
-     */
-
-    /**
-     * @function Vevet.PreloaderModule#changeProp
-     * @memberof Vevet.PreloaderModule
-     * @param {Vevet.PreloaderModule.Properties} [prop]
-     */
-
-    /**
-     * @description If the page is loaded.
-     * @default false
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "loaded",
-    get: function get() {
-      return this._v.load.loaded;
-    }
-    /**
-     * @description Get total amount of resources that are being loaded.
-     * @default false
-     * @readonly
-     * @type {number}
-     */
-
-  }, {
-    key: "resourcesTotal",
-    get: function get() {
-      return this._resourcesTotal;
-    }
-    /**
-     * @description Get total amount of resources that are loaded.
-     * @default false
-     * @readonly
-     * @type {number}
-     */
-
-  }, {
-    key: "resourcesLoaded",
-    get: function get() {
-      return this._resourcesLoaded;
-    }
-    /**
-     * @description If the preloader is hidden.
-     * @default false
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "hidden",
-    get: function get() {
-      return this._hidden;
-    }
-    /**
-     * @description Outer element.
-     * @readonly
-     * @type {HTMLElement}
-     */
-
-  }, {
-    key: "outer",
-    get: function get() {
-      return this._outer;
-    } // Extra Constructor
-
-  }, {
-    key: "_extra",
-    value: function _extra() {
-      _get(_getPrototypeOf(PreloaderModule.prototype), "_extra", this).call(this);
-
-      var prop = this._prop;
-      /**
-       * @description Outer element.
-       * @protected
-       * @member {HTMLElement}
-       */
-
-      this._outer = selectEl.one(prop.selector);
-
-      this._outer.classList.add(this._prefix);
-      /**
-       * @description Current loading time.
-       * @protected
-       * @member {number}
-       */
-
-
-      this._time = +new Date();
-      /**
-       * @description If the preloader is hidden.
-       * @protected
-       * @member {boolean}
-       */
-
-      this._hidden = false;
-      /**
-       * @description Images list.
-       * @protected
-       * @member {Array<string>}
-       */
-
-      this._images = [];
-      /**
-       * @description Videos list.
-       * @protected
-       * @member {Array<HTMLVideoElement>}
-       */
-
-      this._videos = [];
-      /**
-       * @description Total amount of resources.
-       * @protected
-       * @member {number}
-       */
-
-      this._resourcesTotal = prop.progress.resources;
-      /**
-       * @description Total amount of loaded resources.
-       * @protected
-       * @member {number}
-       */
-
-      this._resourcesLoaded = 0;
-      /**
-       * @description Loading progress.
-       * @protected
-       * @member {number}
-       */
-
-      this._progressLoad = 0;
-      /**
-       * @description Loading animation progress.
-       * @protected
-       * @member {number}
-       */
-
-      this._progressAnim = 0;
-      /**
-       * @description Progress animationFrame.
-       * @protected
-       * @member {null|number}
-       */
-
-      this._progressFrameId = null;
-      /**
-       * @description If progress enabled.
-       * @protected
-       * @member {boolean}
-       */
-
-      this._progressBool = true; // set styles to the preloader
-
-      this._setStyles();
-    }
-    /**
-     * @description Set transition styles of the preloader.
-     * @protected
-     */
-
-  }, {
-    key: "_setStyles",
-    value: function _setStyles() {
-      var outer = this._outer;
-      outer.style.opacity = '1';
-      outer.style.transition = "".concat(this._prop.animation / 1000, "s");
-      outer.classList.add("".concat(this._prefix, "_animate"));
-      return true;
-    } // Set Events
-
-  }, {
-    key: "_setEvents",
-    value: function _setEvents() {
-      var _this = this;
-
-      // when the page is loaded
-      this.addEvent('load', {
-        name: this._name,
-        do: function _do() {
-          _this._onloaded();
-        }
-      }); // copy properties
-
-      var progressProp = this._prop.progress; // load resources if enables
-
-      if (progressProp.on) {
-        // count resources
-        if (progressProp.images) {
-          this._resourcesTotal += this._getImages();
-        }
-
-        if (progressProp.videos) {
-          this._resourcesTotal += this._getVideos();
-        } // check how many resources there are
-        // if more than zero, an animation frame will be launched
-        // and the resources will be loaded
-
-
-        if (this._resourcesTotal > 0) {
-          this._resourcesLoad();
-
-          this._frameLaunch();
-        } else {
-          this._onloaded();
-        }
-      }
-    }
-    /**
-     * @description Add images to stack.
-     * @protected
-     * @returns {number} Total number of images to be loaded.
-     */
-
-  }, {
-    key: "_getImages",
-    value: function _getImages() {
-      var images = this._images; // get real DOM images
-
-      var imgs = document.querySelectorAll("img");
-      imgs.forEach(function (img) {
-        images.push(img.src);
-      }); // get backgrounds
-
-      var bgSelector = this._prop.progress.bgSelector;
-
-      if (bgSelector) {
-        var el = document.querySelectorAll(bgSelector);
-
-        for (var i = 0; i < el.length; i++) {
-          var url = getComputedStyle(el[i]).backgroundImage;
-
-          if (url.indexOf('none') == -1 & url.indexOf('-gradient') == -1) {
-            if (url.indexOf('url') != -1) {
-              var temp = url.match(/url\((.*?)\)/);
-              url = temp[1].replace(/"/g, '');
-              images.push(url);
-            }
-          } else {
-            if (el[i].tagName == "IMG") {
-              images.push(el[i].src);
-            }
-          }
-        }
-      }
-
-      return images.length;
-    }
-    /**
-     * @description Add videos to stack.
-     * @protected
-     * @returns {number} Total number of images to be loaded.
-     */
-
-  }, {
-    key: "_getVideos",
-    value: function _getVideos() {
-      var videos = this._videos;
-      var el = document.querySelectorAll('video');
-
-      for (var i = 0; i < el.length; i++) {
-        videos.push(el[i]);
-      }
-
-      return videos.length;
-    }
-    /**
-     * @description Load real resources.
-     * @protected
-     */
-
-  }, {
-    key: "_resourcesLoad",
-    value: function _resourcesLoad() {
-      var _this2 = this;
-
-      var images = this._images,
-          videos = this._videos; // load images
-
-      for (var i = 0; i < images.length; i++) {
-        var image = new Image();
-
-        image.onload = function () {
-          _this2._resourcesOnLoaded();
-        };
-
-        image.onerror = function () {
-          _this2._resourcesOnLoaded();
-        };
-
-        image.src = images[i];
-      } // load videos
-
-
-      for (var _i = 0; _i < videos.length; _i++) {
-        videos[_i].load();
-
-        videos[_i].onloadeddata = function () {
-          _this2._resourcesOnLoaded();
-        };
-      }
-    }
-    /**
-     * @memberof Vevet.PreloaderModule
-     * @typedef {object} Callback
-     * @property {number} progress Current loading progress.
-     * @property {number} easing Current easing progress.
-     * @property {number} loaded Number of resources loaded.
-     * @property {number} total Total number of resources.
-     */
-
-    /**
-     * @description Event on any resource loaded.
-     * @protected
-     */
-
-  }, {
-    key: "_resourcesOnLoaded",
-    value: function _resourcesOnLoaded() {
-      var total = this._resourcesTotal; // iterate the quantity of loaded resources
-
-      this._resourcesLoaded++;
-      var loaded = this._resourcesLoaded; // and update the progress value - NOT THE FRAME PROGRESS
-
-      this._progressLoad = loaded / total; // when all resources are loaded
-
-      if (loaded == total) {
-        this._onloaded();
-      }
-    }
-    /**
-     * @description Iterate total amount of resources.
-     * @param {number} num - Amount of resources to add.
-     */
-
-  }, {
-    key: "resourcesAddTotal",
-    value: function resourcesAddTotal() {
-      var num = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-      this._resourcesTotal += num;
-    }
-    /**
-     * @description Iterate total amount of resources that are loaded.
-     * @param {number} num - Amount of resources to add.
-     */
-
-  }, {
-    key: "resourcesAddLoaded",
-    value: function resourcesAddLoaded() {
-      var num = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-
-      for (var i = 0; i < num; i++) {
-        this._resourcesOnLoaded();
-      }
-    }
-    /**
-     * @description Set progress animation frame.
-     * @protected
-     */
-
-  }, {
-    key: "_frameLaunch",
-    value: function _frameLaunch() {
-      this._progressFrameId = window.requestAnimationFrame(this._frame.bind(this));
-    }
-    /**
-     * @description Frame animation
-     * @protected
-     */
-
-  }, {
-    key: "_frame",
-    value: function _frame() {
-      // check if animation progress is enabled
-      if (!this._progressBool) {
-        return;
-      }
-
-      var prop = this._prop; // progress interpolation
-
-      this._progressAnim = lerp(this._progressAnim, this._progressLoad, prop.progress.k);
-      var progress = this._progressAnim; // if close to 1
-
-      if (progress >= .999) {
-        progress = 1;
-      } // launch callbacks
-
-
-      this.lbt('progress', {
-        progress: progress,
-        easing: (0, _easing.default)(progress, prop.progress.easing),
-        loaded: this._resourcesLoaded,
-        total: this._resourcesTotal
-      }); // stop animaton frame if progress is close to 1 or equal to 1
-
-      if (progress == 1) {
-        cancelAnimationFrame(this._progressFrameId); // hide
-
-        this._onloaded();
-
-        return;
-      } // continue animation
-
-
-      this._progressFrameId = window.requestAnimationFrame(this._frame.bind(this));
-    }
-    /**
-     * @description Timeline animation.
-     * @protected
-     * @param {Vevet.TimelineModule.Data} p
-     */
-
-  }, {
-    key: "_progressFrameForce",
-    value: function _progressFrameForce(p) {
-      this._progressAnim = p.s; // callbacks if animation is still in process
-
-      this.lbt('progress', {
-        progress: this._progressAnim,
-        easing: (0, _easing.default)(p.s, this._prop.progress.easing),
-        loaded: this.resourcesLoaded,
-        total: this.resourcesTotal
-      }); // callbacks if animation ended
-
-      if (p.p === 1) {
-        this._onloaded();
-
-        return;
-      }
-    }
-    /**
-     * @description Call it when either all resources are loaded or the page is loaded.
-     * @protected
-     */
-
-  }, {
-    key: "_onloaded",
-    value: function _onloaded() {
-      // return if page not loaded
-      if (!this.loaded) {
-        return;
-      }
-
-      var progressProp = this._prop.progress; // if progress is enabled
-      // we will launch a timeline animation for the preloader
-
-      if (progressProp.on) {
-        // return if not all resources are loaded
-        if (this._resourcesTotal > this._resourcesLoaded) {
-          return;
-        } // run animation
-
-
-        if (this._progressAnim < 1) {
-          if (progressProp.forceEnd) {
-            // stop frame animation
-            cancelAnimationFrame(this._progressFrameId);
-            this._progressBool = false; // create a timeline animation
-
-            var timeline = new _TimelineModule.default({
-              destroyOnEnd: true
-            });
-            timeline.add({
-              target: 'progress',
-              do: this._progressFrameForce.bind(this)
-            });
-            timeline.play({
-              duration: progressProp.forceEndDuration,
-              easing: 'linear',
-              // progressProp.easing,
-              scope: [this._progressAnim, 1]
-            });
-            return;
-          } else {
-            return;
-          }
-        }
-      } // hide preloader
-
-
-      this._hide();
-    }
-    /**
-     * @description Hide preloader.
-     */
-
-  }, {
-    key: "hide",
-    value: function hide() {
-      var interval = this._interval();
-
-      (0, _timeoutCallback.default)(this._hideAnimate.bind(this), interval);
-    }
-    /**
-     * @description Hide callback. Hide preloader when everything is loaded.
-     * @protected
-     */
-
-  }, {
-    key: "_hide",
-    value: function _hide() {
-      this.lbt('hide');
-
-      if (this._prop.hide) {
-        this.hide();
-      }
-    }
-    /**
-     * @description Difference between the start time and the end time.
-     * Inner animation duration is applied.
-     */
-
-  }, {
-    key: "_interval",
-    value: function _interval() {
-      var time = +new Date(),
-          diff = time - this._time,
-          inner = this._prop.animationInner;
-      var interval = 0;
-
-      if (diff < inner) {
-        interval = inner - diff;
-      }
-
-      return interval;
-    }
-    /**
-     * @description Now we really hide the preloader.
-     * @protected
-     */
-
-  }, {
-    key: "_hideAnimate",
-    value: function _hideAnimate() {
-      var _this3 = this;
-
-      var outer = this._outer,
-          prefix = this._prefix;
-      outer.style.opacity = '0';
-      outer.classList.add("".concat(prefix, "_hide"));
-      setTimeout(function () {
-        outer.classList.add("".concat(prefix, "_hidden"));
-
-        _this3._onhidden();
-      }, this._prop.animation);
-    }
-    /**
-     * @description This action is called when the preloader is finally hidden.
-     * @protected
-     */
-
-  }, {
-    key: "_onhidden",
-    value: function _onhidden() {
-      this._hidden = true;
-      this.lbt('hidden');
-    }
-  }]);
-
-  return PreloaderModule;
-}(_Module2.default);
-
-exports.default = PreloaderModule;