From d8f68c60487f166e6c37d5ab7c967a8daa46e326 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Mon, 12 Nov 2012 13:14:17 -0800 Subject: [PATCH] Move OSK into new client-ui, partially refactor Ctrl-Alt-Shift shortcut. --- guacamole/src/main/webapp/client.xhtml | 3 - .../src/main/webapp/scripts/client-ui.js | 78 +++++++++++++++++++ .../src/main/webapp/scripts/interface.js | 64 +-------------- guacamole/src/main/webapp/styles/keyboard.css | 3 +- 4 files changed, 81 insertions(+), 67 deletions(-) diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml index f141685c4..93a12f70f 100644 --- a/guacamole/src/main/webapp/client.xhtml +++ b/guacamole/src/main/webapp/client.xhtml @@ -40,9 +40,6 @@ - -
-
diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js index f6cd4a0e0..f41129660 100644 --- a/guacamole/src/main/webapp/scripts/client-ui.js +++ b/guacamole/src/main/webapp/scripts/client-ui.js @@ -363,6 +363,84 @@ GuacUI.StateManager.registerComponent( GuacUI.Client.states.PAN_TYPING ); +/** + * On-screen Keyboard. This component provides a clickable/touchable keyboard + * which sends key events to the Guacamole client. + * + * @constructor + * @augments GuacUI.Component + */ +GuacUI.Client.OnScreenKeyboard = function() { + + /** + * Event target. This is a hidden textarea element which will receive + * key events. + * @private + */ + var keyboard_container = GuacUI.createElement("div", "keyboard-container"); + + var keyboard_resize_interval = null; + + // On-screen keyboard + var keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml"); + keyboard_container.appendChild(keyboard.getElement()); + + var last_keyboard_width = 0; + + // Function for automatically updating keyboard size + function updateKeyboardSize() { + var currentSize = keyboard.getElement().offsetWidth; + if (last_keyboard_width != currentSize) { + keyboard.resize(currentSize); + last_keyboard_width = currentSize; + } + } + + keyboard.onkeydown = function(keysym) { + GuacamoleUI.client.sendKeyEvent(1, keysym); + }; + + keyboard.onkeyup = function(keysym) { + GuacamoleUI.client.sendKeyEvent(0, keysym); + }; + + + this.show = function() { + + // Show keyboard + document.body.appendChild(keyboard_container); + + // Start periodic update of keyboard size + keyboard_resize_interval = window.setInterval( + updateKeyboardSize, + GuacUI.Client.KEYBOARD_AUTO_RESIZE_INTERVAL); + + updateKeyboardSize(); + + }; + + this.hide = function() { + + // Hide keyboard + document.body.removeChild(keyboard_container); + window.clearInterval(keyboard_resize_interval); + + }; + +}; + +GuacUI.Client.OnScreenKeyboard.prototype = new GuacUI.Component(); + +/* + * Show on-screen keyboard during OSK mode only. + */ + +GuacUI.StateManager.registerComponent( + new GuacUI.Client.OnScreenKeyboard(), + GuacUI.Client.states.OSK +); + + /* * Set initial state */ diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js index ac33eb4de..99bdd35e5 100644 --- a/guacamole/src/main/webapp/scripts/interface.js +++ b/guacamole/src/main/webapp/scripts/interface.js @@ -37,8 +37,7 @@ var GuacamoleUI = { }, "containers": { - "state" : document.getElementById("statusDialog"), - "keyboard" : document.getElementById("keyboardContainer") + "state" : document.getElementById("statusDialog") }, "state" : document.getElementById("statusText"), @@ -59,56 +58,6 @@ GuacamoleUI.supportedAudio = []; */ GuacamoleUI.supportedVideo = []; -// On-screen keyboard -GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml"); -GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard.getElement()); - -GuacamoleUI.lastKeyboardWidth = 0; - -// Function for automatically updating keyboard size -GuacamoleUI.updateKeyboardSize = function() { - var currentSize = GuacamoleUI.keyboard.getElement().offsetWidth; - if (GuacamoleUI.lastKeyboardWidth != currentSize) { - GuacamoleUI.keyboard.resize(currentSize); - GuacamoleUI.lastKeyboardWidth = currentSize; - } -}; - -GuacamoleUI.keyboardResizeInterval = null; - -// Show/Hide keyboard -GuacamoleUI.toggleKeyboard = function() { - - // If Guac OSK shown, hide it. - var displayed = GuacamoleUI.containers.keyboard.style.display; - if (displayed == "block") { - - // Hide keyboard - GuacamoleUI.containers.keyboard.style.display = "none"; - - // Stop automatic periodic update - window.clearInterval(GuacamoleUI.keyboardResizeInterval); - - } - - // Otherwise, show it - else { - - // Show keyboard - GuacamoleUI.containers.keyboard.style.display = "block"; - - // Start periodic update of keyboard size - GuacamoleUI.keyboardResizeInterval = window.setInterval( - GuacamoleUI.updateKeyboardSize, - GuacamoleUI.KEYBOARD_AUTO_RESIZE_INTERVAL); - - // Update keyboard size initially - GuacamoleUI.updateKeyboardSize(); - - } - -}; - // If Node.classList is supported, implement addClass/removeClass using that if (Node.classList) { @@ -350,7 +299,7 @@ GuacamoleUI.attach = function(guac) { // conditions satisfied if (show_keyboard_gesture_possible && keysym == 0xFFE1) { if (keyboard.pressed[0xFFE3] && keyboard.pressed[0xFFE9]) - GuacamoleUI.toggleKeyboard(); + GuacUI.StateManager.setState(GuacUI.Client.states.OSK); } // Detect if no keys are pressed @@ -366,14 +315,6 @@ GuacamoleUI.attach = function(guac) { }; - GuacamoleUI.keyboard.onkeydown = function(keysym) { - guac.sendKeyEvent(1, keysym); - }; - - GuacamoleUI.keyboard.onkeyup = function(keysym) { - guac.sendKeyEvent(0, keysym); - }; - function isTypableCharacter(keysym) { return (keysym & 0xFFFF00) != 0xFF00; } @@ -525,7 +466,6 @@ GuacamoleUI.attach = function(guac) { guac.sendSize(window.innerWidth, window.innerHeight); updateDisplayScale(); - GuacamoleUI.updateKeyboardSize(); }; diff --git a/guacamole/src/main/webapp/styles/keyboard.css b/guacamole/src/main/webapp/styles/keyboard.css index 551acbaad..d2608cd75 100644 --- a/guacamole/src/main/webapp/styles/keyboard.css +++ b/guacamole/src/main/webapp/styles/keyboard.css @@ -17,7 +17,7 @@ * along with this program. If not, see . */ -#keyboardContainer { +.keyboard-container { text-align: center; position: fixed; @@ -31,7 +31,6 @@ background: #222; opacity: 0.85; - display: none; z-index: 1; }