vevet 1.4.27 → 2.0.1-dev.3

package/dist/js/SliderCanvasModule.js

@@ -1,733 +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 _SliderModule2 = _interopRequireDefault(require("./SliderModule"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-var _FrameModule = _interopRequireDefault(require("./FrameModule"));
-
-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); }
-
-// import { get } from 'node-background-size';
-var nodeBackgroundSize = require('node-background-size');
-
-var dom = require('dom-create-element');
-/**
- * @classdesc A class for creating image/video sliders onto canvas. <br>
- * Available targets:
- *  <ul>
- *      <li>All the available targets for {@linkcode Vevet.SliderModule}</li>
- *      <li>loaded - when images and videos are loaded.</li>
- *      <li>renderStat - render on the first start or resize.</li>
- *  </ul>
- * <br><br> <b>import {SliderCanvasModule} from 'vevet';</b>
- * 
- * @vevetModuleCallback { Vevet.SliderCanvasModule : first :  }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : prev : Vevet.SliderModule.AnimationData }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : next : Vevet.SliderModule.AnimationData }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : start : Vevet.SliderModule.AnimationData }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : end : Vevet.SliderModule.AnimationData }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : show :  }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : hide :  }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : shown :  }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : hidden :  }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : render : Vevet.SliderModule.Render }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : timeline : Vevet.SliderModule.Timeline }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : loaded :  }
- * @vevetModuleCallback { Vevet.SliderCanvasModule : renderStat :  }
- * 
- * @class
- * @memberof Vevet
- * @augments Vevet.SliderModule
- * @requires Vevet.FrameModule
- */
-
-
-var SliderCanvasModule = /*#__PURE__*/function (_SliderModule) {
-  _inherits(SliderCanvasModule, _SliderModule);
-
-  var _super = _createSuper(SliderCanvasModule);
-
-  /**
-   * @memberof Vevet.SliderCanvasModule
-   * @typedef {object} Properties
-   * @augments Vevet.SliderModule.Properties
-   * 
-   * @property {Vevet.SliderCanvasModule.Autoframe} [autoframe] - Launch animation frame automatically to render
-   * images onto canvas even when there's no change between slides. It it useful when creating some
-   * effects onto canvas that do not depend on slides animation change.
-   * @property {boolean} [autoplay=true] Autoplay video slides.
-   * @property {string} [img=img] Image elements tag. It may be replaced by div, f.e., 
-   * not to load images twice.
-   * @property {string} [src=src] Source attribute.
-   *
-   */
-
-  /**
-   * @memberof Vevet.SliderCanvasModule
-   * @typedef {object} Autoframe
-   * 
-   * @property {boolean} [on=false] Enable
-   * @property {number} [fps=30] Frames per second
-   *
-   */
-
-  /**
-   * @alias Vevet.SliderCanvasModule
-   * 
-   * @param {Vevet.SliderCanvasModule.Properties} [data]
-   */
-  function SliderCanvasModule(data) {
-    _classCallCheck(this, SliderCanvasModule);
-
-    return _super.call(this, data);
-  }
-  /**
-   * @readonly
-   * @type {Vevet.SliderCanvasModule.Properties}
-   */
-
-
-  _createClass(SliderCanvasModule, [{
-    key: "defaultProp",
-    get: function get() {
-      return (0, _merge.default)(_get(_getPrototypeOf(SliderCanvasModule.prototype), "defaultProp", this), {
-        autoframe: {
-          on: false,
-          fps: 30
-        },
-        autoplay: true,
-        img: 'img',
-        src: 'src'
-      });
-    }
-  }, {
-    key: "_changeProp",
-    value: function _changeProp() {
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "_changeProp", this).call(this);
-
-      this._autoframeToggle();
-    }
-    /**
-     * @member Vevet.SliderCanvasModule#prop
-     * @memberof Vevet.SliderCanvasModule
-     * @readonly
-     * @type {Vevet.SliderCanvasModule.Properties}
-     */
-
-    /**
-     * @member Vevet.SliderCanvasModule#_prop
-     * @memberof Vevet.SliderCanvasModule
-     * @protected
-     * @type {Vevet.SliderCanvasModule.Properties}
-     */
-
-    /**
-     * @function Vevet.SliderCanvasModule#changeProp
-     * @memberof Vevet.SliderCanvasModule
-     * @param {Vevet.SliderCanvasModule.Properties} [prop]
-     */
-    // Extra constructor
-
-  }, {
-    key: "_extra",
-    value: function _extra() {
-      /**
-       * @description Canvas element
-       * @type {HTMLCanvasElement}
-       * @protected
-       */
-      this._canvas = false;
-      /**
-       * @description Canvas Context.
-       * @type {CanvasRenderingContext2D}
-       * @protected
-       */
-
-      this._ctx = {};
-      /**
-       * @description Resources.
-       * @type {Array<HTMLImageElement|HTMLVideoElement>}
-       * @protected
-       */
-
-      this._res = []; // import('node-background-size').MediaSizes
-
-      /**
-       * @typedef { object } MediaSizes
-       * @memberof Vevet.SliderCanvasModule
-       * @property {HTMLImageElement|HTMLVideoElement} media - The media element itself.
-       * @property {number} width - The calculated width.
-       * @property {number} height - The calculated height.
-       * @property {number} mediaWidth - The initial width of the media element.
-       * @property {number} mediaHeight - The initial height of the media element.
-       * @property {number} scale - Scaling.
-       * @property {number} x - The x-axis coordinate of the top left corner.
-       * @property {number} y - The y-axis coordinate of the top left corner.
-       */
-
-      /**
-       * @description Resources' sizes.
-       * @type {Array<Vevet.SliderCanvasModule.MediaSizes>}
-       * @protected
-       */
-
-      this._resSize = [];
-      /**
-       * @description Loaded resources counter.
-       * @type {number}
-       * @protected
-       */
-
-      this._loaded = 0;
-      /**
-       * @description If all resources are loaded.
-       * @type {boolean}
-       * @protected
-       */
-
-      this._loadedAll = false;
-      /**
-       * @description Frame settings.
-       * @type {Vevet.FrameModule}
-       * @protected
-       */
-
-      this._autoframe = new _FrameModule.default({
-        fps: this._prop.autoframe.fps
-      }); // inherit
-
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "_extra", this).call(this);
-    } // First show
-
-  }, {
-    key: "_firstStart",
-    value: function _firstStart() {
-      if (this._prop.show) {
-        this.renderStat();
-
-        this._autoframeToggle();
-
-        this._playVideo();
-      }
-
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "_firstStart", this).call(this);
-    }
-    /**
-     * @description If all resources are loaded.
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "loaded",
-    get: function get() {
-      return this._loadedAll;
-    }
-    /**
-     * @description Create elements.
-     * @protected
-     */
-
-  }, {
-    key: "_createElements",
-    value: function _createElements() {
-      // create canvas
-      this._canvas = dom({
-        selector: 'canvas'
-      });
-
-      this._outer.appendChild(this._canvas); // get context
-
-
-      this._ctx = this._canvas.getContext("2d");
-    }
-    /**
-     * @description Get Elements.
-     * @protected
-     */
-
-  }, {
-    key: "_getElements",
-    value: function _getElements() {
-      var _this = this;
-
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "_getElements", this).call(this); // get images
-
-
-      this._slides.forEach(function (slide) {
-        // get resources
-        var img = slide.querySelector(_this._prop.img);
-
-        if (img) {
-          _this._res.push(img);
-        } else {
-          var video = slide.querySelector("video");
-
-          if (video) {
-            _this._res.push(video);
-          }
-        }
-      }); // hide slides
-
-
-      this._slidesOuter.classList.add("display-none_important"); // load resources
-
-
-      this._load();
-    }
-    /**
-     * @description Load images.
-     * @protected
-     */
-
-  }, {
-    key: "_load",
-    value: function _load() {
-      var _this2 = this;
-
-      for (var i = 0; i < this._res.length; i++) {
-        // get resource
-        var res = this._res[i]; // load video
-
-        if (res.tagName == 'VIDEO') {
-          this._res[i] = res;
-          res.addEventListener("loadedmetadata", function () {
-            _this2._loadRes();
-          });
-          res.crossOrigin = "anonymous";
-          res.muted = true;
-          res.autoplay = true;
-          res.loop = true;
-          res.load();
-        } // load image
-        else {
-            var img = new Image();
-            this._res[i] = img;
-            img.addEventListener("load", this._loadRes.bind(this));
-            img.crossOrigin = "anonymous";
-            img.src = res.getAttribute(this._prop.src);
-          }
-      }
-    }
-    /**
-     * @description When a resource is loaded.
-     * @protected
-     */
-
-  }, {
-    key: "_loadRes",
-    value: function _loadRes() {
-      // iterate loaded
-      this._loaded++; // check if all loaded
-
-      if (this._loaded === this._total) {
-        this._onloaded();
-      }
-    }
-    /**
-     * @description When all resources are loaded.
-     * @protected
-     */
-
-  }, {
-    key: "_onloaded",
-    value: function _onloaded() {
-      this._loadedAll = true;
-      this.setSize();
-      this.lbt("loaded");
-    } // Set events
-
-  }, {
-    key: "_setEvents",
-    value: function _setEvents() {
-      var _this3 = this;
-
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "_setEvents", this).call(this); // start
-
-
-      this.on("start", function (obj) {
-        _this3._playVideo(obj.next);
-
-        _this3._pauseVideo(obj.prev);
-      }); // end
-
-      this.on("end", function (obj) {
-        _this3._pauseVideo(obj.prev);
-      }); // show
-
-      this.on("show", function () {
-        _this3._playVideo(_this3._active);
-      }); // hide
-
-      this.on("hide", function () {
-        _this3._pauseVideo(_this3._active);
-      });
-    }
-    /**
-     * @description Play video.
-     * @protected
-     * @param {number} num - Order number of the slide.
-     */
-
-  }, {
-    key: "_playVideo",
-    value: function _playVideo() {
-      var num = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._active;
-
-      if (!this._prop.autoplay) {
-        return;
-      }
-
-      var res = this._res[num];
-
-      if (res.tagName == 'VIDEO') {
-        res.play();
-      }
-    }
-    /**
-     * @description Pause video.
-     * @protected
-     * @param {number} num - Order number of the slide.
-     */
-
-  }, {
-    key: "_pauseVideo",
-    value: function _pauseVideo() {
-      var num = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._active;
-
-      if (!this._prop.autoplay) {
-        return;
-      }
-
-      var res = this._res[num];
-
-      if (res.tagName == 'VIDEO') {
-        res.pause();
-      }
-    }
-    /**
-     * @description Update size values.
-     * @param {boolean} [redraw=true] - If need to redraw.
-     */
-
-  }, {
-    key: "setSize",
-    value: function setSize() {
-      var redraw = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "setSize", this).call(this); // resize canvas
-
-
-      this._setCtxSize(); // set resource sizes
-
-
-      if (this._loadedAll & redraw) {
-        this._setResSize();
-
-        if (this._prop.show || this._shown) {
-          this.renderStat();
-        }
-      }
-    }
-    /**
-     * @description Set canvas sizes.
-     * @protected
-     */
-
-  }, {
-    key: "_setCtxSize",
-    value: function _setCtxSize() {
-      // dpr sizes
-      var size = this._size; // canvas sizes
-
-      this._canvas.width = size[0];
-      this._canvas.height = size[1];
-    }
-    /**
-     * @description Set resource sizes.
-     * @protected
-     */
-
-  }, {
-    key: "_setResSize",
-    value: function _setResSize() {
-      var _this4 = this;
-
-      // clear sizes
-      this._resSize = []; // get sizes
-
-      var size = this._size,
-          width = size[0],
-          height = size[1]; // set sizes
-
-      this._res.forEach(function (res) {
-        var size = nodeBackgroundSize.get({
-          media: res,
-          width: width,
-          height: height
-        });
-
-        _this4._resSize.push(size);
-      });
-    }
-    /**
-     * @description Clear canvas.
-     * @protected
-     */
-
-  }, {
-    key: "_canvasClear",
-    value: function _canvasClear() {
-      var size = this._size;
-
-      this._ctx.clearRect(0, 0, size[0], size[1]);
-    }
-    /**
-     * @description Render static canvas. F.e., when the window is resized or on the first start.
-     */
-
-  }, {
-    key: "renderStat",
-    value: function renderStat() {
-      // check
-      if (!this._loadedAll) {
-        return;
-      }
-
-      if (this._playing) {
-        return;
-      } // resize
-
-
-      this._setResSize(); // draw
-
-
-      this._canvasClear();
-
-      this._draw({
-        num: this._active,
-        p: 1,
-        direction: 'show',
-        type: 'show',
-        prev: this._active,
-        next: this._active
-      }); // callbacks
-
-
-      this.lbt("renderStat");
-    }
-    /**
-     * @description Animation progress.
-     * @param {Vevet.TimelineModule.Data} p - Progress data.
-     * @protected
-     */
-
-  }, {
-    key: "_animateSlides",
-    value: function _animateSlides(p) {
-      this._canvasClear();
-
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "_animateSlides", this).call(this, p);
-    }
-    /**
-     * @description Animation rendering.
-     * @param {Vevet.SliderModule.Render} data - Animation data.
-     * @protected
-     */
-
-  }, {
-    key: "_render",
-    value: function _render(data) {
-      // clear canvas
-      if (["show", "hide"].includes(data.direction)) {
-        this._canvasClear();
-      }
-
-      this._draw(data);
-
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "_render", this).call(this, data);
-    }
-    /**
-     * @description Draw on the canvas.
-     * @param {Vevet.SliderModule.Render} data - Animation data.
-     * @protected
-     */
-
-  }, {
-    key: "_draw",
-    value: function _draw(data) {
-      // eslint-disable-next-line no-unused-vars
-      var num = data.num,
-          p = data.p,
-          direction = data.direction,
-          type = data.type,
-          prev = data.prev,
-          next = data.next; // get resource and its sizes
-
-      var resource = this._res[num],
-          size = this._resSize[num]; // get canvas sizes
-
-      var sizes = this._size,
-          w = sizes[0],
-          h = sizes[1]; // crop settings
-
-      var top = 0,
-          left,
-          width,
-          height = h; // crop settings according to the direction
-
-      if (['next', 'show'].includes(direction)) {
-        if (type === 'next' || type === 'show') {
-          left = (1 - p) * w;
-          width = w - left;
-        } else {
-          left = 0;
-          width = (1 - p) * w;
-        }
-      } else if (['prev'].includes(direction)) {
-        if (type === 'next') {
-          left = 0;
-          width = p * w;
-        } else {
-          left = w * p;
-          width = w - left;
-        }
-      } else {
-        left = 0;
-        width = (1 - p) * w;
-      } // draw
-
-
-      var ctx = this._ctx;
-      ctx.save();
-      ctx.beginPath();
-      ctx.rect(left, top, width, height);
-      ctx.closePath();
-      ctx.clip();
-      ctx.drawImage(resource, 0, 0, size.mediaWidth, size.mediaHeight, size.x, size.y, size.width, size.height);
-      ctx.restore();
-    }
-    /**
-     * @description Disable autoframe.
-     * @protected
-     */
-
-  }, {
-    key: "_autoframeDisable",
-    value: function _autoframeDisable() {
-      // remove callbacks
-      this._autoframe.removeAll(); // pause
-
-
-      this._autoframe.pause();
-    }
-    /**
-     * @description Enable autoframe.
-     * @protected
-     */
-
-  }, {
-    key: "_autoframeEnable",
-    value: function _autoframeEnable() {
-      if (!this._prop.autoframe.on) {
-        return;
-      } // add callbacks
-
-
-      this._autoframe.add({
-        do: this.renderStat.bind(this)
-      }); // play
-
-
-      this._autoframe.play();
-    }
-    /**
-     * @description Toggle autoframe.
-     * @protected
-     */
-
-  }, {
-    key: "_autoframeToggle",
-    value: function _autoframeToggle() {
-      this._autoframeDisable();
-
-      if (this._prop.autoframe.on) {
-        this._autoframeEnable();
-      }
-    } // Show
-
-  }, {
-    key: "show",
-    value: function show() {
-      if (_get(_getPrototypeOf(SliderCanvasModule.prototype), "show", this).call(this)) {
-        this.on("shown", this._autoframeEnable.bind(this));
-        return true;
-      }
-
-      return false;
-    } // Hide
-
-  }, {
-    key: "hide",
-    value: function hide() {
-      if (_get(_getPrototypeOf(SliderCanvasModule.prototype), "hide", this).call(this)) {
-        this._autoframeDisable();
-
-        return true;
-      }
-
-      return false;
-    }
-    /**
-     * @description Destroy the class.
-     */
-
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      _get(_getPrototypeOf(SliderCanvasModule.prototype), "destroy", this).call(this); // autoframe
-
-
-      this._autoframe.destroy(); // show items
-
-
-      this._slidesOuter.classList.remove("display-none_important");
-    }
-  }]);
-
-  return SliderCanvasModule;
-}(_SliderModule2.default);
-
-exports.default = SliderCanvasModule;