Add library jquery-ui-for-ipad-and-iphone that maps touch events to mouse events...

diff --git a/BookReader/jquery.ui.ipad.js b/BookReader/jquery.ui.ipad.js
new file mode 100644 (file)
index 0000000..6ee5160
--- /dev/null
+++ b/BookReader/jquery.ui.ipad.js
@@ -0,0 +1,223 @@
+/**
+* jQuery.UI.iPad plugin
+* Copyright (c) 2010 Stephen von Takach
+* licensed under MIT.
+* Date: 27/8/2010
+*
+* Project Home: 
+* http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
+*/\r
+\r
+\r
+$(function() {\r
+       //\r
+       // Extend jQuery feature detection\r
+       //\r
+       $.extend($.support, {\r
+               touch: typeof Touch == "object"\r
+       });\r
+       \r
+       //\r
+       // Hook up touch events\r
+       //\r
+       if ($.support.touch) {\r
+               document.addEventListener("touchstart", iPadTouchHandler, false);\r
+               document.addEventListener("touchmove", iPadTouchHandler, false);\r
+               document.addEventListener("touchend", iPadTouchHandler, false);\r
+               document.addEventListener("touchcancel", iPadTouchHandler, false);\r
+       }\r
+});\r
+\r
+\r
+var lastTap = null;                    // Holds last tapped element (so we can compare for double tap)\r
+var tapValid = false;                  // Are we still in the .6 second window where a double tap can occur\r
+var tapTimeout = null;                 // The timeout reference\r
+\r
+function cancelTap() {\r
+       tapValid = false;\r
+}\r
+\r
+\r
+var rightClickPending = false; // Is a right click still feasible\r
+var rightClickEvent = null;            // the original event\r
+var holdTimeout = null;                        // timeout reference\r
+var cancelMouseUp = false;             // prevents a click from occuring as we want the context menu\r
+\r
+\r
+function cancelHold() {\r
+       if (rightClickPending) {\r
+               window.clearTimeout(holdTimeout);\r
+               rightClickPending = false;\r
+               rightClickEvent = null;\r
+       }\r
+}\r
+\r
+function startHold(event) {\r
+       if (rightClickPending)\r
+               return;\r
+\r
+       rightClickPending = true; // We could be performing a right click\r
+       rightClickEvent = (event.changedTouches)[0];\r
+       holdTimeout = window.setTimeout("doRightClick();", 800);\r
+}\r
+\r
+\r
+function doRightClick() {\r
+       rightClickPending = false;\r
+\r
+       //\r
+       // We need to mouse up (as we were down)\r
+       //\r
+       var first = rightClickEvent,\r
+               simulatedEvent = document.createEvent("MouseEvent");\r
+       simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                       false, false, false, false, 0, null);\r
+       first.target.dispatchEvent(simulatedEvent);\r
+\r
+       //\r
+       // emulate a right click\r
+       //\r
+       simulatedEvent = document.createEvent("MouseEvent");\r
+       simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                       false, false, false, false, 2, null);\r
+       first.target.dispatchEvent(simulatedEvent);\r
+\r
+       //\r
+       // Show a context menu\r
+       //\r
+       simulatedEvent = document.createEvent("MouseEvent");\r
+       simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5,\r
+                                  false, false, false, false, 2, null);\r
+       first.target.dispatchEvent(simulatedEvent);\r
+\r
+\r
+       //\r
+       // Note:: I don't mouse up the right click here however feel free to add if required\r
+       //\r
+\r
+\r
+       cancelMouseUp = true;\r
+       rightClickEvent = null; // Release memory\r
+}\r
+\r
+\r
+//\r
+// mouse over event then mouse down\r
+//\r
+function iPadTouchStart(event) {\r
+       var touches = event.changedTouches,\r
+               first = touches[0],\r
+               type = "mouseover",\r
+               simulatedEvent = document.createEvent("MouseEvent");\r
+       //\r
+       // Mouse over first - I have live events attached on mouse over\r
+       //\r
+       simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                            false, false, false, false, 0, null);\r
+       first.target.dispatchEvent(simulatedEvent);\r
+\r
+       type = "mousedown";\r
+       simulatedEvent = document.createEvent("MouseEvent");\r
+\r
+       simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                            false, false, false, false, 0, null);\r
+       first.target.dispatchEvent(simulatedEvent);\r
+\r
+\r
+       if (!tapValid) {\r
+               lastTap = first.target;\r
+               tapValid = true;\r
+               tapTimeout = window.setTimeout("cancelTap();", 600);\r
+               startHold(event);\r
+       }\r
+       else {\r
+               window.clearTimeout(tapTimeout);\r
+\r
+               //\r
+               // If a double tap is still a possibility and the elements are the same\r
+               //      Then perform a double click\r
+               //\r
+               if (first.target == lastTap) {\r
+                       lastTap = null;\r
+                       tapValid = false;\r
+\r
+                       type = "click";\r
+                       simulatedEvent = document.createEvent("MouseEvent");\r
+\r
+                       simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                               false, false, false, false, 0/*left*/, null);\r
+                       first.target.dispatchEvent(simulatedEvent);\r
+\r
+                       type = "dblclick";\r
+                       simulatedEvent = document.createEvent("MouseEvent");\r
+\r
+                       simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                               false, false, false, false, 0/*left*/, null);\r
+                       first.target.dispatchEvent(simulatedEvent);\r
+               }\r
+               else {\r
+                       lastTap = first.target;\r
+                       tapValid = true;\r
+                       tapTimeout = window.setTimeout("cancelTap();", 600);\r
+                       startHold(event);\r
+               }\r
+       }\r
+}\r
+\r
+function iPadTouchHandler(event) {\r
+       var type = "",\r
+               button = 0; /*left*/\r
+\r
+       if (event.touches.length > 1)\r
+               return;\r
+\r
+       switch (event.type) {\r
+               case "touchstart":\r
+                       if ($(event.changedTouches[0].target).is("select")) {\r
+                               return;\r
+                       }\r
+                       iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/\r
+                       event.preventDefault();\r
+                       return false;\r
+                       break;\r
+\r
+               case "touchmove":\r
+                       cancelHold();\r
+                       type = "mousemove";\r
+                       event.preventDefault();\r
+                       break;\r
+\r
+               case "touchend":\r
+                       if (cancelMouseUp) {\r
+                               cancelMouseUp = false;\r
+                               event.preventDefault();\r
+                               return false;\r
+                       }\r
+                       cancelHold();\r
+                       type = "mouseup";\r
+                       break;\r
+\r
+               default:\r
+                       return;\r
+       }\r
+\r
+       var touches = event.changedTouches,\r
+               first = touches[0],\r
+               simulatedEvent = document.createEvent("MouseEvent");\r
+\r
+       simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                            false, false, false, false, button, null);\r
+\r
+       first.target.dispatchEvent(simulatedEvent);\r
+\r
+       if (type == "mouseup" && tapValid && first.target == lastTap) { // This actually emulates the ipads default behaviour (which we prevented)\r
+               simulatedEvent = document.createEvent("MouseEvent");            // This check avoids click being emulated on a double tap\r
+\r
+               simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,\r
+                            false, false, false, false, button, null);\r
+\r
+               first.target.dispatchEvent(simulatedEvent);\r
+       }\r
+}\r
+\r
+\r

diff --git a/BookReaderIA/inc/BookReader.inc b/BookReaderIA/inc/BookReader.inc
index d97b161..630a28b 100644 (file)
--- a/BookReaderIA/inc/BookReader.inc
+++ b/BookReaderIA/inc/BookReader.inc
@@ -134,6 +134,7 @@ class BookReader
     <script type="text/javascript" src="http://www.archive.org/includes/analytics.js?v=2"></script>
     <script type="text/javascript" src="/bookreader/dragscrollable.js?v=<? echo($version); ?>"></script>
     <script type="text/javascript" src="/bookreader/jquery.colorbox-min.js"></script>
+    <script type="text/javascript" src="/bookreader/jquery.ui.ipad.js"></script>
      <!-- THIS ALLOWS BEAUTYTIPS TO WORK ON IE -->
         <!--[if lt IE 9]>
         <script type="text/javascript" src="excanvas.compiled.js"></script>