Skip to content

Commit b2957c1

Browse files
committed
toolbar.js: Ensure toolbar handle cannot be dragged outside window
Previously the toolbar handle could be dragged beyond the top and bottom of the window where it could get lost. If the handle position outside the window border was saved, the only way to get the handle back that I found would be to open the inspector and manually change the handle's offset to make it visible once again. This change restricts the handle so that it cannot be dragged above the top or below the bottom of the window area. Using `event.clientY` in order to get the cursor position relative to the viewport instead of the document (as is the case with `event.pageY`). This allows the handle to be dragged when the page is scrolled. Closes #634.
1 parent 2a1458d commit b2957c1

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

debug_toolbar/static/debug_toolbar/js/toolbar.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,12 +134,21 @@
134134
$('#djShowToolBarButton').on('mousedown', function (event) {
135135
var startPageY = event.pageY;
136136
var baseY = handle.offset().top - startPageY;
137+
var windowHeight = $(window).height();
137138
$(document).on('mousemove.djDebug', function (event) {
138139
// Chrome can send spurious mousemove events, so don't do anything unless the
139140
// cursor really moved. Otherwise, it will be impossible to expand the toolbar
140141
// due to djdt.handleDragged being set to true.
141142
if (djdt.handleDragged || event.pageY != startPageY) {
142-
handle.offset({top: baseY + event.pageY});
143+
var top = baseY + event.clientY;
144+
145+
if (top < 0) {
146+
top = 0;
147+
} else if (top + handle.height() > windowHeight) {
148+
top = windowHeight - handle.height();
149+
}
150+
151+
handle.css({top: top});
143152
djdt.handleDragged = true;
144153
}
145154
});

0 commit comments

Comments
 (0)