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

Further cleanup. Implement long-press for right click.

Browse Source
This commit is contained in:
Michael Jumper
2014-03-04 16:31:46 -08:00
parent e54d164113
commit 462525c08c
1 changed files with 143 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
guacamole-common-js/src/main/webapp/modules/Mouse.js
View File

@@ -700,22 +700,33 @@ Guacamole.Mouse.Touchscreen = function(element) {
var guac_touchscreen = this;
/**
* The start X location of a click (tap) gesture.
* @private
* Whether a gesture is known to be in progress. If false, touch events
* will be ignored.
*/
var click_start_x = null;
var gesture_in_progress = false;
/**
* The start Y location of a click (tap) gesture.
* The start X location of a gesture.
* @private
*/
var click_start_y = null;
var gesture_start_x = null;
/**
* The start Y location of a gesture.
* @private
*/
var gesture_start_y = null;
/**
* The timeout associated with the delayed, cancellable click release.
*/
var click_release_timeout = null;
/**
* The timeout associated with long-press for right click.
*/
var long_press_timeout = null;
/**
* The distance a two-finger touch must move per scrollwheel event, in
* pixels.
@@ -732,7 +743,13 @@ Guacamole.Mouse.Touchscreen = function(element) {
* The maximum number of pixels to allow a touch to move for the gesture to
* be considered a click.
*/
this.clickMoveThreshold = 10 * (window.devicePixelRatio || 1);
this.clickMoveThreshold = 16 * (window.devicePixelRatio || 1);
/**
* The amount of time a press must be held for long press to be
* detected.
*/
this.longPressThreshold = 500;
/**
* The current mouse state. The properties of this state are updated when
@@ -779,44 +796,114 @@ Guacamole.Mouse.Touchscreen = function(element) {
*/
this.onmousemove = null;
/**
* Presses the given mouse button, if it isn't already pressed. Valid
* button values are "left", "middle", "right", "up", and "down".
*
* @private
* @param {String} button The mouse button to press.
*/
function press_button(button) {
if (!guac_touchscreen.currentState[button]) {
guac_touchscreen.currentState[button] = true;
if (guac_touchscreen.onmousedown)
guac_touchscreen.onmousedown(guac_touchscreen.currentState);
}
}
/**
* Releases the given mouse button, if it isn't already released. Valid
* button values are "left", "middle", "right", "up", and "down".
*
* @private
* @param {String} button The mouse button to release.
*/
function release_button(button) {
if (guac_touchscreen.currentState[button]) {
guac_touchscreen.currentState[button] = false;
if (guac_touchscreen.onmouseup)
guac_touchscreen.onmouseup(guac_touchscreen.currentState);
}
}
/**
* Clicks (presses and releases) the given mouse button. Valid button
* values are "left", "middle", "right", "up", and "down".
*
* @private
* @param {String} button The mouse button to click.
*/
function click_button(button) {
press_button(button);
release_button(button);
}
/**
* Moves the mouse to the given coordinates. These coordinates must be
* relative to the browser window, as they will be translated based on
* the touch event target's location within the browser window.
*
* @private
* @param {Number} x The X coordinate of the mouse pointer.
* @param {Number} y The Y coordinate of the mouse pointer.
*/
function move_mouse(x, y) {
guac_touchscreen.currentState.fromClientPosition(element, x, y);
if (guac_touchscreen.onmousemove)
guac_touchscreen.onmousemove(guac_touchscreen.currentState);
}
/**
* Returns whether the given touch event exceeds the movement threshold for
* clicking, based on where the touch gesture began.
*
* @private
* @param {TouchEvent} e The touch event to check.
* @return {Boolean} true if the movement threshold is exceeded, false
* otherwise.
*/
function finger_moved(e) {
var touch = e.touches[0] || e.changedTouches[0];
return Math.abs(touch.clientX - gesture_start_x) >= guac_touchscreen.clickMoveThreshold
&& Math.abs(touch.clientY - gesture_start_y) >= guac_touchscreen.clickMoveThreshold;
}
element.addEventListener("touchend", function(e) {
// Do not handle if no gesture
if (!gesture_in_progress)
return;
// Ignore if more than one touch
if (e.touches.length !== 0 || e.changedTouches.length !== 1)
return;
// Long-press, if any, is over
window.clearTimeout(long_press_timeout);
long_press_timeout = null;
// Always release mouse button if pressed
if (guac_touchscreen.currentState.left) {
guac_touchscreen.currentState.left = false;
if (guac_touchscreen.onmouseup)
guac_touchscreen.onmouseup(guac_touchscreen.currentState);
}
release_button("left");
// If finger hasn't moved enough to cancel the click
var touch = e.changedTouches[0];
if ( Math.abs(touch.clientX - click_start_x) < guac_touchscreen.clickMoveThreshold
&& Math.abs(touch.clientY - click_start_y) < guac_touchscreen.clickMoveThreshold) {
if (!finger_moved(e)) {
e.preventDefault();
// If not yet pressed, press and start delay release
if (!guac_touchscreen.currentState.left) {
// Press button
guac_touchscreen.currentState.left = true;
if (guac_touchscreen.onmousedown)
guac_touchscreen.onmousedown(guac_touchscreen.currentState);
press_button("left");
// Release button after a delay, if not canceled
click_release_timeout = window.setTimeout(function() {
guac_touchscreen.currentState.left = false;
if (guac_touchscreen.onmouseup)
guac_touchscreen.onmouseup(guac_touchscreen.currentState);
release_button("left");
gesture_in_progress = false;
}, guac_touchscreen.clickTimingThreshold);
}
}
} // end if finger not moved
}, false);
@@ -830,44 +917,56 @@ Guacamole.Mouse.Touchscreen = function(element) {
// Update state
var touch = e.touches[0];
guac_touchscreen.currentState.fromClientPosition(element, touch.clientX, touch.clientY);
move_mouse(touch.clientX, touch.clientY);
click_start_x = touch.clientX;
click_start_y = touch.clientY;
// New touch begins a new gesture
gesture_in_progress = true;
gesture_start_x = touch.clientX;
gesture_start_y = touch.clientY;
// Clear timeout, if set
// Keep button pressed if tap after left click
if (click_release_timeout) {
window.clearTimeout(click_release_timeout);
click_release_timeout = null;
}
// Click right button if this turns into a long-press
long_press_timeout = window.setTimeout(function() {
click_button("right");
long_press_timeout = null;
gesture_in_progress = false;
}, guac_touchscreen.longPressThreshold);
}, false);
element.addEventListener("touchmove", function(e) {
// Do not handle if no gesture
if (!gesture_in_progress)
return;
// Cancel long press if finger moved
if (long_press_timeout && finger_moved(e)) {
window.clearTimeout(long_press_timeout);
long_press_timeout = null;
}
// Ignore if more than one touch
if (e.touches.length !== 1)
return;
// Only handle move if in process of drag
// Update mouse position if dragging
if (guac_touchscreen.currentState.left) {
e.preventDefault();
e.stopPropagation();
// Get touch
var touch = e.touches[0];
// Update state
guac_touchscreen.currentState.fromClientPosition(element, touch.clientX, touch.clientY);
// Fire movement event, if defined
if (guac_touchscreen.onmousemove)
guac_touchscreen.onmousemove(guac_touchscreen.currentState);
var touch = e.touches[0];
move_mouse(touch.clientX, touch.clientY);
}
}, false);
};