2 * jQuery.UI.iPad plugin
3 * Copyright (c) 2010 Stephen von Takach
8 * http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
19 // Extend jQuery feature detection
25 touch: typeof Touch == "object"
33 // Hook up touch events
37 if ($.support.touch) {
39 document.addEventListener("touchstart", iPadTouchHandler, false);
41 document.addEventListener("touchmove", iPadTouchHandler, false);
43 document.addEventListener("touchend", iPadTouchHandler, false);
45 document.addEventListener("touchcancel", iPadTouchHandler, false);
55 var lastTap = null; // Holds last tapped element (so we can compare for double tap)
57 var tapValid = false; // Are we still in the .6 second window where a double tap can occur
59 var tapTimeout = null; // The timeout reference
63 function cancelTap() {
73 var rightClickPending = false; // Is a right click still feasible
75 var rightClickEvent = null; // the original event
77 var holdTimeout = null; // timeout reference
79 var cancelMouseUp = false; // prevents a click from occuring as we want the context menu
85 function cancelHold() {
87 if (rightClickPending) {
89 window.clearTimeout(holdTimeout);
91 rightClickPending = false;
93 rightClickEvent = null;
101 function startHold(event) {
103 if (rightClickPending)
109 rightClickPending = true; // We could be performing a right click
111 rightClickEvent = (event.changedTouches)[0];
113 holdTimeout = window.setTimeout("doRightClick();", 800);
121 function doRightClick() {
123 rightClickPending = false;
129 // We need to mouse up (as we were down)
133 var first = rightClickEvent,
135 simulatedEvent = document.createEvent("MouseEvent");
137 simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
139 false, false, false, false, 0, null);
141 first.target.dispatchEvent(simulatedEvent);
147 // emulate a right click
151 simulatedEvent = document.createEvent("MouseEvent");
153 simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
155 false, false, false, false, 2, null);
157 first.target.dispatchEvent(simulatedEvent);
163 // Show a context menu
167 simulatedEvent = document.createEvent("MouseEvent");
169 simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5,
171 false, false, false, false, 2, null);
173 first.target.dispatchEvent(simulatedEvent);
181 // Note:: I don't mouse up the right click here however feel free to add if required
188 //cancelMouseUp = true; // XXXmang this was preventing swipe from working! make sure rest of code is okay with setting this false
189 cancelMouseUp = false;
190 // cancelMouseUp = true;
192 rightClickEvent = null; // Release memory
202 // mouse over event then mouse down
206 function iPadTouchStart(event) {
208 var touches = event.changedTouches,
214 simulatedEvent = document.createEvent("MouseEvent");
218 // Mouse over first - I have live events attached on mouse over
222 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
224 false, false, false, false, 0, null);
226 first.target.dispatchEvent(simulatedEvent);
232 simulatedEvent = document.createEvent("MouseEvent");
236 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
238 false, false, false, false, 0, null);
240 first.target.dispatchEvent(simulatedEvent);
248 lastTap = first.target;
252 tapTimeout = window.setTimeout("cancelTap();", 600);
260 window.clearTimeout(tapTimeout);
266 // If a double tap is still a possibility and the elements are the same
268 // Then perform a double click
272 if (first.target == lastTap) {
282 simulatedEvent = document.createEvent("MouseEvent");
286 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
288 false, false, false, false, 0/*left*/, null);
290 first.target.dispatchEvent(simulatedEvent);
296 simulatedEvent = document.createEvent("MouseEvent");
300 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
302 false, false, false, false, 0/*left*/, null);
304 first.target.dispatchEvent(simulatedEvent);
310 lastTap = first.target;
314 tapTimeout = window.setTimeout("cancelTap();", 600);
326 function iPadTouchHandler(event) {
334 if (event.touches.length > 1)
340 switch (event.type) {
344 if ($(event.changedTouches[0].target).is("select")) {
350 iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
352 event.preventDefault();
366 event.preventDefault();
376 cancelMouseUp = false;
378 event.preventDefault();
400 var touches = event.changedTouches,
404 simulatedEvent = document.createEvent("MouseEvent");
408 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
410 false, false, false, false, button, null);
414 first.target.dispatchEvent(simulatedEvent);
418 if (type == "mouseup" && tapValid && first.target == lastTap) { // This actually emulates the ipads default behaviour (which we prevented)
420 simulatedEvent = document.createEvent("MouseEvent"); // This check avoids click being emulated on a double tap
424 simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
426 false, false, false, false, button, null);
430 first.target.dispatchEvent(simulatedEvent);