GUAC-809: Show OSK if selected within menu.

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']);

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

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;
+}

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=""/>

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",