GUAC-685: Display text briefly, as it's typed.

guacamole/src/main/webapp/client.xhtml

@@ -48,7 +48,7 @@
             </div>
 
             <!-- Text input target -->
-            <div id="text-input"><textarea rows="1" id="target"></textarea></div>
+            <div id="text-input"><textarea rows="1" id="target"></textarea><div id="sent-overlay"></div></div>
             
         </div>
 

guacamole/src/main/webapp/scripts/client-ui.js

@@ -1379,6 +1379,40 @@ GuacUI.Client.attach = function(guac) {
 // One-time UI initialization
 (function() {
 
+    /**
+     * Keys which should be allowed through to the client when in text input
+     * mode, providing corresponding key events are received. Keys in this
+     * set will be allowed through to the server.
+     */
+    var IME_ALLOWED_KEYS = {
+            0xFF08: true, /* Backspace */
+            0xFF09: true, /* Tab */
+            0xFF0D: true, /* Enter */
+            0xFF1B: true, /* Escape */
+            0xFF50: true, /* Home */
+            0xFF51: true, /* Left */
+            0xFF52: true, /* Up */
+            0xFF53: true, /* Right */
+            0xFF54: true, /* Down */
+            0xFF57: true, /* End */
+            0xFF64: true, /* Insert */
+            0xFFBE: true, /* F1 */
+            0xFFBF: true, /* F2 */
+            0xFFC0: true, /* F3 */
+            0xFFC1: true, /* F4 */
+            0xFFC2: true, /* F5 */
+            0xFFC3: true, /* F6 */
+            0xFFC4: true, /* F7 */
+            0xFFC5: true, /* F8 */
+            0xFFC6: true, /* F9 */
+            0xFFC7: true, /* F10 */
+            0xFFC8: true, /* F11 */
+            0xFFC9: true, /* F12 */
+            0xFFE1: true, /* Left shift */
+            0xFFE2: true, /* Right shift */
+            0xFFFF: true  /* Delete */
+    };
+
     /*
      * Route document-level keyboard events to the client.
      */
@@ -1386,25 +1420,14 @@ GuacUI.Client.attach = function(guac) {
     var keyboard = new Guacamole.Keyboard(document);
     var show_keyboard_gesture_possible = true;
 
-    window.kb = keyboard;
-
     function __send_key(pressed, keysym) {
 
         // Do not send key if menu shown
         if (GuacUI.Client.isMenuShown())
             return true;
 
-        // Allow key events for specific keys if IME enabled
-        if (GuacUI.Client.ime_enabled
-            && keysym !== 0x0020  /* Space */
-            && keysym !== 0xFF08  /* Backspace */
-            && keysym !== 0xFF09  /* Tab */
-            && keysym !== 0xFF0D  /* Enter */
-            && keysym !== 0xFF51  /* Left */
-            && keysym !== 0xFF52  /* Up */
-            && keysym !== 0xFF53  /* Right */
-            && keysym !== 0xFF54  /* Down */
-            && keysym !== 0xFFFF) /* Delete */
+        // Allow all but specific keys through to browser when in IME mode
+        if (GuacUI.Client.ime_enabled && !IME_ALLOWED_KEYS[keysym])
             return true;
 
         GuacUI.Client.attachedClient.sendKeyEvent(pressed, keysym);
@@ -1935,12 +1958,25 @@ GuacUI.Client.attach = function(guac) {
      */
     function send_string(content) {
 
+        var sent_text = "";
+
         for (var i=0; i<content.length; i++) {
             var codepoint = content.charCodeAt(i);
-            if (codepoint !== 0x200B)
+            if (codepoint !== 0x200B) {
+                sent_text += String.fromCharCode(codepoint);
                 send_codepoint(codepoint);
+            }
         }
 
+        // Display the text that was sent
+        var notify_sent = GuacUI.createChildElement(GuacUI.Client.text_input, "div", "sent-text");
+        notify_sent.textContent = sent_text;
+
+        // Remove text after one second
+        window.setTimeout(function __remove_notify_sent() {
+            notify_sent.parentNode.removeChild(notify_sent);
+        }, 1000);
+
     }
 
     GuacUI.Client.target.onfocus = function() {
@@ -1955,6 +1991,7 @@ GuacUI.Client.attach = function(guac) {
 
     GuacUI.Client.target.onblur = function() {
         GuacUI.Client.ime_enabled = false;
+        GuacUI.Client.target.focus();
     };
 
     // Track state of composition

guacamole/src/main/webapp/styles/client.css

@@ -679,6 +679,22 @@ p.hint {
     font-size: 2em;
 }
 
+/**
+ * off-to-the-ether: Move away and disappear
+ */
+@keyframes off-to-the-ether {
+    from { left: 0;      opacity: 1; }
+    to   { left: -200px; opacity: 0; }
+}
+@-moz-keyframes off-to-the-ether {
+    from { left: 0;      opacity: 1; }
+    to   { left: -200px; opacity: 0; }
+}
+@-webkit-keyframes off-to-the-ether {
+    from { left: 0;      opacity: 1; }
+    to   { left: -200px; opacity: 0; }
+}
+
 #text-input {
     display: none;
     position: fixed;
@@ -696,11 +712,13 @@ p.hint {
     display: inline-block;
     vertical-align: bottom;
     text-align: center;
+    font-size: 12pt;
     width: 100%;
     height: auto;
     resize: none;
 
     margin: 0;
+    padding: 0.25em;
     opacity: 0.75;
     background: #CDA;
 
@@ -710,6 +728,20 @@ p.hint {
     display: block;
 }
 
+#text-input .sent-text {
+    position: absolute;
+    bottom: 0;
+    left: -200px;
+    width: 100%;
+    white-space: pre;
+    animation: off-to-the-ether 1s linear;
+    -webkit-animation: off-to-the-ether 1s linear;
+    opacity: 0;
+    text-align: center;
+    font-size: 12pt;
+    padding: 0.25em;
+}
+
 .notification.message {
     background: #DFD;
     animation: fadein 0.125s linear, fadeout 2s 3s linear;