2 * jQuery.UI.iPad plugin
3 * Copyright (c) 2010 Stephen von Takach
8 * http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
14 // Extend jQuery feature detection
\r
16 $.extend($.support, {
\r
17 touch: typeof Touch == "object"
\r
21 // Hook up touch events
\r
23 if ($.support.touch) {
\r
24 document.addEventListener("touchstart", iPadTouchHandler, false);
\r
25 document.addEventListener("touchmove", iPadTouchHandler, false);
\r
26 document.addEventListener("touchend", iPadTouchHandler, false);
\r
27 document.addEventListener("touchcancel", iPadTouchHandler, false);
\r
32 var lastTap = null; // Holds last tapped element (so we can compare for double tap)
\r
33 var tapValid = false; // Are we still in the .6 second window where a double tap can occur
\r
34 var tapTimeout = null; // The timeout reference
\r
36 function cancelTap() {
\r
41 var rightClickPending = false; // Is a right click still feasible
\r
42 var rightClickEvent = null; // the original event
\r
43 var holdTimeout = null; // timeout reference
\r
44 var cancelMouseUp = false; // prevents a click from occuring as we want the context menu
\r
47 function cancelHold() {
\r
48 if (rightClickPending) {
\r
49 window.clearTimeout(holdTimeout);
\r
50 rightClickPending = false;
\r
51 rightClickEvent = null;
\r
55 function startHold(event) {
\r
56 if (rightClickPending)
\r
59 rightClickPending = true; // We could be performing a right click
\r
60 rightClickEvent = (event.changedTouches)[0];
\r
61 holdTimeout = window.setTimeout("doRightClick();", 800);
\r
65 function doRightClick() {
\r
66 rightClickPending = false;
\r
69 // We need to mouse up (as we were down)
\r
71 var first = rightClickEvent,
\r
72 simulatedEvent = document.createEvent("MouseEvent");
\r
73 simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
74 false, false, false, false, 0, null);
\r
75 first.target.dispatchEvent(simulatedEvent);
\r
78 // emulate a right click
\r
80 simulatedEvent = document.createEvent("MouseEvent");
\r
81 simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
82 false, false, false, false, 2, null);
\r
83 first.target.dispatchEvent(simulatedEvent);
\r
86 // Show a context menu
\r
88 simulatedEvent = document.createEvent("MouseEvent");
\r
89 simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5,
\r
90 false, false, false, false, 2, null);
\r
91 first.target.dispatchEvent(simulatedEvent);
\r
95 // Note:: I don't mouse up the right click here however feel free to add if required
\r
99 cancelMouseUp = true;
\r
100 rightClickEvent = null; // Release memory
\r
105 // mouse over event then mouse down
\r
107 function iPadTouchStart(event) {
\r
108 var touches = event.changedTouches,
\r
109 first = touches[0],
\r
110 type = "mouseover",
\r
111 simulatedEvent = document.createEvent("MouseEvent");
\r
113 // Mouse over first - I have live events attached on mouse over
\r
115 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
116 false, false, false, false, 0, null);
\r
117 first.target.dispatchEvent(simulatedEvent);
\r
119 type = "mousedown";
\r
120 simulatedEvent = document.createEvent("MouseEvent");
\r
122 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
123 false, false, false, false, 0, null);
\r
124 first.target.dispatchEvent(simulatedEvent);
\r
128 lastTap = first.target;
\r
130 tapTimeout = window.setTimeout("cancelTap();", 600);
\r
134 window.clearTimeout(tapTimeout);
\r
137 // If a double tap is still a possibility and the elements are the same
\r
138 // Then perform a double click
\r
140 if (first.target == lastTap) {
\r
145 simulatedEvent = document.createEvent("MouseEvent");
\r
147 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
148 false, false, false, false, 0/*left*/, null);
\r
149 first.target.dispatchEvent(simulatedEvent);
\r
152 simulatedEvent = document.createEvent("MouseEvent");
\r
154 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
155 false, false, false, false, 0/*left*/, null);
\r
156 first.target.dispatchEvent(simulatedEvent);
\r
159 lastTap = first.target;
\r
161 tapTimeout = window.setTimeout("cancelTap();", 600);
\r
167 function iPadTouchHandler(event) {
\r
169 button = 0; /*left*/
\r
171 if (event.touches.length > 1)
\r
174 switch (event.type) {
\r
176 if ($(event.changedTouches[0].target).is("select")) {
\r
179 iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
\r
180 event.preventDefault();
\r
186 type = "mousemove";
\r
187 event.preventDefault();
\r
191 if (cancelMouseUp) {
\r
192 cancelMouseUp = false;
\r
193 event.preventDefault();
\r
204 var touches = event.changedTouches,
\r
205 first = touches[0],
\r
206 simulatedEvent = document.createEvent("MouseEvent");
\r
208 simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
209 false, false, false, false, button, null);
\r
211 first.target.dispatchEvent(simulatedEvent);
\r
213 if (type == "mouseup" && tapValid && first.target == lastTap) { // This actually emulates the ipads default behaviour (which we prevented)
\r
214 simulatedEvent = document.createEvent("MouseEvent"); // This check avoids click being emulated on a double tap
\r
216 simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
\r
217 false, false, false, false, button, null);
\r
219 first.target.dispatchEvent(simulatedEvent);
\r