vevet 1.4.27 → 2.0.1-dev.3

package/dist/js/ScrollBarPlugin.js

@@ -1,594 +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 _merge = _interopRequireDefault(require("./merge"));
-
-var _DraggerModule = _interopRequireDefault(require("./DraggerModule"));
-
-var _Plugin2 = _interopRequireDefault(require("./Plugin"));
-
-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 dom = require('dom-create-element');
-
-var className_hover = 'hover';
-var className_noAction = 'no-action';
-var className_inAction = 'in-action';
-var className_hide = 'hide';
-/**
- * @classdesc Adds scrollbars to the ScrollModule. <br>
- * <br><br> <b>import {ScrollBarPlugin} from 'vevet';</b>
- * 
- * @class
- * @memberof Vevet
- * @augments Vevet.Plugin
- * @requires Vevet.DraggerModule
- */
-
-var ScrollBarPlugin = /*#__PURE__*/function (_Plugin) {
-  _inherits(ScrollBarPlugin, _Plugin);
-
-  var _super = _createSuper(ScrollBarPlugin);
-
-  /**
-   * @memberof Vevet.ScrollBarPlugin
-   * @typedef {object} Properties
-   * @augments Vevet.Plugin.Properties
-   * 
-   * @property {boolean} [draggable=false] - If the scrollbars are draggable.
-   * @property {boolean} [autoSize=true] - The size of the scrollbars must be calculated automatically.
-   * @property {number} [minSize=50] - The minimal size of a scrollbar.
-   */
-
-  /**
-   * @alias Vevet.ScrollBarPlugin
-   * @description Construct the class.
-   * 
-   * @param {Vevet.ScrollBarPlugin.Properties} [data]
-   */
-  function ScrollBarPlugin(data) {
-    _classCallCheck(this, ScrollBarPlugin);
-
-    return _super.call(this, data, false);
-  }
-  /**
-   * @readonly
-   * @type {Vevet.ScrollBarPlugin.Properties}
-   */
-
-
-  _createClass(ScrollBarPlugin, [{
-    key: "defaultProp",
-    get: function get() {
-      return (0, _merge.default)(_get(_getPrototypeOf(ScrollBarPlugin.prototype), "defaultProp", this), {
-        draggable: true,
-        autoSize: true,
-        minSize: 50
-      });
-    }
-    /**
-     * @member Vevet.ScrollBarPlugin#prop
-     * @memberof Vevet.ScrollBarPlugin
-     * @readonly
-     * @type {Vevet.ScrollBarPlugin.Properties}
-     */
-
-    /**
-     * @member Vevet.ScrollBarPlugin#_prop
-     * @memberof Vevet.ScrollBarPlugin
-     * @protected
-     * @type {Vevet.ScrollBarPlugin.Properties}
-     */
-
-    /**
-     * @function Vevet.ScrollBarPlugin#changeProp
-     * @memberof Vevet.ScrollBarPlugin
-     * @param {Vevet.ScrollBarPlugin.Properties} [prop]
-     */
-
-    /**
-     * @member Vevet.ScrollBarPlugin#_m
-     * @memberof Vevet.ScrollBarPlugin
-     * @protected
-     * @type {Vevet.ScrollModule}
-     */
-
-    /**
-     * @description Get scrollbars.
-     * @readonly
-     * @type {Vevet.ScrollBarPlugin.Bars}
-     */
-
-  }, {
-    key: "bars",
-    get: function get() {
-      return this._bars;
-    } // Extra Constructor
-
-  }, {
-    key: "_extra",
-    value: function _extra() {
-      _get(_getPrototypeOf(ScrollBarPlugin.prototype), "_extra", this).call(this); // init variables
-
-
-      this._vars(); // create scrollbars
-
-
-      this._create();
-    }
-    /**
-     * @memberof Vevet.ScrollBarPlugin
-     * @typedef {object} Bars
-     * 
-     * @property {Vevet.ScrollBarPlugin.Bar} x
-     * @property {Vevet.ScrollBarPlugin.Bar} y
-     */
-
-    /**
-     * @memberof Vevet.ScrollBarPlugin
-     * @typedef {object} Bar
-     * 
-     * @property {HTMLElement} outer
-     * @property {HTMLElement} bar
-     * @property {number} outerWidth
-     * @property {number} outerHeight
-     * @property {number} barWidth
-     * @property {number} barHeight
-     */
-
-  }, {
-    key: "_vars",
-    value: function _vars() {
-      /**
-       * @description ScrollModule events.
-       * @type {Array<string|false>}
-       * @protected
-       */
-      this._scrollEvents = [];
-      /**
-       * @description Scrollbars.
-       * @type {Vevet.ScrollBarPlugin.Bars}
-       * @protected
-       */
-
-      this._bars = {};
-      /**
-       * @description If the scrollbars are being dragged at the moment.
-       * @type {boolean}
-       * @protected
-       */
-
-      this._dragging = false;
-    }
-    /**
-     * @description Create scrollbars.
-     * @protected
-     */
-
-  }, {
-    key: "_create",
-    value: function _create() {
-      this._createScrollbar('x');
-
-      this._createScrollbar('y');
-    }
-    /**
-     * @description Create a single axis scrollbar.
-     * @param { 'x'|'y' } axis
-     * @protected
-     */
-
-  }, {
-    key: "_createScrollbar",
-    value: function _createScrollbar(axis) {
-      var _this = this;
-
-      var module = this._m; // create an object for the axis
-
-      this._bars[axis] = {};
-      var obj = this._bars[axis];
-      var prefix = module.prefix; // create outer
-
-      obj.outer = dom({
-        selector: 'div',
-        styles: "".concat(prefix, "__scrollbar ").concat(prefix, "__scrollbar_").concat(axis, " ").concat(className_hide, " ").concat(className_noAction)
-      });
-      module.outer.appendChild(obj.outer); // set events
-
-      obj.outer.addEventListener("mouseenter", function () {
-        _this._setScrollBarClass(axis, className_hover, true);
-      });
-      obj.outer.addEventListener("mouseleave", function () {
-        _this._setScrollBarClass(axis, className_hover, false);
-      }); // create bar
-
-      obj.bar = dom({
-        selector: 'div',
-        styles: "".concat(prefix, "__bar")
-      });
-      obj.outer.appendChild(obj.bar); // variables
-
-      obj.outerWidth = 0;
-      obj.outerHeight = 0;
-      obj.barWidth = 0;
-      obj.barHeight = 0;
-    }
-    /**
-     * @description Set classes on scrollbars.
-     * @param {string} className
-     * @param {boolean} bool - To add or to remove.
-     * @protected
-     */
-
-  }, {
-    key: "_setScrollBarsClass",
-    value: function _setScrollBarsClass(className, bool) {
-      this._setScrollBarClass('x', className, bool);
-
-      this._setScrollBarClass('y', className, bool);
-    }
-    /**
-     * @description Set classes on a single scrollbar.
-     * @param { 'x'|'y' } axis
-     * @param {string} className
-     * @param {boolean} bool - To add or to remove.
-     * @protected
-     */
-
-  }, {
-    key: "_setScrollBarClass",
-    value: function _setScrollBarClass(axis, className, bool) {
-      var outer = this._bars[axis].outer;
-
-      if (bool) {
-        outer.classList.add(className);
-      } else {
-        outer.classList.remove(className);
-      }
-    }
-    /**
-     * @description Update scrollbar sizes.
-     * @protected
-     */
-
-  }, {
-    key: "_updateSizes",
-    value: function _updateSizes() {
-      this._updateBarSize('x');
-
-      this._updateBarSize('y'); // make visible or unvisible according to the sizes
-
-
-      this._showHideBars();
-    }
-    /**
-     * @description Update a scrollbar sizes.
-     * @protected
-     * @param { 'x'|'y' } axis
-     */
-
-  }, {
-    key: "_updateBarSize",
-    value: function _updateBarSize(axis) {
-      // get module
-      var module = this._m; // get scroll sizes
-
-      var outerSizes = module.outerSizes;
-      var containerSizes = module.sizes;
-      var minSize = this._prop.minSize; // get object
-
-      var obj = this._bars[axis]; // update bar sizes
-
-      if (this._prop.autoSize) {
-        if (axis == 'x') {
-          var outerWidth = obj.outer.clientWidth;
-          var barWidth = outerWidth / (containerSizes[0] / outerSizes[0]);
-
-          if (barWidth < minSize) {
-            barWidth = minSize;
-          }
-
-          obj.bar.style.width = barWidth + 'px';
-          obj.bar.style.height = '100%';
-        } else if (axis == 'y') {
-          var outerHeight = obj.outer.clientHeight;
-          var barHeight = outerHeight / (containerSizes[1] / outerSizes[1]);
-
-          if (barHeight < minSize) {
-            barHeight = minSize;
-          }
-
-          obj.bar.style.width = '100%';
-          obj.bar.style.height = barHeight + 'px';
-        }
-      } // variables
-
-
-      obj.outerWidth = obj.outer.clientWidth;
-      obj.outerHeight = obj.outer.clientHeight;
-      obj.barWidth = obj.bar.clientWidth;
-      obj.barHeight = obj.bar.clientHeight;
-    }
-    /**
-     * @description Show/hide bars according to the scroll sizes.
-     * @protected
-     */
-
-  }, {
-    key: "_showHideBars",
-    value: function _showHideBars() {
-      this._showHideBar("x");
-
-      this._showHideBar("y");
-    }
-    /**
-     * @description Show/hide a scrollbar according to the scroll sizes.
-     * @protected
-     * @param { 'x'|'y' } axis
-     */
-
-  }, {
-    key: "_showHideBar",
-    value: function _showHideBar(axis) {
-      // get module
-      var module = this._m; // get scroll sizes
-
-      var outerSizes = module.outerSizes;
-      var containerSizes = module.sizes; // get object
-
-      var obj = this._bars[axis]; // update bar sizes
-
-      if (axis == 'x') {
-        if (outerSizes[0] == containerSizes[0]) {
-          obj.outer.classList.add(className_hide);
-        } else {
-          obj.outer.classList.remove(className_hide);
-        }
-      } else if (axis == 'y') {
-        if (outerSizes[1] == containerSizes[1]) {
-          obj.outer.classList.add(className_hide);
-        } else {
-          obj.outer.classList.remove(className_hide);
-        }
-      }
-    }
-    /**
-     * @description Render scrollbars.
-     * @protected
-     */
-
-  }, {
-    key: "_render",
-    value: function _render() {
-      this._renderBar('x');
-
-      this._renderBar('y');
-
-      this._setScrollBarsClass(className_inAction, true);
-    }
-    /**
-     * @description Render a single scrollbar.
-     * @param { 'x'|'y' } axis
-     * @protected
-     */
-
-  }, {
-    key: "_renderBar",
-    value: function _renderBar(axis) {
-      // get module
-      var module = this._m; // get scrollbar object
-
-      var obj = this._bars[axis]; // get scroll sizes
-
-      var outerSizes = module.outerSizes;
-      var containerSizes = module.sizes; // apply transformations
-
-      if (axis == 'y') {
-        var line = containerSizes[1] - outerSizes[1],
-            progress = module.scrollTop / line,
-            lineLength = obj.outerHeight - obj.barHeight;
-        obj.bar.style.transform = "translateY(".concat(lineLength * progress, "px)");
-      } else if (axis == 'x') {
-        var _line = containerSizes[0] - outerSizes[0],
-            _progress = module.scrollLeft / _line,
-            _lineLength = obj.outerWidth - obj.barWidth;
-
-        obj.bar.style.transform = "translateX(".concat(_lineLength * _progress, "px)");
-      }
-    } // Set events
-
-  }, {
-    key: "_setEvents",
-    value: function _setEvents() {
-      var _this2 = this;
-
-      // drag events
-      this._setDrag(); // update scrollbar sizes
-
-
-      this._updateSizes();
-
-      this._scrollEvents.push(this._m.on("size", this._updateSizes.bind(this))); // render scrollbar
-
-
-      this._scrollEvents.push(this._m.on("update", this._render.bind(this))); // event on wheel
-
-
-      var wheelEvent = this._m.on("wheel", function () {
-        _this2._setScrollBarsClass(className_inAction, true);
-
-        _this2._setScrollBarsClass(className_noAction, false);
-      });
-
-      this._scrollEvents.push(wheelEvent); // event on approximation
-
-
-      var approximateEvent = this._m.on("approximate", function () {
-        _this2._setScrollBarsClass(className_noAction, true);
-
-        _this2._setScrollBarsClass(className_inAction, false);
-      });
-
-      this._scrollEvents.push(approximateEvent);
-    }
-    /**
-     * @description Set Drag Events.
-     * @protected
-     */
-
-  }, {
-    key: "_setDrag",
-    value: function _setDrag() {
-      this._setDragOnBar('x');
-
-      this._setDragOnBar('y');
-    }
-    /**
-     * @description Set Drag Events.
-     * @protected
-     * @param { 'x'|'y' } axis
-     */
-
-  }, {
-    key: "_setDragOnBar",
-    value: function _setDragOnBar(axis) {
-      // get scrollbar object
-      var obj = this._bars[axis]; // create a drag
-
-      var dragger = new _DraggerModule.default({
-        on: this._prop.draggable,
-        outer: obj.bar,
-        parent: this,
-        thresholdPropagation: {
-          dir: axis,
-          value: 1
-        }
-      }); // add events
-
-      dragger.on("start", this._start.bind(this, axis));
-      dragger.on("move", this._move.bind(this, axis));
-      dragger.on("end", this._end.bind(this, axis));
-    }
-    /**
-     * @description Start Dragging.
-     * @protected
-     */
-
-  }, {
-    key: "_start",
-    value: function _start() {
-      if (this._m.prop.run & this._prop.draggable) {
-        // change bool
-        this._dragging = true; // set scrollbar classes
-
-        this._setScrollBarsClass(className_inAction, true);
-
-        this._setScrollBarsClass(className_noAction, false);
-      }
-    }
-    /**
-     * @description Moving.
-     * @param { 'x'|'y' } axis
-     * @param {Vevet.DraggerModule.Callback} data
-     * @protected
-     */
-
-  }, {
-    key: "_move",
-    value: function _move(axis, data) {
-      // get module
-      var module = this._m; // return if disabled
-
-      if (!module.prop.run || !this._prop.draggable || !this._dragging) {
-        return;
-      } // get scrollbar object
-
-
-      var obj = this._bars[axis]; // play scroll
-
-      this._m.play(); // vars
-
-
-      var step = data.step; // get scroll sizes
-
-      var containerSizes = module.sizes;
-
-      if (axis == "x") {
-        module.targetLeft += step.x * (containerSizes[0] / (obj.outer.clientWidth - obj.bar.clientWidth));
-      } else if (axis == "y") {
-        module.targetTop += step.y * (containerSizes[1] / (obj.outer.clientHeight - obj.bar.clientHeight));
-      } // shrink target values
-
-
-      module._boundariesBoth();
-    }
-    /**
-     * @description Drag end.
-     * @protected
-     */
-
-  }, {
-    key: "_end",
-    value: function _end() {
-      // return if disabled
-      if (!this._m.prop.run || !this._prop.draggable) {
-        return;
-      } // change bool
-
-
-      this._dragging = false;
-    } // Destroy
-
-  }, {
-    key: "_destroy",
-    value: function _destroy() {
-      var _this3 = this;
-
-      _get(_getPrototypeOf(ScrollBarPlugin.prototype), "_destroy", this).call(this); // remove ScrollModule events
-
-
-      this._scrollEvents.forEach(function (event) {
-        _this3._m.remove(event);
-      }); // remove scrollbars
-
-
-      this._bars['x'].outer.remove();
-
-      this._bars['y'].outer.remove();
-    }
-  }]);
-
-  return ScrollBarPlugin;
-}(_Plugin2.default);
-
-exports.default = ScrollBarPlugin;