@odopod/odo-draggable - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/odo-draggable.esm.js

@@ -64,10 +64,2 @@ import OdoPointer from '@odopod/odo-pointer';
 
-
-
-
-
-
-
-
-
 var inherits = function (subClass, superClass) {
@@ -89,12 +81,2 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-
-
-
-
-
-
-
-
-
-
 var possibleConstructorReturn = function (self, call) {
@@ -503,3 +485,3 @@ if (!self) {
       target: this.element,
-      axis: this.pointer.axis,
+      axis: this.pointer.options.axis,
       deltaTime: Date.now() - this.pointer.startTime,
@@ -531,3 +513,3 @@ delta: Coordinate.difference(this._relativeZero, this._currentPosition),
       currentTarget: this.element,
-      axis: this.pointer.axis,
+      axis: this.pointer.options.axis,
       deltaTime: this.pointer.deltaTime,
@@ -534,0 +516,0 @@ delta: Coordinate.difference(this._currentPosition, this._relativeZero),

dist/odo-draggable.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@odopod/odo-pointer'), require('tiny-emitter'), require('@odopod/odo-device'), require('@odopod/odo-helpers')) :
-	typeof define === 'function' && define.amd ? define(['@odopod/odo-pointer', 'tiny-emitter', '@odopod/odo-device', '@odopod/odo-helpers'], factory) :
-	(global.OdoDraggable = factory(global.OdoPointer,global.TinyEmitter,global.OdoDevice,global.OdoHelpers));
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@odopod/odo-pointer'), require('tiny-emitter'), require('@odopod/odo-device'), require('@odopod/odo-helpers')) :
+  typeof define === 'function' && define.amd ? define(['@odopod/odo-pointer', 'tiny-emitter', '@odopod/odo-device', '@odopod/odo-helpers'], factory) :
+  (global.OdoDraggable = factory(global.OdoPointer,global.TinyEmitter,global.OdoDevice,global.OdoHelpers));
 }(this, (function (OdoPointer,TinyEmitter,OdoDevice,odoHelpers) { 'use strict';
 
-OdoPointer = OdoPointer && OdoPointer.hasOwnProperty('default') ? OdoPointer['default'] : OdoPointer;
-TinyEmitter = TinyEmitter && TinyEmitter.hasOwnProperty('default') ? TinyEmitter['default'] : TinyEmitter;
-OdoDevice = OdoDevice && OdoDevice.hasOwnProperty('default') ? OdoDevice['default'] : OdoDevice;
+  OdoPointer = OdoPointer && OdoPointer.hasOwnProperty('default') ? OdoPointer['default'] : OdoPointer;
+  TinyEmitter = TinyEmitter && TinyEmitter.hasOwnProperty('default') ? TinyEmitter['default'] : TinyEmitter;
+  OdoDevice = OdoDevice && OdoDevice.hasOwnProperty('default') ? OdoDevice['default'] : OdoDevice;
 
-var settings = {
-  /** @enum {string} */
-  EventType: {
-    START: 'ododraggable:start',
-    MOVE: 'ododraggable:move',
-    END: 'ododraggable:end',
-    SETTLE: 'ododraggable:throwsettle'
-  },
+  var settings = {
+    /** @enum {string} */
+    EventType: {
+      START: 'ododraggable:start',
+      MOVE: 'ododraggable:move',
+      END: 'ododraggable:end',
+      SETTLE: 'ododraggable:throwsettle'
+    },
 
-  Classes: {
-    GRABBABLE: 'grabbable',
-    GRABBING: 'grabbing'
-  },
+    Classes: {
+      GRABBABLE: 'grabbable',
+      GRABBING: 'grabbing'
+    },
 
-  Defaults: {
-    // Draggable axis.
-    axis: OdoPointer.Axis.X,
+    Defaults: {
+      // Draggable axis.
+      axis: OdoPointer.Axis.X,
 
-    // Amplifies throw velocity by this value. Higher values make the throwable
-    // travel farther and faster.
-    amplifier: 24,
+      // Amplifies throw velocity by this value. Higher values make the throwable
+      // travel farther and faster.
+      amplifier: 24,
 
-    // Once the velocity has gone below this threshold, throwing stops.
-    velocityStop: 0.08,
+      // Once the velocity has gone below this threshold, throwing stops.
+      velocityStop: 0.08,
 
-    // On each throw frame, the velocity is multiplied by this friction value.
-    // It must be less than 1. Higher values let the throwable slide farther and longer.
-    throwFriction: 0.94,
+      // On each throw frame, the velocity is multiplied by this friction value.
+      // It must be less than 1. Higher values let the throwable slide farther and longer.
+      throwFriction: 0.94,
 
-    // Whether the draggable will keep its movement momentum after the user releases.
-    isThrowable: false
-  }
-};
+      // Whether the draggable will keep its movement momentum after the user releases.
+      isThrowable: false
+    }
+  };
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = 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);
+  var classCallCheck = function (instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
     }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
   };
-}();
 
+  var createClass = 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);
+      }
+    }
 
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
 
+  var inherits = function (subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
 
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  };
 
+  var possibleConstructorReturn = function (self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
 
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  };
 
