Make pager resizable, and remember size...

Resizing to small collapse the pager keeping the size to at least 20%
height

(trying to) resize a collapsed pager to more than 10% "expand" it.

Pager can remember it size when toggling by clicking.

IPython/frontend/html/notebook/static/js/notebook.js

@@ -231,19 +231,29 @@ var IPython = (function (IPython) {
             return true;
         });
 
-        this.element.bind('collapse_pager', function () {
+        var collapse_time = function(time){
             var app_height = $('div#main_app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var new_height = app_height - splitter_height;
-            that.element.animate({height : new_height + 'px'}, 'fast');
+            that.element.animate({height : new_height + 'px'}, time);
+        }
+
+        this.element.bind('collapse_pager', function (event,extrap) {
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+            collapse_time(time);
         });
 
-        this.element.bind('expand_pager', function () {
+        var expand_time = function(time) {
             var app_height = $('div#main_app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var pager_height = $('div#pager').outerHeight(true);
             var new_height = app_height - pager_height - splitter_height; 
-            that.element.animate({height : new_height + 'px'}, 'fast');
+            that.element.animate({height : new_height + 'px'}, time);
+        }
+
+        this.element.bind('expand_pager', function (event, extrap) {
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+            expand_time(time);
         });
 
         $(window).bind('beforeunload', function () {

IPython/frontend/html/notebook/static/js/pager.js

@@ -15,30 +15,51 @@ var IPython = (function (IPython) {
 
     var Pager = function (pager_selector, pager_splitter_selector) {
         this.pager_element = $(pager_selector);
-        this.pager_splitter_element = $(pager_splitter_selector);
-        this.expanded = false;
+        var that = this;
         this.percentage_height = 0.40;
+        this.pager_splitter_element = $(pager_splitter_selector)
+            .draggable({
+                        containment: 'window',
+                        axis:'y',
+                        helper: null ,
+                        drag: function(event,ui){
+                            // recalculate the amount of space the pager should take
+                            var pheight =(document.height-event.clientY-4);
+                            var downprct = pheight/IPython.layout_manager.app_height();
+                                downprct = Math.min(0.9,downprct);
+                            if(downprct < 0.1) {
+                                that.percentage_height = 0.1;
+                                that.collapse({'duration':0});
+                            } else if(downprct > 0.2) {
+                                that.percentage_height = downprct;
+                                that.expand({'duration':0});
+                            }
+                            IPython.layout_manager.do_resize();
+                       }
+            });
+        this.expanded = false;
         this.style();
         this.bind_events();
     };
 
-
     Pager.prototype.style = function () {
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
         this.pager_element.addClass('border-box-sizing ui-widget');
-        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area');
+        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
     };
 
 
     Pager.prototype.bind_events = function () {
         var that = this;
 
-        this.pager_element.bind('collapse_pager', function () {
-            that.pager_element.hide('fast');
+        this.pager_element.bind('collapse_pager', function (event,extrap) {
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+            that.pager_element.hide(time);
         });
 
-        this.pager_element.bind('expand_pager', function () {
-            that.pager_element.show('fast');
+        this.pager_element.bind('expand_pager', function (event,extrap) {
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+            that.pager_element.show(time);
         });
 
         this.pager_splitter_element.hover(
@@ -57,18 +78,18 @@ var IPython = (function (IPython) {
     };
 
 
-    Pager.prototype.collapse = function () {
+    Pager.prototype.collapse = function (extrap) {
         if (this.expanded === true) {
-            this.pager_element.add($('div#notebook')).trigger('collapse_pager');
             this.expanded = false;
+            this.pager_element.add($('div#notebook')).trigger('collapse_pager',extrap);
         };
     };
 
 
-    Pager.prototype.expand = function () {
+    Pager.prototype.expand = function (extrap) {
         if (this.expanded !== true) {
-            this.pager_element.add($('div#notebook')).trigger('expand_pager');
             this.expanded = true;
+            this.pager_element.add($('div#notebook')).trigger('expand_pager',extrap);
         };
     };
 
@@ -91,7 +112,7 @@ var IPython = (function (IPython) {
         var toinsert = $("<div/>").addClass("output_area output_stream");
         toinsert.append($('<pre/>').html(utils.fixConsole(text)));
         this.pager_element.append(toinsert);
-    };   
+    };
 
 
     IPython.Pager = Pager;