safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-901: Add touch module and guacPan directive for handling panning gestures.

Browse Source
This commit is contained in:
Michael Jumper
2014-12-20 21:30:14 -08:00
parent 0e0a7f12d5
commit bda9751bd9
2 changed files with 218 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
guacamole/src/main/webapp/app/touch/directives/guacPan.js Normal file
View File

@@ -0,0 +1,192 @@
/*
* Copyright (C) 2014 Glyptodon LLC
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
/**
* A directive which allows handling of panning gestures on a particular
* element.
*/
angular.module('touch').directive('guacPan', [function guacPan() {
return {
restrict: 'A',
scope: {
/**
* Called as during a panning gesture as the user's finger is
* placed upon the element, moves, and is lifted from the element.
*
* @event
* @param {Boolean} inProgress
* Whether the gesture is currently in progress. This will
* always be true except when the gesture has ended, at which
* point one final call will occur with this parameter set to
* false.
*
* @param {Number} startX
* The X location at which the panning gesture began.
*
* @param {Number} startY
* The Y location at which the panning gesture began.
*
* @param {Number} currentX
* The current X location of the user's finger.
*
* @param {Number} currentY
* The current Y location of the user's finger.
*
* @param {Number} deltaX
* The difference in X location relative to the start of the
* gesture.
*
* @param {Number} deltaY
* The difference in Y location relative to the start of the
* gesture.
*/
guacPan : '='
},
link: function guacPan($scope, $element) {
/**
* The element which will register the panning gesture.
*
* @type Element
*/
var element = $element[0];
/**
* Whether a drag gesture is in progress.
*
* @type Boolean
*/
var inProgress = false;
/**
* The starting X location of the drag gesture.
*
* @type Number
*/
var startX = null;
/**
* The starting Y location of the drag gesture.
*
* @type Number
*/
var startY = null;
/**
* The current X location of the drag gesture.
*
* @type Number
*/
var currentX = null;
/**
* The current Y location of the drag gesture.
*
* @type Number
*/
var currentY = null;
/**
* The change in X relative to drag start.
*
* @type Number
*/
var deltaX = 0;
/**
* The change in X relative to drag start.
*
* @type Number
*/
var deltaY = 0;
// When there is exactly one touch, monitor the change in location
element.addEventListener("touchmove", function(e) {
if (e.touches.length === 1) {
e.preventDefault();
e.stopPropagation();
// Get touch location
var x = e.touches[0].clientX;
var y = e.touches[0].clientY;
// Init start location and deltas if gesture is starting
if (!startX || !startY) {
startX = currentX = x;
startY = currentY = y;
deltaX = 0;
deltaY = 0;
inProgress = true;
}
// Update deltas if gesture is in progress
else if (inProgress) {
deltaX = x - currentX;
deltaY = y - currentY;
currentX = x;
currentY = y;
}
// Signal start/change in panning gesture
if (inProgress && $scope.guacPan) {
$scope.$apply(function panChanged() {
$scope.guacPan(true, startX, startY, currentX, currentY, deltaX, deltaY);
});
}
}
}, false);
// Reset monitoring and fire end event when done
element.addEventListener("touchend", function(e) {
if (startX && startY && e.touches.length === 0) {
e.preventDefault();
e.stopPropagation();
// Signal end of panning gesture
if (inProgress && $scope.guacPan) {
$scope.$apply(function panComplete() {
$scope.guacPan(true, startX, startY, currentX, currentY, deltaX, deltaY);
});
}
startX = currentX = null;
startY = currentY = null;
deltaX = 0;
deltaY = 0;
inProgress = false;
}
}, false);
}
};
}]);

26
guacamole/src/main/webapp/app/touch/touchModule.js Normal file
View File

@@ -0,0 +1,26 @@
/*
* Copyright (C) 2014 Glyptodon LLC
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
/**
* Module for handling common touch gestures, like panning or pinch-to-zoom.
*/
angular.module('touch', []);