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

GUACAMOLE-883: Do not attempt to scroll beyond established page dimensions.

Browse Source
This commit is contained in:
Michael Jumper
2020-02-26 17:34:35 -08:00
parent bc83918fb3
commit 716b686f72
2 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
guacamole/src/main/webapp/app/client/directives/guacViewport.js
View File

@@ -32,8 +32,7 @@ angular.module('client').directive('guacViewport', [function guacViewport() {
function guacViewportController($scope, $injector, $element) { function guacViewportController($scope, $injector, $element) {
// Required services // Required services
var $window = $injector.get('$window'); var $window = $injector.get('$window');
var $document = $injector.get('$document');
/** /**
* The fullscreen container element. * The fullscreen container element.
@@ -43,18 +42,22 @@ angular.module('client').directive('guacViewport', [function guacViewport() {
var element = $element.find('.viewport')[0]; var element = $element.find('.viewport')[0];
/** /**
* The main document object. * The width of the browser viewport when fitVisibleArea() was last
* * invoked, in pixels, or null if fitVisibleArea() has not yet been
* @type Document * called.
*/
var document = $document[0];
/**
* The current adjusted height of the viewport element, if any.
* *
* @type Number * @type Number
*/ */
var currentAdjustedHeight = null; var lastViewportWidth = null;
/**
* The height of the browser viewport when fitVisibleArea() was
* last invoked, in pixels, or null if fitVisibleArea() has not yet
* been called.
*
* @type Number
*/
var lastViewportHeight = null;
/** /**
* Resizes the container element inside the guacViewport such that * Resizes the container element inside the guacViewport such that
@@ -63,31 +66,32 @@ angular.module('client').directive('guacViewport', [function guacViewport() {
*/ */
var fitVisibleArea = function fitVisibleArea() { var fitVisibleArea = function fitVisibleArea() {
// Pull scroll properties // Calculate viewport dimensions (this is NOT necessarily the
var scrollLeft = document.body.scrollLeft; // same as 100vw and 100vh, 100%, etc., particularly when the
var scrollTop = document.body.scrollTop; // on-screen keyboard of a mobile device pops open)
var scrollWidth = document.body.scrollWidth; var viewportWidth = $window.innerWidth;
var scrollHeight = document.body.scrollHeight; var viewportHeight = $window.innerHeight;
// Calculate new height
var adjustedHeight = scrollHeight - scrollTop;
// Only update if not in response to our own call to scrollTo()
if (scrollLeft !== scrollWidth && scrollTop !== scrollHeight
&& currentAdjustedHeight !== adjustedHeight) {
// Adjust element to fit exactly within visible area
element.style.height = adjustedHeight + 'px';
currentAdjustedHeight = adjustedHeight;
// Scroll to bottom
$window.scrollTo(scrollWidth, scrollHeight);
// Adjust element width to fit exactly within visible area
if (viewportWidth !== lastViewportWidth) {
element.style.width = viewportWidth + 'px';
lastViewportWidth = viewportWidth;
} }
// Manually attempt scroll if height has not been adjusted // Adjust element height to fit exactly within visible area
else if (adjustedHeight === 0) if (viewportHeight !== lastViewportHeight) {
$window.scrollTo(scrollWidth, scrollHeight); element.style.height = viewportHeight + 'px';
lastViewportHeight = viewportHeight;
}
// Scroll element such that its upper-left corner is exactly
// within the viewport upper-left corner, if not already there
if (element.scrollLeft || element.scrollTop) {
$window.scrollTo(
$window.pageXOffset + element.scrollLeft,
$window.pageYOffset + element.scrollTop
);
}
}; };

2
guacamole/src/main/webapp/app/client/styles/viewport.css
View File

@@ -20,7 +20,7 @@
.viewport { .viewport {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;