@odopod/odo-pointer - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/odo-pointer.esm.js

@@ -1,79 +0,19 @@
-import OdoDevice from '@odopod/odo-device';
 import { Coordinate, clamp, events, noop } from '@odopod/odo-helpers';
 import TinyEmitter from 'tiny-emitter';
+import OdoDevice from '@odopod/odo-device';
 
-var settings = {
-  /** @enum {string} */
-  EventType: {
-    START: 'odopointer:start',
-    MOVE: 'odopointer:move',
-    END: 'odopointer:end'
-  },
+/** @enum {string} */
+var Direction = {
+  RIGHT: 'right',
+  LEFT: 'left',
+  UP: 'up',
+  DOWN: 'down',
+  NONE: 'no_movement'
+};
 
-  /** @enum {string} */
-  Direction: {
-    RIGHT: 'right',
-    LEFT: 'left',
-    UP: 'up',
-    DOWN: 'down',
-    NONE: 'no_movement'
-  },
-
-  /** @enum {string|boolean} */
-  TouchActionSupport: {
-    x: OdoDevice.prefixed('touchAction', 'pan-y'),
-    y: OdoDevice.prefixed('touchAction', 'pan-x'),
-    xy: OdoDevice.prefixed('touchAction', 'none')
-  },
-
-  /** @enum {string} */
-  TouchAction: {
-    x: 'pan-y',
-    y: 'pan-x',
-    xy: 'none'
-  },
-
-  /** @enum {string} */
-  Axis: {
-    X: 'x',
-    Y: 'y',
-    BOTH: 'xy'
-  },
-
-  Defaults: {
-    axis: 'xy',
-    preventEventDefault: true
-  },
-
-  /**
-   * The current velocity property will be clamped to this value (pixels/millisecond).
-   * @const {number}
-   */
-  MAX_VELOCITY: 12,
-
-  /**
-   * When the pointer is down, an interval starts to track the current velocity.
-   * @const {number}
-   */
-  VELOCITY_INTERVAL: 100,
-
-  /**
-   * Velocity required for a movement to be considered a swipe.
-   * @const {number}
-   */
-  SWIPE_VELOCITY: 0.6,
-
-  /**
-   * The scroll/drag amount (pixels) required on the draggable axis before
-   * stopping further page scrolling/movement.
-   * @const {number}
-   */
-  LOCK_THRESHOLD: 6,
-
-  /**
-   * The scroll/drag amount (pixels) required on the opposite draggable axis
-   * before dragging is deactivated for the rest of the interaction.
-   * @const {number}
-   */
-  DRAG_THRESHOLD: 5
+/** @enum {string} */
+var Axis = {
+  X: 'x',
+  Y: 'y',
+  BOTH: 'xy'
 };
@@ -148,15 +88,15 @@
 function isXAxis(axis) {
-  return axis === settings.Axis.X;
+  return axis === Axis.X;
 }
 
 function isYAxis(axis) {
-  return axis === settings.Axis.Y;
+  return axis === Axis.Y;
 }
 
 function isBothAxis(axis) {
-  return axis === settings.Axis.BOTH;
+  return axis === Axis.BOTH;
 }
 
 function hasDirection(direction) {
-  return direction !== settings.Direction.NONE;
+  return direction !== Direction.NONE;
 }
@@ -199,12 +139,12 @@
   if (Math.abs(coord1.x - coord2.x) >= Math.abs(coord1.y - coord2.y)) {
-    return getTheDirection(coord1.x, coord2.x, settings.Direction.LEFT, settings.Direction.RIGHT, settings.Direction.NONE);
+    return getTheDirection(coord1.x, coord2.x, Direction.LEFT, Direction.RIGHT, Direction.NONE);
   }
 
-  return getTheDirection(coord1.y, coord2.y, settings.Direction.UP, settings.Direction.DOWN, settings.Direction.NONE);
+  return getTheDirection(coord1.y, coord2.y, Direction.UP, Direction.DOWN, Direction.NONE);
 }
 
 function isOnAxis(axis, direction) {
-  var isXAndLeftOrRight = isXAxis(axis) && (direction === settings.Direction.LEFT || direction === settings.Direction.RIGHT);
+  var isXAndLeftOrRight = isXAxis(axis) && (direction === Direction.LEFT || direction === Direction.RIGHT);
 
-  var isYAndUpOrDown = isYAxis(axis) && (direction === settings.Direction.UP || direction === settings.Direction.DOWN);
+  var isYAndUpOrDown = isYAxis(axis) && (direction === Direction.UP || direction === Direction.DOWN);
 
@@ -312,3 +252,3 @@ var isBothAndNotNone = isBothAxis(axis) && hasDirection(direction);
      * Direction of drag.
-     * @type {settings.Direction}
+     * @type {Direction}
      */
@@ -331,3 +271,3 @@ this.direction = getDirection(options.start, options.end);
      * Direction of drag which excludes directions not on its axis.
-     * @type {settings.Direction}
+     * @type {Direction}
      */
@@ -353,3 +293,3 @@ this.axisDirection = getAxisDirection(options.axis, options.start, options.end);
  *
- * @author Glen Cheney
+ * @author Glen Cheney <[e-mail]>
  */
@@ -362,4 +302,5 @@
    * An abstraction layer for adding pointer events and calculating drag values.
-   * @param {Element} element Element to watch.
-   * @param {Object} options Options object.
+   * @param {HTMLElement} element Element to watch.
+   * @param {PointerOptions} options Options object.
+   * @throws {TypeError} Throws when the element parameter isn't an element.
    */
@@ -376,17 +317,13 @@ function Pointer(element) {
 
-    var opts = Object.assign({}, Pointer.Defaults, options);
-
     /**
-     * Whether to prevent the default event action on move.
-     * @type {boolean}
-     * @private
+     * @type {PointerOptions}
      */
-    _this._shouldPreventDefault = opts.preventEventDefault;
+    _this.options = Object.assign({}, Pointer.Defaults, options);
 
     /**
      * The draggable element.
-     * @type {Element}
+     * @type {HTMLElement}
      * @private
      */
-    _this._el = element;
+    _this.element = element;
 
@@ -427,9 +364,2 @@ /**
     /**
-     * Draggable axis.
-     * @type {string}
-     * @private
-     */
-    _this.axis = opts.axis;
-
-    /**
      * Flag indicating dragging has happened. It is set on dragmove and reset
@@ -512,3 +442,3 @@ * after the draggableend event has been dispatched.
 
-    var touchAction = Pointer.TouchActionSupport[_this.axis];
+    var touchAction = Pointer.TouchActionSupport[_this.options.axis];
 
@@ -523,5 +453,5 @@ /**
     // If the browser supports the touch action property, add it.
-    if (_this._shouldPreventDefault && _this._isTouchActionSupported) {
-      _this.element.style[touchAction] = Pointer.TouchAction[_this.axis];
-    } else if (_this._shouldPreventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
+    if (_this.options.preventEventDefault && _this._isTouchActionSupported) {
+      _this.element.style[touchAction] = Pointer.TouchAction[_this.options.axis];
+    } else if (_this.options.preventEventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
       window.addEventListener(events.TOUCHMOVE, noop);
@@ -538,8 +468,8 @@ }
     if (OdoDevice.HAS_POINTER_EVENTS) {
-      this._el.addEventListener(events.POINTERDOWN, this._onStart);
+      this.element.addEventListener(events.POINTERDOWN, this._onStart);
     } else {
-      this._el.addEventListener(events.MOUSEDOWN, this._onStart);
+      this.element.addEventListener(events.MOUSEDOWN, this._onStart);
 
       if (OdoDevice.HAS_TOUCH_EVENTS) {
-        this._el.addEventListener(events.TOUCHSTART, this._onStart);
+        this.element.addEventListener(events.TOUCHSTART, this._onStart);
       }
@@ -550,8 +480,8 @@ }
     // http://www.html5rocks.com/en/tutorials/dnd/basics/
-    this._el.addEventListener(events.DRAGSTART, Pointer._preventDefault);
+    this.element.addEventListener(events.DRAGSTART, Pointer._preventDefault);
   };
 
   /**
-   * Returns the draggable element.
-   * @return {Element}
+   * Get whether dragger is enabled.
+   * @return {boolean} Whether dragger is enabled.
    */
@@ -564,3 +494,3 @@
   Pointer.prototype.isXAxis = function isXAxis() {
-    return this.axis === Pointer.Axis.X;
+    return this.options.axis === Pointer.Axis.X;
   };
@@ -574,3 +504,3 @@
   Pointer.prototype.isYAxis = function isYAxis() {
-    return this.axis === Pointer.Axis.Y;
+    return this.options.axis === Pointer.Axis.Y;
   };
@@ -584,3 +514,3 @@
   Pointer.prototype.isBothAxis = function isBothAxis() {
-    return this.axis === Pointer.Axis.BOTH;
+    return this.options.axis === Pointer.Axis.BOTH;
   };
@@ -607,3 +537,3 @@
    * dragging can start.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {boolean}
@@ -631,3 +561,3 @@ * @private
    * Drag start handler.
-   * @param  {Event} evt The drag event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt The drag event object.
    * @private
@@ -661,3 +591,3 @@ */
    * Drag move, after applyDraggableElementPosition has happened
-   * @param {Event} evt The dragger event.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt The dragger event.
    * @private
@@ -678,3 +608,3 @@ */
     // browser supports touch-action (which will do the "locking" for us).
-    if (!isPrevented && this._shouldPreventDefault && !this._isTouchActionSupported) {
+    if (!isPrevented && this.options.preventEventDefault && !this._isTouchActionSupported) {
       this._finishDragMove(evt);
@@ -686,3 +616,3 @@ }
    * Finish the drag move function.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @private
@@ -844,3 +774,3 @@ */
    * @param {Event} evt Native event object.
-   * @return {!PointerEvent}
+   * @return {!Pointer.Event}
    * @private
@@ -856,3 +786,3 @@ */
       target: evt.target,
-      axis: this.axis,
+      axis: this.options.axis,
       deltaTime: this.deltaTime,
@@ -990,13 +920,13 @@ delta: this.delta,
     // Remove pointer/mouse/touch events.
-    this._el.removeEventListener(events.POINTERDOWN, this._onStart);
-    this._el.removeEventListener(events.MOUSEDOWN, this._onStart);
-    this._el.removeEventListener(events.TOUCHSTART, this._onStart);
+    this.element.removeEventListener(events.POINTERDOWN, this._onStart);
+    this.element.removeEventListener(events.MOUSEDOWN, this._onStart);
+    this.element.removeEventListener(events.TOUCHSTART, this._onStart);
 
     if (this._isTouchActionSupported) {
-      this._el.style[Pointer.TouchActionSupport[this.axis]] = '';
-    } else if (this._shouldPreventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
+      this.element.style[Pointer.TouchActionSupport[this.options.axis]] = '';
+    } else if (this.options.preventEventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
       window.removeEventListener(events.TOUCHMOVE, noop);
     }
 
-    this._el = null;
+    this.element = null;
     this.dragEventTarget = null;
@@ -1007,3 +937,3 @@ };
    * Whether the event is from a touch.
-   * @param {Event} evt Event object.
+   * @param {object} evt Event object.
    * @return {boolean}
@@ -1019,3 +949,3 @@ */
    * Whether the event is from a pointer cancel or touch cancel.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {boolean}
@@ -1033,3 +963,3 @@ * @private
    * touch events, mouse events, and pointer events.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {!Coordinate} The pageX and pageY of the press.
@@ -1058,13 +988,2 @@ * @private
   createClass(Pointer, [{
-    key: 'element',
-    get: function get$$1() {
-      return this._el;
-    }
-
-    /**
-     * Get whether dragger is enabled.
-     * @return {boolean} Whether dragger is enabled.
-     */
-
-  }, {
     key: 'isEnabled',
@@ -1101,5 +1020,73 @@ get: function get$$1() {
 
-Object.assign(Pointer, settings);
+/** @enum {string} */
 
-/** @type {PointerEvent} */
+
+Pointer.Direction = Direction;
+
+/** @enum {string} */
+Pointer.Axis = Axis;
+
+/** @enum {string} */
+Pointer.EventType = {
+  START: 'odopointer:start',
+  MOVE: 'odopointer:move',
+  END: 'odopointer:end'
+};
+
+/** @enum {string|boolean} */
+Pointer.TouchActionSupport = {
+  x: OdoDevice.prefixed('touchAction', 'pan-y'),
+  y: OdoDevice.prefixed('touchAction', 'pan-x'),
+  xy: OdoDevice.prefixed('touchAction', 'none')
+};
+
+/** @enum {string} */
+Pointer.TouchAction = {
+  x: 'pan-y',
+  y: 'pan-x',
+  xy: 'none'
+};
+
+/**
+ * @typedef {{axis: Axis, preventEventDefault: boolean}} PointerOptions
+ */
+
+/** @type {PointerOptions} */
+Pointer.Defaults = {
+  axis: 'xy',
+  preventEventDefault: true
+};
+
+/**
+ * The current velocity property will be clamped to this value (pixels/millisecond).
+ * @const {number}
+ */
+Pointer.MAX_VELOCITY = 12;
+
+/**
+ * When the pointer is down, an interval starts to track the current velocity.
+ * @const {number}
+ */
+Pointer.VELOCITY_INTERVAL = 100;
+
+/**
+ * Velocity required for a movement to be considered a swipe.
+ * @const {number}
+ */
+Pointer.SWIPE_VELOCITY = 0.6;
+
+/**
+ * The scroll/drag amount (pixels) required on the draggable axis before
+ * stopping further page scrolling/movement.
+ * @const {number}
+ */
+Pointer.LOCK_THRESHOLD = 6;
+
+/**
+ * The scroll/drag amount (pixels) required on the opposite draggable axis
+ * before dragging is deactivated for the rest of the interaction.
+ * @const {number}
+ */
+Pointer.DRAG_THRESHOLD = 5;
+
 Pointer.Event = PointerEvent;
@@ -1106,0 +1093,0 @@

dist/odo-pointer.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@odopod/odo-device'), require('@odopod/odo-helpers'), require('tiny-emitter')) :
-	typeof define === 'function' && define.amd ? define(['@odopod/odo-device', '@odopod/odo-helpers', 'tiny-emitter'], factory) :
-	(global.OdoPointer = factory(global.OdoDevice,global.OdoHelpers,global.TinyEmitter));
-}(this, (function (OdoDevice,odoHelpers,TinyEmitter) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@odopod/odo-helpers'), require('tiny-emitter'), require('@odopod/odo-device')) :
+	typeof define === 'function' && define.amd ? define(['@odopod/odo-helpers', 'tiny-emitter', '@odopod/odo-device'], factory) :
+	(global.OdoPointer = factory(global.OdoHelpers,global.TinyEmitter,global.OdoDevice));
+}(this, (function (odoHelpers,TinyEmitter,OdoDevice) { 'use strict';
 
+TinyEmitter = TinyEmitter && TinyEmitter.hasOwnProperty('default') ? TinyEmitter['default'] : TinyEmitter;
 OdoDevice = OdoDevice && OdoDevice.hasOwnProperty('default') ? OdoDevice['default'] : OdoDevice;
-TinyEmitter = TinyEmitter && TinyEmitter.hasOwnProperty('default') ? TinyEmitter['default'] : TinyEmitter;
 
-var settings = {
-  /** @enum {string} */
-  EventType: {
-    START: 'odopointer:start',
-    MOVE: 'odopointer:move',
-    END: 'odopointer:end'
-  },
+/** @enum {string} */
+var Direction = {
+  RIGHT: 'right',
+  LEFT: 'left',
+  UP: 'up',
+  DOWN: 'down',
+  NONE: 'no_movement'
+};
 
-  /** @enum {string} */
-  Direction: {
-    RIGHT: 'right',
-    LEFT: 'left',
-    UP: 'up',
-    DOWN: 'down',
-    NONE: 'no_movement'
-  },
-
-  /** @enum {string|boolean} */
-  TouchActionSupport: {
-    x: OdoDevice.prefixed('touchAction', 'pan-y'),
-    y: OdoDevice.prefixed('touchAction', 'pan-x'),
-    xy: OdoDevice.prefixed('touchAction', 'none')
-  },
-
-  /** @enum {string} */
-  TouchAction: {
-    x: 'pan-y',
-    y: 'pan-x',
-    xy: 'none'
-  },
-
-  /** @enum {string} */
-  Axis: {
-    X: 'x',
-    Y: 'y',
-    BOTH: 'xy'
-  },
-
-  Defaults: {
-    axis: 'xy',
-    preventEventDefault: true
-  },
-
-  /**
-   * The current velocity property will be clamped to this value (pixels/millisecond).
-   * @const {number}
-   */
-  MAX_VELOCITY: 12,
-
-  /**
-   * When the pointer is down, an interval starts to track the current velocity.
-   * @const {number}
-   */
-  VELOCITY_INTERVAL: 100,
-
-  /**
-   * Velocity required for a movement to be considered a swipe.
-   * @const {number}
-   */
-  SWIPE_VELOCITY: 0.6,
-
-  /**
-   * The scroll/drag amount (pixels) required on the draggable axis before
-   * stopping further page scrolling/movement.
-   * @const {number}
-   */
-  LOCK_THRESHOLD: 6,
-
-  /**
-   * The scroll/drag amount (pixels) required on the opposite draggable axis
-   * before dragging is deactivated for the rest of the interaction.
-   * @const {number}
-   */
-  DRAG_THRESHOLD: 5
+/** @enum {string} */
+var Axis = {
+  X: 'x',
+  Y: 'y',
+  BOTH: 'xy'
 };
@@ -153,15 +93,15 @@
 function isXAxis(axis) {
-  return axis === settings.Axis.X;
+  return axis === Axis.X;
 }
 
 function isYAxis(axis) {
-  return axis === settings.Axis.Y;
+  return axis === Axis.Y;
 }
 
 function isBothAxis(axis) {
-  return axis === settings.Axis.BOTH;
+  return axis === Axis.BOTH;
 }
 
 function hasDirection(direction) {
-  return direction !== settings.Direction.NONE;
+  return direction !== Direction.NONE;
 }
@@ -204,12 +144,12 @@
   if (Math.abs(coord1.x - coord2.x) >= Math.abs(coord1.y - coord2.y)) {
-    return getTheDirection(coord1.x, coord2.x, settings.Direction.LEFT, settings.Direction.RIGHT, settings.Direction.NONE);
+    return getTheDirection(coord1.x, coord2.x, Direction.LEFT, Direction.RIGHT, Direction.NONE);
   }
 
-  return getTheDirection(coord1.y, coord2.y, settings.Direction.UP, settings.Direction.DOWN, settings.Direction.NONE);
+  return getTheDirection(coord1.y, coord2.y, Direction.UP, Direction.DOWN, Direction.NONE);
 }
 
 function isOnAxis(axis, direction) {
-  var isXAndLeftOrRight = isXAxis(axis) && (direction === settings.Direction.LEFT || direction === settings.Direction.RIGHT);
+  var isXAndLeftOrRight = isXAxis(axis) && (direction === Direction.LEFT || direction === Direction.RIGHT);
 
-  var isYAndUpOrDown = isYAxis(axis) && (direction === settings.Direction.UP || direction === settings.Direction.DOWN);
+  var isYAndUpOrDown = isYAxis(axis) && (direction === Direction.UP || direction === Direction.DOWN);
 
@@ -317,3 +257,3 @@ var isBothAndNotNone = isBothAxis(axis) && hasDirection(direction);
      * Direction of drag.
-     * @type {settings.Direction}
+     * @type {Direction}
      */
@@ -336,3 +276,3 @@ this.direction = getDirection(options.start, options.end);
      * Direction of drag which excludes directions not on its axis.
-     * @type {settings.Direction}
+     * @type {Direction}
      */
@@ -358,3 +298,3 @@ this.axisDirection = getAxisDirection(options.axis, options.start, options.end);
  *
- * @author Glen Cheney
+ * @author Glen Cheney <[e-mail]>
  */
@@ -367,4 +307,5 @@
    * An abstraction layer for adding pointer events and calculating drag values.
-   * @param {Element} element Element to watch.
-   * @param {Object} options Options object.
+   * @param {HTMLElement} element Element to watch.
+   * @param {PointerOptions} options Options object.
+   * @throws {TypeError} Throws when the element parameter isn't an element.
    */
@@ -381,17 +322,13 @@ function Pointer(element) {
 
-    var opts = Object.assign({}, Pointer.Defaults, options);
-
     /**
-     * Whether to prevent the default event action on move.
-     * @type {boolean}
-     * @private
+     * @type {PointerOptions}
      */
-    _this._shouldPreventDefault = opts.preventEventDefault;
+    _this.options = Object.assign({}, Pointer.Defaults, options);
 
     /**
      * The draggable element.
-     * @type {Element}
+     * @type {HTMLElement}
      * @private
      */
-    _this._el = element;
+    _this.element = element;
 
@@ -432,9 +369,2 @@ /**
     /**
-     * Draggable axis.
-     * @type {string}
-     * @private
-     */
-    _this.axis = opts.axis;
-
-    /**
      * Flag indicating dragging has happened. It is set on dragmove and reset
@@ -517,3 +447,3 @@ * after the draggableend event has been dispatched.
 
-    var touchAction = Pointer.TouchActionSupport[_this.axis];
+    var touchAction = Pointer.TouchActionSupport[_this.options.axis];
 
@@ -528,5 +458,5 @@ /**
     // If the browser supports the touch action property, add it.
-    if (_this._shouldPreventDefault && _this._isTouchActionSupported) {
-      _this.element.style[touchAction] = Pointer.TouchAction[_this.axis];
-    } else if (_this._shouldPreventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
+    if (_this.options.preventEventDefault && _this._isTouchActionSupported) {
+      _this.element.style[touchAction] = Pointer.TouchAction[_this.options.axis];
+    } else if (_this.options.preventEventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
       window.addEventListener(odoHelpers.events.TOUCHMOVE, odoHelpers.noop);
@@ -543,8 +473,8 @@ }
     if (OdoDevice.HAS_POINTER_EVENTS) {
-      this._el.addEventListener(odoHelpers.events.POINTERDOWN, this._onStart);
+      this.element.addEventListener(odoHelpers.events.POINTERDOWN, this._onStart);
     } else {
-      this._el.addEventListener(odoHelpers.events.MOUSEDOWN, this._onStart);
+      this.element.addEventListener(odoHelpers.events.MOUSEDOWN, this._onStart);
 
       if (OdoDevice.HAS_TOUCH_EVENTS) {
-        this._el.addEventListener(odoHelpers.events.TOUCHSTART, this._onStart);
+        this.element.addEventListener(odoHelpers.events.TOUCHSTART, this._onStart);
       }
@@ -555,8 +485,8 @@ }
     // http://www.html5rocks.com/en/tutorials/dnd/basics/
-    this._el.addEventListener(odoHelpers.events.DRAGSTART, Pointer._preventDefault);
+    this.element.addEventListener(odoHelpers.events.DRAGSTART, Pointer._preventDefault);
   };
 
   /**
-   * Returns the draggable element.
-   * @return {Element}
+   * Get whether dragger is enabled.
+   * @return {boolean} Whether dragger is enabled.
    */
@@ -569,3 +499,3 @@
   Pointer.prototype.isXAxis = function isXAxis() {
-    return this.axis === Pointer.Axis.X;
+    return this.options.axis === Pointer.Axis.X;
   };
@@ -579,3 +509,3 @@
   Pointer.prototype.isYAxis = function isYAxis() {
-    return this.axis === Pointer.Axis.Y;
+    return this.options.axis === Pointer.Axis.Y;
   };
@@ -589,3 +519,3 @@
   Pointer.prototype.isBothAxis = function isBothAxis() {
-    return this.axis === Pointer.Axis.BOTH;
+    return this.options.axis === Pointer.Axis.BOTH;
   };
@@ -612,3 +542,3 @@
    * dragging can start.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {boolean}
@@ -636,3 +566,3 @@ * @private
    * Drag start handler.
-   * @param  {Event} evt The drag event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt The drag event object.
    * @private
@@ -666,3 +596,3 @@ */
    * Drag move, after applyDraggableElementPosition has happened
-   * @param {Event} evt The dragger event.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt The dragger event.
    * @private
@@ -683,3 +613,3 @@ */
     // browser supports touch-action (which will do the "locking" for us).
-    if (!isPrevented && this._shouldPreventDefault && !this._isTouchActionSupported) {
+    if (!isPrevented && this.options.preventEventDefault && !this._isTouchActionSupported) {
       this._finishDragMove(evt);
@@ -691,3 +621,3 @@ }
    * Finish the drag move function.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @private
@@ -849,3 +779,3 @@ */
    * @param {Event} evt Native event object.
-   * @return {!PointerEvent}
+   * @return {!Pointer.Event}
    * @private
@@ -861,3 +791,3 @@ */
       target: evt.target,
-      axis: this.axis,
+      axis: this.options.axis,
       deltaTime: this.deltaTime,
@@ -995,13 +925,13 @@ delta: this.delta,
     // Remove pointer/mouse/touch events.
-    this._el.removeEventListener(odoHelpers.events.POINTERDOWN, this._onStart);
-    this._el.removeEventListener(odoHelpers.events.MOUSEDOWN, this._onStart);
-    this._el.removeEventListener(odoHelpers.events.TOUCHSTART, this._onStart);
+    this.element.removeEventListener(odoHelpers.events.POINTERDOWN, this._onStart);
+    this.element.removeEventListener(odoHelpers.events.MOUSEDOWN, this._onStart);
+    this.element.removeEventListener(odoHelpers.events.TOUCHSTART, this._onStart);
 
     if (this._isTouchActionSupported) {
-      this._el.style[Pointer.TouchActionSupport[this.axis]] = '';
-    } else if (this._shouldPreventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
+      this.element.style[Pointer.TouchActionSupport[this.options.axis]] = '';
+    } else if (this.options.preventEventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
       window.removeEventListener(odoHelpers.events.TOUCHMOVE, odoHelpers.noop);
     }
 
-    this._el = null;
+    this.element = null;
     this.dragEventTarget = null;
@@ -1012,3 +942,3 @@ };
    * Whether the event is from a touch.
-   * @param {Event} evt Event object.
+   * @param {object} evt Event object.
    * @return {boolean}
@@ -1024,3 +954,3 @@ */
    * Whether the event is from a pointer cancel or touch cancel.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {boolean}
@@ -1038,3 +968,3 @@ * @private
    * touch events, mouse events, and pointer events.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {!Coordinate} The pageX and pageY of the press.
@@ -1063,13 +993,2 @@ * @private
   createClass(Pointer, [{
-    key: 'element',
-    get: function get$$1() {
-      return this._el;
-    }
-
-    /**
-     * Get whether dragger is enabled.
-     * @return {boolean} Whether dragger is enabled.
-     */
-
-  }, {
     key: 'isEnabled',
@@ -1106,5 +1025,73 @@ get: function get$$1() {
 
-Object.assign(Pointer, settings);
+/** @enum {string} */
 
-/** @type {PointerEvent} */
+
+Pointer.Direction = Direction;
+
+/** @enum {string} */
+Pointer.Axis = Axis;
+
+/** @enum {string} */
+Pointer.EventType = {
+  START: 'odopointer:start',
+  MOVE: 'odopointer:move',
+  END: 'odopointer:end'
+};
+
+/** @enum {string|boolean} */
+Pointer.TouchActionSupport = {
+  x: OdoDevice.prefixed('touchAction', 'pan-y'),
+  y: OdoDevice.prefixed('touchAction', 'pan-x'),
+  xy: OdoDevice.prefixed('touchAction', 'none')
+};
+
+/** @enum {string} */
+Pointer.TouchAction = {
+  x: 'pan-y',
+  y: 'pan-x',
+  xy: 'none'
+};
+
+/**
+ * @typedef {{axis: Axis, preventEventDefault: boolean}} PointerOptions
+ */
+
+/** @type {PointerOptions} */
+Pointer.Defaults = {
+  axis: 'xy',
+  preventEventDefault: true
+};
+
+/**
+ * The current velocity property will be clamped to this value (pixels/millisecond).
+ * @const {number}
+ */
+Pointer.MAX_VELOCITY = 12;
+
+/**
+ * When the pointer is down, an interval starts to track the current velocity.
+ * @const {number}
+ */
+Pointer.VELOCITY_INTERVAL = 100;
+
+/**
+ * Velocity required for a movement to be considered a swipe.
+ * @const {number}
+ */
+Pointer.SWIPE_VELOCITY = 0.6;
+
+/**
+ * The scroll/drag amount (pixels) required on the draggable axis before
+ * stopping further page scrolling/movement.
+ * @const {number}
+ */
+Pointer.LOCK_THRESHOLD = 6;
+
+/**
+ * The scroll/drag amount (pixels) required on the opposite draggable axis
+ * before dragging is deactivated for the rest of the interaction.
+ * @const {number}
+ */
+Pointer.DRAG_THRESHOLD = 5;
+
 Pointer.Event = PointerEvent;
@@ -1111,0 +1098,0 @@

dist/odo-pointer.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@odopod/odo-device"),require("@odopod/odo-helpers"),require("tiny-emitter")):"function"==typeof define&&define.amd?define(["@odopod/odo-device","@odopod/odo-helpers","tiny-emitter"],e):t.OdoPointer=e(t.OdoDevice,t.OdoHelpers,t.TinyEmitter)}(this,function(t,e,i){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,i=i&&i.hasOwnProperty("default")?i.default:i;var n={EventType:{START:"odopointer:start",MOVE:"odopointer:move",END:"odopointer:end"},Direction:{RIGHT:"right",LEFT:"left",UP:"up",DOWN:"down",NONE:"no_movement"},TouchActionSupport:{x:t.prefixed("touchAction","pan-y"),y:t.prefixed("touchAction","pan-x"),xy:t.prefixed("touchAction","none")},TouchAction:{x:"pan-y",y:"pan-x",xy:"none"},Axis:{X:"x",Y:"y",BOTH:"xy"},Defaults:{axis:"xy",preventEventDefault:!0},MAX_VELOCITY:12,VELOCITY_INTERVAL:100,SWIPE_VELOCITY:.6,LOCK_THRESHOLD:6,DRAG_THRESHOLD:5},s=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),r=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 a(t){return t===n.Axis.X}function h(t){return t===n.Axis.Y}function c(t){return t===n.Axis.BOTH}function d(t){return t!==n.Direction.NONE}function u(t){return Number.isFinite(t)?t:0}function v(t,e,i,n,s){return t-e>0?i:t-e<0?n:s}function l(t,e){return Math.abs(t.x-e.x)>=Math.abs(t.y-e.y)?v(t.x,e.x,n.Direction.LEFT,n.Direction.RIGHT,n.Direction.NONE):v(t.y,e.y,n.Direction.UP,n.Direction.DOWN,n.Direction.NONE)}var p=function(){function t(i){var o,r,v,p,_,E,T,f;s(this,t),this.type=i.type,this.target=i.target,this.currentTarget=i.currentTarget,this.start=i.start,this.end=i.end,this.delta=i.delta,this.deltaTime=i.deltaTime,this.velocity=(o=this.deltaTime,r=this.delta.x,v=this.delta.y,new e.Coordinate(u(r/o),u(v/o))),this.currentVelocity=i.currentVelocity,this.distance=e.Coordinate.distance(i.start,i.end),this.direction=l(i.start,i.end),this.isDirectionOnAxis=(p=i.axis,_=this.direction,E=a(p)&&(_===n.Direction.LEFT||_===n.Direction.RIGHT),T=h(p)&&(_===n.Direction.UP||_===n.Direction.DOWN),f=c(p)&&d(_),E||T||f),this.didMoveOnAxis=function(t,e,i,n){return a(t)&&Math.abs(i)>0||h(t)&&Math.abs(n)>0||c(t)&&d(e)}(i.axis,this.direction,this.delta.x,this.delta.y),this.axisDirection=function(t,e,i){var n=Object.assign({},e),s=Object.assign({},i);return a(t)?(n.y=0,s.y=0):h(t)&&(n.x=0,s.x=0),l(n,s)}(i.axis,i.start,i.end),this.position=i.position,this.defaultPrevented=!1}return t.prototype.preventDefault=function(){this.defaultPrevented=!0},t}(),_=function(i){function n(o){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};s(this,n);var h=r(this,i.call(this));if(!o||1!==o.nodeType)throw new TypeError("OdoPointer requires an element.");var c=Object.assign({},n.Defaults,a);h._shouldPreventDefault=c.preventEventDefault,h._el=o,h.pageStart=new e.Coordinate,h.page=new e.Coordinate,h.delta=new e.Coordinate,h._lastPosition=new e.Coordinate,h._friction=1,h.axis=c.axis,h.hasDragged=!1,h._isLocked=!1,h._isDeactivated=!1,h._enabled=!0,h._velocityTrackerId=null,h.startTime=0,h.deltaTime=0,h._lastTime=0,h.velocity=new e.Coordinate,h._hasTrackedVelocity=!1,h.dragEventTarget=document;var d=n.TouchActionSupport[h.axis];return h._isTouchActionSupported=!!d,h._shouldPreventDefault&&h._isTouchActionSupported?h.element.style[d]=n.TouchAction[h.axis]:h._shouldPreventDefault&&t.HAS_TOUCH_EVENTS&&window.addEventListener(e.events.TOUCHMOVE,e.noop),h.listen(),h}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)}(n,i),n.prototype.listen=function(){this._onStart=this._handleDragStart.bind(this),t.HAS_POINTER_EVENTS?this._el.addEventListener(e.events.POINTERDOWN,this._onStart):(this._el.addEventListener(e.events.MOUSEDOWN,this._onStart),t.HAS_TOUCH_EVENTS&&this._el.addEventListener(e.events.TOUCHSTART,this._onStart)),this._el.addEventListener(e.events.DRAGSTART,n._preventDefault)},n.prototype.isXAxis=function(){return this.axis===n.Axis.X},n.prototype.isYAxis=function(){return this.axis===n.Axis.Y},n.prototype.isBothAxis=function(){return this.axis===n.Axis.BOTH},n.prototype.applyFriction=function(t){return t.scale(this.friction)},n.prototype._canStartDrag=function(t){return this.isEnabled&&(n.isTouchEvent(t)||0===t.button)},n.prototype._canContinueDrag=function(){return this.isEnabled&&!this._isDeactivated},n.prototype._handleDragStart=function(t){(clearInterval(this._velocityTrackerId),this._canStartDrag(t))&&(this._setDragStartValues(n._getPageCoordinate(t)),this._emitEvent(this._createEvent(n.EventType.START,t))||(this._addDragHandlers(t.type),this._velocityTrackerId=setInterval(this._trackVelocity.bind(this),n.VELOCITY_INTERVAL)))},n.prototype._handleDragMove=function(t){this._canContinueDrag()&&(this._setDragMoveValues(n._getPageCoordinate(t)),this._emitEvent(this._createEvent(n.EventType.MOVE,t))||!this._shouldPreventDefault||this._isTouchActionSupported||this._finishDragMove(t))},n.prototype._finishDragMove=function(t){this._maybeLock(),this._maybeDeactivate(),this._isLocked&&t.preventDefault(),this._isDeactivated&&(clearInterval(this._velocityTrackerId),this.velocity.x=0,this.velocity.y=0)},n.prototype._handleDragEnd=function(t){clearInterval(this._velocityTrackerId),this.deltaTime=Date.now()-this.startTime,this._hasTrackedVelocity||this._trackVelocity(),this._removeDragHandlers();var e=this._createEvent(n.EventType.END,t);e.isCancelEvent=n._isCancelEvent(t),this._emitEvent(e)&&t.preventDefault(),this.hasDragged=!1,this._isDeactivated=!1,this._isLocked=!1},n.prototype._setDragStartValues=function(t){this.pageStart=t,this.page=t,this._lastPosition=t,this.delta=new e.Coordinate,this.velocity=new e.Coordinate,this._hasTrackedVelocity=!1,this.startTime=Date.now(),this._lastTime=Date.now(),this.deltaTime=0},n.prototype._setDragMoveValues=function(t){var i=e.Coordinate.difference(t,this.page);this.applyFriction(i),this.delta.translate(i),this.page=t,this.deltaTime=Date.now()-this.startTime,this.hasDragged=!0},n.prototype._maybeLock=function(){this._isLocked||(this._isLocked=this._shouldLock(this.delta))},n.prototype._maybeDeactivate=function(){this._isDeactivated||(this._isDeactivated=this._shouldDeactivate(this.delta))},n.prototype._shouldLock=function(t){var e=this.isXAxis()&&Math.abs(t.x)>n.LOCK_THRESHOLD,i=this.isYAxis()&&Math.abs(t.y)>n.LOCK_THRESHOLD;return this.isBothAxis()||e||i},n.prototype._shouldDeactivate=function(t){var e=this.isXAxis()&&Math.abs(t.y)>n.DRAG_THRESHOLD,i=this.isYAxis()&&Math.abs(t.x)>n.DRAG_THRESHOLD;return!this._isLocked&&(this.isBothAxis()||e||i)},n.prototype._createEvent=function(t,e){return new n.Event({type:t,pointerId:this.id,currentTarget:this.element,target:e.target,axis:this.axis,deltaTime:this.deltaTime,delta:this.delta,start:this.pageStart,end:this.page,currentVelocity:this.velocity})},n.prototype._addDragHandlers=function(t){var i=this.dragEventTarget;switch(this._onMove=this._handleDragMove.bind(this),this._onEnd=this._handleDragEnd.bind(this),t){case e.events.POINTERDOWN:i.addEventListener(e.events.POINTERMOVE,this._onMove),i.addEventListener(e.events.POINTERUP,this._onEnd),i.addEventListener(e.events.POINTERCANCEL,this._onEnd);break;case e.events.MOUSEDOWN:i.addEventListener(e.events.MOUSEMOVE,this._onMove),i.addEventListener(e.events.MOUSEUP,this._onEnd);break;case e.events.TOUCHSTART:i.addEventListener(e.events.TOUCHMOVE,this._onMove),i.addEventListener(e.events.TOUCHEND,this._onEnd),i.addEventListener(e.events.TOUCHCANCEL,this._onEnd)}},n.prototype._removeDragHandlers=function(){var t=this.dragEventTarget;t.removeEventListener(e.events.POINTERMOVE,this._onMove),t.removeEventListener(e.events.POINTERUP,this._onEnd),t.removeEventListener(e.events.POINTERCANCEL,this._onEnd),t.removeEventListener(e.events.MOUSEMOVE,this._onMove),t.removeEventListener(e.events.MOUSEUP,this._onEnd),t.removeEventListener(e.events.TOUCHMOVE,this._onMove),t.removeEventListener(e.events.TOUCHEND,this._onEnd),t.removeEventListener(e.events.TOUCHCANCEL,this._onEnd)},n.prototype._trackVelocity=function(){var t=Date.now(),i=t-this._lastTime,s=e.Coordinate.difference(this.page,this._lastPosition);this.applyFriction(s),this._lastTime=t,this._lastPosition=this.page;var o=n.MAX_VELOCITY;this.velocity.x=e.clamp(s.x/i,-o,o),this.velocity.y=e.clamp(s.y/i,-o,o),this._hasTrackedVelocity=!0},n.prototype.hasVelocity=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.SWIPE_VELOCITY;return this.isYAxis()?Math.abs(t.y)>e:this.isXAxis()?Math.abs(t.x)>e:Math.abs(t.x)>e||Math.abs(t.y)>e},n.prototype._emitEvent=function(t){return this.emit(t.type,t),t.defaultPrevented},n.prototype.dispose=function(){clearInterval(this._velocityTrackerId),this._removeDragHandlers(),this._el.removeEventListener(e.events.POINTERDOWN,this._onStart),this._el.removeEventListener(e.events.MOUSEDOWN,this._onStart),this._el.removeEventListener(e.events.TOUCHSTART,this._onStart),this._isTouchActionSupported?this._el.style[n.TouchActionSupport[this.axis]]="":this._shouldPreventDefault&&t.HAS_TOUCH_EVENTS&&window.removeEventListener(e.events.TOUCHMOVE,e.noop),this._el=null,this.dragEventTarget=null},n.isTouchEvent=function(t){return!!t.changedTouches},n._isCancelEvent=function(t){return t.type===e.events.POINTERCANCEL||t.type===e.events.TOUCHCANCEL},n._getPageCoordinate=function(t){var i=void 0;return i=n.isTouchEvent(t)?t.changedTouches[0]:t,new e.Coordinate(i.pageX,i.pageY)},n._preventDefault=function(t){t.preventDefault()},o(n,[{key:"element",get:function(){return this._el}},{key:"isEnabled",get:function(){return this._enabled},set:function(t){this._enabled=t}},{key:"friction",get:function(){return this._friction},set:function(t){this._friction=t}}]),n}(i);return Object.assign(_,n),_.Event=p,_});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@odopod/odo-helpers"),require("tiny-emitter"),require("@odopod/odo-device")):"function"==typeof define&&define.amd?define(["@odopod/odo-helpers","tiny-emitter","@odopod/odo-device"],e):t.OdoPointer=e(t.OdoHelpers,t.TinyEmitter,t.OdoDevice)}(this,function(t,e,i){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,i=i&&i.hasOwnProperty("default")?i.default:i;var n={RIGHT:"right",LEFT:"left",UP:"up",DOWN:"down",NONE:"no_movement"},o={X:"x",Y:"y",BOTH:"xy"},s=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),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){return t===o.X}function c(t){return t===o.Y}function d(t){return t===o.BOTH}function v(t){return t!==n.NONE}function u(t){return Number.isFinite(t)?t:0}function l(t,e,i,n,o){return t-e>0?i:t-e<0?n:o}function p(t,e){return Math.abs(t.x-e.x)>=Math.abs(t.y-e.y)?l(t.x,e.x,n.LEFT,n.RIGHT,n.NONE):l(t.y,e.y,n.UP,n.DOWN,n.NONE)}var E=function(){function e(i){var o,r,a,l,E,_,T,y;s(this,e),this.type=i.type,this.target=i.target,this.currentTarget=i.currentTarget,this.start=i.start,this.end=i.end,this.delta=i.delta,this.deltaTime=i.deltaTime,this.velocity=(o=this.deltaTime,r=this.delta.x,a=this.delta.y,new t.Coordinate(u(r/o),u(a/o))),this.currentVelocity=i.currentVelocity,this.distance=t.Coordinate.distance(i.start,i.end),this.direction=p(i.start,i.end),this.isDirectionOnAxis=(l=i.axis,E=this.direction,_=h(l)&&(E===n.LEFT||E===n.RIGHT),T=c(l)&&(E===n.UP||E===n.DOWN),y=d(l)&&v(E),_||T||y),this.didMoveOnAxis=function(t,e,i,n){return h(t)&&Math.abs(i)>0||c(t)&&Math.abs(n)>0||d(t)&&v(e)}(i.axis,this.direction,this.delta.x,this.delta.y),this.axisDirection=function(t,e,i){var n=Object.assign({},e),o=Object.assign({},i);return h(t)?(n.y=0,o.y=0):c(t)&&(n.x=0,o.x=0),p(n,o)}(i.axis,i.start,i.end),this.position=i.position,this.defaultPrevented=!1}return e.prototype.preventDefault=function(){this.defaultPrevented=!0},e}(),_=function(e){function n(o){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};s(this,n);var h=a(this,e.call(this));if(!o||1!==o.nodeType)throw new TypeError("OdoPointer requires an element.");h.options=Object.assign({},n.Defaults,r),h.element=o,h.pageStart=new t.Coordinate,h.page=new t.Coordinate,h.delta=new t.Coordinate,h._lastPosition=new t.Coordinate,h._friction=1,h.hasDragged=!1,h._isLocked=!1,h._isDeactivated=!1,h._enabled=!0,h._velocityTrackerId=null,h.startTime=0,h.deltaTime=0,h._lastTime=0,h.velocity=new t.Coordinate,h._hasTrackedVelocity=!1,h.dragEventTarget=document;var c=n.TouchActionSupport[h.options.axis];return h._isTouchActionSupported=!!c,h.options.preventEventDefault&&h._isTouchActionSupported?h.element.style[c]=n.TouchAction[h.options.axis]:h.options.preventEventDefault&&i.HAS_TOUCH_EVENTS&&window.addEventListener(t.events.TOUCHMOVE,t.noop),h.listen(),h}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)}(n,e),n.prototype.listen=function(){this._onStart=this._handleDragStart.bind(this),i.HAS_POINTER_EVENTS?this.element.addEventListener(t.events.POINTERDOWN,this._onStart):(this.element.addEventListener(t.events.MOUSEDOWN,this._onStart),i.HAS_TOUCH_EVENTS&&this.element.addEventListener(t.events.TOUCHSTART,this._onStart)),this.element.addEventListener(t.events.DRAGSTART,n._preventDefault)},n.prototype.isXAxis=function(){return this.options.axis===n.Axis.X},n.prototype.isYAxis=function(){return this.options.axis===n.Axis.Y},n.prototype.isBothAxis=function(){return this.options.axis===n.Axis.BOTH},n.prototype.applyFriction=function(t){return t.scale(this.friction)},n.prototype._canStartDrag=function(t){return this.isEnabled&&(n.isTouchEvent(t)||0===t.button)},n.prototype._canContinueDrag=function(){return this.isEnabled&&!this._isDeactivated},n.prototype._handleDragStart=function(t){(clearInterval(this._velocityTrackerId),this._canStartDrag(t))&&(this._setDragStartValues(n._getPageCoordinate(t)),this._emitEvent(this._createEvent(n.EventType.START,t))||(this._addDragHandlers(t.type),this._velocityTrackerId=setInterval(this._trackVelocity.bind(this),n.VELOCITY_INTERVAL)))},n.prototype._handleDragMove=function(t){this._canContinueDrag()&&(this._setDragMoveValues(n._getPageCoordinate(t)),this._emitEvent(this._createEvent(n.EventType.MOVE,t))||!this.options.preventEventDefault||this._isTouchActionSupported||this._finishDragMove(t))},n.prototype._finishDragMove=function(t){this._maybeLock(),this._maybeDeactivate(),this._isLocked&&t.preventDefault(),this._isDeactivated&&(clearInterval(this._velocityTrackerId),this.velocity.x=0,this.velocity.y=0)},n.prototype._handleDragEnd=function(t){clearInterval(this._velocityTrackerId),this.deltaTime=Date.now()-this.startTime,this._hasTrackedVelocity||this._trackVelocity(),this._removeDragHandlers();var e=this._createEvent(n.EventType.END,t);e.isCancelEvent=n._isCancelEvent(t),this._emitEvent(e)&&t.preventDefault(),this.hasDragged=!1,this._isDeactivated=!1,this._isLocked=!1},n.prototype._setDragStartValues=function(e){this.pageStart=e,this.page=e,this._lastPosition=e,this.delta=new t.Coordinate,this.velocity=new t.Coordinate,this._hasTrackedVelocity=!1,this.startTime=Date.now(),this._lastTime=Date.now(),this.deltaTime=0},n.prototype._setDragMoveValues=function(e){var i=t.Coordinate.difference(e,this.page);this.applyFriction(i),this.delta.translate(i),this.page=e,this.deltaTime=Date.now()-this.startTime,this.hasDragged=!0},n.prototype._maybeLock=function(){this._isLocked||(this._isLocked=this._shouldLock(this.delta))},n.prototype._maybeDeactivate=function(){this._isDeactivated||(this._isDeactivated=this._shouldDeactivate(this.delta))},n.prototype._shouldLock=function(t){var e=this.isXAxis()&&Math.abs(t.x)>n.LOCK_THRESHOLD,i=this.isYAxis()&&Math.abs(t.y)>n.LOCK_THRESHOLD;return this.isBothAxis()||e||i},n.prototype._shouldDeactivate=function(t){var e=this.isXAxis()&&Math.abs(t.y)>n.DRAG_THRESHOLD,i=this.isYAxis()&&Math.abs(t.x)>n.DRAG_THRESHOLD;return!this._isLocked&&(this.isBothAxis()||e||i)},n.prototype._createEvent=function(t,e){return new n.Event({type:t,pointerId:this.id,currentTarget:this.element,target:e.target,axis:this.options.axis,deltaTime:this.deltaTime,delta:this.delta,start:this.pageStart,end:this.page,currentVelocity:this.velocity})},n.prototype._addDragHandlers=function(e){var i=this.dragEventTarget;switch(this._onMove=this._handleDragMove.bind(this),this._onEnd=this._handleDragEnd.bind(this),e){case t.events.POINTERDOWN:i.addEventListener(t.events.POINTERMOVE,this._onMove),i.addEventListener(t.events.POINTERUP,this._onEnd),i.addEventListener(t.events.POINTERCANCEL,this._onEnd);break;case t.events.MOUSEDOWN:i.addEventListener(t.events.MOUSEMOVE,this._onMove),i.addEventListener(t.events.MOUSEUP,this._onEnd);break;case t.events.TOUCHSTART:i.addEventListener(t.events.TOUCHMOVE,this._onMove),i.addEventListener(t.events.TOUCHEND,this._onEnd),i.addEventListener(t.events.TOUCHCANCEL,this._onEnd)}},n.prototype._removeDragHandlers=function(){var e=this.dragEventTarget;e.removeEventListener(t.events.POINTERMOVE,this._onMove),e.removeEventListener(t.events.POINTERUP,this._onEnd),e.removeEventListener(t.events.POINTERCANCEL,this._onEnd),e.removeEventListener(t.events.MOUSEMOVE,this._onMove),e.removeEventListener(t.events.MOUSEUP,this._onEnd),e.removeEventListener(t.events.TOUCHMOVE,this._onMove),e.removeEventListener(t.events.TOUCHEND,this._onEnd),e.removeEventListener(t.events.TOUCHCANCEL,this._onEnd)},n.prototype._trackVelocity=function(){var e=Date.now(),i=e-this._lastTime,o=t.Coordinate.difference(this.page,this._lastPosition);this.applyFriction(o),this._lastTime=e,this._lastPosition=this.page;var s=n.MAX_VELOCITY;this.velocity.x=t.clamp(o.x/i,-s,s),this.velocity.y=t.clamp(o.y/i,-s,s),this._hasTrackedVelocity=!0},n.prototype.hasVelocity=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.SWIPE_VELOCITY;return this.isYAxis()?Math.abs(t.y)>e:this.isXAxis()?Math.abs(t.x)>e:Math.abs(t.x)>e||Math.abs(t.y)>e},n.prototype._emitEvent=function(t){return this.emit(t.type,t),t.defaultPrevented},n.prototype.dispose=function(){clearInterval(this._velocityTrackerId),this._removeDragHandlers(),this.element.removeEventListener(t.events.POINTERDOWN,this._onStart),this.element.removeEventListener(t.events.MOUSEDOWN,this._onStart),this.element.removeEventListener(t.events.TOUCHSTART,this._onStart),this._isTouchActionSupported?this.element.style[n.TouchActionSupport[this.options.axis]]="":this.options.preventEventDefault&&i.HAS_TOUCH_EVENTS&&window.removeEventListener(t.events.TOUCHMOVE,t.noop),this.element=null,this.dragEventTarget=null},n.isTouchEvent=function(t){return!!t.changedTouches},n._isCancelEvent=function(e){return e.type===t.events.POINTERCANCEL||e.type===t.events.TOUCHCANCEL},n._getPageCoordinate=function(e){var i=void 0;return i=n.isTouchEvent(e)?e.changedTouches[0]:e,new t.Coordinate(i.pageX,i.pageY)},n._preventDefault=function(t){t.preventDefault()},r(n,[{key:"isEnabled",get:function(){return this._enabled},set:function(t){this._enabled=t}},{key:"friction",get:function(){return this._friction},set:function(t){this._friction=t}}]),n}(e);return _.Direction=n,_.Axis=o,_.EventType={START:"odopointer:start",MOVE:"odopointer:move",END:"odopointer:end"},_.TouchActionSupport={x:i.prefixed("touchAction","pan-y"),y:i.prefixed("touchAction","pan-x"),xy:i.prefixed("touchAction","none")},_.TouchAction={x:"pan-y",y:"pan-x",xy:"none"},_.Defaults={axis:"xy",preventEventDefault:!0},_.MAX_VELOCITY=12,_.VELOCITY_INTERVAL=100,_.SWIPE_VELOCITY=.6,_.LOCK_THRESHOLD=6,_.DRAG_THRESHOLD=5,_.Event=E,_});
 //# sourceMappingURL=odo-pointer.min.js.map

package.json

 {
   "name": "@odopod/odo-pointer",
   "description": "An abstraction for pointer, mouse, and touch events.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/odo-pointer.js",
   "module": "dist/odo-pointer.esm.js",
   "odoModule": "src/pointer.js",
+  "types": "index.d.ts",
   "sideEffects": false,
@@ -17,4 +18,4 @@ "author": "Odopod",
   "dependencies": {
-    "@odopod/odo-device": "^1.1.0",
-    "@odopod/odo-helpers": "^2.0.0",
+    "@odopod/odo-device": "^1.2.0",
+    "@odopod/odo-helpers": "^2.0.1",
     "tiny-emitter": "^2.0.1"
@@ -26,3 +27,4 @@ },
     "dist",
-    "src"
+    "src",
+    "index.d.ts"
   ],
@@ -29,0 +31,0 @@ "odoKeywords": [

src/pointer-event.js

 import { Coordinate } from '@odopod/odo-helpers';
-import settings from './settings';
+import { Direction, Axis } from './settings';
 
 function isXAxis(axis) {
-  return axis === settings.Axis.X;
+  return axis === Axis.X;
 }
 
 function isYAxis(axis) {
-  return axis === settings.Axis.Y;
+  return axis === Axis.Y;
 }
 
 function isBothAxis(axis) {
-  return axis === settings.Axis.BOTH;
+  return axis === Axis.BOTH;
 }
 
 function hasDirection(direction) {
-  return direction !== settings.Direction.NONE;
+  return direction !== Direction.NONE;
 }
@@ -59,4 +59,4 @@
     return getTheDirection(
-      coord1.x, coord2.x, settings.Direction.LEFT,
-      settings.Direction.RIGHT, settings.Direction.NONE,
+      coord1.x, coord2.x, Direction.LEFT,
+      Direction.RIGHT, Direction.NONE,
     );
@@ -66,4 +66,4 @@ }
   return getTheDirection(
-    coord1.y, coord2.y, settings.Direction.UP,
-    settings.Direction.DOWN, settings.Direction.NONE,
+    coord1.y, coord2.y, Direction.UP,
+    Direction.DOWN, Direction.NONE,
   );
@@ -74,8 +74,8 @@ }
   const isXAndLeftOrRight = isXAxis(axis) && (
-    direction === settings.Direction.LEFT ||
-    direction === settings.Direction.RIGHT);
+    direction === Direction.LEFT ||
+    direction === Direction.RIGHT);
 
   const isYAndUpOrDown = isYAxis(axis) && (
-    direction === settings.Direction.UP ||
-    direction === settings.Direction.DOWN);
+    direction === Direction.UP ||
+    direction === Direction.DOWN);
 
@@ -181,3 +181,3 @@ const isBothAndNotNone = isBothAxis(axis) && hasDirection(direction);
      * Direction of drag.
-     * @type {settings.Direction}
+     * @type {Direction}
      */
@@ -203,3 +203,3 @@ this.direction = getDirection(options.start, options.end);
      * Direction of drag which excludes directions not on its axis.
-     * @type {settings.Direction}
+     * @type {Direction}
      */
@@ -206,0 +206,0 @@ this.axisDirection = getAxisDirection(options.axis, options.start, options.end);

src/pointer.js

 /**
  * @fileoverview An abstraction for pointer, mouse, and touch events.
  *
- * @author Glen Cheney
+ * @author Glen Cheney <[e-mail]>
  */
@@ -15,4 +15,4 @@
 } from '@odopod/odo-helpers';
-import settings from './settings';
-import PointerEvent from './pointer-event';
+import { Direction, Axis } from './settings';
+import _PointerEvent from './pointer-event';
 
@@ -22,4 +22,5 @@ class Pointer extends TinyEmitter {
    * An abstraction layer for adding pointer events and calculating drag values.
-   * @param {Element} element Element to watch.
-   * @param {Object} options Options object.
+   * @param {HTMLElement} element Element to watch.
+   * @param {PointerOptions} options Options object.
+   * @throws {TypeError} Throws when the element parameter isn't an element.
    */
@@ -33,17 +34,13 @@ constructor(element, options = {}) {
 
-    const opts = Object.assign({}, Pointer.Defaults, options);
-
     /**
-     * Whether to prevent the default event action on move.
-     * @type {boolean}
-     * @private
+     * @type {PointerOptions}
      */
-    this._shouldPreventDefault = opts.preventEventDefault;
+    this.options = Object.assign({}, Pointer.Defaults, options);
 
     /**
      * The draggable element.
-     * @type {Element}
+     * @type {HTMLElement}
      * @private
      */
-    this._el = element;
+    this.element = element;
 
@@ -84,9 +81,2 @@ /**
     /**
-     * Draggable axis.
-     * @type {string}
-     * @private
-     */
-    this.axis = opts.axis;
-
-    /**
      * Flag indicating dragging has happened. It is set on dragmove and reset
@@ -169,3 +159,3 @@ * after the draggableend event has been dispatched.
 
-    const touchAction = Pointer.TouchActionSupport[this.axis];
+    const touchAction = Pointer.TouchActionSupport[this.options.axis];
 
@@ -180,5 +170,5 @@ /**
     // If the browser supports the touch action property, add it.
-    if (this._shouldPreventDefault && this._isTouchActionSupported) {
-      this.element.style[touchAction] = Pointer.TouchAction[this.axis];
-    } else if (this._shouldPreventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
+    if (this.options.preventEventDefault && this._isTouchActionSupported) {
+      this.element.style[touchAction] = Pointer.TouchAction[this.options.axis];
+    } else if (this.options.preventEventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
       window.addEventListener(events.TOUCHMOVE, noop);
@@ -194,8 +184,8 @@ }
     if (OdoDevice.HAS_POINTER_EVENTS) {
-      this._el.addEventListener(events.POINTERDOWN, this._onStart);
+      this.element.addEventListener(events.POINTERDOWN, this._onStart);
     } else {
-      this._el.addEventListener(events.MOUSEDOWN, this._onStart);
+      this.element.addEventListener(events.MOUSEDOWN, this._onStart);
 
       if (OdoDevice.HAS_TOUCH_EVENTS) {
-        this._el.addEventListener(events.TOUCHSTART, this._onStart);
+        this.element.addEventListener(events.TOUCHSTART, this._onStart);
       }
@@ -206,14 +196,6 @@ }
     // http://www.html5rocks.com/en/tutorials/dnd/basics/
-    this._el.addEventListener(events.DRAGSTART, Pointer._preventDefault);
+    this.element.addEventListener(events.DRAGSTART, Pointer._preventDefault);
   }
 
   /**
-   * Returns the draggable element.
-   * @return {Element}
-   */
-  get element() {
-    return this._el;
-  }
-
-  /**
    * Get whether dragger is enabled.
@@ -238,3 +220,3 @@ * @return {boolean} Whether dragger is enabled.
   isXAxis() {
-    return this.axis === Pointer.Axis.X;
+    return this.options.axis === Pointer.Axis.X;
   }
@@ -246,3 +228,3 @@
   isYAxis() {
-    return this.axis === Pointer.Axis.Y;
+    return this.options.axis === Pointer.Axis.Y;
   }
@@ -254,3 +236,3 @@
   isBothAxis() {
-    return this.axis === Pointer.Axis.BOTH;
+    return this.options.axis === Pointer.Axis.BOTH;
   }
@@ -287,3 +269,3 @@
    * dragging can start.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {boolean}
@@ -307,3 +289,3 @@ * @private
    * Drag start handler.
-   * @param  {Event} evt The drag event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt The drag event object.
    * @private
@@ -338,3 +320,3 @@ */
    * Drag move, after applyDraggableElementPosition has happened
-   * @param {Event} evt The dragger event.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt The dragger event.
    * @private
@@ -353,3 +335,3 @@ */
     // browser supports touch-action (which will do the "locking" for us).
-    if (!isPrevented && this._shouldPreventDefault && !this._isTouchActionSupported) {
+    if (!isPrevented && this.options.preventEventDefault && !this._isTouchActionSupported) {
       this._finishDragMove(evt);
@@ -361,3 +343,3 @@ }
    * Finish the drag move function.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @private
@@ -503,3 +485,3 @@ */
    * @param {Event} evt Native event object.
-   * @return {!PointerEvent}
+   * @return {!Pointer.Event}
    * @private
@@ -513,3 +495,3 @@ */
       target: evt.target,
-      axis: this.axis,
+      axis: this.options.axis,
       deltaTime: this.deltaTime,
@@ -633,13 +615,13 @@ delta: this.delta,
     // Remove pointer/mouse/touch events.
-    this._el.removeEventListener(events.POINTERDOWN, this._onStart);
-    this._el.removeEventListener(events.MOUSEDOWN, this._onStart);
-    this._el.removeEventListener(events.TOUCHSTART, this._onStart);
+    this.element.removeEventListener(events.POINTERDOWN, this._onStart);
+    this.element.removeEventListener(events.MOUSEDOWN, this._onStart);
+    this.element.removeEventListener(events.TOUCHSTART, this._onStart);
 
     if (this._isTouchActionSupported) {
-      this._el.style[Pointer.TouchActionSupport[this.axis]] = '';
-    } else if (this._shouldPreventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
+      this.element.style[Pointer.TouchActionSupport[this.options.axis]] = '';
+    } else if (this.options.preventEventDefault && OdoDevice.HAS_TOUCH_EVENTS) {
       window.removeEventListener(events.TOUCHMOVE, noop);
     }
 
-    this._el = null;
+    this.element = null;
     this.dragEventTarget = null;
@@ -650,3 +632,3 @@ }
    * Whether the event is from a touch.
-   * @param {Event} evt Event object.
+   * @param {object} evt Event object.
    * @return {boolean}
@@ -660,3 +642,3 @@ */
    * Whether the event is from a pointer cancel or touch cancel.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {boolean}
@@ -672,3 +654,3 @@ * @private
    * touch events, mouse events, and pointer events.
-   * @param {Event} evt Event object.
+   * @param {TouchEvent|MouseEvent|PointerEvent} evt Event object.
    * @return {!Coordinate} The pageX and pageY of the press.
@@ -695,7 +677,73 @@ * @private
 
-Object.assign(Pointer, settings);
+/** @enum {string} */
+Pointer.Direction = Direction;
 
-/** @type {PointerEvent} */
-Pointer.Event = PointerEvent;
+/** @enum {string} */
+Pointer.Axis = Axis;
 
+/** @enum {string} */
+Pointer.EventType = {
+  START: 'odopointer:start',
+  MOVE: 'odopointer:move',
+  END: 'odopointer:end',
+};
+
+/** @enum {string|boolean} */
+Pointer.TouchActionSupport = {
+  x: OdoDevice.prefixed('touchAction', 'pan-y'),
+  y: OdoDevice.prefixed('touchAction', 'pan-x'),
+  xy: OdoDevice.prefixed('touchAction', 'none'),
+};
+
+/** @enum {string} */
+Pointer.TouchAction = {
+  x: 'pan-y',
+  y: 'pan-x',
+  xy: 'none',
+};
+
+/**
+ * @typedef {{axis: Axis, preventEventDefault: boolean}} PointerOptions
+ */
+
+/** @type {PointerOptions} */
+Pointer.Defaults = {
+  axis: 'xy',
+  preventEventDefault: true,
+};
+
+/**
+ * The current velocity property will be clamped to this value (pixels/millisecond).
+ * @const {number}
+ */
+Pointer.MAX_VELOCITY = 12;
+
+/**
+ * When the pointer is down, an interval starts to track the current velocity.
+ * @const {number}
+ */
+Pointer.VELOCITY_INTERVAL = 100;
+
+/**
+ * Velocity required for a movement to be considered a swipe.
+ * @const {number}
+ */
+Pointer.SWIPE_VELOCITY = 0.6;
+
+/**
+ * The scroll/drag amount (pixels) required on the draggable axis before
+ * stopping further page scrolling/movement.
+ * @const {number}
+ */
+Pointer.LOCK_THRESHOLD = 6;
+
+/**
+ * The scroll/drag amount (pixels) required on the opposite draggable axis
+ * before dragging is deactivated for the rest of the interaction.
+ * @const {number}
+ */
+Pointer.DRAG_THRESHOLD = 5;
+
+Pointer.Event = _PointerEvent;
+
 export default Pointer;

src/settings.js

@@ -1,77 +0,15 @@
-import OdoDevice from '@odopod/odo-device';
+/** @enum {string} */
+export const Direction = {
+  RIGHT: 'right',
+  LEFT: 'left',
+  UP: 'up',
+  DOWN: 'down',
+  NONE: 'no_movement',
+};
 
-export default {
-  /** @enum {string} */
-  EventType: {
-    START: 'odopointer:start',
-    MOVE: 'odopointer:move',
-    END: 'odopointer:end',
-  },
-
-  /** @enum {string} */
-  Direction: {
-    RIGHT: 'right',
-    LEFT: 'left',
-    UP: 'up',
-    DOWN: 'down',
-    NONE: 'no_movement',
-  },
-
-  /** @enum {string|boolean} */
-  TouchActionSupport: {
-    x: OdoDevice.prefixed('touchAction', 'pan-y'),
-    y: OdoDevice.prefixed('touchAction', 'pan-x'),
-    xy: OdoDevice.prefixed('touchAction', 'none'),
-  },
-
-  /** @enum {string} */
-  TouchAction: {
-    x: 'pan-y',
-    y: 'pan-x',
-    xy: 'none',
-  },
-
-  /** @enum {string} */
-  Axis: {
-    X: 'x',
-    Y: 'y',
-    BOTH: 'xy',
-  },
-
-  Defaults: {
-    axis: 'xy',
-    preventEventDefault: true,
-  },
-
-  /**
-   * The current velocity property will be clamped to this value (pixels/millisecond).
-   * @const {number}
-   */
-  MAX_VELOCITY: 12,
-
-  /**
-   * When the pointer is down, an interval starts to track the current velocity.
-   * @const {number}
-   */
-  VELOCITY_INTERVAL: 100,
-
-  /**
-   * Velocity required for a movement to be considered a swipe.
-   * @const {number}
-   */
-  SWIPE_VELOCITY: 0.6,
-
-  /**
-   * The scroll/drag amount (pixels) required on the draggable axis before
-   * stopping further page scrolling/movement.
-   * @const {number}
-   */
-  LOCK_THRESHOLD: 6,
-
-  /**
-   * The scroll/drag amount (pixels) required on the opposite draggable axis
-   * before dragging is deactivated for the rest of the interaction.
-   * @const {number}
-   */
-  DRAG_THRESHOLD: 5,
+/** @enum {string} */
+export const Axis = {
+  X: 'x',
+  Y: 'y',
+  BOTH: 'xy',
 };

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

220066

increased by2.72%

Number of package files

12

increased by9.09%

Lines of code

2738

increased by6.37%

Dependency changes

• Updated@odopod/odo-device@^1.2.0

• Updated@odopod/odo-helpers@^2.0.1