GUAC-901: Show/hide menu depending on swipe. Pan display via drag gestures. Fix missing input method IDs.

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', 'osk', 'rest', 'textInput']);
+angular.module('client', ['auth', 'history', 'osk', 'rest', 'textInput', 'touch']);

guacamole/src/main/webapp/app/client/controllers/clientController.js

@@ -26,6 +26,30 @@
 angular.module('home').controller('clientController', ['$scope', '$routeParams', '$injector',
         function clientController($scope, $routeParams, $injector) {
 
+    /**
+     * The minimum number of pixels a drag gesture must move to result in the
+     * menu being shown or hidden.
+     *
+     * @type Number
+     */
+    var MENU_DRAG_DELTA = 64;
+
+    /**
+     * The maximum X location of the start of a drag gesture for that gesture
+     * to potentially show the menu.
+     *
+     * @type Number
+     */
+    var MENU_DRAG_MARGIN = 64;
+
+    /**
+     * When showing or hiding the menu via a drag gesture, the maximum number
+     * of pixels the touch can move vertically and still affect the menu.
+     * 
+     * @type Number
+     */
+    var MENU_DRAG_VERTICAL_TOLERANCE = 10;
+
     /*
      * In order to open the guacamole menu, we need to hit ctrl-alt-shift. There are
      * several possible keysysms for each key.
@@ -201,6 +225,37 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
         return true;
     }
 
+    // Hide menu when the user swipes from the right
+    $scope.menuDrag = function menuDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) {
+
+        if (Math.abs(currentY - startY)  <  MENU_DRAG_VERTICAL_TOLERANCE
+                  && startX   - currentX >= MENU_DRAG_DELTA)
+            $scope.menuShown = false;
+
+    };
+
+    // Update menu or client based on dragging gestures
+    $scope.clientDrag = function clientDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) {
+
+        // Show menu if the user swipes from the left
+        if (startX <= MENU_DRAG_MARGIN) {
+
+            if (Math.abs(currentY - startY) <  MENU_DRAG_VERTICAL_TOLERANCE
+                      && currentX - startX  >= MENU_DRAG_DELTA)
+                $scope.menuShown = true;
+
+        }
+
+        // Scroll display if absolute mouse is in use
+        else if ($scope.clientProperties.emulateAbsoluteMouse) {
+            $scope.clientProperties.scrollLeft -= deltaX;
+            $scope.clientProperties.scrollTop -= deltaY;
+        }
+
+        return false;
+
+    };
+
     // Show/hide UI elements depending on input method
     $scope.$watch('inputMethod', function setInputMethod(inputMethod) {
 

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

@@ -35,6 +35,7 @@ div.main {
     width: 100%;
     height: 100%;
     position: relative;
+    font-size: 0px;
 }
 
 .resize-sensor {

guacamole/src/main/webapp/app/client/templates/client.html

@@ -24,7 +24,7 @@
 <div class="client-view">
 
     <!-- Central portion of view -->
-    <div class="client-body">
+    <div class="client-body" guac-touch-drag="clientDrag">
 
         <!-- Client -->
         <guac-client 
@@ -52,7 +52,7 @@
 </div>
 
 <!-- Menu -->
-<div ng-class="{open: menuShown}" id="menu">
+<div ng-class="{open: menuShown}" id="menu" guac-touch-drag="menuDrag">
     <h2>{{'client.clipboard' | translate}}</h2>
     <div class="content" id="clipboard-settings">
         <p class="description">{{'client.copiedText' | translate}}</p>
@@ -64,20 +64,20 @@
 
         <!-- No IME -->
         <div class="choice">
-            <label><input name="input-method" ng-change="closeMenu()" ng-model="inputMethod" type="radio" value="none"/> {{'client.none' | translate}}</label>
+            <label><input id="ime-none" 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()" ng-model="inputMethod" type="radio" value="text"/> {{'client.textInput' | translate}}</label>
+            <label><input id="ime-text" 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()" ng-model="inputMethod" type="radio" value="osk"/> {{'client.osk' | translate}}</label>
+            <label><input id="ime-osk" 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>