From f581afa2672e38390d4f943886c7d3fab014f6bb 2012-05-06 19:08:04 From: Matthias BUSSONNIER Date: 2012-05-06 19:08:04 Subject: [PATCH] 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. --- diff --git a/IPython/frontend/html/notebook/static/js/layoutmanager.js b/IPython/frontend/html/notebook/static/js/layoutmanager.js index d596401..d40643c 100644 --- a/IPython/frontend/html/notebook/static/js/layoutmanager.js +++ b/IPython/frontend/html/notebook/static/js/layoutmanager.js @@ -20,8 +20,7 @@ var IPython = (function (IPython) { $(window).resize($.proxy(this.do_resize,this)); }; - - LayoutManager.prototype.do_resize = function () { + LayoutManager.prototype.app_height = function() { var win = $(window); var w = win.width(); var h = win.height(); @@ -38,7 +37,11 @@ var IPython = (function (IPython) { } else { toolbar_height = $('div#toolbar').outerHeight(true); } - var app_height = h-header_height-menubar_height-toolbar_height; // content height + return h-header_height-menubar_height-toolbar_height; // content height + } + + LayoutManager.prototype.do_resize = function () { + var app_height = this.app_height() // content height $('div#main_app').height(app_height); // content+padding+border height diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js index 26088b5..facc157 100644 --- a/IPython/frontend/html/notebook/static/js/notebook.js +++ b/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 () { diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js index c3d4fcf..60cce2d 100644 --- a/IPython/frontend/html/notebook/static/js/pager.js +++ b/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 = $("
").addClass("output_area output_stream"); toinsert.append($('
').html(utils.fixConsole(text)));
         this.pager_element.append(toinsert);
-    };   
+    };
 
 
     IPython.Pager = Pager;