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

GUAC-324: Generalize GuacUI.Client.Pan to GuacUI.Client.Drag. Use drag object to handle both swiping and panning gestures.

Browse Source
This commit is contained in:
Michael Jumper
2014-04-19 17:26:42 -07:00
parent 06139e19a0
commit 60c2ac6630
1 changed files with 71 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
guacamole/src/main/webapp/scripts/client-ui.js
View File

@@ -420,74 +420,72 @@ GuacUI.Client.ModalStatus = function(title_text, text, classname, reconnect) {
GuacUI.Client.ModalStatus.prototype = new GuacUI.Component(); GuacUI.Client.ModalStatus.prototype = new GuacUI.Component();
/** /**
* Monitors a given element for touch events, firing pan-specific events * Monitors a given element for touch events, firing drag-specific events
* based on pre-defined gestures. * based on pre-defined gestures.
* *
* @constructor * @constructor
* @param {Element} element The element to monitor for touch events. * @param {Element} element The element to monitor for touch events.
*/ */
GuacUI.Client.Pan = function(element) { GuacUI.Client.Drag = function(element) {
/** /**
* Reference to this pan instance. * Reference to this drag instance.
* @private * @private
*/ */
var guac_pan = this; var guac_drag = this;
/** /**
* The starting X location of the pan gesture. * The starting X location of the drag gesture.
* @private
*/ */
var start_x = null; this.start_x = null;
/** /**
* The starting Y location of the pan gesture. * The starting Y location of the drag gesture.
* @private
*/ */
var start_y = null; this.start_y = null;
/** /**
* The change in X relative to pan start. * The change in X relative to drag start.
*/ */
this.delta_x = 0; this.delta_x = 0;
/** /**
* The change in X relative to pan start. * The change in X relative to drag start.
*/ */
this.delta_y = 0; this.delta_y = 0;
/** /**
* Called when a pan gesture begins. * Called when a drag gesture begins.
* *
* @event * @event
* @param {Number} x The relative change in X location relative to * @param {Number} x The relative change in X location relative to
* pan start. For pan start, this will ALWAYS be 0. * drag start. For drag start, this will ALWAYS be 0.
* @param {Number} y The relative change in Y location relative to * @param {Number} y The relative change in Y location relative to
* pan start. For pan start, this will ALWAYS be 0. * drag start. For drag start, this will ALWAYS be 0.
*/ */
this.onpanstart = null; this.ondragstart = null;
/** /**
* Called when the pan amount changes. * Called when the drag amount changes.
* *
* @event * @event
* @param {Number} x The relative change in X location relative to * @param {Number} x The relative change in X location relative to
* pan start. * drag start.
* @param {Number} y The relative change in Y location relative to * @param {Number} y The relative change in Y location relative to
* pan start. * drag start.
*/ */
this.onpanchange = null; this.ondragchange = null;
/** /**
* Called when a pan gesture ends. * Called when a drag gesture ends.
* *
* @event * @event
* @param {Number} x The relative change in X location relative to * @param {Number} x The relative change in X location relative to
* pan start. * drag start.
* @param {Number} y The relative change in Y location relative to * @param {Number} y The relative change in Y location relative to
* pan start. * drag start.
*/ */
this.onpanend = null; this.ondragend = null;
// When there is exactly one touch, monitor the change in location // When there is exactly one touch, monitor the change in location
element.addEventListener("touchmove", function(e) { element.addEventListener("touchmove", function(e) {
@@ -501,20 +499,20 @@ GuacUI.Client.Pan = function(element) {
var y = e.touches[0].clientY; var y = e.touches[0].clientY;
// If gesture just starting, fire zoom start // If gesture just starting, fire zoom start
if (!start_x || !start_y) { if (!guac_drag.start_x || !guac_drag.start_y) {
start_x = x; guac_drag.start_x = x;
start_y = y; guac_drag.start_y = y;
guac_pan.delta_x = 0; guac_drag.delta_x = 0;
guac_pan.delta_y = 0; guac_drag.delta_y = 0;
if (guac_pan.onpanstart) if (guac_drag.ondragstart)
guac_pan.onpanstart(guac_pan.delta_x, guac_pan.delta_y); guac_drag.ondragstart(guac_drag.delta_x, guac_drag.delta_y);
} }
// Otherwise, notify of zoom change // Otherwise, notify of zoom change
else if (guac_pan.onpanchange) { else if (guac_drag.ondragchange) {
guac_pan.delta_x = x - start_x; guac_drag.delta_x = x - guac_drag.start_x;
guac_pan.delta_y = y - start_y; guac_drag.delta_y = y - guac_drag.start_y;
guac_pan.onpanchange(guac_pan.delta_x, guac_pan.delta_y); guac_drag.ondragchange(guac_drag.delta_x, guac_drag.delta_y);
} }
} }
@@ -523,18 +521,18 @@ GuacUI.Client.Pan = function(element) {
// Reset monitoring and fire end event when done // Reset monitoring and fire end event when done
element.addEventListener("touchend", function(e) { element.addEventListener("touchend", function(e) {
if (start_x && start_y && e.touches.length === 0) { if (guac_drag.start_x && guac_drag.start_y && e.touches.length === 0) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (guac_pan.onpanend) if (guac_drag.ondragend)
guac_pan.onpanend(); guac_drag.ondragend();
start_x = null; guac_drag.start_x = null;
start_y = null; guac_drag.start_y = null;
guac_pan.delta_x = 0; guac_drag.delta_x = 0;
guac_pan.delta_y = 0; guac_drag.delta_y = 0;
} }
@@ -1182,27 +1180,44 @@ GuacUI.Client.attach = function(guac) {
}; };
/* /*
* Touch panning * Touch panning/swiping
*/ */
var guac_pan = new GuacUI.Client.Pan(document.body); var guac_drag = new GuacUI.Client.Drag(document.body);
var last_pan_dx = 0; var is_swipe = false;
var last_pan_dy = 0; var last_drag_dx = 0;
var last_drag_dy = 0;
guac_drag.ondragstart = function(dx, dy) {
last_drag_dx = dx;
last_drag_dy = dy;
// If dragging from far left, consider gesture to be a swipe
is_swipe = (guac_drag.start_x <= 32 && !touch.currentState.left);
guac_pan.onpanstart = function(dx, dy) {
last_pan_dx = dx;
last_pan_dy = dy;
}; };
guac_pan.onpanchange = function(dx, dy) { guac_drag.ondragchange = function(dx, dy) {
if (!touch.currentState.left) { if (!touch.currentState.left) {
var change_pan_dx = dx - last_pan_dx;
var change_pan_dy = dy - last_pan_dy; // If swiping, show menu when swiped far enough
GuacUI.Client.main.scrollLeft -= change_pan_dx; if (is_swipe) {
GuacUI.Client.main.scrollTop -= change_pan_dy; if (!GuacUI.Client.isMenuShown() && dx >= 64)
last_pan_dx = dx; GuacUI.Client.showMenu();
last_pan_dy = dy; }
// Otherwise, drag UI
else {
var change_drag_dx = dx - last_drag_dx;
var change_drag_dy = dy - last_drag_dy;
GuacUI.Client.main.scrollLeft -= change_drag_dx;
GuacUI.Client.main.scrollTop -= change_drag_dy;
last_drag_dx = dx;
last_drag_dy = dy;
}
} }
}; };