Reverted viewport fixes due to Android regression.
authorMichael Jumper <zhangmaike@users.sourceforge.net>
Fri, 6 Apr 2012 20:20:46 +0000 (13:20 -0700)
committerMichael Jumper <zhangmaike@users.sourceforge.net>
Fri, 6 Apr 2012 20:20:46 +0000 (13:20 -0700)
src/main/webapp/client.xhtml
src/main/webapp/scripts/interface.js
src/main/webapp/styles/client.css

index 58c41af..2ac8a7a 100644 (file)
         <!-- Keyboard event target for platforms with native OSKs -->
         <textarea id="eventTarget"></textarea>
 
-        <!-- Menu trigger -->
-        <div id="menuControl"></div>
-
-        <!-- Scrollable viewport -->
-        <div id="viewport">
-
-            <!-- Display -->
-            <div id="display"></div>
+        <!-- Display -->
+        <div id="display">
+            
+            <!-- Menu trigger -->
+            <div id="menuControl"></div>
 
         </div>
 
         <!-- On-screen keyboard -->
         <div id="keyboardContainer"></div>
 
+        <!-- Dimensional clone of viewport -->
+        <div id="viewportClone"/>
+
         <!-- Dialogs -->
         <div class="dialogOuter">
             <div class="dialogMiddle">
index 092bcb8..e7ad4c3 100644 (file)
@@ -23,7 +23,7 @@ var GuacamoleUI = {
 
     /* UI Elements */
 
-    "viewport"    : document.getElementById("viewport"),
+    "viewport"    : document.getElementById("viewportClone"),
     "display"     : document.getElementById("display"),
     "menu"        : document.getElementById("menu"),
     "menuControl" : document.getElementById("menuControl"),
@@ -463,31 +463,36 @@ GuacamoleUI.attach = function(guac) {
     var mouse = new Guacamole.Mouse(guac_display);
     mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
         function(mouseState) {
-      
-            // Get current viewport scroll
-            var scroll_x = GuacamoleUI.viewport.scrollLeft;
-            var scroll_y = GuacamoleUI.viewport.scrollTop;
-      
+       
             // Determine mouse position within view
-            var mouse_view_x = mouseState.x + guac_display.offsetLeft - scroll_x;
-            var mouse_view_y = mouseState.y + guac_display.offsetTop  - scroll_y;
+            var mouse_view_x = mouseState.x + guac_display.offsetLeft - window.pageXOffset;
+            var mouse_view_y = mouseState.y + guac_display.offsetTop  - window.pageYOffset;
 
             // Determine viewport dimensioins
             var view_width  = GuacamoleUI.viewport.offsetWidth;
             var view_height = GuacamoleUI.viewport.offsetHeight;
 
-            // Scroll horizontally if necessary
+            // Determine scroll amounts based on mouse position relative to document
+
+            var scroll_amount_x;
             if (mouse_view_x > view_width)
-                GuacamoleUI.viewport.scrollLeft += mouse_view_x - view_width;
+                scroll_amount_x = mouse_view_x - view_width;
             else if (mouse_view_x < 0)
-                GuacamoleUI.viewport.scrollLeft += mouse_view_x;
+                scroll_amount_x = mouse_view_x;
+            else
+                scroll_amount_x = 0;
 
-            // Scroll vertically if necessary
+            var scroll_amount_y;
             if (mouse_view_y > view_height)
-                GuacamoleUI.viewport.scrollTop += mouse_view_y - view_height;
+                scroll_amount_y = mouse_view_y - view_height;
             else if (mouse_view_y < 0)
-                GuacamoleUI.viewport.scrollTop += mouse_view_y;
+                scroll_amount_y = mouse_view_y;
+            else
+                scroll_amount_y = 0;
 
+            // Scroll (if necessary) to keep mouse on screen.
+            window.scrollBy(scroll_amount_x, scroll_amount_y);
+       
             // Send mouse event
             guac.sendMouseState(mouseState);
             
index 6d30bb9..9765833 100644 (file)
@@ -47,7 +47,7 @@ div.dialogOuter {
     display: table;
     height: 100%;
     width: 100%;
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
 
@@ -141,7 +141,7 @@ div.dialog p {
 /* Menu */
 
 #menu {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
     width: 100%;
@@ -218,7 +218,7 @@ div#clipboardDiv textarea {
 }
 
 div#menuControl {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     
@@ -229,21 +229,23 @@ div#menuControl {
     z-index: 3;
 }
 
-/* Viewport */
+/* Viewport Clone */
 
-div#viewport {
+div#viewportClone {
+    display: table;
     height: 100%;
     width: 100%;
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
-    overflow: auto;
+
+    visibility: hidden;
 }
 
 /* Keyboard event target */
 
 textarea#eventTarget {
-    position: absolute;
+    position: fixed;
    
     /* Hide offscreen */
     left: 0;