vevet 1.4.27 → 2.0.1-dev.3

package/dist/js/TextAnimateModule.js

@@ -1,663 +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 _TextSplitModule2 = _interopRequireDefault(require("./TextSplitModule"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-var _TimelineModule = _interopRequireDefault(require("./TimelineModule"));
-
-var _mathScopeProgress = _interopRequireDefault(require("./mathScopeProgress"));
-
-var _easing = _interopRequireDefault(require("./easing"));
-
-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 isarray = require("isarray");
-
-var elementary = require("./text_animate_module_addons/_elementary");
-
-var composite_elementary = require("./text_animate_module_addons/_composite_elementary");
-/**
- * @classdesc Animation of text. <br>
- * Available types of animation by default:
- *  <ul>
- *      <li>letter</li>
- *      <li>word</li>
- *      <li>wordletter</li>
- *      <li>line</li>
- *      <li>lineletter</li>
- *      <li>lineword</li>
- *  </ul>
- *  Available targets:
- *  <ul>
- *      <li>resize - when window is resizes.</li>
- *      <li>split - when the text is splitted into letters, words & lines. Argument - {@linkcode Vevet.TextSplitModule.Elements}</li>
- *  </ul>
- * <br><br> <b>import {TextAnimateModule} from 'vevet';</b>
- * 
- * @class
- * @memberof Vevet
- * @augments Vevet.TextSplitModule
- * @requires Vevet.TimelineModule
- */
-
-
-var TextAnimateModule = /*#__PURE__*/function (_TextSplitModule) {
-  _inherits(TextAnimateModule, _TextSplitModule);
-
-  var _super = _createSuper(TextAnimateModule);
-
-  /**
-   * @memberof Vevet.TextAnimateModule
-   * @typedef {object} Properties
-   * @augments Vevet.TextSplitModule.Properties
-   */
-
-  /**
-   * @alias Vevet.TextAnimateModule
-   * 
-   * @param {Vevet.TextAnimateModule.Properties} [data]
-   */
-  function TextAnimateModule(data) {
-    _classCallCheck(this, TextAnimateModule);
-
-    return _super.call(this, data);
-  }
-
-  _createClass(TextAnimateModule, [{
-    key: "prefix",
-    get: function get() {
-      return "".concat(this._v.prefix, "text");
-    }
-    /**
-     * @member Vevet.TextAnimateModule#prop
-     * @memberof Vevet.TextAnimateModule
-     * @readonly
-     * @type {Vevet.TextAnimateModule.Properties}
-     */
-
-    /**
-     * @member Vevet.TextAnimateModule#_prop
-     * @memberof Vevet.TextAnimateModule
-     * @protected
-     * @type {Vevet.TextAnimateModule.Properties}
-     */
-
-    /**
-     * @function Vevet.TextAnimateModule#changeProp
-     * @memberof Vevet.TextAnimateModule
-     * @param {Vevet.TextAnimateModule.Properties} [prop]
-     */
-
-    /**
-     * @description If animation in process.
-     * @readonly
-     * @type {boolean}
-     */
-
-  }, {
-    key: "playing",
-    get: function get() {
-      return this._playing;
-    } // Extra Constructor
-
-  }, {
-    key: "_extra",
-    value: function _extra() {
-      /**
-       * @description If animation in process.
-       * @protected
-       * @member {boolean}
-       */
-      this._playing = false;
-      /**
-       * @description Timeline
-       * @protected
-       * @member {false|Vevet.TimelineModule}
-       */
-
-      this._timeline = false; // split text
-
-      _get(_getPrototypeOf(TextAnimateModule.prototype), "_extra", this).call(this);
-    } // Resize & Split
-
-  }, {
-    key: "_resize",
-    value: function _resize() {
-      var _this = this;
-
-      setTimeout(function () {
-        _this._resizeText();
-      }, this._prop.resizeTimeout);
-    }
-    /**
-     * @description Resize text
-     * @protected
-     */
-
-  }, {
-    key: "_resizeText",
-    value: function _resizeText() {
-      var _this2 = this;
-
-      if (this._playing) {
-        this._timeline.add({
-          target: 'end',
-          do: function _do() {
-            _this2._resizeFunc();
-          },
-          once: true
-        });
-      } else {
-        this._resizeFunc();
-      }
-    }
-    /**
-     * @memberof Vevet.TextAnimateModule
-     * @typedef {object} Settings
-     * @property {Array<'letter'|'word'|'wordletter'|'line'|'lineletter'|'lineword'>} [types=['letter']] - Types of animation. All types of animation can be combined! See the types at the top.
-     * @property {number} [durationElement=250] - Duration of animation of each element according to the chosen type of animation.
-     * @property {boolean} [durationAuto=true] - Defines if the total duration will be calculated accorging to the totalamount of elements.
-     * @property {number} [duration=2500] - Total duration of the animation (will be taken into account only if durationAuto is false).
-     * @property {string|Array<number>|Function} [easing=linear] - Easing function of the Timeline.
-     * @property {string|Array<number>|Function} [easingEl] - Easing function of elements. The default value is equal to {@linkcode Vevet.Application#easing}.
-     * @property {Array<Vevet.TextAnimateModule.SettingStyle>} [letter] - Array of actions to change styles of each element. Fill it if one of your types is 'letter'.
-     * @property {Array<Vevet.TextAnimateModule.SettingStyle>} [word] - Array of actions to change styles of each element. Fill it if one of your types is 'word'.
-     * @property {Array<Vevet.TextAnimateModule.SettingStyle>} [line] - Array of actions to change styles of each word in the line. Fill it if one of your types is 'line'.
-     * @property {number} [shift=0.2] - Shift in animation chain between elements. F.e., if 0.2 then the animation of the second element will start after 80% of animation of the first element passed.
-     * @property {number} [shiftLine=0.2] - Almost the same as the previous value, though it is active for the 'line' type only.
-     * @property {boolean} [reverse=false] - Defines if the chain of animation of the elements will be reversed. It is not the same as {@linkcode Vevet.TimelineModule}.
-     * @property {boolean} [reverseComposite=false] - Defines if the chain of animation of parent elements will be reversed. It is actual only for composite types of animation.
-     * @property {boolean} [shuffle=false] - If true, the chain of animation of the elements will be chaotic.
-     * @property {boolean} [center=false] - If animation must start from center. Not available for 'lineletter' & 'lineword'.
-     * @property {Array<Vevet.TextAnimateModule.SettingCallback>} [callbacks] - Callbacks on the animation process.
-     */
-
-    /**
-     * @memberof Vevet.TextAnimateModule
-     * @callback _styleCallback
-     * @param {Vevet.TextAnimateModule.StyleArgument} data
-     * @returns {string}
-     */
-
-    /**
-     * @memberof Vevet.TextAnimateModule
-     * @typedef {object} SettingStyle
-     * @property {Array<number>} [scope=[0,1]] - Scope of the animation for each element. It defines the edges of the animation line. Numbers from 0 to 1 are available. F.e., [0, 1].
-     * @property {string} [property] - The name of a css property to be changed. You can even skip it if you want to. F.e. you need to create a scramble-text-animation. In this case, you, perhaps will not need to change any css properties, though the "value" could be used as a callback for other changes.
-     * @property {Vevet.TextAnimateModule._styleCallback} value - A new value of the property. The function will recieve an object {@linkcode Vevet.TextAnimateModule.StyleArgument} as an argument and must return a new value for the property.
-     * @property {boolean} [remove=false] - Defines if we need to remove a css property after its animation is proceeded.
-     */
-
-    /**
-     * @memberof Vevet.TextAnimateModule
-     * @typedef {object} StyleArgument
-     * @property {number} p - Current progress of animation.
-     * @property {number} e - Current progress of animation according to 'easingEl' function.
-     * @property {number} position - Position of the element in the animation stack.
-     * @property {number} total - Total amount of elements in the animation.
-     * @property {HTMLElement} el - The element to be animated.
-     */
-
-    /**
-     * @memberof Vevet.TextAnimateModule
-     * @typedef {object} SettingCallback
-     * @property {number} target - The moment of the animation line at which the callback will be launched.
-     * @property {string} do - The callback itself. Each callback wil receive an object !!!!!!!! as an argument.
-     */
-
-    /**
-     * @description Start the animation.
-     * 
-     * @param {Vevet.TextAnimateModule.Settings} data - Settings of the animation.
-     * 
-     * @returns {Vevet.TimelineModule|false} Returns an object if the animation is launched and false if not.
-     */
-
-  }, {
-    key: "play",
-    value: function play(data) {
-      // check if already playing
-      if (this._playing) {
-        return this._timeline;
-      } // properties
-
-
-      var prop = {
-        types: ['letter'],
-        durationElement: 250,
-        durationAuto: true,
-        duration: 2500,
-        easing: 'linear',
-        easingEl: this._vp.easing,
-        letter: [],
-        word: [],
-        line: [],
-        shift: .2,
-        shiftLine: .2,
-        reverse: false,
-        reverseComposite: false,
-        shuffle: false,
-        center: false,
-        callbacks: []
-      };
-      prop = (0, _merge.default)(prop, data); // merge style settings
-
-      prop.letter = this._mergeSettingStyle(prop.letter);
-      prop.word = this._mergeSettingStyle(prop.word);
-      prop.line = this._mergeSettingStyle(prop.line); // define animation prototype & get data for each type
-
-      var infos = [];
-
-      for (var i = 0; i < prop.types.length; i++) {
-        var type = prop.types[i],
-            prototype = type;
-
-        if (type === 'letter' || type === 'word' || type === 'line') {
-          prototype = 'elementary';
-        }
-
-        if (type === 'lineletter' || type === 'lineword' || type === 'wordletter') {
-          prototype = 'composite_elementary';
-        } // launch for type
-
-
-        if (typeof this["animate_".concat(prototype)] != "undefined") {
-          infos.push(this["animate_".concat(prototype)](prop, type));
-        }
-      } // check if there are types
-
-
-      if (infos.length === 0) {
-        return false;
-      } // calculate how much time for each type
-
-
-      var animationInfo = this._calcTypesTime(infos); // launch animation
-
-
-      this._timeline = this._animate(animationInfo, prop); // return object timeline if animation launched
-
-      return this._timeline;
-    }
-    /**
-     * @description Merge style settings
-     * @protected
-     * @param {Array<Vevet.TextAnimateModule.SettingStyle>} arr 
-     */
-
-  }, {
-    key: "_mergeSettingStyle",
-    value: function _mergeSettingStyle(arr) {
-      for (var i = 0; i < arr.length; i++) {
-        var el = arr[i];
-
-        if (typeof el.scope == 'undefined') {
-          el.scope = [0, 1];
-        }
-
-        if (typeof el.remove == 'undefined') {
-          el.remove = false;
-        }
-      }
-
-      return arr;
-    }
-    /**
-     * @description Calculate animation time.
-     * 
-     * @protected
-     * 
-     * @param {object} data - Play properties + el.
-     */
-
-  }, {
-    key: "_animationInfo",
-    value: function _animationInfo(data) {
-      // get total amount of elements and the elements themselves
-      var amount = data.el.length,
-          el = data.el.slice(); // get duration
-
-      var duration = data.duration; // intervals of time
-
-      var timelines = []; // calculate custom duration if auto
-
-      if (data.durationAuto) {
-        // calculate duration
-        var durationFull = amount * data.durationElement,
-            shiftsDuration = (amount - 1) * data.shift * data.durationElement;
-        duration = durationFull - shiftsDuration; // get timelines
-
-        for (var i = 0; i < amount; i++) {
-          var startTime = data.durationElement * (1 - data.shift) * i,
-              endTime = startTime + data.durationElement;
-          timelines.push({
-            start: startTime / duration,
-            end: endTime / duration
-          });
-        }
-      } // calculate duration of each element if duration not auto
-      else {
-          var time = 1 / (amount - data.shift * (amount - 1));
-
-          for (var _i = 0; _i < amount; _i++) {
-            var start = time * (1 - data.shift) * _i,
-                end = start + time;
-            timelines.push({
-              start: start,
-              end: end
-            });
-          }
-        } // elements to durations
-
-
-      for (var _i2 = 0; _i2 < timelines.length; _i2++) {
-        timelines[_i2].el = el[_i2];
-      } // return object of data
-
-
-      return {
-        duration: duration,
-        timelines: timelines,
-        styles: data.styles
-      };
-    }
-    /**
-     * @description Calculate how much time for each type of animation
-     * 
-     * @protected
-     * 
-     * @param {Array<object>} data - Animation data from _animationInfo.
-     */
-
-  }, {
-    key: "_calcTypesTime",
-    value: function _calcTypesTime(data) {
-      // get durations from each type
-      var durations = [];
-
-      for (var i = 0; i < data.length; i++) {
-        durations.push(data[i].duration);
-      } // get maximum duration
-
-
-      var durationMax = Math.max.apply(Math, durations); // get scope of animations for each type
-
-      for (var _i3 = 0; _i3 < data.length; _i3++) {
-        data[_i3].scope = [0, data[_i3].duration / durationMax];
-      }
-
-      return {
-        animations: data,
-        duration: durationMax
-      };
-    }
-    /**
-     * @description Launch main animation.
-     * 
-     * @protected
-     * 
-     * @param {object} data - Animation data.
-     * @param {Vevet.TextAnimateModule.Settings} prop - Settings of the animation.
-     */
-
-  }, {
-    key: "_animate",
-    value: function _animate(data, prop) {
-      var _this3 = this;
-
-      // create timeline animation
-      var timeline = new _TimelineModule.default(); // add progress callbacks for style
-
-      timeline.add({
-        target: 'progress',
-        do: this._animateTypes.bind(this, data, prop)
-      }); // add progress callbacks
-
-      var callbacks = prop.callbacks.slice();
-
-      for (var i = 0; i < callbacks.length; i++) {
-        callbacks[i].proceeded = false;
-      }
-
-      timeline.add({
-        target: 'progress',
-        do: this._callbacks.bind(this, callbacks)
-      });
-      timeline.add({
-        target: 'end',
-        do: function _do() {
-          _this3._playing = false;
-        }
-      }); // launch timeline
-
-      this._playing = true;
-      timeline.play({
-        duration: data.duration,
-        easing: prop.easing
-      }); // return timeline
-
-      return timeline;
-    }
-    /**
-     * @description Launch main animation.
-     * 
-     * @protected
-     * 
-     * @param {object} data - Animation data.
-     * @param {Vevet.TextAnimateModule.Settings} prop - Settings of the animation.
-     * @param {Vevet.TimelineModule.Data} p - Current progress.
-     */
-
-  }, {
-    key: "_animateTypes",
-    value: function _animateTypes(data, prop, p) {
-      // launch types if it is time for thm
-      var types = data.animations;
-
-      for (var i = 0; i < types.length; i++) {
-        // get progress
-        var progress = 0;
-        var scope = types[i].scope;
-
-        if (p.se >= scope[0] & p.se <= scope[1]) {
-          progress = (0, _mathScopeProgress.default)(p.se, scope);
-        } else if (p.se > scope[1]) {
-          progress = 1;
-        } // launch type
-
-
-        this._animateType(progress, types[i], prop);
-      }
-    }
-    /**
-     * @description Animate elements in each type.
-     * 
-     * @protected
-     * 
-     * @param {number} p - Current progress.
-     * @param {object} data - Animation data.
-     * @param {Vevet.TextAnimateModule.Settings} prop - Settings of the animation.
-     */
-
-  }, {
-    key: "_animateType",
-    value: function _animateType(p, data, prop) {
-      // go thru elements and animate them if needed
-      for (var i = 0; i < data.timelines.length; i++) {
-        // get progress
-        var progress = 0,
-            elTimeline = data.timelines[i];
-
-        if (p >= elTimeline.start & p <= elTimeline.end) {
-          progress = (0, _mathScopeProgress.default)(p, [elTimeline.start, elTimeline.end]);
-        } else if (p > elTimeline.end) {
-          progress = 1;
-        } // data obj
-
-
-        var obj = {
-          styles: data.styles,
-          p: progress,
-          prop: prop,
-          position: i,
-          total: data.timelines.length
-        },
-            el = elTimeline.el; // animate elements // animate words if type is line
-
-        if (!isarray(el)) {
-          this._animateTypeChildren(Object.assign(obj, {
-            el: el
-          }));
-        } else {
-          for (var a = 0; a < el.length; a++) {
-            this._animateTypeChildren(Object.assign(obj, {
-              el: el[a]
-            }));
-          }
-        }
-      }
-    }
-    /**
-     * @description Animate children according to the type of animation
-     * @protected
-     * @param {object} obj 
-     */
-
-  }, {
-    key: "_animateTypeChildren",
-    value: function _animateTypeChildren(obj) {
-      this._animateEl({
-        el: obj.el,
-        styles: obj.styles,
-        p: obj.p,
-        prop: obj.prop,
-        position: obj.position,
-        total: obj.total
-      });
-    }
-    /**
-     * @description Animate element.
-     * 
-     * @protected
-     * 
-     * @param {object} data - Animation data.
-     */
-
-  }, {
-    key: "_animateEl",
-    value: function _animateEl(data) {
-      // absolute progress for each element
-      var p = data.p; // get current element
-
-      var el = data.el.el; // get properties
-
-      var prop = data.prop; // go thru all styles
-
-      for (var i = 0; i < data.styles.length; i++) {
-        // get styles
-        var style = data.styles[i],
-            scope = style.scope,
-            property = style.property,
-            value = style.value,
-            remove = style.remove; // get progress
-
-        var progress = 0,
-            easingProgress = 0;
-
-        if (p >= scope[0] & p <= scope[1]) {
-          progress = (0, _mathScopeProgress.default)(p, scope);
-          easingProgress = (0, _easing.default)(progress, prop.easingEl);
-        } else if (p > scope[1]) {
-          progress = 1;
-          easingProgress = 1;
-        } // apply styles
-
-
-        var resetStyles = false;
-
-        if (progress == 1 & remove) {
-          resetStyles = true;
-        }
-
-        if (!resetStyles) {
-          var val = value({
-            p: progress,
-            e: easingProgress,
-            position: data.position,
-            total: data.total,
-            el: el
-          });
-
-          if (property) {
-            el.style[property] = val;
-          }
-        } else {
-          if (property) {
-            el.style[property] = '';
-          }
-        }
-      }
-    }
-    /**
-     * @description Launch callbacks.
-     * 
-     * @protected
-     * 
-     * @param {Array<Vevet.TextAnimateModule.SettingCallback>} callbacks - Array of callbacks.
-     * @param {Vevet.TimelineModule.Data} p - Settings of the animation.
-     */
-
-  }, {
-    key: "_callbacks",
-    value: function _callbacks(callbacks, p) {
-      for (var i = 0; i < callbacks.length; i++) {
-        var c = callbacks[i]; // if it is time for callbacks
-
-        if (p.se >= c.target) {
-          if (!c.proceeded) {
-            c.proceeded = true;
-            c.do();
-          }
-        }
-      }
-    }
-  }]);
-
-  return TextAnimateModule;
-}(_TextSplitModule2.default);
-
-exports.default = TextAnimateModule;
-TextAnimateModule.prototype.animate_elementary = elementary;
-TextAnimateModule.prototype.animate_composite_elementary = composite_elementary;