GUAC-955: Add element module and guacScroll directive. Refactor guacFocus to element module. Use guacScroll to update menu scroll during drag.

This commit is contained in:
Michael Jumper
2014-12-28 14:47:04 -08:00
parent 04dee83802
commit d3e4a5307c
8 changed files with 203 additions and 9 deletions

View File

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

View File

@@ -26,6 +26,14 @@
angular.module('home').controller('clientController', ['$scope', '$routeParams', '$injector',
function clientController($scope, $routeParams, $injector) {
// Required types
var ClientProperties = $injector.get('ClientProperties');
var ScrollState = $injector.get('ScrollState');
// Required services
var connectionGroupService = $injector.get('connectionGroupService');
var connectionService = $injector.get('connectionService');
/**
* The minimum number of pixels a drag gesture must move to result in the
* menu being shown or hidden.
@@ -156,11 +164,6 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
remaining: 15
};
// Get services for reading connections and groups
var connectionGroupService = $injector.get('connectionGroupService');
var connectionService = $injector.get('connectionService');
var ClientProperties = $injector.get('ClientProperties');
// Client settings and state
$scope.clientProperties = new ClientProperties();
@@ -178,6 +181,13 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
$scope.menuShown = false;
};
/**
* The current scroll state of the menu.
*
* @type ScrollState
*/
$scope.menuScrollState = new ScrollState();
// Update the model when clipboard data received from client
$scope.$on('guacClientClipboard', function clientClipboardListener(event, client, mimetype, clipboardData) {
$scope.clipboardData = clipboardData;
@@ -228,10 +238,19 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
// Hide menu when the user swipes from the right
$scope.menuDrag = function menuDrag(inProgress, startX, startY, currentX, currentY, deltaX, deltaY) {
// Hide menu if swipe gesture is detected
if (Math.abs(currentY - startY) < MENU_DRAG_VERTICAL_TOLERANCE
&& startX - currentX >= MENU_DRAG_DELTA)
$scope.menuShown = false;
// Scroll menu by default
else {
$scope.menuScrollState.left -= deltaX;
$scope.menuScrollState.top -= deltaY;
}
return false;
};
// Update menu or client based on dragging gestures

View File

@@ -56,7 +56,7 @@
</guac-viewport>
<!-- Menu -->
<div ng-class="{open: menuShown}" id="menu" guac-touch-drag="menuDrag">
<div ng-class="{open: menuShown}" id="menu" guac-touch-drag="menuDrag" guac-scroll="menuScrollState">
<h2>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h2>
<div class="content" id="clipboard-settings">
<p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>