From 1e39ff756963b8c717e04701081e01f98d235106 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Thu, 18 Dec 2014 05:01:51 -0800
Subject: [PATCH] GUAC-809: Show OSK if selected within menu.

---
 .../src/main/webapp/app/client/clientModule.js      |  2 +-
 .../app/client/controllers/clientController.js      | 13 ++++++++++++-
 .../src/main/webapp/app/client/styles/keyboard.css  |  5 +++++
 .../main/webapp/app/client/templates/client.html    | 11 ++++++++---
 guacamole/src/main/webapp/translations/en_US.json   |  1 +
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/guacamole/src/main/webapp/app/client/clientModule.js b/guacamole/src/main/webapp/app/client/clientModule.js
index c27957115..944189dd4 100644
--- a/guacamole/src/main/webapp/app/client/clientModule.js
+++ b/guacamole/src/main/webapp/app/client/clientModule.js
@@ -23,4 +23,4 @@
 /**
  * The module for code used to connect to a connection or balancing group.
  */
-angular.module('client', ['auth', 'history', 'rest']);
+angular.module('client', ['auth', 'history', 'osk', 'rest']);
diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js
index 5e134f64d..ec2690ee6 100644
--- a/guacamole/src/main/webapp/app/client/controllers/clientController.js
+++ b/guacamole/src/main/webapp/app/client/controllers/clientController.js
@@ -145,7 +145,10 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
     
     // Hide menu by default
     $scope.menuShown = false;
-    
+
+    // Use physical keyboard by default
+    $scope.inputMethod = 'none';
+
     // Convenience method for closing the menu
     $scope.closeMenu = function closeMenu() {
         $scope.menuShown = false;
@@ -198,6 +201,14 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         return true;
     }
 
+    // Show/hide UI elements depending on input method
+    $scope.$watch('inputMethod', function setInputMethod(inputMethod) {
+
+        // Show on-screen keyboard only if selected
+        $scope.showOSK = (inputMethod === 'osk');
+
+    });
+
     $scope.$watch('menuShown', function setKeyboardEnabled(menuShown, menuShownPreviousState) {
         
         // Send clipboard data if menu is hidden
diff --git a/guacamole/src/main/webapp/app/client/styles/keyboard.css b/guacamole/src/main/webapp/app/client/styles/keyboard.css
index 49508d3c9..270153a4d 100644
--- a/guacamole/src/main/webapp/app/client/styles/keyboard.css
+++ b/guacamole/src/main/webapp/app/client/styles/keyboard.css
@@ -34,5 +34,10 @@
     background: #222;
     opacity: 0.85;
 
+    visibility: hidden;
     z-index: 1;
 }
+
+.keyboard-container.shown {
+    visibility: visible;
+}
diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html
index 4402a0bbc..460e71641 100644
--- a/guacamole/src/main/webapp/app/client/templates/client.html
+++ b/guacamole/src/main/webapp/app/client/templates/client.html
@@ -48,20 +48,20 @@
 
             <!-- No IME -->
             <div class="choice">
-                <label><input name="input-method" ng-change="closeMenu()" type="radio" value="ime-none" id="ime-none"/> {{'client.none' | translate}}</label>
+                <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="none"/> {{'client.none' | translate}}</label>
                 <p class="caption"><label for="ime-none">{{'client.noneDesc' | translate}}</label></p>
             </div>
 
             <!-- Text input -->
             <div class="choice">
                 <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
-                <label><input name="input-method" ng-change="closeMenu()" type="radio" value="ime-text" id="ime-text"/> {{'client.textInput' | translate}}</label>
+                <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="text"/> {{'client.textInput' | translate}}</label>
                 <p class="caption"><label for="ime-text">{{'client.textInputDesc' | translate}} </label></p>
             </div>
 
             <!-- Guac OSK -->
             <div class="choice">
-                <label><input name="input-method" ng-change="closeMenu()" type="radio" value="ime-osk" id="ime-osk"/> {{'client.osk' | translate}}</label>
+                <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="osk"/> {{'client.osk' | translate}}</label>
                 <p class="caption"><label for="ime-osk">{{'client.oskDesc' | translate}}</label></p>
             </div>
 
@@ -103,6 +103,11 @@
         
     </div>
 
+    <!-- On-screen keyboard -->
+    <div class="keyboard-container" ng-class="{shown: showOSK}">
+        <guac-osk layout="'client.oskLayout' | translate"/>
+    </div>
+
     <!-- Images which should be preloaded -->
     <div id="preload">
         <img src="images/action-icons/guac-close.png" alt=""/>
diff --git a/guacamole/src/main/webapp/translations/en_US.json b/guacamole/src/main/webapp/translations/en_US.json
index fd7f20e06..16d282093 100644
--- a/guacamole/src/main/webapp/translations/en_US.json
+++ b/guacamole/src/main/webapp/translations/en_US.json
@@ -206,6 +206,7 @@
         }
     },
     "client": {
+        "oskLayout"         : "layouts/en-us-qwerty.xml",
         "ctrl"              : "Ctrl",
         "alt"               : "Alt",
         "esc"               : "Esc",