jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move the handle properly when page is scrolled 

The coordinates used to calculate the position for the toolbar handle
wrongly took page-offset into account. Util.getPosition was being used
for this. Thus, when page was scrolled, this caused the handle to be
offset when it was being moved. Use getBoundingClientRect instead.
This commit is contained in:
Samuel Mannehed 2016-10-18 13:26:17 +02:00
parent da346c3b21
commit 59cd99bc38
1 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/ui.js
View File

@ -549,37 +549,44 @@ var UI;
}, },
// Move the handle but don't allow any position outside the bounds // Move the handle but don't allow any position outside the bounds
moveControlbarHandle: function (posY) { moveControlbarHandle: function (viewportRelativeY) {
var handle = document.getElementById("noVNC_control_bar_handle"); var handle = document.getElementById("noVNC_control_bar_handle");
var handleHeight = Util.getPosition(handle).height; var handleHeight = handle.getBoundingClientRect().height;
var controlbar = document.getElementById("noVNC_control_bar"); var controlbarBounds = document.getElementById("noVNC_control_bar")
var controlbarBounds = Util.getPosition(controlbar); .getBoundingClientRect();
var controlbarTop = controlbarBounds.y;
var controlbarBottom = controlbarBounds.y + controlbarBounds.height;
var margin = 10; var margin = 10;
var viewportY = posY; var newY = viewportRelativeY;
// Refuse coordinates outside the control bar // Check if the coordinates are outside the control bar
if (viewportY < controlbarTop + margin) { if (newY < controlbarBounds.top + margin) {
viewportY = controlbarTop + margin; // Force coordinates to be below the top of the control bar
} else if (viewportY > controlbarBottom - handleHeight - margin) { newY = controlbarBounds.top + margin;
viewportY = controlbarBottom - handleHeight - margin;
} else if (newY > controlbarBounds.top +
controlbarBounds.height - handleHeight - margin) {
// Force coordinates to be above the bottom of the control bar
newY = controlbarBounds.top +
controlbarBounds.height - handleHeight - margin;
} }
// Corner case: control bar too small for stable position // Corner case: control bar too small for stable position
if (controlbarBounds.height < (handleHeight + margin * 2)) { if (controlbarBounds.height < (handleHeight + margin * 2)) {
viewportY = controlbarTop + (controlbarBounds.height - handleHeight) / 2; newY = controlbarBounds.top +
(controlbarBounds.height - handleHeight) / 2;
} }
var relativeY = viewportY - controlbarTop; // The transform needs coordinates that are relative to the parent
handle.style.transform = "translateY(" + relativeY + "px)"; var parentRelativeY = newY - controlbarBounds.top;
handle.style.transform = "translateY(" + parentRelativeY + "px)";
}, },
updateControlbarHandle: function () { updateControlbarHandle: function () {
// Since the control bar is fixed on the viewport and not the page,
// the move function expects coordinates relative the the viewport.
var handle = document.getElementById("noVNC_control_bar_handle"); var handle = document.getElementById("noVNC_control_bar_handle");
var pos = Util.getPosition(handle); var handleBounds = handle.getBoundingClientRect();
UI.moveControlbarHandle(pos.y); UI.moveControlbarHandle(handleBounds.top);
}, },
controlbarHandleMouseUp: function(e) { controlbarHandleMouseUp: function(e) {