+  /**
+   * Throws an error if `condition` is falsy.
+   * @param {boolean} condition The condition to test.
+   * @param {string} message Error message.
+   * @throws {Error} If condition is falsy.
+   * @private
+   */
+  function assert(condition, message) {
+    if (!condition) {
+      throw new Error(message);
+    }
+  }
 
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  /**
+   * Ensure the containing element has a width and height.
+   * @param {Object} obj Object to test.
+   */
+  function ensureObjectHasSize(obj) {
+    assert(obj.width > 0, 'containing element\'s width is zero');
+    assert(obj.height > 0, 'containing element\'s height is zero');
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
+  var Draggable = function (_TinyEmitter) {
+    inherits(Draggable, _TinyEmitter);
 
+    function Draggable(element) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      classCallCheck(this, Draggable);
 
+      /**
+       * The draggable element.
+       * @type {HTMLElement}
+       * @private
+       */
+      var _this = possibleConstructorReturn(this, _TinyEmitter.call(this));
 
+      _this.element = element;
 
+      /**
+       * Override any defaults with the given options.
+       * @type {Object}
+       */
+      _this.options = Object.assign({}, Draggable.Defaults, options);
 
+      /**
+       * The element which contains the target.
+       * @type {HTMLElement}
+       * @private
+       */
+      _this._parentEl = element.parentNode;
 
+      /**
+       * Current position of the handle/target.
+       * @type {Coordinate}
+       * @private
+       */
+      _this._currentPosition = new odoHelpers.Coordinate();
 
+      /**
+       * Starting location of the drag.
+       * @type {Coordinate}
+       * @private
+       */
+      _this._relativeZero = new odoHelpers.Coordinate();
 
+      /**
+       * Velocity at which the draggable was thrown. This value decays over time
+       * after a throw.
+       * @private
+       * @type {Coordinate}
+       */
+      _this._throwVelocity = new odoHelpers.Coordinate();
 
+      /**
+       * The change in position from the start of the drag.
+       * @private
+       * @type {Coordinate}
+       */
+      _this._delta = new odoHelpers.Coordinate();
 
+      /**
+       * Animation frame id.
+       * @private
+       * @type {number}
+       */
+      _this._requestId = 0;
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+      /**
+       * The size of the containing element. This element is used to determine
+       * the percentage position of the draggable element.
+       * @type {Object}
+       */
+      _this._container = { width: 0, height: 0 };
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
+      /**
+       * Limits of how far the draggable element can be dragged.
+       * @type {Rect}
+       */
+      _this.limits = new odoHelpers.Rect(NaN, NaN, NaN, NaN);
 
-/**
- * Throws an error if `condition` is falsy.
- * @param {boolean} condition The condition to test.
- * @param {string} message Error message.
- * @throws {Error} If condition is falsy.
- * @private
- */
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
+      _this.pointer = new OdoPointer(element, {
+        axis: _this.options.axis
+      });
 
-/**
- * Ensure the containing element has a width and height.
- * @param {Object} obj Object to test.
- */
-function ensureObjectHasSize(obj) {
-  assert(obj.width > 0, 'containing element\'s width is zero');
-  assert(obj.height > 0, 'containing element\'s height is zero');
-}
+      _this.element.classList.add(Draggable.Classes.GRABBABLE);
 
-var Draggable = function (_TinyEmitter) {
-  inherits(Draggable, _TinyEmitter);
+      // Kick off.
+      _this._listen();
+      return _this;
+    }
 
-  function Draggable(element) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    classCallCheck(this, Draggable);
+    Draggable.prototype._listen = function _listen() {
+      this._onStart = this._handleDragStart.bind(this);
+      this._onMove = this._handleDragMove.bind(this);
+      this._onEnd = this._handleDragEnd.bind(this);
 
+      this.pointer.on(OdoPointer.EventType.START, this._onStart);
+      this.pointer.on(OdoPointer.EventType.MOVE, this._onMove);
+      this.pointer.on(OdoPointer.EventType.END, this._onEnd);
+    };
+
     /**
-     * The draggable element.
-     * @type {HTMLElement}
+     * Saves the containment element's width and height and scrubber position.
      * @private
      */
-    var _this = possibleConstructorReturn(this, _TinyEmitter.call(this));
 
-    _this.element = element;
 
-    /**
-     * Override any defaults with the given options.
-     * @type {Object}
-     */
-    _this.options = Object.assign({}, Draggable.Defaults, options);
+    Draggable.prototype._saveDimensions = function _saveDimensions() {
+      this._container = odoHelpers.getSize(this.element);
+      ensureObjectHasSize(this._container);
+      this._relativeZero = this._getRelativeZero();
+    };
 
     /**
-     * The element which contains the target.
-     * @type {HTMLElement}
+     * The position relative to the rest of the page. When it's first
+     * initialized, it is zero zero, but after dragging, it is the position
+     * relative to zero zero.
+     * @return {!Coordinate}
      * @private
      */
-    _this._parentEl = element.parentNode;
 
-    /**
-     * Current position of the handle/target.
-     * @type {Coordinate}
-     * @private
-     */
-    _this._currentPosition = new odoHelpers.Coordinate();
 
-    /**
-     * Starting location of the drag.
-     * @type {Coordinate}
-     * @private
-     */
-    _this._relativeZero = new odoHelpers.Coordinate();
+    Draggable.prototype._getRelativeZero = function _getRelativeZero() {
+      return odoHelpers.Coordinate.difference(this._getDraggablePosition(), this._getOffsetCorrection());
+    };
 
-    /**
-     * Velocity at which the draggable was thrown. This value decays over time
-     * after a throw.
-     * @private
-     * @type {Coordinate}
-     */
-    _this._throwVelocity = new odoHelpers.Coordinate();
+    Draggable.prototype._getDraggablePosition = function _getDraggablePosition() {
+      var elRect = this.element.getBoundingClientRect();
+      return new odoHelpers.Coordinate(elRect.left, elRect.top);
+    };
 
     /**
-     * The change in position from the start of the drag.
+     * Because the draggable element gets moved around and repositioned,
+     * the bounding client rect method and the offset left and top properties
+     * are unreliable once the element has been dragged once. This method uses
+     * the bounding client rect of the parent element to get a "correction"
+     * value.
+     * @return {!Coordinate}
      * @private
-     * @type {Coordinate}
      */
-    _this._delta = new odoHelpers.Coordinate();
 
-    /**
-     * Animation frame id.
-     * @private
-     * @type {number}
-     */
-    _this._requestId = 0;
 
-    /**
-     * The size of the containing element. This element is used to determine
-     * the percentage position of the draggable element.
-     * @type {Object}
-     */
-    _this._container = { width: 0, height: 0 };
+    Draggable.prototype._getOffsetCorrection = function _getOffsetCorrection() {
+      // getBoundingClientRect does not include margins. They must be accounted for.
+      var containmentRect = this._parentEl.getBoundingClientRect();
+      var paddings = odoHelpers.getPaddingBox(this._parentEl);
+      var margins = odoHelpers.getMarginBox(this.element);
+      var offsetCorrectionX = margins.left + paddings.left + containmentRect.left;
+      var offsetCorrectionY = margins.top + paddings.top + containmentRect.top;
+      return new odoHelpers.Coordinate(offsetCorrectionX, offsetCorrectionY);
+    };
 
     /**
-     * Limits of how far the draggable element can be dragged.
-     * @type {Rect}
+     * Sets the current position coordinate to a new coordinate.
+     * @param {Coordinate} position Where the x and y values are a percentage.
+     *     e.g. 50 for "50%".
      */
-    _this.limits = new odoHelpers.Rect(NaN, NaN, NaN, NaN);
 
-    _this.pointer = new OdoPointer(element, {
-      axis: _this.options.axis
-    });
 
-    _this.element.classList.add(Draggable.Classes.GRABBABLE);
+    Draggable.prototype._setCurrentPosition = function _setCurrentPosition(position) {
+      this.pointer.applyFriction(position);
+      var x = this._limitX(position.x / 100 * this._parentEl.offsetWidth);
+      var y = this._limitY(position.y / 100 * this._parentEl.offsetHeight);
+      this._currentPosition = this._getAxisCoordinate(Math.round(x), Math.round(y));
+    };
 
-    // Kick off.
-    _this._listen();
-    return _this;
-  }
+    /**
+     * Clamp the x or y value.
+     * @param {number} value X or Y value.
+     * @param {number} rectPosition The limits starting edge. (left or top).
+     * @param {number} rectSize The limits dimension. (width or height).
+     * @return {number} The clamped number.
+     */
 
-  Draggable.prototype._listen = function _listen() {
-    this._onStart = this._handleDragStart.bind(this);
-    this._onMove = this._handleDragMove.bind(this);
-    this._onEnd = this._handleDragEnd.bind(this);
 
-    this.pointer.on(OdoPointer.EventType.START, this._onStart);
-    this.pointer.on(OdoPointer.EventType.MOVE, this._onMove);
-    this.pointer.on(OdoPointer.EventType.END, this._onEnd);
-  };
+    Draggable._limitValue = function _limitValue(value, rectPosition, rectSize) {
+      var side = odoHelpers.defaultsTo(rectPosition, null, !Number.isNaN(rectPosition));
+      var dimension = odoHelpers.defaultsTo(rectSize, 0, !Number.isNaN(rectSize));
+      var max = odoHelpers.defaultsTo(side + dimension, Infinity, side !== null);
+      var min = odoHelpers.defaultsTo(side, -Infinity, side !== null);
+      return odoHelpers.clamp(value, min, max);
+    };
 
-  /**
-   * Saves the containment element's width and height and scrubber position.
-   * @private
-   */
+    /**
+     * Returns the 'real' x after limits are applied (allows for some
+     * limits to be undefined).
+     * @param {number} x X-coordinate to limit.
+     * @return {number} The 'real' X-coordinate after limits are applied.
+     */
 
 
-  Draggable.prototype._saveDimensions = function _saveDimensions() {
-    this._container = odoHelpers.getSize(this.element);
-    ensureObjectHasSize(this._container);
-    this._relativeZero = this._getRelativeZero();
-  };
+    Draggable.prototype._limitX = function _limitX(x) {
+      return Draggable._limitValue(x, this.limits.left, this.limits.width);
+    };
 
-  /**
-   * The position relative to the rest of the page. When it's first
-   * initialized, it is zero zero, but after dragging, it is the position
-   * relative to zero zero.
-   * @return {!Coordinate}
-   * @private
-   */
+    /**
+     * Returns the 'real' y after limits are applied (allows for some
+     * limits to be undefined).
+     * @param {number} y Y-coordinate to limit.
+     * @return {number} The 'real' Y-coordinate after limits are applied.
+     */
 
 
-  Draggable.prototype._getRelativeZero = function _getRelativeZero() {
-    return odoHelpers.Coordinate.difference(this._getDraggablePosition(), this._getOffsetCorrection());
-  };
+    Draggable.prototype._limitY = function _limitY(y) {
+      return Draggable._limitValue(y, this.limits.top, this.limits.height);
+    };
 
-  Draggable.prototype._getDraggablePosition = function _getDraggablePosition() {
-    var elRect = this.element.getBoundingClientRect();
-    return new odoHelpers.Coordinate(elRect.left, elRect.top);
-  };
+    /**
+     * Returns the x and y positions the draggable element should be set to.
+     * @param {Coordinate=} optPosition Position to set the draggable
+     *     element. This will optionally override calculating the position
+     *     from a drag.
+     * @return {!Coordinate} The x and y coordinates.
+     * @private
+     */
 
-  /**
-   * Because the draggable element gets moved around and repositioned,
-   * the bounding client rect method and the offset left and top properties
-   * are unreliable once the element has been dragged once. This method uses
-   * the bounding client rect of the parent element to get a "correction"
-   * value.
-   * @return {!Coordinate}
-   * @private
-   */
 
+    Draggable.prototype._getElementPosition = function _getElementPosition(optPosition) {
+      if (optPosition) {
+        this._setCurrentPosition(optPosition);
+      }
 
-  Draggable.prototype._getOffsetCorrection = function _getOffsetCorrection() {
-    // getBoundingClientRect does not include margins. They must be accounted for.
-    var containmentRect = this._parentEl.getBoundingClientRect();
-    var paddings = odoHelpers.getPaddingBox(this._parentEl);
-    var margins = odoHelpers.getMarginBox(this.element);
-    var offsetCorrectionX = margins.left + paddings.left + containmentRect.left;
-    var offsetCorrectionY = margins.top + paddings.top + containmentRect.top;
-    return new odoHelpers.Coordinate(offsetCorrectionX, offsetCorrectionY);
-  };
+      var newX = this._currentPosition.x / this._container.width * 100;
+      var newY = this._currentPosition.y / this._container.height * 100;
 
-  /**
-   * Sets the current position coordinate to a new coordinate.
-   * @param {Coordinate} position Where the x and y values are a percentage.
-   *     e.g. 50 for "50%".
-   */
+      return this._getAxisCoordinate(newX, newY);
+    };
 
+    /**
+     * Ensures the y value of an x axis draggable is zero and visa versa.
+     * @param {number} newX New position for the x value.
+     * @param {number} newY New position for the y value.
+     * @return {!Coordinate}
+     * @private
+     */
 
-  Draggable.prototype._setCurrentPosition = function _setCurrentPosition(position) {
-    this.pointer.applyFriction(position);
-    var x = this._limitX(position.x / 100 * this._parentEl.offsetWidth);
-    var y = this._limitY(position.y / 100 * this._parentEl.offsetHeight);
-    this._currentPosition = this._getAxisCoordinate(Math.round(x), Math.round(y));
-  };
 
-  /**
-   * Clamp the x or y value.
-   * @param {number} value X or Y value.
-   * @param {number} rectPosition The limits starting edge. (left or top).
-   * @param {number} rectSize The limits dimension. (width or height).
-   * @return {number} The clamped number.
-   */
+    Draggable.prototype._getAxisCoordinate = function _getAxisCoordinate(newX, newY) {
+      // Drag horizontal only.
+      if (this.pointer.isXAxis()) {
+        return new odoHelpers.Coordinate(newX, 0);
+      }
 
+      // Drag vertical only.
+      if (this.pointer.isYAxis()) {
+        return new odoHelpers.Coordinate(0, newY);
+      }
 
-  Draggable._limitValue = function _limitValue(value, rectPosition, rectSize) {
-    var side = odoHelpers.defaultsTo(rectPosition, null, !Number.isNaN(rectPosition));
-    var dimension = odoHelpers.defaultsTo(rectSize, 0, !Number.isNaN(rectSize));
-    var max = odoHelpers.defaultsTo(side + dimension, Infinity, side !== null);
-    var min = odoHelpers.defaultsTo(side, -Infinity, side !== null);
-    return odoHelpers.clamp(value, min, max);
-  };
+      // Drag both directions.
+      return new odoHelpers.Coordinate(newX, newY);
+    };
 
-  /**
-   * Returns the 'real' x after limits are applied (allows for some
-   * limits to be undefined).
-   * @param {number} x X-coordinate to limit.
-   * @return {number} The 'real' X-coordinate after limits are applied.
-   */
+    /**
+     * Returns a new coordinate with limits applied to it.
+     * @param {Coordinate} deltaFromStart The distance moved since the drag started.
+     * @return {!Coordinate}
+     * @private
+     */
 
 
-  Draggable.prototype._limitX = function _limitX(x) {
-    return Draggable._limitValue(x, this.limits.left, this.limits.width);
-  };
+    Draggable.prototype._getNewLimitedPosition = function _getNewLimitedPosition(deltaFromStart) {
+      var sum = odoHelpers.Coordinate.sum(this._relativeZero, deltaFromStart);
+      return new odoHelpers.Coordinate(this._limitX(sum.x), this._limitY(sum.y));
+    };
 
-  /**
-   * Returns the 'real' y after limits are applied (allows for some
-   * limits to be undefined).
-   * @param {number} y Y-coordinate to limit.
-   * @return {number} The 'real' Y-coordinate after limits are applied.
-   */
+    /**
+     * Drag start handler.
+     * @private
+     */
 
 
-  Draggable.prototype._limitY = function _limitY(y) {
-    return Draggable._limitValue(y, this.limits.top, this.limits.height);
-  };
+    Draggable.prototype._handleDragStart = function _handleDragStart(evt) {
+      this._stopThrow();
+      this._saveDimensions();
+      this._currentPosition = this._relativeZero;
+      this._emitEvent(this._createEvent(Draggable.EventType.START, evt));
+      this.element.classList.add(Draggable.Classes.GRABBING);
+    };
 
-  /**
-   * Returns the x and y positions the draggable element should be set to.
-   * @param {Coordinate=} optPosition Position to set the draggable
-   *     element. This will optionally override calculating the position
-   *     from a drag.
-   * @return {!Coordinate} The x and y coordinates.
-   * @private
-   */
+    /**
+     * Drag move, after _applyPosition has happened
+     * @param {PointerEvent} evt The dragger event.
+     * @private
+     */
 
 
-  Draggable.prototype._getElementPosition = function _getElementPosition(optPosition) {
-    if (optPosition) {
-      this._setCurrentPosition(optPosition);
-    }
+    Draggable.prototype._handleDragMove = function _handleDragMove(evt) {
+      // Calculate the new position based on limits and the starting point.
+      this._currentPosition = this._getNewLimitedPosition(this.pointer.delta);
 
-    var newX = this._currentPosition.x / this._container.width * 100;
-    var newY = this._currentPosition.y / this._container.height * 100;
+      this._emitEvent(this._createEvent(Draggable.EventType.MOVE, evt));
 
-    return this._getAxisCoordinate(newX, newY);
-  };
+      if (!this.pointer._isDeactivated) {
+        this._applyPosition();
+      }
+    };
 
-  /**
-   * Ensures the y value of an x axis draggable is zero and visa versa.
-   * @param {number} newX New position for the x value.
-   * @param {number} newY New position for the y value.
-   * @return {!Coordinate}
-   * @private
-   */
+    /**
+     * Dragging ended.
+     * @private
+     */
 
 
-  Draggable.prototype._getAxisCoordinate = function _getAxisCoordinate(newX, newY) {
-    // Drag horizontal only.
-    if (this.pointer.isXAxis()) {
-      return new odoHelpers.Coordinate(newX, 0);
-    }
+    Draggable.prototype._handleDragEnd = function _handleDragEnd(evt) {
+      this._emitEvent(this._createEvent(Draggable.EventType.END, evt));
+      this.element.classList.remove(Draggable.Classes.GRABBING);
 
-    // Drag vertical only.
-    if (this.pointer.isYAxis()) {
-      return new odoHelpers.Coordinate(0, newY);
-    }
+      if (this.options.isThrowable && this.pointer.hasVelocity(evt.currentVelocity, 0)) {
+        this._throw(evt.currentVelocity, evt.delta);
+      }
+    };
 
-    // Drag both directions.
-    return new odoHelpers.Coordinate(newX, newY);
-  };
+    /**
+     * Start a throw based on the draggable's velocity.
+     * @param {Coordinate} velocity Velocity.
+     * @param {Coordinate} delta Total drag distance from start to end.
+     * @private
+     */
 
-  /**
-   * Returns a new coordinate with limits applied to it.
-   * @param {Coordinate} deltaFromStart The distance moved since the drag started.
-   * @return {!Coordinate}
-   * @private
-   */
 
+    Draggable.prototype._throw = function _throw(velocity, delta) {
+      this._delta = delta;
+      this._throwVelocity = odoHelpers.Coordinate.scale(velocity, this.options.amplifier);
+      this._animateThrow();
+    };
 
-  Draggable.prototype._getNewLimitedPosition = function _getNewLimitedPosition(deltaFromStart) {
-    var sum = odoHelpers.Coordinate.sum(this._relativeZero, deltaFromStart);
-    return new odoHelpers.Coordinate(this._limitX(sum.x), this._limitY(sum.y));
-  };
+    /**
+     * Scale down the velocity, update the position, and apply it. Then do it again
+     * until it's below a threshold.
+     * @private
+     */
 
-  /**
-   * Drag start handler.
-   * @private
-   */
 
+    Draggable.prototype._animateThrow = function _animateThrow() {
+      if (this.pointer.hasVelocity(this._throwVelocity, this.options.velocityStop)) {
+        this._currentPosition = this._getNewLimitedPosition(this._delta);
+        this._applyPosition();
 
-  Draggable.prototype._handleDragStart = function _handleDragStart(evt) {
-    this._stopThrow();
-    this._saveDimensions();
-    this._currentPosition = this._relativeZero;
-    this._emitEvent(this._createEvent(Draggable.EventType.START, evt));
-    this.element.classList.add(Draggable.Classes.GRABBING);
-  };
+        this._delta.translate(this._throwVelocity);
+        this._throwVelocity.scale(this.options.throwFriction);
 
-  /**
-   * Drag move, after _applyPosition has happened
-   * @param {PointerEvent} evt The dragger event.
-   * @private
-   */
+        // Again!
+        this._requestId = requestAnimationFrame(this._animateThrow.bind(this));
+      } else {
+        // Settle on the pixel grid.
+        this._currentPosition.x = Math.round(this._currentPosition.x);
+        this._currentPosition.y = Math.round(this._currentPosition.y);
+        this._applyPosition();
+        this._emitSettled();
+      }
+    };
 
+    /**
+     * Interrupt a throw.
+     * @private
+     */
 
-  Draggable.prototype._handleDragMove = function _handleDragMove(evt) {
-    // Calculate the new position based on limits and the starting point.
-    this._currentPosition = this._getNewLimitedPosition(this.pointer.delta);
 
-    this._emitEvent(this._createEvent(Draggable.EventType.MOVE, evt));
+    Draggable.prototype._stopThrow = function _stopThrow() {
+      this._delta = new odoHelpers.Coordinate();
+      this._throwVelocity = new odoHelpers.Coordinate();
+      cancelAnimationFrame(this._requestId);
+    };
 
-    if (!this.pointer._isDeactivated) {
-      this._applyPosition();
-    }
-  };
+    /**
+     * Dispatches the SETTLE event with data. This data is different from the start,
+     * move, and end events which use data from the pointer.
+     * @private
+     */
 
-  /**
-   * Dragging ended.
-   * @private
-   */
 
+    Draggable.prototype._emitSettled = function _emitSettled() {
+      this._emitEvent(new OdoPointer.Event({
+        type: Draggable.EventType.SETTLE,
+        target: this.element,
+        axis: this.pointer.options.axis,
+        deltaTime: Date.now() - this.pointer.startTime,
+        delta: odoHelpers.Coordinate.difference(this._relativeZero, this._currentPosition),
+        start: this._relativeZero,
+        end: this._currentPosition,
+        currentVelocity: this._throwVelocity,
+        position: {
+          pixel: this.getPosition(),
+          percent: this.getPosition(true)
+        }
+      }));
+    };
 
-  Draggable.prototype._handleDragEnd = function _handleDragEnd(evt) {
-    this._emitEvent(this._createEvent(Draggable.EventType.END, evt));
-    this.element.classList.remove(Draggable.Classes.GRABBING);
+    /**
+     * Make a new event with data.
+     * @param {Draggable.EventType} type Event type.
+     * @param {Event} evt Native event object.
+     * @return {!OdoPointer.Event}
+     * @private
+     */
 
-    if (this.options.isThrowable && this.pointer.hasVelocity(evt.currentVelocity, 0)) {
-      this._throw(evt.currentVelocity, evt.delta);
-    }
-  };
 
-  /**
-   * Start a throw based on the draggable's velocity.
-   * @param {Coordinate} velocity Velocity.
-   * @param {Coordinate} delta Total drag distance from start to end.
-   * @private
-   */
+    Draggable.prototype._createEvent = function _createEvent(type, evt) {
+      return new OdoPointer.Event({
+        type: type,
+        target: evt.target,
+        currentTarget: this.element,
+        axis: this.pointer.options.axis,
+        deltaTime: this.pointer.deltaTime,
+        delta: odoHelpers.Coordinate.difference(this._currentPosition, this._relativeZero),
+        start: this._relativeZero,
+        end: this._currentPosition,
+        currentVelocity: this.pointer.velocity,
+        position: {
+          pixel: this.getPosition(),
+          percent: this.getPosition(true)
+        }
+      });
+    };
 
+    /**
+     * Sets the position of thd draggable element.
+     * @param {Coordinate} [position] Position to set the draggable element. This
+     *     will optionally override calculating the position from a drag.
+     * @return {Coordinate} The position the draggable element was set to.
+     */
 
-  Draggable.prototype._throw = function _throw(velocity, delta) {
-    this._delta = delta;
-    this._throwVelocity = odoHelpers.Coordinate.scale(velocity, this.options.amplifier);
-    this._animateThrow();
-  };
 
-  /**
-   * Scale down the velocity, update the position, and apply it. Then do it again
-   * until it's below a threshold.
-   * @private
-   */
+    Draggable.prototype._applyPosition = function _applyPosition(position) {
+      var pos = this._getElementPosition(position);
+      this.element.style[OdoDevice.Dom.TRANSFORM] = 'translate(' + pos.x + '%,' + pos.y + '%)';
+      return this._currentPosition;
+    };
 
+    /**
+     * Returns the current position of the draggable element.
+     * @param {boolean} [asPercent] Optionally retrieve percentage values instead
+     *     of pixel values.
+     * @return {Coordinate} X and Y coordinates of the draggable element.
+     */
 
-  Draggable.prototype._animateThrow = function _animateThrow() {
-    if (this.pointer.hasVelocity(this._throwVelocity, this.options.velocityStop)) {
-      this._currentPosition = this._getNewLimitedPosition(this._delta);
-      this._applyPosition();
 
-      this._delta.translate(this._throwVelocity);
-      this._throwVelocity.scale(this.options.throwFriction);
-
-      // Again!
-      this._requestId = requestAnimationFrame(this._animateThrow.bind(this));
-    } else {
-      // Settle on the pixel grid.
-      this._currentPosition.x = Math.round(this._currentPosition.x);
-      this._currentPosition.y = Math.round(this._currentPosition.y);
-      this._applyPosition();
-      this._emitSettled();
-    }
-  };
-
-  /**
-   * Interrupt a throw.
-   * @private
-   */
-
-
-  Draggable.prototype._stopThrow = function _stopThrow() {
-    this._delta = new odoHelpers.Coordinate();
-    this._throwVelocity = new odoHelpers.Coordinate();
-    cancelAnimationFrame(this._requestId);
-  };
-
-  /**
-   * Dispatches the SETTLE event with data. This data is different from the start,
-   * move, and end events which use data from the pointer.
-   * @private
-   */
-
-
-  Draggable.prototype._emitSettled = function _emitSettled() {
-    this._emitEvent(new OdoPointer.Event({
-      type: Draggable.EventType.SETTLE,
-      target: this.element,
-      axis: this.pointer.axis,
-      deltaTime: Date.now() - this.pointer.startTime,
-      delta: odoHelpers.Coordinate.difference(this._relativeZero, this._currentPosition),
-      start: this._relativeZero,
-      end: this._currentPosition,
-      currentVelocity: this._throwVelocity,
-      position: {
-        pixel: this.getPosition(),
-        percent: this.getPosition(true)
+    Draggable.prototype.getPosition = function getPosition(asPercent) {
+      if (asPercent) {
+        return new odoHelpers.Coordinate(this._currentPosition.x / this._parentEl.offsetWidth * 100, this._currentPosition.y / this._parentEl.offsetHeight * 100);
       }
-    }));
-  };
+      return this._currentPosition;
+    };
 
-  /**
-   * Make a new event with data.
-   * @param {Draggable.EventType} type Event type.
-   * @param {Event} evt Native event object.
-   * @return {!OdoPointer.Event}
-   * @private
-   */
+    /**
+     * Set the position of the draggable element.
+     * @param {number} x X position as a percentage. Eg. 50 for "50%".
+     * @param {number} y Y position as a percentage. Eg. 50 for "50%".
+     * @return {Coordinate} The position the draggable element was set to.
+     */
 
 
-  Draggable.prototype._createEvent = function _createEvent(type, evt) {
-    return new OdoPointer.Event({
-      type: type,
-      target: evt.target,
-      currentTarget: this.element,
-      axis: this.pointer.axis,
-      deltaTime: this.pointer.deltaTime,
-      delta: odoHelpers.Coordinate.difference(this._currentPosition, this._relativeZero),
-      start: this._relativeZero,
-      end: this._currentPosition,
-      currentVelocity: this.pointer.velocity,
-      position: {
-        pixel: this.getPosition(),
-        percent: this.getPosition(true)
-      }
-    });
-  };
+    Draggable.prototype.setPosition = function setPosition(x, y) {
+      // setPosition can be called before any dragging, this would cause
+      // the containment width and containment height to be undefined.
+      this.update();
+      return this._applyPosition(new odoHelpers.Coordinate(x, y));
+    };
 
-  /**
-   * Sets the position of thd draggable element.
-   * @param {Coordinate} [position] Position to set the draggable element. This
-   *     will optionally override calculating the position from a drag.
-   * @return {Coordinate} The position the draggable element was set to.
-   */
+    /**
+     * Sets (or reset) the Drag limits after a Dragger is created.
+     * @param {Rect} limits Object containing left, top, width,
+     *     height for new Dragger limits.
+     */
 
 
-  Draggable.prototype._applyPosition = function _applyPosition(position) {
-    var pos = this._getElementPosition(position);
-    this.element.style[OdoDevice.Dom.TRANSFORM] = 'translate(' + pos.x + '%,' + pos.y + '%)';
-    return this._currentPosition;
-  };
+    Draggable.prototype.setLimits = function setLimits(limits) {
+      this.limits = limits;
+    };
 
-  /**
-   * Returns the current position of the draggable element.
-   * @param {boolean} [asPercent] Optionally retrieve percentage values instead
-   *     of pixel values.
-   * @return {Coordinate} X and Y coordinates of the draggable element.
-   */
+    /**
+     * Easy way to trigger setting dimensions. Useful for doing things after this
+     * class has been initialized, but no dragging has occurred yet.
+     */
+    Draggable.prototype.update = function update() {
+      this._saveDimensions();
+    };
 
+    /**
+     * Remove event listeners and element references.
+     * @private
+     */
 
-  Draggable.prototype.getPosition = function getPosition(asPercent) {
-    if (asPercent) {
-      return new odoHelpers.Coordinate(this._currentPosition.x / this._parentEl.offsetWidth * 100, this._currentPosition.y / this._parentEl.offsetHeight * 100);
-    }
-    return this._currentPosition;
-  };
 
-  /**
-   * Set the position of the draggable element.
-   * @param {number} x X position as a percentage. Eg. 50 for "50%".
-   * @param {number} y Y position as a percentage. Eg. 50 for "50%".
-   * @return {Coordinate} The position the draggable element was set to.
-   */
+    Draggable.prototype.dispose = function dispose() {
+      this.pointer.off(OdoPointer.EventType.START, this._onStart);
+      this.pointer.off(OdoPointer.EventType.MOVE, this._onMove);
+      this.pointer.off(OdoPointer.EventType.END, this._onEnd);
 
+      this.pointer.dispose();
 
-  Draggable.prototype.setPosition = function setPosition(x, y) {
-    // setPosition can be called before any dragging, this would cause
-    // the containment width and containment height to be undefined.
-    this.update();
-    return this._applyPosition(new odoHelpers.Coordinate(x, y));
-  };
+      this.element.classList.remove(Draggable.Classes.GRABBABLE);
 
-  /**
-   * Sets (or reset) the Drag limits after a Dragger is created.
-   * @param {Rect} limits Object containing left, top, width,
-   *     height for new Dragger limits.
-   */
+      this._parentEl = null;
+      this.element = null;
+    };
 
+    /**
+     * Emits a event on this instance.
+     * @param {PointerEvent} event Event object with data.
+     * @return {boolean} Whether preventDefault was called on the event.
+     */
 
-  Draggable.prototype.setLimits = function setLimits(limits) {
-    this.limits = limits;
-  };
 
-  /**
-   * Easy way to trigger setting dimensions. Useful for doing things after this
-   * class has been initialized, but no dragging has occurred yet.
-   */
-  Draggable.prototype.update = function update() {
-    this._saveDimensions();
-  };
+    Draggable.prototype._emitEvent = function _emitEvent(event) {
+      this.emit(event.type, event);
+      return event.defaultPrevented;
+    };
 
-  /**
-   * Remove event listeners and element references.
-   * @private
-   */
+    createClass(Draggable, [{
+      key: 'friction',
+      get: function get$$1() {
+        return this.pointer.friction;
+      }
 
+      /**
+       * Set the friction value.
+       * @param {number} friction A number between [1, 0].
+       */
+      ,
+      set: function set$$1(friction) {
+        this.pointer.friction = friction;
+      }
 
-  Draggable.prototype.dispose = function dispose() {
-    this.pointer.off(OdoPointer.EventType.START, this._onStart);
-    this.pointer.off(OdoPointer.EventType.MOVE, this._onMove);
-    this.pointer.off(OdoPointer.EventType.END, this._onEnd);
+      /**
+       * Get whether dragger is enabled.
+       * @return {boolean} Whether dragger is enabled.
+       */
 
-    this.pointer.dispose();
+    }, {
+      key: 'isEnabled',
+      get: function get$$1() {
+        return this.pointer.isEnabled;
+      }
 
-    this.element.classList.remove(Draggable.Classes.GRABBABLE);
+      /**
+       * Set whether dragger is enabled.
+       * @param {boolean} enabled Whether dragger is enabled.
+       */
+      ,
+      set: function set$$1(enabled) {
+        this.pointer.isEnabled = enabled;
+        this.element.classList.toggle(settings.Classes.GRABBABLE, enabled);
+      }
+    }]);
+    return Draggable;
+  }(TinyEmitter);
 
-    this._parentEl = null;
-    this.element = null;
-  };
+  Object.assign(Draggable, settings);
 
-  /**
-   * Emits a event on this instance.
-   * @param {PointerEvent} event Event object with data.
-   * @return {boolean} Whether preventDefault was called on the event.
-   */
-
-
-  Draggable.prototype._emitEvent = function _emitEvent(event) {
-    this.emit(event.type, event);
-    return event.defaultPrevented;
-  };
-
-  createClass(Draggable, [{
-    key: 'friction',
-    get: function get$$1() {
-      return this.pointer.friction;
-    }
-
-    /**
-     * Set the friction value.
-     * @param {number} friction A number between [1, 0].
-     */
-    ,
-    set: function set$$1(friction) {
-      this.pointer.friction = friction;
-    }
-
-    /**
-     * Get whether dragger is enabled.
-     * @return {boolean} Whether dragger is enabled.
-     */
-
-  }, {
-    key: 'isEnabled',
-    get: function get$$1() {
-      return this.pointer.isEnabled;
-    }
-
-    /**
-     * Set whether dragger is enabled.
-     * @param {boolean} enabled Whether dragger is enabled.
-     */
-    ,
-    set: function set$$1(enabled) {
-      this.pointer.isEnabled = enabled;
-      this.element.classList.toggle(settings.Classes.GRABBABLE, enabled);
-    }
-  }]);
   return Draggable;
-}(TinyEmitter);
 
