toolbar.js: Ensure toolbar handle cannot be dragged outside windowrestrict-toolbar-handle-to-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 files changed, 10 insertions, 1 deletions

diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index aacffc2..7bd1045 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -134,12 +134,21 @@
             $('#djShowToolBarButton').on('mousedown', function (event) {
                 var startPageY = event.pageY;
                 var baseY = handle.offset().top - startPageY;
+                var windowHeight = $(window).height();
                 $(document).on('mousemove.djDebug', function (event) {
                     // Chrome can send spurious mousemove events, so don't do anything unless the
                     // cursor really moved.  Otherwise, it will be impossible to expand the toolbar
                     // due to djdt.handleDragged being set to true.
                     if (djdt.handleDragged || event.pageY != startPageY) {
-                        handle.offset({top: baseY + event.pageY});
+                        var top = baseY + event.clientY;
+                        
+                        if (top < 0) {
+                            top = 0;
+                        } else if (top + handle.height() > windowHeight) {
+                            top = windowHeight - handle.height();
+                        }
+                        
+                        handle.css({top: top});
                         djdt.handleDragged = true;
                     }
                 });