mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-09-07 05:31:22 +00:00
Further conversion to new UI.
This commit is contained in:
@@ -43,19 +43,6 @@
|
||||
<!-- Dimensional clone of viewport -->
|
||||
<div id="viewportClone"/>
|
||||
|
||||
<!-- 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>
|
||||
|
@@ -448,3 +448,37 @@ GuacUI.StateManager.registerComponent(
|
||||
*/
|
||||
|
||||
GuacUI.StateManager.setState(GuacUI.Client.states.INTERACTIVE);
|
||||
|
||||
/**
|
||||
* Modal status display. Displays a message to the user, covering the entire
|
||||
* screen.
|
||||
*
|
||||
* Normally, this should only be used when user interaction with other
|
||||
* components is impossible.
|
||||
*
|
||||
* @constructor
|
||||
* @augments GuacUI.Component
|
||||
*/
|
||||
GuacUI.Client.ModalStatus = function(text) {
|
||||
|
||||
// Create element hierarchy
|
||||
var outer = GuacUI.createElement("div", "dialogOuter");
|
||||
var middle = GuacUI.createChildElement(outer, "div", "dialogMiddle");
|
||||
var dialog = GuacUI.createChildElement(middle, "div", "dialog");
|
||||
var status = GuacUI.createChildElement(dialog, "p", "status");
|
||||
|
||||
// Set status text
|
||||
status.textContent = text;
|
||||
|
||||
this.show = function() {
|
||||
document.body.appendChild(outer);
|
||||
};
|
||||
|
||||
this.hide = function() {
|
||||
document.body.removeChild(outer);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
GuacUI.Client.ModalStatus.prototype = new GuacUI.Component();
|
||||
|
||||
|
@@ -29,46 +29,12 @@ var GuacamoleUI = {
|
||||
|
||||
"viewport" : document.getElementById("viewportClone"),
|
||||
"display" : document.getElementById("display"),
|
||||
"logo" : document.getElementById("status-logo"),
|
||||
|
||||
"buttons": {
|
||||
"reconnect" : document.getElementById("reconnect")
|
||||
},
|
||||
|
||||
"containers": {
|
||||
"state" : document.getElementById("statusDialog")
|
||||
},
|
||||
|
||||
"state" : document.getElementById("statusText"),
|
||||
"client" : null,
|
||||
"sessionState" : new GuacamoleSessionState()
|
||||
|
||||
};
|
||||
|
||||
GuacamoleUI.hideStatus = function() {
|
||||
GuacUI.removeClass(document.body, "guac-error");
|
||||
GuacamoleUI.containers.state.style.visibility = "hidden";
|
||||
GuacamoleUI.display.style.opacity = "1";
|
||||
};
|
||||
|
||||
GuacamoleUI.showStatus = function(text) {
|
||||
GuacUI.removeClass(document.body, "guac-error");
|
||||
GuacamoleUI.containers.state.style.visibility = "visible";
|
||||
GuacamoleUI.state.textContent = text;
|
||||
GuacamoleUI.display.style.opacity = "1";
|
||||
};
|
||||
|
||||
GuacamoleUI.showError = function(error) {
|
||||
GuacUI.addClass(document.body, "guac-error");
|
||||
GuacamoleUI.state.textContent = error;
|
||||
GuacamoleUI.display.style.opacity = "0.1";
|
||||
};
|
||||
|
||||
// Reconnect button
|
||||
GuacamoleUI.buttons.reconnect.onclick = function() {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// Tie UI events / behavior to a specific Guacamole client
|
||||
GuacamoleUI.attach = function(guac) {
|
||||
|
||||
@@ -262,6 +228,27 @@ GuacamoleUI.attach = function(guac) {
|
||||
updateDisplayScale();
|
||||
}
|
||||
|
||||
var last_status_notification = null;
|
||||
function hideStatus() {
|
||||
if (last_status_notification)
|
||||
last_status_notification.hide();
|
||||
last_status_notification = null;
|
||||
}
|
||||
|
||||
function showStatus(status) {
|
||||
hideStatus();
|
||||
|
||||
last_status_notification = new GuacUI.Client.ModalStatus(status);
|
||||
last_status_notification.show();
|
||||
}
|
||||
|
||||
function showError(status) {
|
||||
hideStatus();
|
||||
|
||||
last_status_notification = new GuacUI.Client.ModalStatus(status);
|
||||
last_status_notification.show();
|
||||
}
|
||||
|
||||
// Handle client state change
|
||||
guac.onstatechange = function(clientState) {
|
||||
|
||||
@@ -269,26 +256,26 @@ GuacamoleUI.attach = function(guac) {
|
||||
|
||||
// Idle
|
||||
case 0:
|
||||
GuacamoleUI.showStatus("Idle.");
|
||||
showStatus("Idle.");
|
||||
title_prefix = "[Idle]";
|
||||
break;
|
||||
|
||||
// Connecting
|
||||
case 1:
|
||||
GuacamoleUI.showStatus("Connecting...");
|
||||
showStatus("Connecting...");
|
||||
title_prefix = "[Connecting...]";
|
||||
break;
|
||||
|
||||
// Connected + waiting
|
||||
case 2:
|
||||
GuacamoleUI.showStatus("Connected, waiting for first update...");
|
||||
showStatus("Connected, waiting for first update...");
|
||||
title_prefix = "[Waiting...]";
|
||||
break;
|
||||
|
||||
// Connected
|
||||
case 3:
|
||||
|
||||
GuacamoleUI.hideStatus();
|
||||
hideStatus();
|
||||
title_prefix = null;
|
||||
|
||||
// Update clipboard with current data
|
||||
@@ -302,19 +289,19 @@ GuacamoleUI.attach = function(guac) {
|
||||
|
||||
// Disconnecting
|
||||
case 4:
|
||||
GuacamoleUI.showStatus("Disconnecting...");
|
||||
showStatus("Disconnecting...");
|
||||
title_prefix = "[Disconnecting...]";
|
||||
break;
|
||||
|
||||
// Disconnected
|
||||
case 5:
|
||||
GuacamoleUI.showStatus("Disconnected.");
|
||||
showStatus("Disconnected.");
|
||||
title_prefix = "[Disconnected]";
|
||||
break;
|
||||
|
||||
// Unknown status code
|
||||
default:
|
||||
GuacamoleUI.showStatus("[UNKNOWN STATUS]");
|
||||
showStatus("[UNKNOWN STATUS]");
|
||||
|
||||
}
|
||||
|
||||
@@ -334,7 +321,7 @@ GuacamoleUI.attach = function(guac) {
|
||||
guac.disconnect();
|
||||
|
||||
// Display error message
|
||||
GuacamoleUI.showError(error);
|
||||
showError(error);
|
||||
|
||||
};
|
||||
|
||||
|
@@ -55,8 +55,6 @@ div.dialogOuter {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div.dialogMiddle {
|
||||
@@ -264,3 +262,10 @@ div#viewportClone {
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.status {
|
||||
text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
|
||||
font-size: xx-large;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user