Permalink
Browse files

Pager is working again.

  • Loading branch information...
ellisonbg committed Jul 19, 2011
1 parent a0257f5 commit 9262f15de7964020e22f7e72d7c848fdd898f3dd
@@ -122,7 +122,7 @@ div#left_panel {
}
div#left_panel_splitter {
- width: 7px;
+ width: 8px;
top: 0px;
left: 202px;
margin: 0px;
@@ -131,22 +131,22 @@ div#left_panel_splitter {
}
div#notebook_panel {
- margin: 0px 0px 0px 211px;
+ margin: 0px 0px 0px 209px;
padding: 0px;
}
div#notebook {
overflow-y: scroll;
overflow-x: auto;
width: 100%;
- padding: 0px 0px;
+ padding: 0px 15px 15px 15px;
margin: 0px
background-color: white;
font-size: 12pt;
}
div#pager_splitter {
- height: 7px;
+ height: 8px;
}
div#pager {
@@ -161,7 +161,7 @@ div#pager {
div.cell {
width: 100%;
- padding: 0px;
+ padding: 5px;
/* This acts as a spacer between cells, that is outside the border */
margin: 15px 0px 15px 0px;
}
@@ -20,23 +20,6 @@ var IPython = (function (IPython) {
};
- Cell.prototype.grow = function(element) {
- // Grow the cell by hand. This is used upon reloading from JSON, when the
- // autogrow handler is not called.
- var dom = element.get(0);
- var lines_count = 0;
- // modified split rule from
- // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424
- var lines = dom.value.split(/\r|\r\n|\n/);
- lines_count = lines.length;
- if (lines_count >= 1) {
- dom.rows = lines_count;
- } else {
- dom.rows = 1;
- }
- };
-
-
Cell.prototype.select = function () {
this.element.addClass('ui-widget-content ui-corner-all');
this.selected = true;
@@ -18,7 +18,7 @@ var IPython = (function (IPython) {
CodeCell.prototype.create_element = function () {
- var cell = $('<div></div>').addClass('cell code_cell vbox');
+ var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
var input = $('<div></div>').addClass('input hbox');
input.append($('<div/>').addClass('prompt input_prompt monospace-font'));
var input_area = $('<div/>').addClass('input_area box-flex1');
@@ -81,6 +81,22 @@ var IPython = (function (IPython) {
};
};
});
+
+ this.element.bind('collapse_pager', function () {
+ var that_height = that.element.outerHeight(true);
+ var pager_height = $('div#pager').outerHeight(true);
+ var new_height = that_height + pager_height;
+ console.log('collapse', that_height, pager_height, new_height);
+ that.element.animate({height : new_height + 'px'}, 'fast');
+ });
+
+ this.element.bind('expand_pager', function () {
+ var that_height = that.element.outerHeight(true);
+ var pager_height = $('div#pager').outerHeight(true);
+ var new_height = that_height - pager_height;
+ console.log('expand', that_height, pager_height, new_height);
+ that.element.animate({height : new_height + 'px'}, 'fast');
+ });
};
@@ -7,10 +7,11 @@
$(document).ready(function () {
- $('div#notebook_app').addClass('ui-widget ui-widget-content')
- $('div#left_panel').addClass('ui-widget')
- $('div#left_panel_splitter').addClass('ui-widget ui-widget-content')
- $('div#notebook_panel').addClass('ui-widget')
+ $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
+ $('div#left_panel').addClass('border-box-sizing ui-widget');
+ $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-state-default');
+ $('div#notebook_panel').addClass('border-box-sizing ui-widget');
+ $('div#notebook').addClass('border-box-sizing');
$('div#left_panel_splitter').click(function () {
$('div#left_panel').toggle('fast');
@@ -40,12 +41,16 @@ $(document).ready(function () {
var win = $(window);
var w = win.width();
var h = win.height();
- var app_height = h - 50;
- $('div#notebook_app').height(app_height);
+ var header_height = $('div#header').outerHeight(true);
+ var app_height = h - header_height - 2;
+ var pager_height = $('div#pager').outerHeight(true);
+ var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
+ $('div#notebook_app').height(app_height + 2);
$('div#left_panel').height(app_height);
$('div#left_panel_splitter').height(app_height);
$('div#notebook_panel').height(app_height);
- $('div#notebook').height(app_height-211);
+ $('div#notebook').height(app_height-pager_height-pager_splitter_height);
+ console.log('resize: ', app_height);
};
$(window).resize(do_resize);
@@ -10,22 +10,27 @@ var IPython = (function (IPython) {
var Pager = function (pager_selector, pager_toggle_selector) {
this.pager_element = $(pager_selector);
this.pager_toggle_element = $(pager_toggle_selector);
+ this.expanded = true;
this.style();
this.bind_events();
- this.collapse();
};
Pager.prototype.style = function () {
- this.pager_toggle_element.addClass('ui-widget ui-widget-content')
- this.pager_element.addClass('')
+ this.pager_toggle_element.addClass('border-box-sizing ui-widget ui-state-default');
+ this.pager_element.addClass('border-box-sizing ui-widget');
};
Pager.prototype.bind_events = function () {
var that = this;
- this.pager_toggle_element.click(function () {
- that.pager_element.toggle('fast');
+
+ this.pager_element.bind('collapse_pager', function () {
+ that.pager_element.hide('fast');
+ });
+
+ this.pager_element.bind('expand_pager', function () {
+ that.pager_element.show('fast');

This comment has been minimized.

Show comment Hide comment
@Carreau

Carreau May 6, 2012

Owner

Those 2 bindings seem not to be used. The collapse/expand_pager triggerd seem to be in notebook.js. Am I wrong ? Should I remove them from here ?

@Carreau

Carreau May 6, 2012

Owner

Those 2 bindings seem not to be used. The collapse/expand_pager triggerd seem to be in notebook.js. Am I wrong ? Should I remove them from here ?

This comment has been minimized.

Show comment Hide comment
@Carreau

Carreau May 6, 2012

Owner

Hum, it seem that I'm wrong... I'm not sure t understand how it works then... and what's the difference between those binding and the ones in notebooks.js
Sorry for the noise.

@Carreau

Carreau May 6, 2012

Owner

Hum, it seem that I'm wrong... I'm not sure t understand how it works then... and what's the difference between those binding and the ones in notebooks.js
Sorry for the noise.

This comment has been minimized.

Show comment Hide comment
@ellisonbg

ellisonbg May 8, 2012

Owner

I don't know why we have both of them, but I did a test and confirm that both are being called when pager.js L62 is run. W can probably move all that logic to pager.js as I don't see anything notebook specific in the notebook.js version. This code was written very early on so I am not surprised it is crusty.

@ellisonbg

ellisonbg May 8, 2012

Owner

I don't know why we have both of them, but I did a test and confirm that both are being called when pager.js L62 is run. W can probably move all that logic to pager.js as I don't see anything notebook specific in the notebook.js version. This code was written very early on so I am not surprised it is crusty.

This comment has been minimized.

Show comment Hide comment
@Carreau

Carreau May 8, 2012

Owner

I think the one in pager.js grow/shrink the pager below the separator while the one in notebook.js shrink/grow the height of the notebook area. So it kind of make sens to have function dealing with notebook in notebook..

@Carreau

Carreau May 8, 2012

Owner

I think the one in pager.js grow/shrink the pager below the separator while the one in notebook.js shrink/grow the height of the notebook area. So it kind of make sens to have function dealing with notebook in notebook..

This comment has been minimized.

Show comment Hide comment
@ellisonbg

ellisonbg May 8, 2012

Owner
@ellisonbg

ellisonbg via email May 8, 2012

Owner
});
this.pager_toggle_element.hover(
@@ -36,16 +41,35 @@ var IPython = (function (IPython) {
that.pager_toggle_element.removeClass('ui-state-hover');
}
);
+
+ this.pager_toggle_element.click(function () {
+ that.toggle();
+ });
};
Pager.prototype.collapse = function () {
- this.pager_element.hide('fast');
+ if (this.expanded === true) {
+ this.pager_element.add($('div#notebook')).trigger('collapse_pager');
+ this.expanded = false;
+ };
};
Pager.prototype.expand = function () {
- this.pager_element.show('fast');
+ if (this.expanded !== true) {
+ this.pager_element.add($('div#notebook')).trigger('expand_pager');
+ this.expanded = true;
+ };
+ };
+
+
+ Pager.prototype.toggle = function () {
+ if (this.expanded === true) {
+ this.collapse();
+ } else {
+ this.expand();
+ };
};
@@ -32,6 +32,7 @@ IPython.utils = (function (IPython) {
.replace(/`/g,'&'+'#96;')
}
+
//Map from terminal commands to CSS classes
attrib = {
"30":"cblack", "31":"cred",
@@ -63,9 +64,28 @@ IPython.utils = (function (IPython) {
return txt.trim()
}
+
+ grow = function(element) {
+ // Grow the cell by hand. This is used upon reloading from JSON, when the
+ // autogrow handler is not called.
+ var dom = element.get(0);
+ var lines_count = 0;
+ // modified split rule from
+ // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424
+ var lines = dom.value.split(/\r|\r\n|\n/);
+ lines_count = lines.length;
+ if (lines_count >= 1) {
+ dom.rows = lines_count;
+ } else {
+ dom.rows = 1;
+ }
+ };
+
+
return {
uuid : uuid,
- fixConsole : fixConsole
+ fixConsole : fixConsole,
+ grow : grow
}
}(IPython));
@@ -6,9 +6,9 @@
<title>IPython Notebook</title>
- <!-- <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" /> -->
+ <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
<!-- <link rel="stylesheet" href="static/jquery/css/themes/rocket/jquery-wijmo.css" type="text/css" /> -->
- <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" />
+<!-- <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" />-->
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" charset="utf-8"></script>
<!-- <script type='text/javascript' src='static/mathjax/MathJax.js?config=TeX-AMS_HTML' charset='utf-8'></script> -->

0 comments on commit 9262f15

Please sign in to comment.