Adding ability to show/hide toolbar, using jquery.cookie.js for statefulness.

Signed-off-by: Rob Hudson <rob@cogit8.org>

5 files changed, 59 insertions, 2 deletions

diff --git a/debug_toolbar/media/Makefile b/debug_toolbar/media/Makefile
index 7f8f2b2..a7fd227 100644
--- a/debug_toolbar/media/Makefile
+++ b/debug_toolbar/media/Makefile
@@ -3,6 +3,7 @@ all: compress_js compress_css
 
 compress_js:
 	java -jar ~/bin/yuicompressor.jar toolbar.js > toolbar.min.js
+	java -jar ~/bin/yuicompressor.jar jquery.cookie.js > jquery.cookie.min.js
 
 compress_css:
 	java -jar ~/bin/yuicompressor.jar --type css toolbar.css > toolbar.min.css
diff --git a/debug_toolbar/media/toolbar.css b/debug_toolbar/media/toolbar.css
index 2ce4226..a04f451 100644
--- a/debug_toolbar/media/toolbar.css
+++ b/debug_toolbar/media/toolbar.css
@@ -23,6 +23,27 @@
     right:0;
 }
 
+#djDebugToolbarHandle {
+    background: #326342;
+    height: 30px;
+    z-index: 100000000;
+    border-bottom: 2px solid #234f32;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    width: 16px;
+}
+
+#djDebugToolbarHandle ul li{
+	padding: 3px 0px 0px 3px;
+}
+
+#djDebugToolbarHandle ul li a{
+	font-size: 16px;
+	font-weight: bold;
+}
+
 #djDebugToolbar ul {
     margin: 0;
     padding: 0;