-Object.assign(Draggable, settings);
-
-return Draggable;
-
 })));
 //# sourceMappingURL=odo-draggable.js.map

dist/odo-draggable.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@odopod/odo-pointer"),require("tiny-emitter"),require("@odopod/odo-device"),require("@odopod/odo-helpers")):"function"==typeof define&&define.amd?define(["@odopod/odo-pointer","tiny-emitter","@odopod/odo-device","@odopod/odo-helpers"],e):t.OdoDraggable=e(t.OdoPointer,t.TinyEmitter,t.OdoDevice,t.OdoHelpers)}(this,function(t,e,i,o){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e,i=i&&i.hasOwnProperty("default")?i.default:i;var n={EventType:{START:"ododraggable:start",MOVE:"ododraggable:move",END:"ododraggable:end",SETTLE:"ododraggable:throwsettle"},Classes:{GRABBABLE:"grabbable",GRABBING:"grabbing"},Defaults:{axis:t.Axis.X,amplifier:24,velocityStop:.08,throwFriction:.94,isThrowable:!1}},r=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),a=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e};function h(t,e){if(!t)throw new Error(e)}var l=function(e){function l(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};r(this,l);var s=a(this,e.call(this));return s.element=i,s.options=Object.assign({},l.Defaults,n),s._parentEl=i.parentNode,s._currentPosition=new o.Coordinate,s._relativeZero=new o.Coordinate,s._throwVelocity=new o.Coordinate,s._delta=new o.Coordinate,s._requestId=0,s._container={width:0,height:0},s.limits=new o.Rect(NaN,NaN,NaN,NaN),s.pointer=new t(i,{axis:s.options.axis}),s.element.classList.add(l.Classes.GRABBABLE),s._listen(),s}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(l,e),l.prototype._listen=function(){this._onStart=this._handleDragStart.bind(this),this._onMove=this._handleDragMove.bind(this),this._onEnd=this._handleDragEnd.bind(this),this.pointer.on(t.EventType.START,this._onStart),this.pointer.on(t.EventType.MOVE,this._onMove),this.pointer.on(t.EventType.END,this._onEnd)},l.prototype._saveDimensions=function(){var t;this._container=o.getSize(this.element),h((t=this._container).width>0,"containing element's width is zero"),h(t.height>0,"containing element's height is zero"),this._relativeZero=this._getRelativeZero()},l.prototype._getRelativeZero=function(){return o.Coordinate.difference(this._getDraggablePosition(),this._getOffsetCorrection())},l.prototype._getDraggablePosition=function(){var t=this.element.getBoundingClientRect();return new o.Coordinate(t.left,t.top)},l.prototype._getOffsetCorrection=function(){var t=this._parentEl.getBoundingClientRect(),e=o.getPaddingBox(this._parentEl),i=o.getMarginBox(this.element),n=i.left+e.left+t.left,r=i.top+e.top+t.top;return new o.Coordinate(n,r)},l.prototype._setCurrentPosition=function(t){this.pointer.applyFriction(t);var e=this._limitX(t.x/100*this._parentEl.offsetWidth),i=this._limitY(t.y/100*this._parentEl.offsetHeight);this._currentPosition=this._getAxisCoordinate(Math.round(e),Math.round(i))},l._limitValue=function(t,e,i){var n=o.defaultsTo(e,null,!Number.isNaN(e)),r=o.defaultsTo(i,0,!Number.isNaN(i)),s=o.defaultsTo(n+r,1/0,null!==n),a=o.defaultsTo(n,-1/0,null!==n);return o.clamp(t,a,s)},l.prototype._limitX=function(t){return l._limitValue(t,this.limits.left,this.limits.width)},l.prototype._limitY=function(t){return l._limitValue(t,this.limits.top,this.limits.height)},l.prototype._getElementPosition=function(t){t&&this._setCurrentPosition(t);var e=this._currentPosition.x/this._container.width*100,i=this._currentPosition.y/this._container.height*100;return this._getAxisCoordinate(e,i)},l.prototype._getAxisCoordinate=function(t,e){return this.pointer.isXAxis()?new o.Coordinate(t,0):this.pointer.isYAxis()?new o.Coordinate(0,e):new o.Coordinate(t,e)},l.prototype._getNewLimitedPosition=function(t){var e=o.Coordinate.sum(this._relativeZero,t);return new o.Coordinate(this._limitX(e.x),this._limitY(e.y))},l.prototype._handleDragStart=function(t){this._stopThrow(),this._saveDimensions(),this._currentPosition=this._relativeZero,this._emitEvent(this._createEvent(l.EventType.START,t)),this.element.classList.add(l.Classes.GRABBING)},l.prototype._handleDragMove=function(t){this._currentPosition=this._getNewLimitedPosition(this.pointer.delta),this._emitEvent(this._createEvent(l.EventType.MOVE,t)),this.pointer._isDeactivated||this._applyPosition()},l.prototype._handleDragEnd=function(t){this._emitEvent(this._createEvent(l.EventType.END,t)),this.element.classList.remove(l.Classes.GRABBING),this.options.isThrowable&&this.pointer.hasVelocity(t.currentVelocity,0)&&this._throw(t.currentVelocity,t.delta)},l.prototype._throw=function(t,e){this._delta=e,this._throwVelocity=o.Coordinate.scale(t,this.options.amplifier),this._animateThrow()},l.prototype._animateThrow=function(){this.pointer.hasVelocity(this._throwVelocity,this.options.velocityStop)?(this._currentPosition=this._getNewLimitedPosition(this._delta),this._applyPosition(),this._delta.translate(this._throwVelocity),this._throwVelocity.scale(this.options.throwFriction),this._requestId=requestAnimationFrame(this._animateThrow.bind(this))):(this._currentPosition.x=Math.round(this._currentPosition.x),this._currentPosition.y=Math.round(this._currentPosition.y),this._applyPosition(),this._emitSettled())},l.prototype._stopThrow=function(){this._delta=new o.Coordinate,this._throwVelocity=new o.Coordinate,cancelAnimationFrame(this._requestId)},l.prototype._emitSettled=function(){this._emitEvent(new t.Event({type:l.EventType.SETTLE,target:this.element,axis:this.pointer.axis,deltaTime:Date.now()-this.pointer.startTime,delta:o.Coordinate.difference(this._relativeZero,this._currentPosition),start:this._relativeZero,end:this._currentPosition,currentVelocity:this._throwVelocity,position:{pixel:this.getPosition(),percent:this.getPosition(!0)}}))},l.prototype._createEvent=function(e,i){return new t.Event({type:e,target:i.target,currentTarget:this.element,axis:this.pointer.axis,deltaTime:this.pointer.deltaTime,delta:o.Coordinate.difference(this._currentPosition,this._relativeZero),start:this._relativeZero,end:this._currentPosition,currentVelocity:this.pointer.velocity,position:{pixel:this.getPosition(),percent:this.getPosition(!0)}})},l.prototype._applyPosition=function(t){var e=this._getElementPosition(t);return this.element.style[i.Dom.TRANSFORM]="translate("+e.x+"%,"+e.y+"%)",this._currentPosition},l.prototype.getPosition=function(t){return t?new o.Coordinate(this._currentPosition.x/this._parentEl.offsetWidth*100,this._currentPosition.y/this._parentEl.offsetHeight*100):this._currentPosition},l.prototype.setPosition=function(t,e){return this.update(),this._applyPosition(new o.Coordinate(t,e))},l.prototype.setLimits=function(t){this.limits=t},l.prototype.update=function(){this._saveDimensions()},l.prototype.dispose=function(){this.pointer.off(t.EventType.START,this._onStart),this.pointer.off(t.EventType.MOVE,this._onMove),this.pointer.off(t.EventType.END,this._onEnd),this.pointer.dispose(),this.element.classList.remove(l.Classes.GRABBABLE),this._parentEl=null,this.element=null},l.prototype._emitEvent=function(t){return this.emit(t.type,t),t.defaultPrevented},s(l,[{key:"friction",get:function(){return this.pointer.friction},set:function(t){this.pointer.friction=t}},{key:"isEnabled",get:function(){return this.pointer.isEnabled},set:function(t){this.pointer.isEnabled=t,this.element.classList.toggle(n.Classes.GRABBABLE,t)}}]),l}(e);return Object.assign(l,n),l});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@odopod/odo-pointer"),require("tiny-emitter"),require("@odopod/odo-device"),require("@odopod/odo-helpers")):"function"==typeof define&&define.amd?define(["@odopod/odo-pointer","tiny-emitter","@odopod/odo-device","@odopod/odo-helpers"],e):t.OdoDraggable=e(t.OdoPointer,t.TinyEmitter,t.OdoDevice,t.OdoHelpers)}(this,function(t,e,i,o){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e,i=i&&i.hasOwnProperty("default")?i.default:i;var n={EventType:{START:"ododraggable:start",MOVE:"ododraggable:move",END:"ododraggable:end",SETTLE:"ododraggable:throwsettle"},Classes:{GRABBABLE:"grabbable",GRABBING:"grabbing"},Defaults:{axis:t.Axis.X,amplifier:24,velocityStop:.08,throwFriction:.94,isThrowable:!1}},r=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),a=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e};function h(t,e){if(!t)throw new Error(e)}var l=function(e){function l(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};r(this,l);var s=a(this,e.call(this));return s.element=i,s.options=Object.assign({},l.Defaults,n),s._parentEl=i.parentNode,s._currentPosition=new o.Coordinate,s._relativeZero=new o.Coordinate,s._throwVelocity=new o.Coordinate,s._delta=new o.Coordinate,s._requestId=0,s._container={width:0,height:0},s.limits=new o.Rect(NaN,NaN,NaN,NaN),s.pointer=new t(i,{axis:s.options.axis}),s.element.classList.add(l.Classes.GRABBABLE),s._listen(),s}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(l,e),l.prototype._listen=function(){this._onStart=this._handleDragStart.bind(this),this._onMove=this._handleDragMove.bind(this),this._onEnd=this._handleDragEnd.bind(this),this.pointer.on(t.EventType.START,this._onStart),this.pointer.on(t.EventType.MOVE,this._onMove),this.pointer.on(t.EventType.END,this._onEnd)},l.prototype._saveDimensions=function(){var t;this._container=o.getSize(this.element),h((t=this._container).width>0,"containing element's width is zero"),h(t.height>0,"containing element's height is zero"),this._relativeZero=this._getRelativeZero()},l.prototype._getRelativeZero=function(){return o.Coordinate.difference(this._getDraggablePosition(),this._getOffsetCorrection())},l.prototype._getDraggablePosition=function(){var t=this.element.getBoundingClientRect();return new o.Coordinate(t.left,t.top)},l.prototype._getOffsetCorrection=function(){var t=this._parentEl.getBoundingClientRect(),e=o.getPaddingBox(this._parentEl),i=o.getMarginBox(this.element),n=i.left+e.left+t.left,r=i.top+e.top+t.top;return new o.Coordinate(n,r)},l.prototype._setCurrentPosition=function(t){this.pointer.applyFriction(t);var e=this._limitX(t.x/100*this._parentEl.offsetWidth),i=this._limitY(t.y/100*this._parentEl.offsetHeight);this._currentPosition=this._getAxisCoordinate(Math.round(e),Math.round(i))},l._limitValue=function(t,e,i){var n=o.defaultsTo(e,null,!Number.isNaN(e)),r=o.defaultsTo(i,0,!Number.isNaN(i)),s=o.defaultsTo(n+r,1/0,null!==n),a=o.defaultsTo(n,-1/0,null!==n);return o.clamp(t,a,s)},l.prototype._limitX=function(t){return l._limitValue(t,this.limits.left,this.limits.width)},l.prototype._limitY=function(t){return l._limitValue(t,this.limits.top,this.limits.height)},l.prototype._getElementPosition=function(t){t&&this._setCurrentPosition(t);var e=this._currentPosition.x/this._container.width*100,i=this._currentPosition.y/this._container.height*100;return this._getAxisCoordinate(e,i)},l.prototype._getAxisCoordinate=function(t,e){return this.pointer.isXAxis()?new o.Coordinate(t,0):this.pointer.isYAxis()?new o.Coordinate(0,e):new o.Coordinate(t,e)},l.prototype._getNewLimitedPosition=function(t){var e=o.Coordinate.sum(this._relativeZero,t);return new o.Coordinate(this._limitX(e.x),this._limitY(e.y))},l.prototype._handleDragStart=function(t){this._stopThrow(),this._saveDimensions(),this._currentPosition=this._relativeZero,this._emitEvent(this._createEvent(l.EventType.START,t)),this.element.classList.add(l.Classes.GRABBING)},l.prototype._handleDragMove=function(t){this._currentPosition=this._getNewLimitedPosition(this.pointer.delta),this._emitEvent(this._createEvent(l.EventType.MOVE,t)),this.pointer._isDeactivated||this._applyPosition()},l.prototype._handleDragEnd=function(t){this._emitEvent(this._createEvent(l.EventType.END,t)),this.element.classList.remove(l.Classes.GRABBING),this.options.isThrowable&&this.pointer.hasVelocity(t.currentVelocity,0)&&this._throw(t.currentVelocity,t.delta)},l.prototype._throw=function(t,e){this._delta=e,this._throwVelocity=o.Coordinate.scale(t,this.options.amplifier),this._animateThrow()},l.prototype._animateThrow=function(){this.pointer.hasVelocity(this._throwVelocity,this.options.velocityStop)?(this._currentPosition=this._getNewLimitedPosition(this._delta),this._applyPosition(),this._delta.translate(this._throwVelocity),this._throwVelocity.scale(this.options.throwFriction),this._requestId=requestAnimationFrame(this._animateThrow.bind(this))):(this._currentPosition.x=Math.round(this._currentPosition.x),this._currentPosition.y=Math.round(this._currentPosition.y),this._applyPosition(),this._emitSettled())},l.prototype._stopThrow=function(){this._delta=new o.Coordinate,this._throwVelocity=new o.Coordinate,cancelAnimationFrame(this._requestId)},l.prototype._emitSettled=function(){this._emitEvent(new t.Event({type:l.EventType.SETTLE,target:this.element,axis:this.pointer.options.axis,deltaTime:Date.now()-this.pointer.startTime,delta:o.Coordinate.difference(this._relativeZero,this._currentPosition),start:this._relativeZero,end:this._currentPosition,currentVelocity:this._throwVelocity,position:{pixel:this.getPosition(),percent:this.getPosition(!0)}}))},l.prototype._createEvent=function(e,i){return new t.Event({type:e,target:i.target,currentTarget:this.element,axis:this.pointer.options.axis,deltaTime:this.pointer.deltaTime,delta:o.Coordinate.difference(this._currentPosition,this._relativeZero),start:this._relativeZero,end:this._currentPosition,currentVelocity:this.pointer.velocity,position:{pixel:this.getPosition(),percent:this.getPosition(!0)}})},l.prototype._applyPosition=function(t){var e=this._getElementPosition(t);return this.element.style[i.Dom.TRANSFORM]="translate("+e.x+"%,"+e.y+"%)",this._currentPosition},l.prototype.getPosition=function(t){return t?new o.Coordinate(this._currentPosition.x/this._parentEl.offsetWidth*100,this._currentPosition.y/this._parentEl.offsetHeight*100):this._currentPosition},l.prototype.setPosition=function(t,e){return this.update(),this._applyPosition(new o.Coordinate(t,e))},l.prototype.setLimits=function(t){this.limits=t},l.prototype.update=function(){this._saveDimensions()},l.prototype.dispose=function(){this.pointer.off(t.EventType.START,this._onStart),this.pointer.off(t.EventType.MOVE,this._onMove),this.pointer.off(t.EventType.END,this._onEnd),this.pointer.dispose(),this.element.classList.remove(l.Classes.GRABBABLE),this._parentEl=null,this.element=null},l.prototype._emitEvent=function(t){return this.emit(t.type,t),t.defaultPrevented},s(l,[{key:"friction",get:function(){return this.pointer.friction},set:function(t){this.pointer.friction=t}},{key:"isEnabled",get:function(){return this.pointer.isEnabled},set:function(t){this.pointer.isEnabled=t,this.element.classList.toggle(n.Classes.GRABBABLE,t)}}]),l}(e);return Object.assign(l,n),l});
 //# sourceMappingURL=odo-draggable.min.js.map

package.json

 {
   "name": "@odopod/odo-draggable",
   "description": "A class for versatile, performant draggability.",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "dist/odo-draggable.js",
@@ -6,0 +6,0 @@ "module": "dist/odo-draggable.esm.js",

src/draggable.js

@@ -373,3 +373,3 @@ import TinyEmitter from 'tiny-emitter';
       target: this.element,
-      axis: this.pointer.axis,
+      axis: this.pointer.options.axis,
       deltaTime: Date.now() - this.pointer.startTime,
@@ -399,3 +399,3 @@ delta: Coordinate.difference(this._relativeZero, this._currentPosition),
       currentTarget: this.element,
-      axis: this.pointer.axis,
+      axis: this.pointer.options.axis,
       deltaTime: this.pointer.deltaTime,
@@ -402,0 +402,0 @@ delta: Coordinate.difference(this._currentPosition, this._relativeZero),

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

147262

increased by1.76%

No dependency changes