Wrap (#1)

* Updated to v1.0.0 to combine suggested changes

Combine suggested changes to take account of issues with the original jquery-ui-touch-punch.js which has not been updated since 2014 - https://github.com/furf/jquery-ui-touch-punch

* Update to cover why new fork created

* Removed change for zoomed devices

Lines dealing with "fix for zoomed devices while dragging" prevented jQuery ui sortable from moving items after you drag them to a new position

* Notes on jquery-ui dialog and close button

* Update for Apple Pencil

This fixes the issue: furf#315 where the Apple Pencil triggers a touchmove event and you may struggle to trigger a click with the pencil

* FIx #4 - mouse undefined

* Typo in last commit

* v1.0.3 Release - Change to handling of click events

Previous release had an issue where clicking through to an input or a button (for example the close button on jQuery.ui dialog boxes)  was not being recognised as a click.  Incorporated another fix from the v0.2.3 branch so the code now treats anything as a click if (a) they leave theri finger on the control for less than 500ms, or (b) they do not move their finger more than 10 pixels

* Correct patch as per original v1.0.2 code

* Prevent simulation of two clicks when interaction hasn't moved

* Updated for jQuery v3

Changed .bind and .unbind to .on and .off (works with jQuery v1.7 also)

* v1.0.5 - Update to support Lenova touch screen

Firefox on Lenova touch screen (and similar devices) was still failing the $.support.touch test.

* Update Header Comments

Updated comments and header

* Remove minified version

Minified version was the original and never updated - so has been removed from this fork

* Readme updated - removal of minified version

* Update re Issue furf#13

Change to ensure that startedMove and startPos are always reset on a touchstart, and touchMoved is reset after a touchEnd.

* Updated version number

* fix errors while using draggable during mobile scrolling

* Change version

* v1.0.8 - MS Surface Devices

Added check for MS Surface device support

Co-authored-by: Rich M <[email protected]>
Co-authored-by: Per Rovegård <[email protected]>
Co-authored-by: Sébastien Gaya <[email protected]>

README.md

@@ -13,6 +13,14 @@ As I said, Touch Punch is a hack. It [duck punches](http://en.wikipedia.org/wiki
 
 This code is dual licensed under the MIT or GPL Version 2 licenses and is therefore free to use, modify and/or distribute, but if you include Touch Punch in other software packages or plugins, please include an attribution to the original software and a link to [this Touch Punch website](http://touchpunch.furf.com/).
 
+RWAP Version (2019)
+The above was last updated in 2014.
+
+I have created a new fork which contains various suggested improvements to the code when it became clear that touch-punch does not work too well on Android devices, and actually stopped the close button on jquery-ui dialogs from working on some devices.
+
+www.rwapsoftware.co.uk
+
+
 ## Using Touch Punch is as easy as 1, 2…
 
 Just follow these simple steps to enable touch events in your jQuery UI app:
@@ -29,7 +37,7 @@ Just follow these simple steps to enable touch events in your jQuery UI app:
     Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.
 
     ```html
-    <script src="jquery.ui.touch-punch.min.js"></script>
+    <script src="jquery.ui.touch-punch.js"></script>
     ```
 
 3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

jquery-ui-notes.txt

@@ -0,0 +1,9 @@
+Whilst implementing this, we noticed that on some mobile phones there were still some issues:
+
+a) If you have a jquery-ui dialog box open, it could be nigh impossible to use the close icon in the top right hand
+corner on some phones.
+After some experimentation, we found that we had to check if the screen size <= 480 and in that case, set the dialog 
+"draggable" setting to false
+
+Presumably the phone was struggling to work out if we were trying to drag a box which might only be a couple of pixels smaller
+than the width of the screen, or we wanted to hit the close icon.

jquery.ui.touch-punch.js

@@ -1,28 +1,63 @@
 /*!
- * jQuery UI Touch Punch 0.2.3
+ * jQuery UI Touch Punch 1.0.8 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 ) {
 
-  // Ignore browsers without touch support
-  if (!$.support.touch) {
-    return;
+        // AMD. Register as an anonymous module.
+        define([ "jquery", "jquery.ui" ], factory );
+    } else {
+
+        // Browser globals
+        factory( jQuery );
+    }
+}(function ($) {
+
+  // Detect touch support - Windows Surface devices and other touch devices
+  $.support.mspointer = window.navigator.msPointerEnabled;		
+  $.support.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 ((!$.support.touch && !$.support.mspointer) || !$.ui.mouse) {
+	return;
   }
 
   var 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,31 @@
       return;
     }
 
-    event.preventDefault();
+    // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors
+    if (event.cancelable) {
+      event.preventDefault();
+    }
 
     var 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
@@ -71,6 +109,12 @@
 
     var 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])) {
       return;
@@ -103,7 +147,7 @@
       return;
     }
 
-    // Interaction was not a click
+    // Interaction was moved
     this._touchMoved = true;
 
     // Simulate the mousemove event
@@ -128,12 +172,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
+    var timeMoving = event.timeStamp - this._startedMove;
+    if (!this._touchMoved || timeMoving < 500) {
+        // Simulate the click event
+        simulateMouseEvent(event, 'click');
+    } else {
+      var 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 +204,16 @@
    * original mouse event handling methods.
    */
   mouseProto._mouseInit = function () {
-    
+
     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 +227,11 @@
    * Remove the touch event handlers
    */
   mouseProto._mouseDestroy = function () {
-    
+
     var 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 +241,4 @@
     _mouseDestroy.call(self);
   };
 
-})(jQuery);
+}));