Skip to content

Commit

Permalink
Make pager resizable, and remember size...
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@Carreau
Carreau committed May 6, 2012
1 parent 4cf98b4 commit f581afa
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 20 deletions.
9 changes: 6 additions & 3 deletions IPython/frontend/html/notebook/static/js/layoutmanager.js
View file
Expand Up @@ -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();
Expand All @@ -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

Expand Down
18 changes: 14 additions & 4 deletions IPython/frontend/html/notebook/static/js/notebook.js
View file
Expand Up @@ -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 () {
Expand Down
47 changes: 34 additions & 13 deletions IPython/frontend/html/notebook/static/js/pager.js
View file
Expand Up @@ -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(
Expand All @@ -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);
};
};

Expand All @@ -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;
Expand Down

0 comments on commit f581afa

Please sign in to comment.