safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-07 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-901: Add touch module and guacTouchDrag directive for handling drag gestures.

Browse Source
This commit is contained in:
Michael Jumper
2014-12-20 22:55:39 -08:00
parent bda9751bd9
commit 2623ba3196
1 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
guacamole/src/main/webapp/app/touch/directives/guacPan.js → guacamole/src/main/webapp/app/touch/directives/guacTouchDrag.js
View File

@@ -21,18 +21,17 @@
*/ */
/** /**
* A directive which allows handling of panning gestures on a particular * A directive which allows handling of drag gestures on a particular element.
* element.
*/ */
angular.module('touch').directive('guacPan', [function guacPan() { angular.module('touch').directive('guacTouchDrag', [function guacTouchDrag() {
return { return {
restrict: 'A', restrict: 'A',
scope: { scope: {
/** /**
* Called as during a panning gesture as the user's finger is * Called during a drag gesture as the user's finger is placed upon
* placed upon the element, moves, and is lifted from the element. * the element, moves, and is lifted from the element.
* *
* @event * @event
* @param {Boolean} inProgress * @param {Boolean} inProgress
@@ -42,10 +41,10 @@ angular.module('touch').directive('guacPan', [function guacPan() {
* false. * false.
* *
* @param {Number} startX * @param {Number} startX
* The X location at which the panning gesture began. * The X location at which the drag gesture began.
* *
* @param {Number} startY * @param {Number} startY
* The Y location at which the panning gesture began. * The Y location at which the drag gesture began.
* *
* @param {Number} currentX * @param {Number} currentX
* The current X location of the user's finger. * The current X location of the user's finger.
@@ -60,15 +59,19 @@ angular.module('touch').directive('guacPan', [function guacPan() {
* @param {Number} deltaY * @param {Number} deltaY
* The difference in Y location relative to the start of the * The difference in Y location relative to the start of the
* gesture. * gesture.
*
* @return {Boolean}
* false if the default action of the touch event should be
* prevented, any other value otherwise.
*/ */
guacPan : '=' guacTouchDrag : '='
}, },
link: function guacPan($scope, $element) { link: function guacTouchDrag($scope, $element) {
/** /**
* The element which will register the panning gesture. * The element which will register the drag gesture.
* *
* @type Element * @type Element
*/ */
@@ -127,7 +130,6 @@ angular.module('touch').directive('guacPan', [function guacPan() {
element.addEventListener("touchmove", function(e) { element.addEventListener("touchmove", function(e) {
if (e.touches.length === 1) { if (e.touches.length === 1) {
e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// Get touch location // Get touch location
@@ -151,10 +153,11 @@ angular.module('touch').directive('guacPan', [function guacPan() {
currentY = y; currentY = y;
} }
// Signal start/change in panning gesture // Signal start/change in drag gesture
if (inProgress && $scope.guacPan) { if (inProgress && $scope.guacTouchDrag) {
$scope.$apply(function panChanged() { $scope.$apply(function dragChanged() {
$scope.guacPan(true, startX, startY, currentX, currentY, deltaX, deltaY); if ($scope.guacTouchDrag(true, startX, startY, currentX, currentY, deltaX, deltaY) === false)
e.preventDefault();
}); });
} }
@@ -166,13 +169,13 @@ angular.module('touch').directive('guacPan', [function guacPan() {
if (startX && startY && e.touches.length === 0) { if (startX && startY && e.touches.length === 0) {
e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// Signal end of panning gesture // Signal end of drag gesture
if (inProgress && $scope.guacPan) { if (inProgress && $scope.guacTouchDrag) {
$scope.$apply(function panComplete() { $scope.$apply(function dragComplete() {
$scope.guacPan(true, startX, startY, currentX, currentY, deltaX, deltaY); if ($scope.guacTouchDrag(true, startX, startY, currentX, currentY, deltaX, deltaY === false))
e.preventDefault();
}); });
} }