Skip to content

Commit

Permalink
third attempt at scrolled long output
Browse files Browse the repository at this point in the history 
click/double-click on prompt area for toggling scroll/collapse
  • Loading branch information
@minrk
minrk committed Jun 8, 2012
1 parent 4c940c8 commit ff0f5cd
Show file tree
Hide file tree
Showing 5 changed files with 203 additions and 6 deletions.
42 changes: 40 additions & 2 deletions IPython/frontend/html/notebook/static/css/notebook.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ div#notebook {
width: 100%;
/* This spaces the cell away from the edge of the notebook area */
padding: 5px 5px 15px 5px;
margin: 0px
margin: 0px;
background-color: white;
}

Expand Down Expand Up @@ -133,6 +133,7 @@ div.cell {
div.code_cell {
background-color: white;
}

/* any special styling for code cells that are currently running goes here */
div.code_cell.running {
}
Expand Down Expand Up @@ -164,13 +165,50 @@ div.input_prompt {
border-top: 1px solid transparent;
}

div.output {
div.output_wrapper {
/* This is a spacer between the input and output of each cell */
margin-top: 5px;
margin-left: 5px;
/* FF needs explicit width to stretch */
width: 100%;
/* this position must be relative to enable descendents to be absolute within it */
position: relative;
}

/* class for the output area when it should be height-limited */
div.output_scroll {
/* ideally, this would be max-height, but FF barfs all over that */
height: 24em;
/* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
width: 100%;

overflow: auto;
border-radius: 3px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
}

/* output div while it is collapsed */
div.output_collapsed {
margin-right: 5px;
}

div.out_prompt_overlay {
height: 100%;
padding: 0px;
position: absolute;
border-radius: 3px;
}

div.out_prompt_overlay:hover {
/* use inner shadow to get border that is computed the same on WebKit/FF */
box-shadow: inset 0 0 1px #000;
background: rgba(200, 200, 255, 0.5);
}

div.output_prompt {
color: darkred;
/* 5px right shift to account for margin in parent container */
margin-left: 0 5px 0 -5px;
}

/* This class is the outer container of all output sections. */
Expand Down
9 changes: 9 additions & 0 deletions IPython/frontend/html/notebook/static/js/menubar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,15 @@ var IPython = (function (IPython) {
this.element.find('#toggle_output').click(function () {
IPython.notebook.toggle_output();
});
this.element.find('#collapse_all_output').click(function () {
IPython.notebook.collapse_all_output();
});
this.element.find('#scroll_all_output').click(function () {
IPython.notebook.scroll_all_output();
});
this.element.find('#expand_all_output').click(function () {
IPython.notebook.expand_all_output();
});
this.element.find('#clear_all_output').click(function () {
IPython.notebook.clear_all_output();
});
Expand Down
41 changes: 41 additions & 0 deletions IPython/frontend/html/notebook/static/js/notebook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -865,6 +865,47 @@ var IPython = (function (IPython) {
};


Notebook.prototype.collapse_all_output = function () {
var ncells = this.ncells();
var cells = this.get_cells();
for (var i=0; i<ncells; i++) {
if (cells[i] instanceof IPython.CodeCell) {
cells[i].output_area.collapse();
}
};
// this should not be set if the `collapse` key is removed from nbformat
this.dirty = true;
};


Notebook.prototype.scroll_all_output = function () {
var ncells = this.ncells();
var cells = this.get_cells();
for (var i=0; i<ncells; i++) {
if (cells[i] instanceof IPython.CodeCell) {
cells[i].output_area.expand();
cells[i].output_area.scroll_if_long(20);
}
};
// this should not be set if the `collapse` key is removed from nbformat
this.dirty = true;
};


Notebook.prototype.expand_all_output = function () {
var ncells = this.ncells();
var cells = this.get_cells();
for (var i=0; i<ncells; i++) {
if (cells[i] instanceof IPython.CodeCell) {
cells[i].output_area.expand();
cells[i].output_area.unscroll_area();
}
};
// this should not be set if the `collapse` key is removed from nbformat
this.dirty = true;
};


Notebook.prototype.clear_all_output = function () {
var ncells = this.ncells();
var cells = this.get_cells();
Expand Down
106 changes: 104 additions & 2 deletions IPython/frontend/html/notebook/static/js/outputarea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,36 +16,102 @@ var IPython = (function (IPython) {

var OutputArea = function (selector, prompt_area) {
this.selector = selector;
this.element = $(selector);
this.wrapper = $(selector);
this.outputs = [];
this.collapsed = false;
this.scrolled = false;
this.clear_out_timeout = null;
if (prompt_area === undefined) {
this.prompt_area = true;
} else {
this.prompt_area = prompt_area;
};
this.create_elements();
this.style();
this.bind_events();
};

OutputArea.prototype.create_elements = function () {
this.element = $("<div/>");
this.collapse_button = $("<div/>");
this.prompt_overlay = $("<div/>");
this.wrapper.append(this.prompt_overlay);
this.wrapper.append(this.element);
this.wrapper.append(this.collapse_button);
};


OutputArea.prototype.style = function () {
this.collapse_button.hide();
this.prompt_overlay.hide();

this.wrapper.addClass('output_wrapper');
this.element.addClass('output vbox');

this.collapse_button.button();
this.collapse_button.addClass('output_collapsed vbox');
this.collapse_button.attr('title', 'click to expand outout');
this.collapse_button.html('. . .');

this.prompt_overlay.addClass('out_prompt_overlay prompt');
this.prompt_overlay.attr('title', 'click to expand outout; dblclick to hide output');

this.collapse();
};


OutputArea.prototype._should_scroll = function (lines) {
if (!lines) {
lines = 50;
}
// line-height from http://stackoverflow.com/questions/1185151
var fontSize = this.element.css('font-size');
var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);

return (this.element.height() > lines * lineHeight);
};


OutputArea.prototype.bind_events = function () {
var that = this;
this.prompt_overlay.dblclick(function () { that.toggle_output(); });
this.prompt_overlay.click(function () { that.toggle_scroll(); });

this.element.resize(function () {
// maybe scroll output,
// if it's grown large enough and hasn't already been scrolled.
if ( !that.scrolled && that._should_scroll()) {
that.scroll_area();
}
});
this.collapse_button.click(function () {
that.expand();
});
this.collapse_button.hover(function () {
$(this).addClass("ui-state-hover");
}, function () {
$(this).removeClass("ui-state-hover");
});
};


OutputArea.prototype.collapse = function () {
if (!this.collapsed) {
this.element.hide();
this.prompt_overlay.hide();
if (this.element.html()){
this.collapse_button.show();
}
this.collapsed = true;
};
};


OutputArea.prototype.expand = function () {
if (this.collapsed) {
this.collapse_button.hide();
this.element.show();
this.prompt_overlay.show();
this.collapsed = false;
};
};
Expand All @@ -60,6 +126,38 @@ var IPython = (function (IPython) {
};


OutputArea.prototype.scroll_area = function () {
this.element.addClass('output_scroll');
this.prompt_overlay.attr('title', 'click to unscroll output; dblclick to hide');
this.scrolled = true;
};


OutputArea.prototype.unscroll_area = function () {
this.element.removeClass('output_scroll');
this.prompt_overlay.attr('title', 'click to scroll output; dblclick to hide');
this.scrolled = false;
};


OutputArea.prototype.scroll_if_long = function (lines) {
if (this._should_scroll(lines)) {
// only allow scrolling long-enough output
this.scroll_area();
};
};


OutputArea.prototype.toggle_scroll = function () {
if (this.scrolled) {
this.unscroll_area();
} else {
// only allow scrolling long-enough output
this.scroll_if_long(20);
};
};


// typeset with MathJax if MathJax is available
OutputArea.prototype.typeset = function () {
if (window.MathJax){
Expand Down Expand Up @@ -132,6 +230,8 @@ var IPython = (function (IPython) {
this.append_stream(json);
};
this.outputs.push(json);
var that = this;
setTimeout(function(){that.element.trigger('resize');}, 100);
};


Expand Down Expand Up @@ -346,6 +446,7 @@ var IPython = (function (IPython) {
// clear all, no need for logic
output_div.html("");
this.outputs = [];
this.unscroll_area();
return;
}
// remove html output
Expand All @@ -360,7 +461,8 @@ var IPython = (function (IPython) {
if (other) {
output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove();
}

this.unscroll_area();

// remove cleared outputs from JSON list:
for (var i = this.outputs.length - 1; i >= 0; i--) {
var out = this.outputs[i];
Expand Down
11 changes: 9 additions & 2 deletions IPython/frontend/html/notebook/templates/notebook.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,15 @@
<li id="to_heading5"><a href="#">Heading 5</a></li>
<li id="to_heading6"><a href="#">Heading 6</a></li>
<hr/>
<li id="toggle_output"><a href="#">Toggle Output</a></li>
<li id="clear_all_output"><a href="#">Clear All Output</a></li>
<li id="toggle_output"><a href="#">Toggle Current Output</a></li>
<li id="all_outputs"><a href="#">All Output</a>
<ul>
<li id="expand_all_output"><a href="#">Expand</a></li>
<li id="scroll_all_output"><a href="#">Scroll Long</a></li>
<li id="collapse_all_output"><a href="#">Collapse</a></li>
<li id="clear_all_output"><a href="#">Clear</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Kernel</a>
Expand Down

0 comments on commit ff0f5cd

Please sign in to comment.