From b2957c1782e7053e389d9bb2a3f0f2558a914bfe Mon Sep 17 00:00:00 2001
From: Teddy Wing <git@teddywing.com>
Date: Sat, 16 Aug 2014 21:18:49 -0400
Subject: [PATCH] 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.
---
 debug_toolbar/static/debug_toolbar/js/toolbar.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index aacffc2e6..7bd10454a 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;
                     }
                 });