mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-09-07 21:51:23 +00:00
Partial conversion to new UI paradigm and manager.
This commit is contained in:
Michael Jumper
246
guacamole/src/main/webapp/scripts/client-ui.js
Normal file
246
guacamole/src/main/webapp/scripts/client-ui.js
Normal file
@@ -0,0 +1,246 @@
|
||||
|
||||
/**
|
||||
* Client UI namespace.
|
||||
* @namespace
|
||||
*/
|
||||
GuacUI.Client = GuacUI.Client || {};
|
||||
|
||||
GuacUI.Client = {
|
||||
|
||||
/**
|
||||
* Collection of all Guacamole client UI states.
|
||||
*/
|
||||
"states": {
|
||||
|
||||
/**
|
||||
* The normal default Guacamole client UI mode
|
||||
*/
|
||||
"FULL_INTERACTIVE" : 0,
|
||||
|
||||
/**
|
||||
* Same as FULL_INTERACTIVE except with visible on-screen keyboard.
|
||||
*/
|
||||
"OSK" : 1,
|
||||
|
||||
/**
|
||||
* No on-screen keyboard, but a visible magnifier.
|
||||
*/
|
||||
"MAGNIFIER" : 2,
|
||||
|
||||
/**
|
||||
* Arrows and a draggable view.
|
||||
*/
|
||||
"PAN" : 3,
|
||||
|
||||
/**
|
||||
* Same as PAN, but with visible native OSK.
|
||||
*/
|
||||
"PAN_TYPING" : 4
|
||||
},
|
||||
|
||||
/* Constants */
|
||||
|
||||
"LONG_PRESS_DETECT_TIMEOUT" : 800, /* milliseconds */
|
||||
"LONG_PRESS_MOVEMENT_THRESHOLD" : 10, /* pixels */
|
||||
"KEYBOARD_AUTO_RESIZE_INTERVAL" : 30, /* milliseconds */
|
||||
|
||||
/* UI Components */
|
||||
|
||||
"viewport" : document.getElementById("viewportClone"),
|
||||
"display" : document.getElementById("display"),
|
||||
"logo" : document.getElementById("status-logo"),
|
||||
"eventTarget" : document.getElementById("eventTarget"),
|
||||
|
||||
"buttons": {
|
||||
"reconnect" : document.getElementById("reconnect")
|
||||
},
|
||||
|
||||
"containers": {
|
||||
"state" : document.getElementById("statusDialog"),
|
||||
"keyboard" : document.getElementById("keyboardContainer"),
|
||||
"magnifier" : document.getElementById("magnifier")
|
||||
},
|
||||
|
||||
"pan_overlay" : document.getElementById("pan-overlay"),
|
||||
"magnifier_background" : document.getElementById("magnifier-background"),
|
||||
"magnifier" : document.getElementById("magnifier-display"),
|
||||
"state" : document.getElementById("statusText"),
|
||||
"client" : null,
|
||||
"sessionState" : new GuacamoleSessionState()
|
||||
|
||||
};
|
||||
|
||||
GuacUI.Client.magnifier_background.onclick = function() {
|
||||
GuacUI.StateManager.setState(GuacUI.Client.states.INTERACTIVE);
|
||||
};
|
||||
|
||||
GuacUI.Client.containers.magnifier.addEventListener("click", function(e) {
|
||||
GuacUI.StateManager.setState(GuacUI.Client.states.PAN_TYPING);
|
||||
e.stopPropagation();
|
||||
}, true);
|
||||
|
||||
/**
|
||||
* Component which displays a magnified (100% zoomed) client display.
|
||||
*
|
||||
* @constructor
|
||||
* @augments GuacUI.DraggableComponent
|
||||
*/
|
||||
GuacUI.Client.Magnifier = function(magnifier) {
|
||||
|
||||
/**
|
||||
* Reference to this magnifier.
|
||||
* @private
|
||||
*/
|
||||
var guac_magnifier = this;
|
||||
|
||||
/*
|
||||
* Call parent constructor.
|
||||
*/
|
||||
GuacUI.DraggableComponent.apply(this, [magnifier]);
|
||||
|
||||
// Ensure transformations on display originate at 0,0
|
||||
GuacamoleUI.containers.magnifier.style.transformOrigin =
|
||||
GuacamoleUI.containers.magnifier.style.webkitTransformOrigin =
|
||||
GuacamoleUI.containers.magnifier.style.MozTransformOrigin =
|
||||
GuacamoleUI.containers.magnifier.style.OTransformOrigin =
|
||||
GuacamoleUI.containers.magnifier.style.msTransformOrigin =
|
||||
"0 0";
|
||||
|
||||
var magnifier_display = GuacUI.Client.magnifier;
|
||||
var magnifier_context = magnifier_display.getContext("2d");
|
||||
|
||||
this.onmove = function(x, y) {
|
||||
|
||||
var width = magnifier.offsetWidth;
|
||||
var height = magnifier.offsetHeight;
|
||||
|
||||
// Update contents relative to new position
|
||||
var clip_x = x
|
||||
/ (window.innerWidth - width) * (GuacamoleUI.client.getWidth() - width);
|
||||
var clip_y = y
|
||||
/ (window.innerHeight - height) * (GuacamoleUI.client.getHeight() - height);
|
||||
|
||||
magnifier_display.style.WebkitTransform =
|
||||
magnifier_display.style.MozTransform =
|
||||
magnifier_display.style.OTransform =
|
||||
magnifier_display.style.msTransform =
|
||||
magnifier_display.style.transform = "translate("
|
||||
+ (-clip_x) + "px, " + (-clip_y) + "px)";
|
||||
|
||||
GuacamoleUI.eventTarget.style.left = clip_x + "px";
|
||||
GuacamoleUI.eventTarget.style.top = clip_y + "px";
|
||||
|
||||
};
|
||||
|
||||
this.show = function() {
|
||||
|
||||
// Copy displayed image
|
||||
magnifier_display.width = GuacamoleUI.client.getWidth();
|
||||
magnifier_display.height = GuacamoleUI.client.getHeight();
|
||||
magnifier_context.drawImage(GuacamoleUI.client.flatten(), 0, 0);
|
||||
|
||||
// Show magnifier container
|
||||
GuacUI.Client.magnifier_background.style.display = "block";
|
||||
|
||||
};
|
||||
|
||||
this.hide = function() {
|
||||
|
||||
// Hide magnifier container
|
||||
GuacUI.Client.magnifier_background.style.display = "none";
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
* We inherit from GuacUI.DraggableComponent.
|
||||
*/
|
||||
GuacUI.Client.Magnifier.prototype = new GuacUI.DraggableComponent();
|
||||
|
||||
GuacUI.StateManager.registerComponent(
|
||||
new GuacUI.Client.Magnifier(GuacUI.Client.containers.magnifier),
|
||||
GuacUI.Client.states.MAGNIFIER
|
||||
);
|
||||
|
||||
/*
|
||||
* Zoomed Display
|
||||
*/
|
||||
|
||||
GuacUI.Client.ZoomedDisplay = function(client) {
|
||||
|
||||
var old_scale = null;
|
||||
|
||||
this.show = function() {
|
||||
old_scale = GuacamoleUI.client.getScale();
|
||||
GuacamoleUI.client.scale(1.0);
|
||||
};
|
||||
|
||||
this.hide = function() {
|
||||
GuacamoleUI.client.scale(old_scale);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
GuacUI.Client.ZoomedDisplay.prototype = new GuacUI.Component();
|
||||
|
||||
GuacUI.StateManager.registerComponent(
|
||||
new GuacUI.Client.ZoomedDisplay(),
|
||||
GuacUI.Client.states.PAN,
|
||||
GuacUI.Client.states.PAN_TYPING
|
||||
);
|
||||
|
||||
/*
|
||||
* Pan UI
|
||||
*/
|
||||
|
||||
GuacUI.Client.PanOverlay = function(client) {
|
||||
|
||||
this.show = function() {
|
||||
GuacUI.Client.pan_overlay.style.display = "block";
|
||||
};
|
||||
|
||||
this.hide = function() {
|
||||
GuacUI.Client.pan_overlay.style.display = "none";
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
GuacUI.Client.PanOverlay.prototype = new GuacUI.Component();
|
||||
|
||||
GuacUI.StateManager.registerComponent(
|
||||
new GuacUI.Client.PanOverlay(),
|
||||
GuacUI.Client.states.PAN,
|
||||
GuacUI.Client.states.PAN_TYPING
|
||||
);
|
||||
|
||||
/*
|
||||
* Native Keyboard
|
||||
*/
|
||||
|
||||
GuacUI.Client.NativeKeyboard = function() {
|
||||
|
||||
this.show = function() {
|
||||
GuacamoleUI.eventTarget.focus();
|
||||
};
|
||||
|
||||
this.hide = function() {
|
||||
GuacamoleUI.eventTarget.blur();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
GuacUI.StateManager.registerComponent(
|
||||
new GuacUI.Client.NativeKeyboard(),
|
||||
GuacUI.Client.states.PAN_TYPING
|
||||
);
|
||||
|
||||
GuacUI.Client.eventTarget.onblur = function() {
|
||||
GuacUI.StateManager.setState(GuacUI.Client.states.INTERACTIVE);
|
||||
};
|
||||
|
||||
/*
|
||||
* Set initial state
|
||||
*/
|
||||
|
||||
GuacUI.StateManager.setState(GuacUI.Client.states.INTERACTIVE);
|
||||
Reference in New Issue
Block a user