westures-core 1.0.0-alpha.5 → 1.2.0

package/src/Region.js

@@ -1,7 +1,3 @@
-/*
- * Contains the Region class
- */
-
 'use strict';
 
 const State = require('./State.js');
@@ -31,17 +27,22 @@ const {
  *
  * @memberof westures-core
  *
- * @param {Element} element - The element which should listen to input events.
+ * @param {Element} element=window - The element which should listen to input
+ * events.
  * @param {object} [options]
  * @param {boolean} [options.capture=false] - Whether the region uses the
  * capture phase of input events. If false, uses the bubbling phase.
+ * @param {boolean} [options.preferPointer=true] - If false, the region listens
+ * to mouse/touch events instead of pointer events.
  * @param {boolean} [options.preventDefault=true] - Whether the default
  * browser functionality should be disabled. This option should most likely be
  * ignored. Here there by dragons if set to false.
+ * @param {string} [options.touchAction='none'] - Value to set the CSS
+ * 'touch-action' property to on elements added to the region.
  */
 class Region {
-  constructor(element, options = {}) {
-    const settings = { ...Region.DEFAULTS, ...options };
+  constructor(element = window, options = {}) {
+    options = { ...Region.DEFAULTS, ...options };
 
     /**
      * The list of relations between elements, their gestures, and the handlers.
@@ -73,19 +74,11 @@ class Region {
     this.element = element;
 
     /**
-     * Whether the region listens for captures or bubbles.
-     *
-     * @type {boolean}
-     */
-    this.capture = settings.capture;
-
-    /**
-     * Whether the default browser functionality should be disabled. This option
-     * should most likely be ignored. Here there by dragons if set to false.
+     * The user-supplied options for the Region.
      *
-     * @type {boolean}
+     * @type {object}
      */
-    this.preventDefault = settings.preventDefault;
+    this.options = options;
 
     /**
      * The internal state object for a Region.  Keeps track of inputs.
@@ -106,19 +99,13 @@ class Region {
    */
   activate() {
     /*
-     * Having to listen to both mouse and touch events is annoying, but
-     * necessary due to conflicting standards and browser implementations.
-     * Pointer is a fallback for now instead of the primary, until I figure out
-     * all the details to do with pointer-events and touch-action and their
-     * cross browser compatibility.
-     *
      * Listening to both mouse and touch comes with the difficulty that
      * preventDefault() must be called to prevent both events from iterating
      * through the system. However I have left it as an option to the end user,
      * which defaults to calling preventDefault(), in case there's a use-case I
      * haven't considered or am not aware of.
      *
-     * It is also a good idea to keep regions small in large pages.
+     * It also may be a good idea to keep regions small in large pages.
      *
      * See:
      *  https://www.html5rocks.com/en/mobile/touchandmouse/
@@ -126,17 +113,17 @@ class Region {
      *  https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
      */
     let eventNames = [];
-    if (window.TouchEvent || window.MouseEvent) {
-      eventNames = MOUSE_EVENTS.concat(TOUCH_EVENTS);
-    } else {
+    if (this.options.preferPointer && window.PointerEvent) {
       eventNames = POINTER_EVENTS;
+    } else {
+      eventNames = MOUSE_EVENTS.concat(TOUCH_EVENTS);
     }
 
     // Bind detected browser events to the region element.
     const arbitrate = this.arbitrate.bind(this);
     eventNames.forEach(eventName => {
       this.element.addEventListener(eventName, arbitrate, {
-        capture: this.capture,
+        capture: this.options.capture,
         once:    false,
         passive: false,
       });
@@ -161,7 +148,7 @@ class Region {
    * @param {Event} event - The event emitted from the window object.
    */
   cancel(event) {
-    event.preventDefault();
+    if (this.options.preventDefault) event.preventDefault();
     this.state.inputs.forEach(input => {
       input.update(event);
     });
@@ -274,7 +261,7 @@ class Region {
     this.updateActiveGestures(event, isInitial);
 
     if (this.activeGestures.size > 0) {
-      if (this.preventDefault) event.preventDefault();
+      if (this.options.preventDefault) event.preventDefault();
 
       this.activeGestures.forEach(gesture => {
         gesture.evaluateHook(PHASE[event.type], this.state);
@@ -291,6 +278,7 @@ class Region {
    * @param {westures-core.Gesture} gesture - Instantiated gesture to add.
    */
   addGesture(gesture) {
+    gesture.element.style.touchAction = this.options.touchAction;
     this.gestures.add(gesture);
   }
 
@@ -326,10 +314,11 @@ class Region {
   }
 }
 
-Region.DEFAULTS = Object.freeze({
+Region.DEFAULTS = {
   capture:        false,
+  preferPointer:  true,
   preventDefault: true,
-});
+  touchAction:    'none',
+};
 
 module.exports = Region;
-

package/src/Smoothable.js

@@ -1,7 +1,3 @@
-/*
- * Contains the abstract Pinch class.
- */
-
 'use strict';
 
 const cascade = Symbol('cascade');
@@ -132,10 +128,10 @@ class Smoothable {
   }
 }
 
-Smoothable.DEFAULTS = Object.freeze({
+Smoothable.DEFAULTS = {
   applySmoothing: true,
   identity:       0,
-});
+};
 
 module.exports = Smoothable;
 

package/src/State.js

@@ -1,7 +1,3 @@
-/*
- * Contains the {@link State} class
- */
-
 'use strict';
 
 const {
@@ -14,9 +10,9 @@ const {
 const Input     = require('./Input.js');
 const Point2D   = require('./Point2D.js');
 
-const symbols = Object.freeze({
+const symbols = {
   inputs: Symbol.for('inputs'),
-});
+};
 
 /**
  * Set of helper functions for updating inputs based on type of input.

package/src/constants.js

@@ -1,7 +1,3 @@
-/*
- * Contains event list definitions, PHASE mapping, and other constants.
- */
-
 'use strict';
 
 /**
@@ -10,11 +6,12 @@
  * @memberof westures-core
  * @type {string[]}
  */
-const CANCEL_EVENTS = Object.freeze([
+const CANCEL_EVENTS = [
   'blur',
   'pointercancel',
   'touchcancel',
-]);
+  'mouseleave',
+];
 
 /**
  * List of keyboard events that trigger a restart.
@@ -22,10 +19,10 @@ const CANCEL_EVENTS = Object.freeze([
  * @memberof westures-core
  * @type {string[]}
  */
-const KEYBOARD_EVENTS = Object.freeze([
+const KEYBOARD_EVENTS = [
   'keydown',
   'keyup',
-]);
+];
 
 /**
  * List of mouse events to listen to.
@@ -33,11 +30,11 @@ const KEYBOARD_EVENTS = Object.freeze([
  * @memberof westures-core
  * @type {string[]}
  */
-const MOUSE_EVENTS = Object.freeze([
+const MOUSE_EVENTS = [
   'mousedown',
   'mousemove',
   'mouseup',
-]);
+];
 
 /**
  * List of pointer events to listen to.
@@ -45,11 +42,11 @@ const MOUSE_EVENTS = Object.freeze([
  * @memberof westures-core
  * @type {string[]}
  */
-const POINTER_EVENTS = Object.freeze([
+const POINTER_EVENTS = [
   'pointerdown',
   'pointermove',
   'pointerup',
-]);
+];
 
 /**
  * List of touch events to listen to.
@@ -57,24 +54,25 @@ const POINTER_EVENTS = Object.freeze([
  * @memberof westures-core
  * @type {string[]}
  */
-const TOUCH_EVENTS = Object.freeze([
+const TOUCH_EVENTS = [
   'touchend',
   'touchmove',
   'touchstart',
-]);
+];
 
 /**
  * List of potentially state-modifying keys.
+ * Entries are: ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'].
  *
  * @memberof westures-core
  * @type {string[]}
  */
-const STATE_KEYS = Object.freeze([
+const STATE_KEYS = [
   'altKey',
   'ctrlKey',
   'metaKey',
   'shiftKey',
-]);
+];
 
 /**
  * List of the 'key' values on KeyboardEvent objects of the potentially
@@ -83,12 +81,12 @@ const STATE_KEYS = Object.freeze([
  * @memberof westures-core
  * @type {string[]}
  */
-const STATE_KEY_STRINGS = Object.freeze([
+const STATE_KEY_STRINGS = [
   'Alt',
   'Control',
   'Meta',
   'Shift',
-]);
+];
 
 /**
  * The cancel phase.
@@ -122,6 +120,14 @@ const MOVE = 'move';
  */
 const START = 'start';
 
+/**
+ * The recognized phases.
+ *
+ * @memberof westures-core
+ * @type {list.<string>}
+ */
+const PHASES = [START, MOVE, END, CANCEL];
+
 /**
  * Object that normalizes the names of window events to be either of type start,
  * move, end, or cancel.
@@ -129,7 +135,7 @@ const START = 'start';
  * @memberof westures-core
  * @type {object}
  */
-const PHASE = Object.freeze({
+const PHASE = {
   blur:           CANCEL,
   pointercancel:  CANCEL,
   touchcancel:    CANCEL,
@@ -145,7 +151,7 @@ const PHASE = Object.freeze({
   mousedown:   START,
   pointerdown: START,
   touchstart:  START,
-});
+};
 
 module.exports = {
   CANCEL_EVENTS,
@@ -163,5 +169,6 @@ module.exports = {
   START,
 
   PHASE,
+  PHASES,
 };
 

package/src/utils.js

@@ -1,7 +1,3 @@
-/*
- * Contains various helpful utilities.
- */
-
 'use strict';
 
 const PI_2   = 2 * Math.PI;
@@ -89,10 +85,10 @@ function setDifference(left, right) {
   return setFilter(left, element => !right.has(element));
 }
 
-module.exports = Object.freeze({
+module.exports = {
   angularDifference,
   getPropagationPath,
   setDifference,
   setFilter,
-});
+};
 

package/.travis.yml

@@ -1,6 +0,0 @@
-language: node_js
-node_js:
-  - '10'
-script:
-  - npm run coveralls
-