Implement touch-specific menu.

This commit is contained in:
Michael Jumper
2012-04-08 15:56:11 -07:00
parent 877bcfea13
commit 5384de93e8
6 changed files with 61 additions and 24 deletions

View File

@@ -84,6 +84,19 @@
</div> </div>
</div> </div>
<!-- Touch-specific menu -->
<div class="dialogOuter">
<div class="dialogMiddle">
<div id="touchMenu">
<img id="touchShowClipboard" src="images/menu-icons/tango/edit-paste.png"/>
<img id="touchShowKeyboard" src="images/menu-icons/tango/input-keyboard.png"/>
<img id="touchLogout" src="images/menu-icons/tango/system-log-out.png"/>
</div>
</div>
</div>
<!-- guacamole-common-js scripts --> <!-- guacamole-common-js scripts -->
<script type="text/javascript" src="guacamole-common-js/keyboard.js"></script> <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
<script type="text/javascript" src="guacamole-common-js/mouse.js"></script> <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

View File

@@ -37,7 +37,11 @@ var GuacamoleUI = {
"showKeyboard" : document.getElementById("showKeyboard"), "showKeyboard" : document.getElementById("showKeyboard"),
"ctrlAltDelete": document.getElementById("ctrlAltDelete"), "ctrlAltDelete": document.getElementById("ctrlAltDelete"),
"reconnect" : document.getElementById("reconnect"), "reconnect" : document.getElementById("reconnect"),
"logout" : document.getElementById("logout") "logout" : document.getElementById("logout"),
"touchShowClipboard" : document.getElementById("touchShowClipboard"),
"touchShowKeyboard" : document.getElementById("touchShowKeyboard"),
"touchLogout" : document.getElementById("touchLogout")
}, },
@@ -133,6 +137,14 @@ var GuacamoleUI = {
GuacamoleUI.display.style.opacity = "0.1"; GuacamoleUI.display.style.opacity = "0.1";
}; };
GuacamoleUI.hideTouchMenu = function() {
GuacamoleUI.touchMenu.style.visibility = "hidden";
};
GuacamoleUI.showTouchMenu = function() {
GuacamoleUI.touchMenu.style.visibility = "visible";
};
GuacamoleUI.shadeMenu = function() { GuacamoleUI.shadeMenu = function() {
if (!menu_shaded) { if (!menu_shaded) {
@@ -212,8 +224,10 @@ var GuacamoleUI = {
}; };
// Assume no native OSK by default GuacamoleUI.buttons.touchShowClipboard.onclick = function() {
GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_GUAC; // FIXME: Implement
alert("Not yet implemented... Sorry.");
};
// Show/Hide keyboard // Show/Hide keyboard
var keyboardResizeInterval = null; var keyboardResizeInterval = null;
@@ -228,23 +242,10 @@ var GuacamoleUI = {
window.onresize = null; window.onresize = null;
window.clearInterval(keyboardResizeInterval); window.clearInterval(keyboardResizeInterval);
} }
// If not shown ... action depends on OSK mode. // Otherwise, show it
else { else {
// If we think the platform has a native OSK, use the event target to
// cause it to display.
if (GuacamoleUI.oskMode == GuacamoleUI.OSK_MODE_NATIVE) {
// ...but use the Guac OSK if clicked again
GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_GUAC;
// Try to show native OSK by focusing eventTarget.
GuacamoleUI.eventTarget.focus();
return;
}
// Ensure event target is NOT focused if we are using the Guac OSK. // Ensure event target is NOT focused if we are using the Guac OSK.
GuacamoleUI.eventTarget.blur(); GuacamoleUI.eventTarget.blur();
@@ -253,18 +254,30 @@ var GuacamoleUI = {
// Automatically update size // Automatically update size
window.onresize = updateKeyboardSize; window.onresize = updateKeyboardSize;
keyboardResizeInterval = window.setInterval(updateKeyboardSize, GuacamoleUI.KEYBOARD_AUTO_RESIZE_INTERVAL); keyboardResizeInterval = window.setInterval(updateKeyboardSize,
GuacamoleUI.KEYBOARD_AUTO_RESIZE_INTERVAL);
updateKeyboardSize(); updateKeyboardSize();
} }
}; };
// Touch-specific keyboard show
GuacamoleUI.buttons.touchShowKeyboard.ontouchstart =
GuacamoleUI.buttons.touchShowKeyboard.onclick =
function(e) {
GuacamoleUI.eventTarget.focus();
GuacamoleUI.hideTouchMenu();
e.preventDefault();
};
// Logout // Logout
GuacamoleUI.buttons.logout.onclick = function() { GuacamoleUI.buttons.logout.onclick =
window.location.href = "logout"; GuacamoleUI.buttons.touchLogout.onclick =
}; function() {
window.location.href = "logout";
};
// Timeouts for detecting if users wants menu to open or close // Timeouts for detecting if users wants menu to open or close
var detectMenuOpenTimeout = null; var detectMenuOpenTimeout = null;
@@ -350,7 +363,7 @@ var GuacamoleUI = {
// Assume native OSK if menu shown via long-press // Assume native OSK if menu shown via long-press
GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_NATIVE; GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_NATIVE;
GuacamoleUI.showMenu(); GuacamoleUI.showTouchMenu();
}, GuacamoleUI.LONG_PRESS_DETECT_TIMEOUT); }, GuacamoleUI.LONG_PRESS_DETECT_TIMEOUT);
@@ -367,6 +380,7 @@ var GuacamoleUI = {
// Close menu if shown // Close menu if shown
GuacamoleUI.shadeMenu(); GuacamoleUI.shadeMenu();
GuacamoleUI.hideTouchMenu();
// Record touch location // Record touch location
if (e.touches.length == 1) { if (e.touches.length == 1) {

View File

@@ -255,4 +255,14 @@ textarea#eventTarget {
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
}
/* Touch-specific menu */
div#touchMenu {
display: inline-block;
background: black;
border: 1px solid silver;
padding: 1em;
opacity: 0.8;
} }