<!-- Logo and status -->
<img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
- <span id="state"></span>
</div>
<!-- On-screen keyboard -->
<div id="keyboardContainer"></div>
- <!-- Error Dialog-->
- <div id="errorDialog" class="errorDialogOuter">
- <div class="errorDialogMiddle">
- <div class="errorDialog">
- <p id="errorText"></p>
+ <!-- Dialogs -->
+ <div class="dialogOuter">
+ <div class="dialogMiddle">
+
+ <!-- Status Dialog -->
+ <div id="statusDialog" class="dialog">
+ <p id="statusText"></p>
<div class="buttons"><button id="reconnect">Reconnect</button></div>
</div>
+
</div>
</div>
-
<!-- guacamole-common-js scripts -->
<script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
<script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
"display" : document.getElementById("display"),
"menu" : document.getElementById("menu"),
"menuControl" : document.getElementById("menuControl"),
+ "touchMenu" : document.getElementById("touchMenu"),
"logo" : document.getElementById("status-logo"),
- "state" : document.getElementById("state"),
"buttons": {
},
"containers": {
- "error" : document.getElementById("errorDialog"),
+ "state" : document.getElementById("statusDialog"),
"clipboard": document.getElementById("clipboardDiv"),
"keyboard" : document.getElementById("keyboardContainer")
},
- "error" : document.getElementById("errorText"),
+ "state" : document.getElementById("statusText"),
"clipboard" : document.getElementById("clipboard")
};
var guacErrorImage = new Image();
guacErrorImage.src = "images/noguacamole-logo-24.png";
+ GuacamoleUI.hideStatus = function() {
+ document.body.classList.remove("guac-error");
+ GuacamoleUI.containers.state.style.visibility = "hidden";
+ };
+
+ GuacamoleUI.showStatus = function(text) {
+ document.body.classList.remove("guac-error");
+ GuacamoleUI.containers.state.style.visibility = "visible";
+ GuacamoleUI.state.textContent = text;
+ };
+
GuacamoleUI.showError = function(error) {
-
- GuacamoleUI.menu.className = "error";
- GuacamoleUI.display.className += " guac-error";
-
- GuacamoleUI.logo.src = guacErrorImage.src;
- GuacamoleUI.error.textContent = error;
- GuacamoleUI.containers.error.style.visibility = "visible";
-
+ document.body.classList.add("guac-error");
+ GuacamoleUI.state.textContent = error;
};
GuacamoleUI.shadeMenu = function() {
// When mouse enters display, start detection of intent to close menu
GuacamoleUI.display.addEventListener('mouseover', startMenuCloseDetect, true);
+ var menuShowLongPressTimeout = null;
+
+ // Detect long-press at bottom of screen
+ document.body.addEventListener('touchstart', function(e) {
+
+ if (!menuShowLongPressTimeout) {
+
+ menuShowLongPressTimeout = window.setTimeout(function() {
+
+ menuShowLongPressTimeout = null;
+ GuacamoleUI.showMenu();
+
+ }, 1000);
+
+ }
+
+ }, true);
+
+ // Reset detection when touch stops
+ document.body.addEventListener('touchend', function() {
+
+ // Reset opacity, stop detection of keyboard show gesture
+ GuacamoleUI.shadeMenu();
+ window.clearTimeout(menuShowLongPressTimeout);
+ menuShowLongPressTimeout = null;
+
+ }, false);
+
+ GuacamoleUI.menu.addEventListener('touchend', function(e) {
+ e.stopPropagation();
+ }, false);
+
// Show menu if mouse leaves document
document.addEventListener('mouseout', function(e) {
// Idle
case 0:
- GuacamoleUI.state.textContent = "Idle."
+ GuacamoleUI.showStatus("Idle.");
break;
// Connecting
case 1:
- GuacamoleUI.state.textContent = "Connecting...";
+ GuacamoleUI.shadeMenu();
+ GuacamoleUI.showStatus("Connecting...");
break;
// Connected + waiting
case 2:
- GuacamoleUI.state.textContent = "Connected, waiting for first update...";
+ GuacamoleUI.showStatus("Connected, waiting for first update...");
break;
// Connected
case 3:
+ GuacamoleUI.hideStatus();
GuacamoleUI.display.className =
GuacamoleUI.display.className.replace(/guac-loading/, '');
GuacamoleUI.menu.className = "connected";
- GuacamoleUI.state.textContent = "Connected.";
- GuacamoleUI.shadeMenu();
break;
// Disconnecting
case 4:
- GuacamoleUI.state.textContent = "Disconnecting...";
+ GuacamoleUI.showStatus("Disconnecting...");
break;
// Disconnected
case 5:
- GuacamoleUI.state.textContent = "Disconnected.";
+ GuacamoleUI.showStatus("Disconnected.");
break;
// Unknown status code
default:
- GuacamoleUI.state.textContent = "Unknown";
+ GuacamoleUI.showStatus("[UNKNOWN STATUS]");
}
};
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
-div.errorDialogOuter {
+div.dialogOuter {
display: table;
height: 100%;
width: 100%;
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.errorDialogMiddle {
+div.dialogMiddle {
width: 100%;
text-align: center;
display: table-cell;
vertical-align: middle;
}
-div.errorDialog {
-
- opacity: 0.75;
- background: #D22;
- border: 1px solid #F44;
+div.dialog {
padding: 1em;
max-width: 75%;
text-align: left;
display: inline-block;
+ visibility: visible;
}
-div.errorDialog h1 {
+div.dialog h1 {
margin: 0;
margin-bottom: 0.25em;
text-align: center;
}
-div.errorDialog div.buttons {
+div.dialog div.buttons {
margin: 0;
margin-top: 0.5em;
text-align: center;
}
-div.errorDialog p {
- margin: 0;
+*:not(.guac-error) button#reconnect {
+ display: none;
}
+div.dialog p {
+ margin: 0;
+}
#menu {
position: fixed;
font-size: 0.8em;
}
-#menu.error {
+.guac-error #menu {
background: #D44;
}
-.error #state {
+#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 {
width: 100%;
}
-.guac-display.guac-loading {
- border: 1px dotted gray;
- background-image: url('../images/spinner.gif');
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.guac-display.guac-error {
- border: 1px dotted red;
- background-image: url('../images/noimage.png');
- background-position: center;
- background-repeat: no-repeat;
-}
-
.guac-hide-cursor {
cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
}