mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-06 11:35:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1705 from Carreau/draggablePager

Browse Source 
[notebook] Make pager resizable, and remember size...
This commit is contained in:
Bussonnier Matthias 2012-05-25 00:20:19 -07:00
commit 242d3df5c2
2 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
IPython/frontend/html/notebook/static/js/notebook.js
View File

@ -231,19 +231,29 @@ var IPython = (function (IPython) {
return true; return true;
}); });
this.element.bind('collapse_pager', function () { var collapse_time = function(time){
var app_height = $('div#main_app').height(); // content height var app_height = $('div#main_app').height(); // content height
var splitter_height = $('div#pager_splitter').outerHeight(true); var splitter_height = $('div#pager_splitter').outerHeight(true);
var new_height = app_height - splitter_height; 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 app_height = $('div#main_app').height(); // content height
var splitter_height = $('div#pager_splitter').outerHeight(true); var splitter_height = $('div#pager_splitter').outerHeight(true);
var pager_height = $('div#pager').outerHeight(true); var pager_height = $('div#pager').outerHeight(true);
var new_height = app_height - pager_height - splitter_height; 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 () { $(window).bind('beforeunload', function () {

45
IPython/frontend/html/notebook/static/js/pager.js
View File

@ -15,30 +15,51 @@ var IPython = (function (IPython) {
var Pager = function (pager_selector, pager_splitter_selector) { var Pager = function (pager_selector, pager_splitter_selector) {
this.pager_element = $(pager_selector); this.pager_element = $(pager_selector);
this.pager_splitter_element = $(pager_splitter_selector); var that = this;
this.expanded = false;
this.percentage_height = 0.40; 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 = ($(body).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.style();
this.bind_events(); this.bind_events();
}; };
Pager.prototype.style = function () { Pager.prototype.style = function () {
this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default'); this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
this.pager_element.addClass('border-box-sizing ui-widget'); 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 () { Pager.prototype.bind_events = function () {
var that = this; var that = this;
this.pager_element.bind('collapse_pager', function () { this.pager_element.bind('collapse_pager', function (event, extrap) {
that.pager_element.hide('fast'); time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
that.pager_element.hide(time);
}); });
this.pager_element.bind('expand_pager', function () { this.pager_element.bind('expand_pager', function (event, extrap) {
that.pager_element.show('fast'); time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
that.pager_element.show(time);
}); });
this.pager_splitter_element.hover( 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) { if (this.expanded === true) {
this.pager_element.add($('div#notebook')).trigger('collapse_pager');
this.expanded = false; 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) { if (this.expanded !== true) {
this.pager_element.add($('div#notebook')).trigger('expand_pager');
this.expanded = true; this.expanded = true;
this.pager_element.add($('div#notebook')).trigger('expand_pager', extrap);
}; };
}; };