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

GUAC-605: Clean up and rename variable use. Remove unnecessary DOM manipulation.

Browse Source
This commit is contained in:
Michael Jumper
2014-11-14 12:33:47 -08:00
parent b5ec678906
commit 5db4905510
3 changed files with 114 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
guacamole/src/main/webapp/app/client/directives/guacClient.js
View File

@@ -56,7 +56,7 @@ angular.module('client').directive('guacClient', [function guacClient() {
} }
}; };
$scope.guac = null; $scope.guacClient = null;
$scope.clipboard = ""; $scope.clipboard = "";
var $window = $injector.get('$window'), var $window = $injector.get('$window'),
@@ -68,56 +68,88 @@ angular.module('client').directive('guacClient', [function guacClient() {
// Get elements for DOM manipulation // Get elements for DOM manipulation
var main = $element[0]; var main = $element[0];
var CLIENT_PROPERTY_DEFAULTS = {
scale: 1
};
for (var propertyName in CLIENT_PROPERTY_DEFAULTS) {
if (!(propertyName in $scope.clientProperties))
$scope.clientProperties[propertyName] = CLIENT_PROPERTY_DEFAULTS[propertyName];
}
/** /**
* Updates the scale of the attached Guacamole.Client based on current window * Updates the scale of the attached Guacamole.Client based on current window
* size and "auto-fit" setting. * size and "auto-fit" setting.
*/ */
var updateDisplayScale = function updateDisplayScale() { var updateDisplayScale = function updateDisplayScale() {
var guac = $scope.guac; var guacClient = $scope.guacClient;
if (!guac) if (!guacClient) return;
return;
var guacDisplay = guacClient.getDisplay();
// Calculate scale to fit screen // Calculate scale to fit screen
$scope.clientProperties.minScale = Math.min( $scope.clientProperties.minScale = Math.min(
main.offsetWidth / Math.max(guac.getDisplay().getWidth(), 1), main.offsetWidth / Math.max(guacDisplay.getWidth(), 1),
main.offsetHeight / Math.max(guac.getDisplay().getHeight(), 1) main.offsetHeight / Math.max(guacDisplay.getHeight(), 1)
); );
// Calculate appropriate maximum zoom level // Calculate appropriate maximum zoom level
$scope.clientProperties.maxScale = Math.max($scope.clientProperties.minScale, 3); $scope.clientProperties.maxScale = Math.max($scope.clientProperties.minScale, 3);
// Clamp zoom level, maintain auto-fit // Clamp zoom level, maintain auto-fit
if (guac.getDisplay().getScale() < $scope.clientProperties.minScale || $scope.clientProperties.autoFit) if (guacDisplay.getScale() < $scope.clientProperties.minScale || $scope.clientProperties.autoFit)
$scope.clientProperties.scale = $scope.clientProperties.minScale; $scope.clientProperties.scale = $scope.clientProperties.minScale;
else if (guac.getDisplay().getScale() > $scope.clientProperties.maxScale) else if (guacDisplay.getScale() > $scope.clientProperties.maxScale)
$scope.clientProperties.scale = $scope.clientProperties.maxScale; $scope.clientProperties.scale = $scope.clientProperties.maxScale;
}; };
/**
* Returns the string of connection parameters to be passed to the
* Guacamole client during connection. This string generally
* contains the desired connection ID, display resolution, and
* supported audio/video codecs.
*
* @returns {String} The string of connection parameters to be
* passed to the Guacamole client.
*/
var getConnectString = function getConnectString() {
// Calculate optimal width/height for display
var pixel_density = $window.devicePixelRatio || 1;
var optimal_dpi = pixel_density * 96;
var optimal_width = $window.innerWidth * pixel_density;
var optimal_height = $window.innerHeight * pixel_density;
// Build base connect string
var connectString =
"id=" + encodeURIComponent($scope.id)
+ "&authToken=" + encodeURIComponent(localStorageUtility.get('authToken'))
+ "&width=" + Math.floor(optimal_width)
+ "&height=" + Math.floor(optimal_height)
+ "&dpi=" + Math.floor(optimal_dpi)
+ ($scope.connectionParameters ? '&' + $scope.connectionParameters : '');
// Add audio mimetypes to connect_string
guacAudio.supported.forEach(function(mimetype) {
connectString += "&audio=" + encodeURIComponent(mimetype);
});
// Add video mimetypes to connect_string
guacVideo.supported.forEach(function(mimetype) {
connectString += "&video=" + encodeURIComponent(mimetype);
});
return connectString;
};
// Update active client if clipboard changes // Update active client if clipboard changes
$scope.$watch('clipboard', function clipboardChange(data) { $scope.$watch('clipboard', function clipboardChange(data) {
if ($scope.guac) if ($scope.guacClient)
$scope.guac.setClipboard(data); $scope.guacClient.setClipboard(data);
}); });
// Connect to given ID whenever ID changes // Connect to given ID whenever ID changes
$scope.$watch('id', function(id) { $scope.$watch('id', function(id) {
// If a client is already attached, ensure it is disconnected // If a client is already attached, ensure it is disconnected
if ($scope.guac) if ($scope.guacClient)
$scope.guac.disconnect(); $scope.guacClient.disconnect();
// Only proceed if a new client is attached // Only proceed if a new client is attached
if (!id) if (!id)
@@ -125,54 +157,40 @@ angular.module('client').directive('guacClient', [function guacClient() {
// Get new client instance // Get new client instance
var tunnel = guacTunnelFactory.getInstance(); var tunnel = guacTunnelFactory.getInstance();
var guac = guacClientFactory.getInstance(tunnel); var guacClient = guacClientFactory.getInstance(tunnel);
$scope.guac = guac; var guacDisplay = guacClient.getDisplay();
var guacDisplayElement = guacDisplay.getElement();
/* $scope.guacClient = guacClient;
* Update the scale of the display when the client display size changes.
*/
guac.getDisplay().onresize = function() { // Replace any existing display with the current display
$scope.safeApply(updateDisplayScale); $element.find('.display').html("").append(guacDisplayElement);
};
// Get display element // Do nothing when the display element is clicked on.
var guac_display = guac.getDisplay().getElement(); guacDisplayElement.onclick = function(e) {
/*
* Do nothing when the display element is clicked on.
*/
guac_display.onclick = function(e) {
e.preventDefault(); e.preventDefault();
return false; return false;
}; };
/* // Update the scale of the display when the client display size changes.
* Handle mouse and touch events relative to the display element. guacDisplay.onresize = function() {
*/ $scope.safeApply(updateDisplayScale);
var localCursor = false;
// Ensure software cursor is shown
guac.getDisplay().showCursor(true);
// Use local cursor if possible.
guac.getDisplay().oncursor = function(canvas, x, y) {
localCursor = mouse.setCursor(canvas, x, y);
}; };
// Mouse // Whether the local, hardware mouse cursor is in use
var mouse = new Guacamole.Mouse(guac_display); var localCursor = false;
// Directly handle mouse events on client display
var mouse = new Guacamole.Mouse(guacDisplayElement);
mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = function(mouseState) { mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = function(mouseState) {
// Hide software cursor if local cursor is in use // Hide or show software cursor depending on local cursor state
guac.getDisplay().showCursor(!localCursor); guacDisplay.showCursor(!localCursor);
// Scale event by current scale // Scale event by current scale
var scaledState = new Guacamole.Mouse.State( var scaledState = new Guacamole.Mouse.State(
mouseState.x / guac.getDisplay().getScale(), mouseState.x / guacDisplay.getScale(),
mouseState.y / guac.getDisplay().getScale(), mouseState.y / guacDisplay.getScale(),
mouseState.left, mouseState.left,
mouseState.middle, mouseState.middle,
mouseState.right, mouseState.right,
@@ -180,27 +198,23 @@ angular.module('client').directive('guacClient', [function guacClient() {
mouseState.down); mouseState.down);
// Send mouse event // Send mouse event
guac.sendMouseState(scaledState); guacClient.sendMouseState(scaledState);
}; };
// Hide software cursor when mouse leaves display // Hide software cursor when mouse leaves display
mouse.onmouseout = function() { mouse.onmouseout = function() {
guac.getDisplay().showCursor(false); guacDisplay.showCursor(false);
}; };
var $display = $element.find('.display'); // Use local cursor if possible.
guacDisplay.oncursor = function(canvas, x, y) {
// Remove old client from UI, if any localCursor = mouse.setCursor(canvas, x, y);
$display.html(""); };
// Add client to UI
guac_display.className = "software-cursor";
$display.append(guac_display);
// Mouse emulation objects // Mouse emulation objects
var touchScreen = new Guacamole.Mouse.Touchscreen(guac_display); var touchScreen = new Guacamole.Mouse.Touchscreen(guacDisplayElement);
var touchPad = new Guacamole.Mouse.Touchpad(guac_display); var touchPad = new Guacamole.Mouse.Touchpad(guacDisplayElement);
// Watch for changes to mouse emulation mode // Watch for changes to mouse emulation mode
$scope.$watch('clientProperties.emulateAbsoluteMouse', function(emulateAbsoluteMouse) { $scope.$watch('clientProperties.emulateAbsoluteMouse', function(emulateAbsoluteMouse) {
@@ -208,12 +222,11 @@ angular.module('client').directive('guacClient', [function guacClient() {
var handleMouseState = function handleMouseState(mouseState) { var handleMouseState = function handleMouseState(mouseState) {
// Ensure software cursor is shown // Ensure software cursor is shown
guac.getDisplay().showCursor(true); guacDisplay.showCursor(true);
// Determine mouse position within view // Determine mouse position within view
var guac_display = guac.getDisplay().getElement(); var mouse_view_x = mouseState.x + guacDisplayElement.offsetLeft - main.scrollLeft;
var mouse_view_x = mouseState.x + guac_display.offsetLeft - main.scrollLeft; var mouse_view_y = mouseState.y + guacDisplayElement.offsetTop - main.scrollTop;
var mouse_view_y = mouseState.y + guac_display.offsetTop - main.scrollTop;
// Determine viewport dimensions // Determine viewport dimensions
var view_width = main.offsetWidth; var view_width = main.offsetWidth;
@@ -243,8 +256,8 @@ angular.module('client').directive('guacClient', [function guacClient() {
// Scale event by current scale // Scale event by current scale
var scaledState = new Guacamole.Mouse.State( var scaledState = new Guacamole.Mouse.State(
mouseState.x / guac.getDisplay().getScale(), mouseState.x / guacDisplay.getScale(),
mouseState.y / guac.getDisplay().getScale(), mouseState.y / guacDisplay.getScale(),
mouseState.left, mouseState.left,
mouseState.middle, mouseState.middle,
mouseState.right, mouseState.right,
@@ -252,7 +265,7 @@ angular.module('client').directive('guacClient', [function guacClient() {
mouseState.down); mouseState.down);
// Send mouse event // Send mouse event
guac.sendMouseState(scaledState); guacClient.sendMouseState(scaledState);
}; };
@@ -285,44 +298,8 @@ angular.module('client').directive('guacClient', [function guacClient() {
}); });
// Calculate optimal width/height for display
var pixel_density = $window.devicePixelRatio || 1;
var optimal_dpi = pixel_density * 96;
var optimal_width = $window.innerWidth * pixel_density;
var optimal_height = $window.innerHeight * pixel_density;
// Scale width/height to be at least 600x600
if (optimal_width < 600 || optimal_height < 600) {
var scale = Math.max(600 / optimal_width, 600 / optimal_height);
optimal_width = optimal_width * scale;
optimal_height = optimal_height * scale;
}
// Get entire query string, and pass to connect().
// Normally, only the "id" parameter is required, but
// all parameters should be preserved and passed on for
// the sake of authentication.
var connectString =
"id=" + encodeURIComponent($scope.id)
+ "&authToken=" + encodeURIComponent(localStorageUtility.get('authToken'))
+ "&width=" + Math.floor(optimal_width)
+ "&height=" + Math.floor(optimal_height)
+ "&dpi=" + Math.floor(optimal_dpi)
+ ($scope.connectionParameters ? '&' + $scope.connectionParameters : '');
// Add audio mimetypes to connect_string
guacAudio.supported.forEach(function(mimetype) {
connectString += "&audio=" + encodeURIComponent(mimetype);
});
// Add video mimetypes to connect_string
guacVideo.supported.forEach(function(mimetype) {
connectString += "&video=" + encodeURIComponent(mimetype);
});
// Connect // Connect
guac.connect(connectString); guacClient.connect(getConnectString());
}); });
@@ -342,8 +319,8 @@ angular.module('client').directive('guacClient', [function guacClient() {
main.style.overflow = "auto"; main.style.overflow = "auto";
// Apply scale if client attached // Apply scale if client attached
if ($scope.guac) if ($scope.guacClient)
$scope.guac.getDisplay().scale(scale); $scope.guacClient.getDisplay().scale(scale);
if (scale !== $scope.clientProperties.scale) if (scale !== $scope.clientProperties.scale)
$scope.clientProperties.scale = scale; $scope.clientProperties.scale = scale;
@@ -365,15 +342,14 @@ angular.module('client').directive('guacClient', [function guacClient() {
// Handle Keyboard events // Handle Keyboard events
function __send_key(pressed, keysym) { function __send_key(pressed, keysym) {
$scope.guac.sendKeyEvent(pressed, keysym); $scope.guacClient.sendKeyEvent(pressed, keysym);
return false; return false;
} }
$scope.keydown = function keydown (keysym, keyboard) { $scope.keydown = function keydown (keysym, keyboard) {
// Only handle key events if client is attached // Only handle key events if client is attached
var guac = $scope.guac; if (!$scope.guacClient) return true;
if (!guac) return true;
// Handle Ctrl-shortcuts specifically // Handle Ctrl-shortcuts specifically
if (keyboard.modifiers.ctrl && !keyboard.modifiers.alt && !keyboard.modifiers.shift) { if (keyboard.modifiers.ctrl && !keyboard.modifiers.alt && !keyboard.modifiers.shift) {
@@ -406,8 +382,7 @@ angular.module('client').directive('guacClient', [function guacClient() {
$scope.keyup = function keyup(keysym, keyboard) { $scope.keyup = function keyup(keysym, keyboard) {
// Only handle key events if client is attached // Only handle key events if client is attached
var guac = $scope.guac; if (!$scope.guacClient) return true;
if (!guac) return true;
// If lifting up on shift, toggle menu visibility if rest of gesture // If lifting up on shift, toggle menu visibility if rest of gesture
// conditions satisfied // conditions satisfied

38
guacamole/src/main/webapp/app/client/services/guacClientFactory.js
View File

@@ -38,37 +38,37 @@ angular.module('client').factory('guacClientFactory', ['$rootScope',
service.getInstance = function getClientInstance(tunnel) { service.getInstance = function getClientInstance(tunnel) {
// Instantiate client // Instantiate client
var guac = new Guacamole.Client(tunnel); var guacClient = new Guacamole.Client(tunnel);
/* /*
* Fire guacClientStateChange events when client state changes. * Fire guacClientStateChange events when client state changes.
*/ */
guac.onstatechange = function onClientStateChange(clientState) { guacClient.onstatechange = function onClientStateChange(clientState) {
switch (clientState) { switch (clientState) {
// Idle // Idle
case 0: case 0:
$rootScope.$broadcast('guacClientStateChange', guac, "idle"); $rootScope.$broadcast('guacClientStateChange', guacClient, "idle");
break; break;
// Connecting // Connecting
case 1: case 1:
$rootScope.$broadcast('guacClientStateChange', guac, "connecting"); $rootScope.$broadcast('guacClientStateChange', guacClient, "connecting");
break; break;
// Connected + waiting // Connected + waiting
case 2: case 2:
$rootScope.$broadcast('guacClientStateChange', guac, "waiting"); $rootScope.$broadcast('guacClientStateChange', guacClient, "waiting");
break; break;
// Connected // Connected
case 3: case 3:
$rootScope.$broadcast('guacClientStateChange', guac, "connected"); $rootScope.$broadcast('guacClientStateChange', guacClient, "connected");
// Update server clipboard with current data // Update server clipboard with current data
if ($rootScope.clipboard) if ($rootScope.clipboard)
guac.setClipboard($rootScope.clipboard); guacClient.setClipboard($rootScope.clipboard);
break; break;
@@ -83,27 +83,27 @@ angular.module('client').factory('guacClientFactory', ['$rootScope',
/* /*
* Fire guacClientName events when a new name is received. * Fire guacClientName events when a new name is received.
*/ */
guac.onname = function onClientName(name) { guacClient.onname = function onClientName(name) {
$rootScope.$broadcast('guacClientName', guac, name); $rootScope.$broadcast('guacClientName', guacClient, name);
}; };
/* /*
* Disconnect and fire guacClientError when the client receives an * Disconnect and fire guacClientError when the client receives an
* error. * error.
*/ */
guac.onerror = function onClientError(status) { guacClient.onerror = function onClientError(status) {
// Disconnect, if connected // Disconnect, if connected
guac.disconnect(); guacClient.disconnect();
$rootScope.$broadcast('guacClientError', guac, status.code); $rootScope.$broadcast('guacClientError', guacClient, status.code);
}; };
/* /*
* Fire guacClientClipboard events after new clipboard data is received. * Fire guacClientClipboard events after new clipboard data is received.
*/ */
guac.onclipboard = function onClientClipboard(stream, mimetype) { guacClient.onclipboard = function onClientClipboard(stream, mimetype) {
// Only text/plain is supported for now // Only text/plain is supported for now
if (mimetype !== "text/plain") { if (mimetype !== "text/plain") {
@@ -122,7 +122,7 @@ angular.module('client').factory('guacClientFactory', ['$rootScope',
// Emit event when done // Emit event when done
reader.onend = function clipboard_text_end() { reader.onend = function clipboard_text_end() {
$rootScope.$broadcast('guacClientClipboard', guac, data); $rootScope.$broadcast('guacClientClipboard', guacClient, data);
}; };
}; };
@@ -131,23 +131,23 @@ angular.module('client').factory('guacClientFactory', ['$rootScope',
* Fire guacFileStart, guacFileProgress, and guacFileEnd events during * Fire guacFileStart, guacFileProgress, and guacFileEnd events during
* the receipt of files. * the receipt of files.
*/ */
guac.onfile = function onClientFile(stream, mimetype, filename) { guacClient.onfile = function onClientFile(stream, mimetype, filename) {
// Begin file download // Begin file download
var guacFileStartEvent = $rootScope.$broadcast('guacFileStart', guac, stream.index, mimetype, filename); var guacFileStartEvent = $rootScope.$broadcast('guacFileStart', guacClient, stream.index, mimetype, filename);
if (!guacFileStartEvent.defaultPrevented) { if (!guacFileStartEvent.defaultPrevented) {
var blob_reader = new Guacamole.BlobReader(stream, mimetype); var blob_reader = new Guacamole.BlobReader(stream, mimetype);
// Update progress as data is received // Update progress as data is received
blob_reader.onprogress = function onprogress() { blob_reader.onprogress = function onprogress() {
$rootScope.$broadcast('guacFileProgress', guac, stream.index, mimetype, filename); $rootScope.$broadcast('guacFileProgress', guacClient, stream.index, mimetype, filename);
stream.sendAck("Received", Guacamole.Status.Code.SUCCESS); stream.sendAck("Received", Guacamole.Status.Code.SUCCESS);
}; };
// When complete, prompt for download // When complete, prompt for download
blob_reader.onend = function onend() { blob_reader.onend = function onend() {
$rootScope.$broadcast('guacFileEnd', guac, stream.index, mimetype, filename); $rootScope.$broadcast('guacFileEnd', guacClient, stream.index, mimetype, filename);
}; };
stream.sendAck("Ready", Guacamole.Status.Code.SUCCESS); stream.sendAck("Ready", Guacamole.Status.Code.SUCCESS);
@@ -160,7 +160,7 @@ angular.module('client').factory('guacClientFactory', ['$rootScope',
}; };
return guac; return guacClient;
}; };

2
guacamole/src/main/webapp/app/client/templates/guacClient.html
View File

@@ -24,7 +24,7 @@
<!-- Display --> <!-- Display -->
<div class="displayOuter"> <div class="displayOuter">
<div class="displayMiddle"> <div class="displayMiddle">
<div class="display"> <div class="display software-cursor">
</div> </div>
</div> </div>
</div> </div>