diff --git a/debug_toolbar/media/toolbar.js b/debug_toolbar/media/toolbar.js
index 455a2fc..dcd52ae 100644
--- a/debug_toolbar/media/toolbar.js
+++ b/debug_toolbar/media/toolbar.js
@@ -1,6 +1,7 @@
 var _$ = window.$;
 jQuery.noConflict();
 jQuery(function($) {
+	var COOKIE_NAME = 'dj_debug_panel';
 	$.djDebug = function(data, klass) {
 		$.djDebug.init();
 	}
@@ -35,6 +36,17 @@ jQuery(function($) {
 			$('#djDebugTemplatePanel a.djTemplateShowContext').click(function() {
 				$.djDebug.toggle_content($(this).parent().next());
 			});
+			$('#djHideToolBarButton').click(function() {
+				$.djDebug.hide_toolbar(true);
+			});
+			$('#djShowToolBarButton').click(function() {
+				$.djDebug.show_toolbar();
+			});
+			if($.cookie(COOKIE_NAME)){
+				$.djDebug.hide_toolbar(false);
+			}else{
+				$('#djDebugToolbar').show();
+			}
 		},
 		open: function() {
 			$(document).bind('keydown.djDebug', function(e) {
@@ -53,6 +65,18 @@ jQuery(function($) {
 		close: function() {
 			$(document).trigger('close.djDebug');
 			return false;
+		},
+		hide_toolbar: function(setCookie) {
+			$('#djDebugToolbar').hide("fast");
+			$('#djDebugToolbarHandle').show();
+			if(setCookie){
+				$.cookie(COOKIE_NAME, 'hide', {path: '/', expires: 10 });
+			}
+		},
+		show_toolbar: function() {
+			$('#djDebugToolbarHandle').hide();
+			$('#djDebugToolbar').show("fast");
+			$.cookie(COOKIE_NAME, null, {path: '/', expires: -1 });
 		}
 	});
 	$(document).bind('close.djDebug', function() {
@@ -64,3 +88,4 @@ jQuery(function() {
 	jQuery.djDebug();
 });
 $ = _$;
+
diff --git a/debug_toolbar/media/toolbar.min.js b/debug_toolbar/media/toolbar.min.js
index 1f8b8b5..dc4b29d 100644
--- a/debug_toolbar/media/toolbar.min.js
+++ b/debug_toolbar/media/toolbar.min.js
@@ -1 +1 @@
-var _$=window.$;jQuery.noConflict();jQuery(function(A){A.djDebug=function(C,B){A.djDebug.init()};A.extend(A.djDebug,{init:function(){var B=null;A("#djDebugPanelList li a").click(function(){B=A("#djDebug #"+this.className);if(B.is(":visible")){A(document).trigger("close.djDebug")}else{A(".panelContent").hide();B.show();A.djDebug.open()}return false});A("#djDebug a.close").click(function(){A(document).trigger("close.djDebug");return false});A("#djDebug a.remoteCall").click(function(){A("#djDebugWindow").load(this.href,{},function(){A("#djDebugWindow a.back").click(function(){A(this).parent().hide();return false})});A("#djDebugWindow").show();return false});A("#djDebugTemplatePanel a.djTemplateShowContext").click(function(){A.djDebug.toggle_content(A(this).parent().next())})},open:function(){A(document).bind("keydown.djDebug",function(B){if(B.keyCode==27){A.djDebug.close()}})},toggle_content:function(B){if(B.is(":visible")){B.hide()}else{B.show()}},close:function(){A(document).trigger("close.djDebug");return false}});A(document).bind("close.djDebug",function(){A(document).unbind("keydown.djDebug");A(".panelContent").hide()})});jQuery(function(){jQuery.djDebug()});$=_$;
\ No newline at end of file
+var _$=window.$;jQuery.noConflict();jQuery(function(a){a.djDebug=function(c,b){a.djDebug.init()};a.extend(a.djDebug,{init:function(){var b=null;a("#djDebugPanelList li a").click(function(){b=a("#djDebug #"+this.className);if(b.is(":visible")){a(document).trigger("close.djDebug")}else{a(".panelContent").hide();b.show();a.djDebug.open()}return false});a("#djDebug a.close").click(function(){a(document).trigger("close.djDebug");return false});a("#djDebug a.remoteCall").click(function(){a("#djDebugWindow").load(this.href,{},function(){a("#djDebugWindow a.back").click(function(){a(this).parent().hide();return false})});a("#djDebugWindow").show();return false});a("#djDebugTemplatePanel a.djTemplateShowContext").click(function(){a.djDebug.toggle_content(a(this).parent().next())})},open:function(){a(document).bind("keydown.djDebug",function(b){if(b.keyCode==27){a.djDebug.close()}})},toggle_content:function(b){if(b.is(":visible")){b.hide()}else{b.show()}},close:function(){a(document).trigger("close.djDebug");return false}});a(document).bind("close.djDebug",function(){a(document).unbind("keydown.djDebug");a(".panelContent").hide()})});jQuery(function(){jQuery.djDebug()});$=_$;
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
index a6c8aef..3b8e92e 100644
--- a/debug_toolbar/templates/debug_toolbar/base.html
+++ b/debug_toolbar/templates/debug_toolbar/base.html
@@ -4,14 +4,19 @@
 		document.write(unescape('%3Cscript src="' + jquery_url + '" type="text/javascript"%3E%3C/script%3E'));
 	}
 </script>
+<script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/jquery.cookie.min.js"></script>
 <script type="text/javascript" src="{{ BASE_URL }}/__debug__/m/toolbar.min.js"></script>
 <style type="text/css">
 	@import url({{ BASE_URL }}/__debug__/m/toolbar.min.css);
 </style>
 <div id="djDebug">
-	<div id="djDebugToolbar">
+	<div style="display: none;" id="djDebugToolbar">
 		<ul id="djDebugPanelList">
+			{% if panels %}
+			<li><a id="djHideToolBarButton" href="#" title="Hide Toolbar">&laquo; Hide</a></li>
+			{% else %}
 			<li id="djDebugButton">DEBUG</li>
+			{% endif %}
 			{% for panel in panels %}
 				<li>
 					{% if panel.has_content %}
@@ -23,6 +28,11 @@
 			{% endfor %}
 		</ul>
 	</div>
+	<div style="display: none;" id="djDebugToolbarHandle">
+		<ul id="djDebugPanelList">
+			<li><a title="Show Toolbar" id="djShowToolBarButton" href="#">&raquo;</a></li>
+		</ul>
+	</div>
 	{% for panel in panels %}
 		{% if panel.has_content %}
 			<div id="{{ panel.dom_id }}" class="panelContent">