Merge pull request #61 from stuyam/v2.1.0-dev

V2.1.0 dev

License

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2015 - 2016 Stuart Yamartino.
+Copyright (c) 2015 - 2017 Stuart Yamartino.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -7,7 +7,7 @@
 
 Pressure is a JavaScript library for handling both Force Touch and 3D Touch on the web, bundled under one library with a simple API that makes working with them painless.
 
-Head over to the [documentation](http://pressurejs.com/documentation.html) for installation instructions and more details on pressure.js.
+Head over to the [documentation](http://pressurejs.com/documentation.html) for installation instructions, supported devices, and more details on pressure.js.
 
 ## Install
 Download pressure.min.js or pressure.js files from GitHub or install with npm or bower
@@ -101,7 +101,7 @@ $('#element').pressure({
 With Pressure, the third paramater is an optional object of options that can be passed in.
 
 ###Polyfill Support
-Using the "polyfill" keyword, you can disable polyfill support for the element. The polyfill is enabled by defauly and is useful if the device or browser does not support force or 3D touch, it will fall back to using time. For example instead of force from  0 to 1, it counts up from 0 to 1 over the course of one second, as long as you are holding the element. Try some of the examples on the main page on a devices that does not support force or 3D touch and see for yourself how it works.
+Using the "polyfill" keyword, you can disable polyfill support for the element. The polyfill is enabled by default and is useful if the device or browser does not support pressure, it will fall back to using time. For example instead of force from 0 to 1, it counts up from 0 to 1 over the course of one second, as long as you are holding the element. Try some of the examples on the main page on a devices that does not support pressure and see for yourself how it works.
 ```javascript
 Pressure.set('#example', {
   change: function(force, event){
@@ -113,34 +113,54 @@ Pressure.set('#example', {
 }, {polyfill: false});
 ```
 
-###Polyfill Speed
-If you are using the polyfill (on by default), you can see the "polyfillSpeed" speed to determine how fast the polyfill takes to go from 0 to 1. The value is an integer in milliseconds and the default is 1000 (1 second).
+###Polyfill Speed Up
+If you are using the polyfill (on by default), you can see the "polyfillSpeedUp" speed to determine how fast the polyfill takes to go from 0 to 1. The value is an integer in milliseconds and the default is 1000 (1 second).
 ```javascript
 Pressure.set('#example', {
   change: function(force, event){
     this.innerHTML = force;
   }
-}, {polyfillSpeed: 5000});
+}, {polyfillSpeedUp: 5000});
 // takes 5 seconds to go from a force value of 0 to 1
-// only on devices that do not support force touch or 3d touch
+// only on devices that do not support pressure
 ```
 
-### Only run on Force Touch trackpads (Desktop)
-Set the option only to the type you want it to run on 'desktop' or 'mobile'
+###Polyfill Speed Down
+If you are using the polyfill (on by default), you can see the "polyfillSpeedDown" speed to determine how fast the polyfill takes to go from 1 to 0 when you let go. The value is an integer in milliseconds and the default is 0 (aka off).
+```javascript
+Pressure.set('#example', {
+  change: function(force, event){
+    this.innerHTML = force;
+  }
+}, {polyfillSpeedDown: 2000});
+// takes 2 seconds to go from a force value of 1 to 0
+// only on devices that do not support pressure
+```
+
+### Only run on Force Touch trackpads (mouse)
+Set the option only to the type you want it to run on 'mouse', 'touch', or 'pointer'. The names are the types of events that pressure will respond to.
+```javascript
+Pressure.set('#example',{
+  change: function(force, event){
+    console.log(force);
+  },
+}, {only: 'mouse'});
+```
+### Only run on 3D Touch (touch)
 ```javascript
 Pressure.set('#example',{
   change: function(force, event){
     console.log(force);
   },
-}, {only: 'desktop'});
+}, {only: 'touch'});
 ```
-### Only run on 3D Touch (Mobile)
+### Only run on Pointer Supported Devices (pointer)
 ```javascript
 Pressure.set('#example',{
   change: function(force, event){
     console.log(force);
   },
-}, {only: 'mobile'});
+}, {only: 'pointer'});
 ```
 
 ### Change the preventSelect option
@@ -165,7 +185,8 @@ You can use ```Pressure.config()``` to set default configurations for site wide
 // These are the default configs set by Pressure
 Pressure.config({
   polyfill: true,
-  polyfillSpeed: 1000,
+  polyfillSpeedUp: 1000,
+  polyfillSpeedDown: 0,
   preventDefault: true,
   only: null
 });

bower.json

@@ -33,5 +33,5 @@
     "test",
     "tests"
   ],
-  "version": "2.0.3"
+  "version": "2.1.0"
 }

dist/jquery.pressure.js

@@ -1,4 +1,4 @@
-// Pressure v2.0.3 | Created By Stuart Yamartino | MIT License | 2015 - 2016
+// Pressure v2.1.0 | Created By Stuart Yamartino | MIT License | 2015 - 2017
 ;(function(root, factory) {
   if (typeof define === 'function' && define.amd) {
     define(['jquery'], factory);
@@ -52,18 +52,22 @@ var Element = function () {
     key: 'routeEvents',
     value: function routeEvents(el, block, options) {
       var type = Config.get('only', options);
-      // if on desktop and requesting Force Touch or not requesting 3D Touch
-      if (isDesktop && (type === 'desktop' || type !== 'mobile')) {
-        this.adapter = new AdapterForceTouch(el, block, options).bindEvents();
+      // for devices that support pointer events
+      if (supportsPointer && (type === 'pointer' || type === null)) {
+        this.adapter = new AdapterPointer(el, block, options).bindEvents();
       }
-      // if on mobile and requesting 3D Touch or not requestion Force Touch
-      else if (isMobile && (type === 'mobile' || type !== 'desktop')) {
-          this.adapter = new Adapter3DTouch(el, block, options).bindEvents();
+      // for devices that support Force Touch
+      else if (supportsMouse && (type === 'mouse' || type === null)) {
+          this.adapter = new AdapterForceTouch(el, block, options).bindEvents();
         }
-        // unsupported if it is requesting a type and your browser is of other type
-        else {
-            this.adapter = new Adapter(el, block).bindUnsupportedEvent();
+        // for devices that support 3D Touch
+        else if (supportsTouch && (type === 'touch' || type === null)) {
+            this.adapter = new Adapter3DTouch(el, block, options).bindEvents();
           }
+          // unsupported if it is requesting a type and your browser is of other type
+          else {
+              this.adapter = new Adapter(el, block).bindUnsupportedEvent();
+            }
     }
 
     // prevent the default action of text selection, "peak & pop", and force touch special feature
@@ -99,6 +103,7 @@ var Adapter = function () {
     this.pressed = false;
     this.deepPressed = false;
     this.nativeSupport = false;
+    this.runningPolyfill = false;
     this.runKey = Math.random();
   }
 
@@ -151,14 +156,15 @@ var Adapter = function () {
     value: function bindUnsupportedEvent() {
       var _this = this;
 
-      this.add(isMobile ? 'touchstart' : 'mousedown', function (event) {
+      this.add(supportsTouch ? 'touchstart' : 'mousedown', function (event) {
         return _this.runClosure('unsupported', event);
       });
     }
   }, {
     key: '_startPress',
     value: function _startPress(event) {
       if (this.isPressed() === false) {
+        this.runningPolyfill = false;
         this.setPressed(true);
         this.runClosure('start', event);
       }
@@ -188,30 +194,60 @@ var Adapter = function () {
   }, {
     key: '_endPress',
     value: function _endPress() {
-      if (this.isPressed()) {
-        this._endDeepPress();
+      if (this.runningPolyfill === false) {
+        if (this.isPressed()) {
+          this._endDeepPress();
+          this.setPressed(false);
+          this.runClosure('end');
+        }
+        this.runKey = Math.random();
+        this.nativeSupport = false;
+      } else {
         this.setPressed(false);
-        this.runClosure('end');
       }
-      this.runKey = Math.random();
-      this.nativeSupport = false;
+    }
+  }, {
+    key: 'deepPress',
+    value: function deepPress(force, event) {
+      force >= 0.5 ? this._startDeepPress(event) : this._endDeepPress();
     }
   }, {
     key: 'runPolyfill',
     value: function runPolyfill(event) {
-      this.increment = 10 / Config.get('polyfillSpeed', this.options);
+      this.increment = Config.get('polyfillSpeedUp', this.options) === 0 ? 1 : 10 / Config.get('polyfillSpeedUp', this.options);
+      this.decrement = Config.get('polyfillSpeedDown', this.options) === 0 ? 1 : 10 / Config.get('polyfillSpeedDown', this.options);
       this.setPressed(true);
       this.runClosure('start', event);
-      this.loopPolyfillForce(0, event);
+      if (this.runningPolyfill === false) {
+        this.loopPolyfillForce(0, event);
+      }
     }
   }, {
     key: 'loopPolyfillForce',
     value: function loopPolyfillForce(force, event) {
-      if (this.isPressed() && this.nativeSupport === false) {
-        this.runClosure('change', force, event);
-        force >= 0.5 ? this._startDeepPress(event) : this._endDeepPress();
-        force = force + this.increment > 1 ? 1 : force + this.increment;
-        setTimeout(this.loopPolyfillForce.bind(this, force, event), 10);
+      if (this.nativeSupport === false) {
+        if (this.isPressed()) {
+          this.runningPolyfill = true;
+          force = force + this.increment > 1 ? 1 : force + this.increment;
+          this.runClosure('change', force, event);
+          this.deepPress(force, event);
+          setTimeout(this.loopPolyfillForce.bind(this, force, event), 10);
+        } else {
+          force = force - this.decrement < 0 ? 0 : force - this.decrement;
+          if (force < 0.5 && this.isDeepPressed()) {
+            this.setDeepPressed(false);
+            this.runClosure('endDeepPress');
+          }
+          if (force === 0) {
+            this.runningPolyfill = false;
+            this.setPressed(true);
+            this._endPress();
+          } else {
+            this.runClosure('change', force, event);
+            this.deepPress(force, event);
+            setTimeout(this.loopPolyfillForce.bind(this, force, event), 10);
+          }
+        }
       }
     }
   }]);
@@ -296,10 +332,10 @@ var Adapter3DTouch = function (_Adapter2) {
     value: function bindEvents() {
       if (supportsTouchForceChange) {
         this.add('touchforcechange', this.start.bind(this));
-        this.add('touchstart', this.supportTest.bind(this, 0));
+        this.add('touchstart', this.support.bind(this, 0));
         this.add('touchend', this._endPress.bind(this));
       } else {
-        this.add('touchstart', this.startLegacyTest.bind(this));
+        this.add('touchstart', this.startLegacy.bind(this));
         this.add('touchend', this._endPress.bind(this));
       }
     }
@@ -315,22 +351,22 @@ var Adapter3DTouch = function (_Adapter2) {
       }
     }
   }, {
-    key: 'supportTest',
-    value: function supportTest(iter, event) {
+    key: 'support',
+    value: function support(iter, event) {
       var runKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.runKey;
 
       if (this.isPressed() === false) {
         if (iter <= 6) {
           iter++;
-          setTimeout(this.supportTest.bind(this, iter, event, runKey), 10);
+          setTimeout(this.support.bind(this, iter, event, runKey), 10);
         } else {
           this.fail(event, runKey);
         }
       }
     }
   }, {
-    key: 'startLegacyTest',
-    value: function startLegacyTest(event) {
+    key: 'startLegacy',
+    value: function startLegacy(event) {
       this.initialForce = event.touches[0].force;
       this.supportLegacyTest(0, event, this.runKey, this.initialForce);
     }
@@ -340,8 +376,8 @@ var Adapter3DTouch = function (_Adapter2) {
     // more info from this issue https://github.com/yamartino/pressure/issues/15
 
   }, {
-    key: 'supportLegacyTest',
-    value: function supportLegacyTest(iter, event, runKey, force) {
+    key: 'supportLegacy',
+    value: function supportLegacy(iter, event, runKey, force) {
       if (force !== this.initialForce) {
         this._startPress(event);
         this.loopForce(event);
@@ -384,14 +420,60 @@ var Adapter3DTouch = function (_Adapter2) {
   }, {
     key: 'returnTouch',
     value: function returnTouch(touch, event) {
-      touch.force >= 0.5 ? this._startDeepPress(event) : this._endDeepPress();
+      this.deepPress(touch.force, event);
       return touch;
     }
   }]);
 
   return Adapter3DTouch;
 }(Adapter);
 
+/*
+This adapter is for devices that support pointer events.
+*/
+
+var AdapterPointer = function (_Adapter3) {
+  _inherits(AdapterPointer, _Adapter3);
+
+  function AdapterPointer(el, block, options) {
+    _classCallCheck(this, AdapterPointer);
+
+    return _possibleConstructorReturn(this, (AdapterPointer.__proto__ || Object.getPrototypeOf(AdapterPointer)).call(this, el, block, options));
+  }
+
+  _createClass(AdapterPointer, [{
+    key: 'bindEvents',
+    value: function bindEvents() {
+      this.add('pointerdown', this.support.bind(this));
+      this.add('pointermove', this.change.bind(this));
+      this.add('pointerup', this._endPress.bind(this));
+      this.add('pointerleave', this._endPress.bind(this));
+    }
+  }, {
+    key: 'support',
+    value: function support(event) {
+      if (this.isPressed() === false) {
+        if (event.pressure === 0 || event.pressure === 0.5) {
+          this.fail(event, this.runKey);
+        } else {
+          this._startPress(event);
+          this._changePress(event.pressure, event);
+        }
+      }
+    }
+  }, {
+    key: 'change',
+    value: function change(event) {
+      if (this.isPressed() && event.pressure > 0 && event.pressure !== 0.5) {
+        this._changePress(event.pressure, event);
+        this.deepPress(event.pressure, event);
+      }
+    }
+  }]);
+
+  return AdapterPointer;
+}(Adapter);
+
 // This class holds the states of the the Pressure config
 
 
@@ -401,12 +483,15 @@ var Config = {
   polyfill: true,
 
   // milliseconds it takes to go from 0 to 1 for the polyfill
-  polyfillSpeed: 1000,
+  polyfillSpeedUp: 1000,
+
+  // milliseconds it takes to go from 1 to 0 for the polyfill
+  polyfillSpeedDown: 0,
 
   // 'true' prevents the selecting of text and images via css properties
   preventSelect: true,
 
-  // 'mobile' or 'desktop' will make it run only on that type of device
+  // 'touch', 'mouse', or 'pointer' will make it run only on that type of device
   only: null,
 
   // this will get the correct config / option settings for the current pressure check
@@ -460,14 +545,16 @@ var map = function map(x, in_min, in_max, out_min, out_max) {
   return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
 };
 
-var isDesktop = false;
-var isMobile = false;
+var supportsMouse = false;
+var supportsTouch = false;
+var supportsPointer = false;
 var supportsTouchForceChange = false;
 if (typeof window !== 'undefined') {
   // only attempt to assign these in a browser environment.
   // on the server, this is a no-op, like the rest of the library
-  isMobile = 'ontouchstart' in window.document;
-  isDesktop = !isMobile;
+  supportsTouch = 'ontouchstart' in window.document;
+  supportsMouse = 'onmousemove' in window.document && !supportsTouch;
+  supportsPointer = 'onpointermove' in window.document;
   supportsTouchForceChange = 'ontouchforcechange' in window.document;
 }
 return void 0;