##// END OF EJS Templates
Make pager resizable, and remember size......
Matthias BUSSONNIER -
Show More
@@ -20,8 +20,7 b' var IPython = (function (IPython) {'
20 $(window).resize($.proxy(this.do_resize,this));
20 $(window).resize($.proxy(this.do_resize,this));
21 };
21 };
22
22
23
23 LayoutManager.prototype.app_height = function() {
24 LayoutManager.prototype.do_resize = function () {
25 var win = $(window);
24 var win = $(window);
26 var w = win.width();
25 var w = win.width();
27 var h = win.height();
26 var h = win.height();
@@ -38,7 +37,11 b' var IPython = (function (IPython) {'
38 } else {
37 } else {
39 toolbar_height = $('div#toolbar').outerHeight(true);
38 toolbar_height = $('div#toolbar').outerHeight(true);
40 }
39 }
41 var app_height = h-header_height-menubar_height-toolbar_height; // content height
40 return h-header_height-menubar_height-toolbar_height; // content height
41 }
42
43 LayoutManager.prototype.do_resize = function () {
44 var app_height = this.app_height() // content height
42
45
43 $('div#main_app').height(app_height); // content+padding+border height
46 $('div#main_app').height(app_height); // content+padding+border height
44
47
@@ -231,19 +231,29 b' var IPython = (function (IPython) {'
231 return true;
231 return true;
232 });
232 });
233
233
234 this.element.bind('collapse_pager', function () {
234 var collapse_time = function(time){
235 var app_height = $('div#main_app').height(); // content height
235 var app_height = $('div#main_app').height(); // content height
236 var splitter_height = $('div#pager_splitter').outerHeight(true);
236 var splitter_height = $('div#pager_splitter').outerHeight(true);
237 var new_height = app_height - splitter_height;
237 var new_height = app_height - splitter_height;
238 that.element.animate({height : new_height + 'px'}, 'fast');
238 that.element.animate({height : new_height + 'px'}, time);
239 }
240
241 this.element.bind('collapse_pager', function (event,extrap) {
242 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
243 collapse_time(time);
239 });
244 });
240
245
241 this.element.bind('expand_pager', function () {
246 var expand_time = function(time) {
242 var app_height = $('div#main_app').height(); // content height
247 var app_height = $('div#main_app').height(); // content height
243 var splitter_height = $('div#pager_splitter').outerHeight(true);
248 var splitter_height = $('div#pager_splitter').outerHeight(true);
244 var pager_height = $('div#pager').outerHeight(true);
249 var pager_height = $('div#pager').outerHeight(true);
245 var new_height = app_height - pager_height - splitter_height;
250 var new_height = app_height - pager_height - splitter_height;
246 that.element.animate({height : new_height + 'px'}, 'fast');
251 that.element.animate({height : new_height + 'px'}, time);
252 }
253
254 this.element.bind('expand_pager', function (event, extrap) {
255 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
256 expand_time(time);
247 });
257 });
248
258
249 $(window).bind('beforeunload', function () {
259 $(window).bind('beforeunload', function () {
@@ -15,30 +15,51 b' var IPython = (function (IPython) {'
15
15
16 var Pager = function (pager_selector, pager_splitter_selector) {
16 var Pager = function (pager_selector, pager_splitter_selector) {
17 this.pager_element = $(pager_selector);
17 this.pager_element = $(pager_selector);
18 this.pager_splitter_element = $(pager_splitter_selector);
18 var that = this;
19 this.expanded = false;
20 this.percentage_height = 0.40;
19 this.percentage_height = 0.40;
20 this.pager_splitter_element = $(pager_splitter_selector)
21 .draggable({
22 containment: 'window',
23 axis:'y',
24 helper: null ,
25 drag: function(event,ui){
26 // recalculate the amount of space the pager should take
27 var pheight =(document.height-event.clientY-4);
28 var downprct = pheight/IPython.layout_manager.app_height();
29 downprct = Math.min(0.9,downprct);
30 if(downprct < 0.1) {
31 that.percentage_height = 0.1;
32 that.collapse({'duration':0});
33 } else if(downprct > 0.2) {
34 that.percentage_height = downprct;
35 that.expand({'duration':0});
36 }
37 IPython.layout_manager.do_resize();
38 }
39 });
40 this.expanded = false;
21 this.style();
41 this.style();
22 this.bind_events();
42 this.bind_events();
23 };
43 };
24
44
25
26 Pager.prototype.style = function () {
45 Pager.prototype.style = function () {
27 this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
46 this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
28 this.pager_element.addClass('border-box-sizing ui-widget');
47 this.pager_element.addClass('border-box-sizing ui-widget');
29 this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area');
48 this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
30 };
49 };
31
50
32
51
33 Pager.prototype.bind_events = function () {
52 Pager.prototype.bind_events = function () {
34 var that = this;
53 var that = this;
35
54
36 this.pager_element.bind('collapse_pager', function () {
55 this.pager_element.bind('collapse_pager', function (event,extrap) {
37 that.pager_element.hide('fast');
56 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
57 that.pager_element.hide(time);
38 });
58 });
39
59
40 this.pager_element.bind('expand_pager', function () {
60 this.pager_element.bind('expand_pager', function (event,extrap) {
41 that.pager_element.show('fast');
61 time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
62 that.pager_element.show(time);
42 });
63 });
43
64
44 this.pager_splitter_element.hover(
65 this.pager_splitter_element.hover(
@@ -57,18 +78,18 b' var IPython = (function (IPython) {'
57 };
78 };
58
79
59
80
60 Pager.prototype.collapse = function () {
81 Pager.prototype.collapse = function (extrap) {
61 if (this.expanded === true) {
82 if (this.expanded === true) {
62 this.pager_element.add($('div#notebook')).trigger('collapse_pager');
63 this.expanded = false;
83 this.expanded = false;
84 this.pager_element.add($('div#notebook')).trigger('collapse_pager',extrap);
64 };
85 };
65 };
86 };
66
87
67
88
68 Pager.prototype.expand = function () {
89 Pager.prototype.expand = function (extrap) {
69 if (this.expanded !== true) {
90 if (this.expanded !== true) {
70 this.pager_element.add($('div#notebook')).trigger('expand_pager');
71 this.expanded = true;
91 this.expanded = true;
92 this.pager_element.add($('div#notebook')).trigger('expand_pager',extrap);
72 };
93 };
73 };
94 };
74
95
General Comments 0
You need to be logged in to leave comments. Login now