-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
copied form original https://github.com/furf/jquery-ui-touch-punch got repo (not maintained since 2014) for #1413
- Loading branch information
Showing
1 changed file
with
180 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,180 @@ | ||
/*! | ||
* jQuery UI Touch Punch 0.2.3 | ||
* | ||
* Copyright 2011–2014, Dave Furfero | ||
* Dual licensed under the MIT or GPL Version 2 licenses. | ||
* | ||
* Depends: | ||
* jquery.ui.widget.js | ||
* jquery.ui.mouse.js | ||
*/ | ||
(function ($) { | ||
|
||
// Detect touch support | ||
$.support.touch = 'ontouchend' in document; | ||
|
||
// Ignore browsers without touch support | ||
if (!$.support.touch) { | ||
return; | ||
} | ||
|
||
var mouseProto = $.ui.mouse.prototype, | ||
_mouseInit = mouseProto._mouseInit, | ||
_mouseDestroy = mouseProto._mouseDestroy, | ||
touchHandled; | ||
|
||
/** | ||
* Simulate a mouse event based on a corresponding touch event | ||
* @param {Object} event A touch event | ||
* @param {String} simulatedType The corresponding mouse event | ||
*/ | ||
function simulateMouseEvent (event, simulatedType) { | ||
|
||
// Ignore multi-touch events | ||
if (event.originalEvent.touches.length > 1) { | ||
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 | ||
); | ||
|
||
// Dispatch the simulated event to the target element | ||
event.target.dispatchEvent(simulatedEvent); | ||
} | ||
|
||
/** | ||
* Handle the jQuery UI widget's touchstart events | ||
* @param {Object} event The widget element's touchstart event | ||
*/ | ||
mouseProto._touchStart = function (event) { | ||
|
||
var self = this; | ||
|
||
// Ignore the event if another widget is already being handled | ||
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) { | ||
return; | ||
} | ||
|
||
// Set the flag to prevent other widgets from inheriting the touch event | ||
touchHandled = true; | ||
|
||
// Track movement to determine if interaction was a click | ||
self._touchMoved = false; | ||
|
||
// Simulate the mouseover event | ||
simulateMouseEvent(event, 'mouseover'); | ||
|
||
// Simulate the mousemove event | ||
simulateMouseEvent(event, 'mousemove'); | ||
|
||
// Simulate the mousedown event | ||
simulateMouseEvent(event, 'mousedown'); | ||
}; | ||
|
||
/** | ||
* Handle the jQuery UI widget's touchmove events | ||
* @param {Object} event The document's touchmove event | ||
*/ | ||
mouseProto._touchMove = function (event) { | ||
|
||
// Ignore event if not handled | ||
if (!touchHandled) { | ||
return; | ||
} | ||
|
||
// Interaction was not a click | ||
this._touchMoved = true; | ||
|
||
// Simulate the mousemove event | ||
simulateMouseEvent(event, 'mousemove'); | ||
}; | ||
|
||
/** | ||
* Handle the jQuery UI widget's touchend events | ||
* @param {Object} event The document's touchend event | ||
*/ | ||
mouseProto._touchEnd = function (event) { | ||
|
||
// Ignore event if not handled | ||
if (!touchHandled) { | ||
return; | ||
} | ||
|
||
// Simulate the mouseup event | ||
simulateMouseEvent(event, 'mouseup'); | ||
|
||
// Simulate the mouseout event | ||
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'); | ||
} | ||
|
||
// Unset the flag to allow other widgets to inherit the touch event | ||
touchHandled = false; | ||
}; | ||
|
||
/** | ||
* A duck punch of the $.ui.mouse _mouseInit method to support touch events. | ||
* This method extends the widget with bound touch event handlers that | ||
* translate touch events to mouse events and pass them to the widget's | ||
* original mouse event handling methods. | ||
*/ | ||
mouseProto._mouseInit = function () { | ||
|
||
var self = this; | ||
|
||
// Delegate the touch handlers to the widget's element | ||
self.element.bind({ | ||
touchstart: $.proxy(self, '_touchStart'), | ||
touchmove: $.proxy(self, '_touchMove'), | ||
touchend: $.proxy(self, '_touchEnd') | ||
}); | ||
|
||
// Call the original $.ui.mouse init method | ||
_mouseInit.call(self); | ||
}; | ||
|
||
/** | ||
* Remove the touch event handlers | ||
*/ | ||
mouseProto._mouseDestroy = function () { | ||
|
||
var 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') | ||
}); | ||
|
||
// Call the original $.ui.mouse destroy method | ||
_mouseDestroy.call(self); | ||
}; | ||
|
||
})(jQuery); |