diff --git a/README.md b/README.md index cff7baa..e2ab7d3 100644 --- a/README.md +++ b/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: diff --git a/jquery-ui-notes.txt b/jquery-ui-notes.txt new file mode 100644 index 0000000..291759c --- /dev/null +++ b/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. diff --git a/jquery.ui.touch-punch.js b/jquery.ui.touch-punch.js index 16ce41d..6df253f 100755 --- a/jquery.ui.touch-punch.js +++ b/jquery.ui.touch-punch.js @@ -1,6 +1,7 @@ /*! - * jQuery UI Touch Punch 0.2.3 + * jQuery UI Touch Punch 1.0.3 as modified by RWAP Software (based on original touchpunch v0.2.3 which has not been updated since 2014) * + * Updates to take account of various suggested changes on the original code issues * Copyright 2011–2014, Dave Furfero * Dual licensed under the MIT or GPL Version 2 licenses. * @@ -8,20 +9,42 @@ * jquery.ui.widget.js * jquery.ui.mouse.js */ -(function ($) { +(function( factory ) { + if ( typeof define === "function" && define.amd ) { + + // AMD. Register as an anonymous module. + define([ "jquery", "jquery.ui" ], factory ); + } else { + + // Browser globals + factory( jQuery ); + } +}(function ($) { // Detect touch support - $.support.touch = 'ontouchend' in document; + // $.support.touch = 'ontouchend' in document; + $.support.touch = ('ontouchstart' in document || 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0); - // Ignore browsers without touch support - if (!$.support.touch) { - return; + // Ignore browsers without touch or mouse support + if (!$.support.touch || !$.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 @@ -49,8 +72,8 @@ 1, // detail touch.screenX, // screenX touch.screenY, // screenY - touch.clientX, // clientX - touch.clientY, // clientY + touch.clientX, // clientX + touch.clientY, // clientY false, // ctrlKey false, // altKey false, // shiftKey @@ -78,9 +101,15 @@ // Set the flag to prevent other widgets from inheriting the touch event touchHandled = true; + + // Track movement to determine if interaction was a click + self._startPos = getTouchCoords(event); // Track movement to determine if interaction was a click self._touchMoved = false; + + // Interaction time + this._startedMove = event.timeStamp; // Simulate the mouseover event simulateMouseEvent(event, 'mouseover'); @@ -103,7 +132,7 @@ return; } - // Interaction was not a click + // Interaction was moved this._touchMoved = true; // Simulate the mousemove event @@ -128,10 +157,22 @@ 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'); + } + + 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 allow other widgets to inherit the touch event @@ -177,4 +218,4 @@ _mouseDestroy.call(self); }; -})(jQuery); \ No newline at end of file +}));