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

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

View File

@@ -33,7 +33,6 @@ angular.module('client').directive('guacViewport', [function guacViewport() {
// Required services
var $window = $injector.get('$window');
var $document = $injector.get('$document');
/**
* The fullscreen container element.
@@ -43,18 +42,22 @@ angular.module('client').directive('guacViewport', [function guacViewport() {
var element = $element.find('.viewport')[0];
/**
* The main document object.
*
* @type Document
*/
var document = $document[0];
/**
* The current adjusted height of the viewport element, if any.
* The width of the browser viewport when fitVisibleArea() was last
* invoked, in pixels, or null if fitVisibleArea() has not yet been
* called.
*
* @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
@@ -63,31 +66,32 @@ angular.module('client').directive('guacViewport', [function guacViewport() {
*/
var fitVisibleArea = function fitVisibleArea() {
// Pull scroll properties
var scrollLeft = document.body.scrollLeft;
var scrollTop = document.body.scrollTop;
var scrollWidth = document.body.scrollWidth;
var scrollHeight = document.body.scrollHeight;
// 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);
// Calculate viewport dimensions (this is NOT necessarily the
// same as 100vw and 100vh, 100%, etc., particularly when the
// on-screen keyboard of a mobile device pops open)
var viewportWidth = $window.innerWidth;
var viewportHeight = $window.innerHeight;
// 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
else if (adjustedHeight === 0)
$window.scrollTo(scrollWidth, scrollHeight);
// Adjust element height to fit exactly within visible area
if (viewportHeight !== lastViewportHeight) {
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
);
}
};

View File

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