vevet 1.4.27 → 2.0.1-dev.3

package/dist/js/ScrollAnchorModule.js

@@ -1,554 +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 _ScrollAnimateModule2 = _interopRequireDefault(require("./ScrollAnimateModule"));
-
-var _merge = _interopRequireDefault(require("./merge"));
-
-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');
-/**
- * @classdesc Split your content into sections and highlight links that refer to a definite section when it is in viewport. <br>
- * Available targets:
- *  <ul>
- *      <li>change - When a screen has been changed. Argument - {@linkcode Vevet.ScrollAnchorModule.Ref}</li>
- *      <li>click - This event is called when a reference-link was clicked. Argument - {@linkcode Vevet.ScrollAnchorModule.Change}</li>
- *  </ul>
- * <br><br> <b>import {ScrollAnchorModule} from 'vevet';</b>
- * 
- * @vevetModuleCallback { Vevet.ScrollAnchorModule : change : Vevet.ScrollAnchorModule.Change}
- * @vevetModuleCallback { Vevet.ScrollAnchorModule : click : Vevet.ScrollAnchorModule.Ref}
- * 
- * @class
- * @abstract
- * @memberof Vevet
- * @augments Vevet.ScrollAnimateModule
- * @requires Vevet.TimelineModule
- */
-
-
-var ScrollAnchorModule = /*#__PURE__*/function (_ScrollAnimateModule) {
-  _inherits(ScrollAnchorModule, _ScrollAnimateModule);
-
-  var _super = _createSuper(ScrollAnchorModule);
-
-  /**
-   * @memberof Vevet.ScrollAnchorModule
-   * @typedef {object} Properties
-   * @augments Vevet.ScrollAnimateModule.Properties
-   * 
-   * @property {object} [selectors]
-   * @property {string|HTMLElement|Window|Vevet.ScrollModule} [selectors.outer=.vevet-scrollAnimate] - The scroll outer element.
-   * @property {string|HTMLElement|NodeList|Array<HTMLElement>} [selectors.elements=.vevet-scrollAnimate__el] - Sections.
-   * @property {boolean} [selectors.inside=true] - True for searching elements only inside the outer element.
-   * @property {string|HTMLElement|NodeList|Array<HTMLElement>} [selectors.anchors=.vevet-anchor__anchor] - The selector for reference-anchors.
-   * 
-   * @property {number} [animation] - Animation settings.
-   * @property {number} [animation.auto=true] - Auto duration that is calculated for each 100px.
-   * @property {number} [animation.duration=50] - Duration either for the whole 'scrollTop/scrollLeft' or for each 100px.
-   * @property {number} [animation.min=250] - Minimum duration.
-   * @property {number} [animation.max=1750] - Maximum duration.
-   * @property {number} [animation.delay=0] - Delay before 'scrollTo'.
-   * @property {string|Array<number>|Function} [animation.easing] - Easing function. The default value is equal to {@linkcode Vevet.Application#easing}.
-   * 
-   * @property {number} [edge=0.5] - The moment when a section is in viewport.
-   * 0.5 = 50% of viewport height/width from top/left.
-   * @property {number} [edgeClick=0.3] - Where a section must be positionated after a reference-anchor was clickd.
-   * 0.3 = 30% of viewport height/width from top/left.
-   */
-
-  /**
-   * @alias Vevet.ScrollAnchorModule
-   * @param {Vevet.ScrollAnchorModule.Properties} [data]
-   */
-  function ScrollAnchorModule(data) {
-    _classCallCheck(this, ScrollAnchorModule);
-
-    return _super.call(this, data);
-  }
-
-  _createClass(ScrollAnchorModule, [{
-    key: "prefix",
-    get: function get() {
-      return "".concat(this._v.prefix, "anchor");
-    }
-    /**
-     * @readonly
-     * @type {Vevet.ScrollAnchorModule.Properties}
-     */
-
-  }, {
-    key: "defaultProp",
-    get: function get() {
-      return (0, _merge.default)(_get(_getPrototypeOf(ScrollAnchorModule.prototype), "defaultProp", this), {
-        selectors: {
-          anchors: ".".concat(this._prefix, "__anchor")
-        },
-        classes: {
-          element: 'active',
-          anchor: 'active'
-        },
-        clicks: true,
-        animation: {
-          auto: true,
-          duration: 750,
-          min: 250,
-          max: 1750,
-          delay: 0,
-          easing: this._vp.easing
-        },
-        edge: .5,
-        edgeClick: .3
-      });
-    }
-    /**
-     * @member Vevet.ScrollAnchorModule#prop
-     * @memberof Vevet.ScrollAnchorModule
-     * @readonly
-     * @type {Vevet.ScrollAnchorModule.Properties}
-     */
-
-    /**
-     * @member Vevet.ScrollAnchorModule#_prop
-     * @memberof Vevet.ScrollAnchorModule
-     * @protected
-     * @type {Vevet.ScrollAnchorModule.Properties}
-     */
-
-    /**
-     * @function Vevet.ScrollAnchorModule#changeProp
-     * @memberof Vevet.ScrollAnchorModule
-     * @param {Vevet.ScrollAnchorModule.Properties} [prop]
-     */
-
-    /**
-     * @description Active id.
-     * @readonly
-     * @type {string}
-     */
-
-  }, {
-    key: "active",
-    get: function get() {
-      return this._active;
-    }
-    /**
-     * @memberof Vevet.ScrollAnchorModule
-     * @typedef {object} Ref
-     * @property {string} href - Reference id.
-     * @property {HTMLElement} el - Reference section.
-     * @property {HTMLElement} anchor - Reference anchor.
-     */
-
-    /**
-     * @memberof Vevet.ScrollAnchorModule
-     * @typedef {object} Change
-     * @property {Vevet.ScrollAnchorModule.Ref} prev - Previous section.
-     * @property {Vevet.ScrollAnchorModule.Ref} next - Previous section.
-     */
-    // Extra Constructor
-
-  }, {
-    key: "_extra",
-    value: function _extra() {
-      /**
-       * @description Edge border
-       * @protected
-       * @member {number}
-       */
-      this._edge = 0;
-      /**
-       * @description Active ID
-       * @protected
-       * @member {string}
-       */
-
-      this._active = '';
-
-      _get(_getPrototypeOf(ScrollAnchorModule.prototype), "_extra", this).call(this);
-    }
-    /**
-     * @description Get elements.
-     * @protected
-     */
-
-  }, {
-    key: "_elGet",
-    value: function _elGet() {
-      var _this = this;
-
-      _get(_getPrototypeOf(ScrollAnchorModule.prototype), "_elGet", this).call(this);
-      /**
-       * @description Anchors
-       * @member {NodeList|Array<HTMLElement>}
-       * @protected
-       */
-
-
-      this._anchors = selectEl.all(this._prop.selectors.anchors);
-      /**
-       * @description HREFS
-       * @member {Array<string>}
-       * @protected
-       */
-
-      this._hrefs = [];
-
-      this._anchors.forEach(function (el) {
-        var href = _this.getHref(el);
-
-        if (href) {
-          _this._hrefs.push(href);
-        }
-      });
-    }
-    /**
-     * @description Get href of a link.
-     * @param {HTMLElement} el 
-     * @returns {string|false} Returns a href or false.
-     * @protected
-     */
-
-  }, {
-    key: "getHref",
-    value: function getHref(el) {
-      var href = el.getAttribute("href");
-
-      if (href) {
-        href = href.replace("#", "");
-
-        if (href.length === 0) {
-          return false;
-        } else {
-          return href;
-        }
-      }
-
-      return false;
-    }
-    /**
-     * @description Get a section with a certain id.
-     * @param {string} href 
-     * @returns {HTMLElement|false} Returns a section or false.
-     * @protected
-     */
-
-  }, {
-    key: "getSection",
-    value: function getSection(href) {
-      var section = false;
-
-      this._el.forEach(function (el) {
-        var id = el.getAttribute("id");
-
-        if (id === href) {
-          section = el;
-        }
-      });
-
-      return section;
-    }
-    /**
-     * @description Get an anchor with a certain id.
-     * @param {string} id 
-     * @returns {false|HTMLElement} Returns an anchor or false.
-     * @protected
-     */
-
-  }, {
-    key: "getAnchor",
-    value: function getAnchor(id) {
-      var _this2 = this;
-
-      var anchor = false;
-
-      this._anchors.forEach(function (el) {
-        var href = _this2.getHref(el);
-
-        if (href) {
-          if (id === href) {
-            anchor = el;
-          }
-        }
-      });
-
-      return anchor;
-    } // Set events
-
-  }, {
-    key: "_setEvents",
-    value: function _setEvents() {
-      var _this3 = this;
-
-      _get(_getPrototypeOf(ScrollAnchorModule.prototype), "_setEvents", this).call(this); // set clicks on anchors
-
-
-      this._anchors.forEach(function (el) {
-        if (_this3._prop.clicks) {
-          _this3.listener(el, 'click', _this3._click.bind(_this3, el));
-        }
-      });
-    }
-    /**
-     * @description Update size values.
-     */
-
-  }, {
-    key: "setSize",
-    value: function setSize() {
-      _get(_getPrototypeOf(ScrollAnchorModule.prototype), "setSize", this).call(this);
-
-      this._edge = this._prop.edge * this._size;
-    }
-    /**
-     * @description Click on anchor.
-     * @param {HTMLElement} el - Anchor element.
-     * @param {object|null} [e=null] - Event object.
-     * @protected
-     */
-
-  }, {
-    key: "_click",
-    value: function _click(el) {
-      var _this4 = this;
-
-      var e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
-      // prevent action
-      if (e != null) {
-        e.preventDefault();
-      } // get href
-
-
-      var href = this.getHref(el);
-
-      if (!href) {
-        return false;
-      } // get section
-
-
-      var section = this.getSection(href);
-
-      if (!section) {
-        return false;
-      } // callbacks
-
-
-      this.lbt("click", {
-        href: href,
-        el: section,
-        anchor: el
-      }); // scroll to the section
-
-      setTimeout(function () {
-        _this4._scrollTo(section);
-      }, this._prop.animation.delay);
-    }
-    /**
-     * @description Scroll to a definite section.
-     * @param {HTMLElement} el - Section element.
-     * @protected
-     */
-
-  }, {
-    key: "_scrollTo",
-    value: function _scrollTo(el) {
-      var _this5 = this;
-
-      // get vars
-      var prop = this._prop,
-          animation = prop.animation; // scroll value
-
-      var scrollValue = this._scrollValue; // get section bounding
-
-      var bounding = el.getBoundingClientRect(); // get difference
-
-      var diff = 0;
-
-      if (prop.horizontal) {
-        diff = bounding.left - this._bounding.left;
-      } else {
-        diff = bounding.top - this._bounding.top;
-      } // new difference with edges
-
-
-      diff -= prop.edgeClick * this._size; // get duration
-
-      var duration = animation.duration;
-
-      if (animation.auto) {
-        duration = Math.ceil(Math.abs(diff / 100) * duration);
-      }
-
-      if (duration < animation.min) {
-        duration = animation.min;
-      }
-
-      if (duration > animation.max) {
-        duration = animation.max;
-      } // set animation
-
-
-      var timeline = new _TimelineModule.default({
-        destroyOnEnd: true
-      });
-      timeline.add({
-        target: 'progress',
-        do: function _do(p) {
-          if (_this5._vevetScroll instanceof Window) {
-            if (prop.horizontal) {
-              _this5._vevetScroll.scrollTo(scrollValue + diff * p.se, 0);
-            } else {
-              _this5._vevetScroll.scrollTo(0, scrollValue + diff * p.se);
-            }
-          } else {
-            if (prop.horizontal) {
-              _this5._vevetScroll.scrollLeft = scrollValue + diff * p.se;
-            } else {
-              _this5._vevetScroll.scrollTop = scrollValue + diff * p.se;
-            }
-          }
-        }
-      });
-      timeline.play({
-        duration: duration,
-        easing: animation.easing
-      });
-    } // Seek elements
-
-  }, {
-    key: "seek",
-    value: function seek() {
-      var _this6 = this;
-
-      var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
-      if (!_get(_getPrototypeOf(ScrollAnchorModule.prototype), "seek", this).call(this, val)) {
-        return false;
-      } // get prop
-
-
-      var prop = this._prop,
-          classes = prop.classes; // get edge
-
-      var edge = this._edge; // active href
-
-      var activePrev = this._active; // search active
-
-      for (var i = 0; i < this._el.length; i++) {
-        var el = this.elements[i]; // get sizes
-
-        var bounding = this.elements[i].getBoundingClientRect();
-        var b = {
-          top: bounding.top - this._bounding.top,
-          left: bounding.left - this._bounding.left
-        };
-        var elEdge = prop.horizontal ? b.left : b.top; // check if in viewport
-
-        if (elEdge <= edge) {
-          var id = el.id;
-          this._active = id;
-        }
-      } // check if active changed
-
-
-      var changed = activePrev != this._active; // change classes
-
-      if (changed) {
-        this._el.forEach(function (el) {
-          // get id
-          var id = el.id; // change section classes
-
-          if (id === _this6._active) {
-            el.classList.add(classes.element);
-          } else {
-            el.classList.remove(classes.element);
-          } // change anchor classes
-
-
-          var anchor = _this6.getAnchor(id);
-
-          if (anchor) {
-            if (id === _this6._active) {
-              anchor.classList.add(classes.anchor);
-            } else {
-              anchor.classList.remove(classes.anchor);
-            }
-          }
-        });
-      } // callback
-
-
-      if (changed) {
-        this.lbt("change", {
-          prev: {
-            href: activePrev,
-            el: this.getSection(activePrev),
-            anchor: this.getAnchor(activePrev)
-          },
-          next: {
-            href: this._active,
-            el: this.getSection(this._active),
-            anchor: this.getAnchor(this._active)
-          }
-        });
-      }
-    }
-    /**
-     * @description Scroll to a section.
-     * @param {string} id - Id of the section.
-     * @returns {boolean} Returns true if success.
-     */
-
-  }, {
-    key: "set",
-    value: function set(id) {
-      var section = this.getSection(id);
-
-      if (!section) {
-        return false;
-      }
-
-      this._scrollTo(section);
-
-      return true;
-    }
-  }]);
-
-  return ScrollAnchorModule;
-}(_ScrollAnimateModule2.default);
-
-exports.default = ScrollAnchorModule;