Merge pull request #1611 from Azmoria/Fix---allows-more-touch-devices…

…-to-work-for-dragging-tokens-

Fix - allows more touch devices to work for dragging tokens.

jquery.ui.touch-punch.js

@@ -1,28 +1,63 @@
 /*!
- * jQuery UI Touch Punch 0.2.3
+ * jQuery UI Touch Punch 1.0.9 as modified by RWAP Software
+ * based on original touchpunch v0.2.3 which has not been updated since 2014
  *
+ * Updates by RWAP Software to take account of various suggested changes on the original code issues
+ *
+ * Original: https://github.com/furf/jquery-ui-touch-punch
  * Copyright 2011–2014, Dave Furfero
  * Dual licensed under the MIT or GPL Version 2 licenses.
  *
+ * Fork: https://github.com/RWAP/jquery-ui-touch-punch
+ *
  * Depends:
- *  jquery.ui.widget.js
- *  jquery.ui.mouse.js
+ * jquery.ui.widget.js
+ * jquery.ui.mouse.js
  */
-(function ($) {
 
-  // Detect touch support
-  $.support.touch = 'ontouchend' in document;
+(function( factory ) {
+    if ( typeof define === "function" && define.amd ) {
+
+        // AMD. Register as an anonymous module.
+        define([ "jquery", "jquery-ui" ], factory );
+    } else {
 
-  // Ignore browsers without touch support
-  if (!$.support.touch) {
-    return;
+        // Browser globals
+        factory( jQuery );
+    }
+}(function ($) {
+
+  // Detect touch support - Windows Surface devices and other touch devices
+  $.mspointer = window.navigator.msPointerEnabled;    
+  $.touch = ( 'ontouchstart' in document
+    || 'ontouchstart' in window
+    || window.TouchEvent
+    || (window.DocumentTouch && document instanceof DocumentTouch)
+    || navigator.maxTouchPoints > 0
+    || navigator.msMaxTouchPoints > 0
+  );
+
+  // Ignore browsers without touch or mouse support
+  if ((!$.touch && !$.mspointer) || !$.ui.mouse) {
+  return;
   }
 
-  var mouseProto = $.ui.mouse.prototype,
+  let mouseProto = $.ui.mouse.prototype,
       _mouseInit = mouseProto._mouseInit,
       _mouseDestroy = mouseProto._mouseDestroy,
       touchHandled;
 
+    /**
+    * Get the x,y position of a touch event
+    * @param {Object} event A touch event
+    */
+    function getTouchCoords (event) {
+        return {
+            x: event.originalEvent.changedTouches[0].pageX,
+            y: event.originalEvent.changedTouches[0].pageY
+        };
+    }
+
   /**
    * Simulate a mouse event based on a corresponding touch event
    * @param {Object} event A touch event
@@ -35,28 +70,36 @@
       return;
     }
 
-    event.preventDefault();
+    //Ignore input or textarea elements so user can still enter text
+    if ($(event.target).is("input") || $(event.target).is("textarea")) {
+      return;
+    }
+
+    // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors
+    if (event.cancelable) {
+      event.preventDefault();
+    }
 
-    var touch = event.originalEvent.changedTouches[0],
+    let touch = event.originalEvent.changedTouches[0],
         simulatedEvent = document.createEvent('MouseEvents');
-    
+
     // Initialize the simulated mouse event using the touch event's coordinates
     simulatedEvent.initMouseEvent(
       simulatedType,    // type
-      true,             // bubbles                    
-      true,             // cancelable                 
-      window,           // view                       
-      1,                // detail                     
-      touch.screenX,    // screenX                    
-      touch.screenY,    // screenY                    
-      touch.clientX,    // clientX                    
-      touch.clientY,    // clientY                    
-      false,            // ctrlKey                    
-      false,            // altKey                     
-      false,            // shiftKey                   
-      false,            // metaKey                    
-      0,                // button                     
-      null              // relatedTarget              
+      true,             // bubbles
+      true,             // cancelable
+      window,           // view
+      1,                // detail
+      touch.screenX,    // screenX
+      touch.screenY,    // screenY
+      touch.clientX,    // clientX
+      touch.clientY,    // clientY
+      false,            // ctrlKey
+      false,            // altKey
+      false,            // shiftKey
+      false,            // metaKey
+      0,                // button
+      null              // relatedTarget
     );
 
     // Dispatch the simulated event to the target element
@@ -69,7 +112,13 @@
    */
   mouseProto._touchStart = function (event) {
 
-    var self = this;
+    let self = this;
+
+    // Interaction time
+    this._startedMove = event.timeStamp;
+
+    // Track movement to determine if interaction was a click
+    self._startPos = getTouchCoords(event);
 
     // Ignore the event if another widget is already being handled
     if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
@@ -103,7 +152,7 @@
       return;
     }
 
-    // Interaction was not a click
+    // Interaction was moved
     this._touchMoved = true;
 
     // Simulate the mousemove event
@@ -128,12 +177,27 @@
     simulateMouseEvent(event, 'mouseout');
 
     // If the touch interaction did not move, it should trigger a click
-    if (!this._touchMoved) {
-
-      // Simulate the click event
-      simulateMouseEvent(event, 'click');
+    // Check for this in two ways - length of time of simulation and distance moved
+    // Allow for Apple Stylus to be used also
+    let timeMoving = event.timeStamp - this._startedMove;
+    if (!this._touchMoved || timeMoving < 500) {
+        // Simulate the click event
+        simulateMouseEvent(event, 'click');
+    } else {
+      let endPos = getTouchCoords(event);
+      if ((Math.abs(endPos.x - this._startPos.x) < 10) && (Math.abs(endPos.y - this._startPos.y) < 10)) {
+
+          // If the touch interaction did not move, it should trigger a click
+          if (!this._touchMoved || event.originalEvent.changedTouches[0].touchType === 'stylus') {
+              // Simulate the click event
+              simulateMouseEvent(event, 'click');
+          }
+      }
     }
 
+    // Unset the flag to determine the touch movement stopped
+    this._touchMoved = false;
+
     // Unset the flag to allow other widgets to inherit the touch event
     touchHandled = false;
   };
@@ -145,11 +209,16 @@
    * original mouse event handling methods.
    */
   mouseProto._mouseInit = function () {
+
+    let self = this;
 
-    var self = this;
+    // Microsoft Surface Support = remove original touch Action
+    if ($.support.mspointer) {
+      self.element[0].style.msTouchAction = 'none';
+    }   
 
     // Delegate the touch handlers to the widget's element
-    self.element.bind({
+    self.element.on({
       touchstart: $.proxy(self, '_touchStart'),
       touchmove: $.proxy(self, '_touchMove'),
       touchend: $.proxy(self, '_touchEnd')
@@ -163,11 +232,11 @@
    * Remove the touch event handlers
    */
   mouseProto._mouseDestroy = function () {
-    
-    var self = this;
+
+    let self = this;
 
     // Delegate the touch handlers to the widget's element
-    self.element.unbind({
+    self.element.off({
       touchstart: $.proxy(self, '_touchStart'),
       touchmove: $.proxy(self, '_touchMove'),
       touchend: $.proxy(self, '_touchEnd')
@@ -177,4 +246,4 @@
     _mouseDestroy.call(self);
   };
 
-})(jQuery);
+}));