Alter viewportClone into actual scrollable viewport, where all previously fixed elements are now absolute. Fixes issues on iPad and other tablets where reflowing of page did not reflow touch areas. Fixes issue where typing via native OSK automatically scrolled up to the top of the view.

This commit is contained in:
Michael Jumper
2012-04-06 11:53:32 -07:00
parent aaf72463b1
commit 936e47911a
2 changed files with 18 additions and 13 deletions

View File

@@ -57,20 +57,20 @@
<!-- Keyboard event target for platforms with native OSKs --> <!-- Keyboard event target for platforms with native OSKs -->
<textarea id="eventTarget"></textarea> <textarea id="eventTarget"></textarea>
<!-- Display -->
<div id="display">
<!-- Menu trigger --> <!-- Menu trigger -->
<div id="menuControl"></div> <div id="menuControl"></div>
<!-- Scrollable viewport -->
<div id="viewport">
<!-- Display -->
<div id="display"></div>
</div> </div>
<!-- On-screen keyboard --> <!-- On-screen keyboard -->
<div id="keyboardContainer"></div> <div id="keyboardContainer"></div>
<!-- Dimensional clone of viewport -->
<div id="viewportClone"/>
<!-- Dialogs --> <!-- Dialogs -->
<div class="dialogOuter"> <div class="dialogOuter">
<div class="dialogMiddle"> <div class="dialogMiddle">

View File

@@ -23,7 +23,7 @@ var GuacamoleUI = {
/* UI Elements */ /* UI Elements */
"viewport" : document.getElementById("viewportClone"), "viewport" : document.getElementById("viewport"),
"display" : document.getElementById("display"), "display" : document.getElementById("display"),
"menu" : document.getElementById("menu"), "menu" : document.getElementById("menu"),
"menuControl" : document.getElementById("menuControl"), "menuControl" : document.getElementById("menuControl"),
@@ -464,9 +464,13 @@ GuacamoleUI.attach = function(guac) {
mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
function(mouseState) { function(mouseState) {
// Get current viewport scroll
var scroll_x = GuacamoleUI.viewport.scrollLeft;
var scroll_y = GuacamoleUI.viewport.scrollTop;
// Determine mouse position within view // Determine mouse position within view
var mouse_view_x = mouseState.x + guac_display.offsetLeft - window.pageXOffset; var mouse_view_x = mouseState.x + guac_display.offsetLeft - scroll_x;
var mouse_view_y = mouseState.y + guac_display.offsetTop - window.pageYOffset; var mouse_view_y = mouseState.y + guac_display.offsetTop - scroll_y;
// Determine viewport dimensioins // Determine viewport dimensioins
var view_width = GuacamoleUI.viewport.offsetWidth; var view_width = GuacamoleUI.viewport.offsetWidth;
@@ -491,7 +495,8 @@ GuacamoleUI.attach = function(guac) {
scroll_amount_y = 0; scroll_amount_y = 0;
// Scroll (if necessary) to keep mouse on screen. // Scroll (if necessary) to keep mouse on screen.
window.scrollBy(scroll_amount_x, scroll_amount_y); GuacamoleUI.viewport.scrollLeft += scroll_amount_x;
GuacamoleUI.viewport.scrollTop += scroll_amount_y;
// Send mouse event // Send mouse event
guac.sendMouseState(mouseState); guac.sendMouseState(mouseState);