├── README.md ├── bower.json ├── jquery.ui.touch-punch.js └── jquery.ui.touch-punch.min.js /README.md: -------------------------------------------------------------------------------- 1 | # jQuery UI Touch Punch 2 | ## Touch Event Support for jQuery UI 3 | 4 | > **jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.** 5 | 6 | _[Visit the official Touch Punch website](http://touchpunch.furf.com)._ 7 | 8 | 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. 9 | 10 | 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. 11 | 12 | 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. 13 | 14 | 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/). 15 | 16 | ## Using Touch Punch is as easy as 1, 2… 17 | 18 | Just follow these simple steps to enable touch events in your jQuery UI app: 19 | 20 | 1. Include jQuery and jQuery UI on your page. 21 | 22 | ```html 23 | 24 | 25 | ``` 26 | 27 | 2. Include Touch Punch after jQuery UI and before its first use. 28 | 29 | 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. 30 | 31 | ```html 32 | 33 | ``` 34 | 35 | 3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger. 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | _Tested on iPad, iPhone, Android and other touch-enabled mobile devices._ 42 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jqueryui-touch-punch", 3 | "version": "0.2.3", 4 | "main": "jquery.ui.touch-punch.min.js", 5 | "ignore": [], 6 | "dependencies": { 7 | "jquery": ">=1.6", 8 | "jquery-ui": ">=1.8" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /jquery.ui.touch-punch.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Touch Punch 0.2.3 3 | * 4 | * Copyright 2011–2014, Dave Furfero 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * 7 | * Depends: 8 | * jquery.ui.widget.js 9 | * jquery.ui.mouse.js 10 | */ 11 | (function ($) { 12 | 13 | // Detect touch support 14 | $.support.touch = 'ontouchend' in document; 15 | 16 | // Ignore browsers without touch support 17 | if (!$.support.touch) { 18 | return; 19 | } 20 | 21 | var mouseProto = $.ui.mouse.prototype, 22 | _mouseInit = mouseProto._mouseInit, 23 | _mouseDestroy = mouseProto._mouseDestroy, 24 | touchHandled; 25 | 26 | /** 27 | * Simulate a mouse event based on a corresponding touch event 28 | * @param {Object} event A touch event 29 | * @param {String} simulatedType The corresponding mouse event 30 | */ 31 | function simulateMouseEvent (event, simulatedType) { 32 | 33 | // Ignore multi-touch events 34 | if (event.originalEvent.touches.length > 1) { 35 | return; 36 | } 37 | 38 | event.preventDefault(); 39 | 40 | var touch = event.originalEvent.changedTouches[0], 41 | simulatedEvent = document.createEvent('MouseEvents'); 42 | 43 | // Initialize the simulated mouse event using the touch event's coordinates 44 | simulatedEvent.initMouseEvent( 45 | simulatedType, // type 46 | true, // bubbles 47 | true, // cancelable 48 | window, // view 49 | 1, // detail 50 | touch.screenX, // screenX 51 | touch.screenY, // screenY 52 | touch.clientX, // clientX 53 | touch.clientY, // clientY 54 | false, // ctrlKey 55 | false, // altKey 56 | false, // shiftKey 57 | false, // metaKey 58 | 0, // button 59 | null // relatedTarget 60 | ); 61 | 62 | // Dispatch the simulated event to the target element 63 | event.target.dispatchEvent(simulatedEvent); 64 | } 65 | 66 | /** 67 | * Handle the jQuery UI widget's touchstart events 68 | * @param {Object} event The widget element's touchstart event 69 | */ 70 | mouseProto._touchStart = function (event) { 71 | 72 | var self = this; 73 | 74 | // Ignore the event if another widget is already being handled 75 | if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) { 76 | return; 77 | } 78 | 79 | // Set the flag to prevent other widgets from inheriting the touch event 80 | touchHandled = true; 81 | 82 | // Track movement to determine if interaction was a click 83 | self._touchMoved = false; 84 | 85 | // Simulate the mouseover event 86 | simulateMouseEvent(event, 'mouseover'); 87 | 88 | // Simulate the mousemove event 89 | simulateMouseEvent(event, 'mousemove'); 90 | 91 | // Simulate the mousedown event 92 | simulateMouseEvent(event, 'mousedown'); 93 | }; 94 | 95 | /** 96 | * Handle the jQuery UI widget's touchmove events 97 | * @param {Object} event The document's touchmove event 98 | */ 99 | mouseProto._touchMove = function (event) { 100 | 101 | // Ignore event if not handled 102 | if (!touchHandled) { 103 | return; 104 | } 105 | 106 | // Interaction was not a click 107 | this._touchMoved = true; 108 | 109 | // Simulate the mousemove event 110 | simulateMouseEvent(event, 'mousemove'); 111 | }; 112 | 113 | /** 114 | * Handle the jQuery UI widget's touchend events 115 | * @param {Object} event The document's touchend event 116 | */ 117 | mouseProto._touchEnd = function (event) { 118 | 119 | // Ignore event if not handled 120 | if (!touchHandled) { 121 | return; 122 | } 123 | 124 | // Simulate the mouseup event 125 | simulateMouseEvent(event, 'mouseup'); 126 | 127 | // Simulate the mouseout event 128 | simulateMouseEvent(event, 'mouseout'); 129 | 130 | // If the touch interaction did not move, it should trigger a click 131 | if (!this._touchMoved) { 132 | 133 | // Simulate the click event 134 | simulateMouseEvent(event, 'click'); 135 | } 136 | 137 | // Unset the flag to allow other widgets to inherit the touch event 138 | touchHandled = false; 139 | }; 140 | 141 | /** 142 | * A duck punch of the $.ui.mouse _mouseInit method to support touch events. 143 | * This method extends the widget with bound touch event handlers that 144 | * translate touch events to mouse events and pass them to the widget's 145 | * original mouse event handling methods. 146 | */ 147 | mouseProto._mouseInit = function () { 148 | 149 | var self = this; 150 | 151 | // Delegate the touch handlers to the widget's element 152 | self.element.bind({ 153 | touchstart: $.proxy(self, '_touchStart'), 154 | touchmove: $.proxy(self, '_touchMove'), 155 | touchend: $.proxy(self, '_touchEnd') 156 | }); 157 | 158 | // Call the original $.ui.mouse init method 159 | _mouseInit.call(self); 160 | }; 161 | 162 | /** 163 | * Remove the touch event handlers 164 | */ 165 | mouseProto._mouseDestroy = function () { 166 | 167 | var self = this; 168 | 169 | // Delegate the touch handlers to the widget's element 170 | self.element.unbind({ 171 | touchstart: $.proxy(self, '_touchStart'), 172 | touchmove: $.proxy(self, '_touchMove'), 173 | touchend: $.proxy(self, '_touchEnd') 174 | }); 175 | 176 | // Call the original $.ui.mouse destroy method 177 | _mouseDestroy.call(self); 178 | }; 179 | 180 | })(jQuery); -------------------------------------------------------------------------------- /jquery.ui.touch-punch.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Touch Punch 0.2.3 3 | * 4 | * Copyright 2011–2014, Dave Furfero 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * 7 | * Depends: 8 | * jquery.ui.widget.js 9 | * jquery.ui.mouse.js 10 | */ 11 | !function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery); --------------------------------------------------------------------------------