From 590311ea805fb230ca0936d1bf9d0a0470856d4b Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Tue, 24 Jan 2012 18:24:05 -0800 Subject: [PATCH] Open menu on long-press. --- src/main/webapp/scripts/interface.js | 84 ++++++++++++++++++---------------- src/main/webapp/styles/client.css | 56 ++++++++++------------- 2 files changed, 69 insertions(+), 71 deletions(-) diff --git a/src/main/webapp/scripts/interface.js b/src/main/webapp/scripts/interface.js index 58fe5f8..c42f39a 100644 --- a/src/main/webapp/scripts/interface.js +++ b/src/main/webapp/scripts/interface.js @@ -158,7 +158,7 @@ var GuacamoleUI = { var detectMenuCloseTimeout = null; // Clear detection timeouts - function resetMenuDetect() { + GuacamoleUI.resetMenuDetect = function() { if (detectMenuOpenTimeout != null) { window.clearTimeout(detectMenuOpenTimeout); @@ -170,54 +170,61 @@ var GuacamoleUI = { detectMenuCloseTimeout = null; } - } + }; // Initiate detection of menu open action. If not canceled through some // user event, menu will open. - function startMenuOpenDetect() { + GuacamoleUI.startMenuOpenDetect = function() { - // Clear detection state - resetMenuDetect(); + if (!detectMenuOpenTimeout) { - // Wait and then show menu - detectMenuOpenTimeout = window.setTimeout(function() { - GuacamoleUI.showMenu(); - detectMenuOpenTimeout = null; - }, 325); + // Clear detection state + GuacamoleUI.resetMenuDetect(); - } + // Wait and then show menu + detectMenuOpenTimeout = window.setTimeout(function() { + GuacamoleUI.showMenu(); + detectMenuOpenTimeout = null; + }, 325); + + } + + }; // Initiate detection of menu close action. If not canceled through some // user event, menu will close. - function startMenuCloseDetect() { + GuacamoleUI.startMenuCloseDetect = function() { - // Clear detection state - resetMenuDetect(); + if (!detectMenuCloseTimeout) { - // Wait and then shade menu - detectMenuCloseTimeout = window.setTimeout(function() { - GuacamoleUI.shadeMenu(); - detectMenuCloseTimeout = null; - }, 500); + // Clear detection state + GuacamoleUI.resetMenuDetect(); - } + // Wait and then shade menu + detectMenuCloseTimeout = window.setTimeout(function() { + GuacamoleUI.shadeMenu(); + detectMenuCloseTimeout = null; + }, 500); + + } + + }; // Show menu if mouseover any part of menu GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.showMenu, true); // Stop detecting menu state change intents if mouse is over menu - GuacamoleUI.menu.addEventListener('mouseover', resetMenuDetect, true); + GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.resetMenuDetect, true); // When mouse hovers over top of screen, start detection of intent to open menu - GuacamoleUI.menuControl.addEventListener('mousemove', startMenuOpenDetect, true); + GuacamoleUI.menuControl.addEventListener('mousemove', GuacamoleUI.startMenuOpenDetect, true); // When mouse enters display, start detection of intent to close menu - GuacamoleUI.display.addEventListener('mouseover', startMenuCloseDetect, true); + GuacamoleUI.display.addEventListener('mouseover', GuacamoleUI.startMenuCloseDetect, true); var menuShowLongPressTimeout = null; - // Detect long-press at bottom of screen - document.body.addEventListener('touchstart', function(e) { + GuacamoleUI.startLongPressDetect = function() { if (!menuShowLongPressTimeout) { @@ -229,23 +236,16 @@ var GuacamoleUI = { }, 1000); } - - }, true); - - // Reset detection when touch stops - document.body.addEventListener('touchend', function() { + }; - // Reset opacity, stop detection of keyboard show gesture - GuacamoleUI.shadeMenu(); + GuacamoleUI.stopLongPressDetect = function() { window.clearTimeout(menuShowLongPressTimeout); menuShowLongPressTimeout = null; - - }, false); + }; + + // Detect long-press at bottom of screen + document.body.addEventListener('touchstart', GuacamoleUI.startLongPressDetect, true); - GuacamoleUI.menu.addEventListener('touchend', function(e) { - e.stopPropagation(); - }, false); - // Show menu if mouse leaves document document.addEventListener('mouseout', function(e) { @@ -261,7 +261,7 @@ var GuacamoleUI = { } // Start detection of intent to open menu - startMenuOpenDetect(); + GuacamoleUI.startMenuOpenDetect(); }, true); @@ -327,6 +327,12 @@ GuacamoleUI.attach = function(guac) { // Scroll (if necessary) to keep mouse on screen. window.scrollBy(scroll_amount_x, scroll_amount_y); + // Hide menu on movement + GuacamoleUI.startMenuCloseDetect(); + + // Stop detecting long presses if mouse is being used + GuacamoleUI.stopLongPressDetect(); + // Send mouse event guac.sendMouseState(mouseState); diff --git a/src/main/webapp/styles/client.css b/src/main/webapp/styles/client.css index 4457892..6faf725 100644 --- a/src/main/webapp/styles/client.css +++ b/src/main/webapp/styles/client.css @@ -24,10 +24,20 @@ body { margin: 0; } +img { + border: none; +} + +.guac-hide-cursor { + cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default; +} + * { -webkit-tap-highlight-color: rgba(0,0,0,0); } +/* Dialogs */ + div.dialogOuter { display: table; height: 100%; @@ -37,18 +47,6 @@ div.dialogOuter { top: 0; visibility: hidden; - /* - background-image: url('../images/spinner.gif'); - background-position: center; - background-repeat: no-repeat; - */ - - /* - background-image: url('../images/noimage.png'); - background-position: center; - background-repeat: no-repeat; - */ - } div.dialogMiddle { @@ -88,6 +86,20 @@ div.dialog p { margin: 0; } +#statusText { + text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black; + font-weight: bold; + font-size: xx-large; + color: white; +} + +.guac-error #statusText { + text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black; + color: #D44; +} + +/* Menu */ + #menu { position: fixed; left: 0; @@ -103,22 +115,6 @@ div.dialog p { background: #D44; } -#statusText { - text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black; - font-weight: bold; - font-size: xx-large; - color: white; -} - -.guac-error #statusText { - text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black; - color: #D44; -} - -img { - border: none; -} - div#display { position: relative; width: 640px; @@ -165,10 +161,6 @@ div#clipboardDiv textarea { width: 100%; } -.guac-hide-cursor { - cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default; -} - div#menuControl { position: fixed; top: 0; -- 1.7.10.4