Update to v1.0.9

README.md

@@ -3,15 +3,24 @@
 
 > **jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.**
 
-_[Visit the official Touch Punch website](http://touchpunch.furf.com)._
-
 Currently, [jQuery UI](http://jqueryui.com/) user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, because jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.
 
 That's where jQuery UI Touch Punch comes in. Touch Punch works by using [simulated events](https://developer.mozilla.org/en/DOM/document.createEvent) to map [touch events](http://www.html5rocks.com/en/mobile/touch/) to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.
 
 As I said, Touch Punch is a hack. It [duck punches](http://en.wikipedia.org/wiki/Monkey_patch) some of jQuery UI's core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI's interactions and widgets. However, you may find more complex cases where Touch Punch fails. If so, scroll down to learn how you can file and/or fix issues.
 
-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/).
+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 repo](https://github.com/RWAP/jquery-ui-touch-punch).
+
+Fork: https://github.com/RWAP/jquery-ui-touch-punch
+
+RWAP Version (2019-2024)
+
+The [original repo](https://github.com/furf/jquery-ui-touch-punch) 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…
 
@@ -29,7 +38,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.
@@ -39,3 +48,15 @@ Just follow these simple steps to enable touch events in your jQuery UI app:
     ```
 
 _Tested on iPad, iPhone, Android and other touch-enabled mobile devices._
+
+## If it does not seem to work…
+
+Remember that Touch Punch is just allowing various key strokes (such as touch, cliuck and double click) to emulate mouse movements.  We do nothing with the underlying jQuery code.
+
+If it does not appear to work for you:
+
+1. Ensure that you are using the latest version of this plugin (and not the [original repo](https://github.com/furf/jquery-ui-touch-punch) ).
+
+2. Ensure that you have the latest versions of jQuery and jQuery UI linked in your webpage, BEFORE this code
+
+3. Ensure that the original code works as expected on desktop.

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,27 +1,62 @@
 /*!
- * jQuery UI Touch Punch 0.2.3
+ * jQuery UI Touch Punch 1.1.5 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;
+      touchHandled, lastClickTime  = 0;
+
+    /**
+    * 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
@@ -35,29 +70,26 @@
       return;
     }
 
-    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              
-    );
+    //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();
+    }
+
+    let touch = event.originalEvent.changedTouches[0],
+        simulatedEvent = new MouseEvent(simulatedType, {
+          bubbles: true,
+          cancelable: true,
+          view:window,
+          screenX:touch.screenX,
+          screenY:touch.screenY,
+          clientX:touch.clientX,
+          clientY:touch.clientY
+        });
 
     // Dispatch the simulated event to the target element
     event.target.dispatchEvent(simulatedEvent);
@@ -69,7 +101,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 +141,7 @@
       return;
     }
 
-    // Interaction was not a click
+    // Interaction was moved
     this._touchMoved = true;
 
     // Simulate the mousemove event
@@ -128,12 +166,31 @@
     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
+        if( event.timeStamp - lastClickTime < 400 )
+            simulateMouseEvent(event, 'dblclick');
+        else
+            simulateMouseEvent(event, 'click');
+        lastClickTime = event.timeStamp;	    
+    } 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,14 +202,23 @@
    * original mouse event handling methods.
    */
   mouseProto._mouseInit = function () {
-
-    var self = this;
+
+    let self = this;
+
+    // Microsoft Surface Support = remove original touch Action
+    if ($.mspointer || ($.support && $.support.mspointer)) {
+      self.element[0].style.msTouchAction = 'none';
+    }	
+
+    self._touchStartBound = mouseProto._touchStart.bind(self);
+    self._touchMoveBound  = mouseProto._touchMove.bind(self);
+    self._touchEndBound   = mouseProto._touchEnd.bind(self);	  
 
     // Delegate the touch handlers to the widget's element
-    self.element.bind({
-      touchstart: $.proxy(self, '_touchStart'),
-      touchmove: $.proxy(self, '_touchMove'),
-      touchend: $.proxy(self, '_touchEnd')
+    self.element.on({
+      touchstart: self._touchStartBound,
+      touchmove: self._touchMoveBound,
+      touchend: self._touchEndBound
     });
 
     // Call the original $.ui.mouse init method
@@ -163,18 +229,23 @@
    * 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({
-      touchstart: $.proxy(self, '_touchStart'),
-      touchmove: $.proxy(self, '_touchMove'),
-      touchend: $.proxy(self, '_touchEnd')
+    self.element.off({
+      touchstart: self._touchStartBound,
+      touchmove: self._touchMoveBound,
+      touchend: self._touchEndBound
     });
+
+	// Clean up references
+	self._touchStartBound = null;
+	self._touchMoveBound = null;
+	self._touchEndBound = null;
 
     // Call the original $.ui.mouse destroy method
     _mouseDestroy.call(self);
   };
 
-})(jQuery);
+}));

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@rwap/jquery-ui-touch-punch",
+  "version": "1.1.5",
+  "description": "A duck punch for adding touch events to jQuery UI",
+  "browser": "jquery.ui.touch-punch.js",
+  "repository": "https://github.com/RWAP/jquery-ui-touch-punch.git",
+  "author": "Rich M <[email protected]>",
+  "contributors": [
+    "Dave Furfero <[email protected]>"
+  ],
+  "license": "MIT or GPL version 2",
+  "dependencies": {
+    "jquery-ui": ">=1.8"
+  }
+}