mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-03-13 13:17:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Attempt 1, HBox and VBox implementation.

Browse Source
This commit is contained in:
Jonathan Frederic 2013-10-21 09:55:49 -07:00
parent 65a6000919
commit 2ad57f6f9d
8 changed files with 82 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
IPython/html/static/notebook/js/widget.js
View File

@ -169,7 +169,7 @@ define(["static/components/underscore/underscore-min.js",
// Add the view's element to cell's widget div.
widget_area
.append($("<div />").append(widget_view.$el))
.append(widget_view.$el)
.parent().show(); // Show the widget_area (parent of widget_subarea)
// Update the view based on the model contents.
@ -204,6 +204,7 @@ define(["static/components/underscore/underscore-min.js",
// Handle when a widget is updated via the python side.
WidgetManager.prototype.handle_update = function (comm, state) {
this.updating = true;
for (var key in state) {
if (state.hasOwnProperty(key)) {
if (key=="_css"){
@ -214,6 +215,7 @@ define(["static/components/underscore/underscore-min.js",
}
}
comm.model.save();
this.updating = false;
}
// Handle when a widget is closed.
@ -233,21 +235,25 @@ define(["static/components/underscore/underscore-min.js",
// Send widget state to python backend.
WidgetManager.prototype.send_sync = function (method, model) {
// Create a callback for the output if the widget has an output area associate with it.
var callbacks = {};
var comm = model.comm;
var outputarea = this._get_comm_outputarea(comm);
if (outputarea != null) {
callbacks = {
iopub : {
output : $.proxy(outputarea.handle_output, outputarea),
clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
};
};
var model_json = model.toJSON();
var data = {sync_method: method, sync_data: model_json};
comm.send(data, callbacks);
// Only send updated state if the state hasn't been changed during an update.
if (!this.updating) {
// Create a callback for the output if the widget has an output area associate with it.
var callbacks = {};
var comm = model.comm;
var outputarea = this._get_comm_outputarea(comm);
if (outputarea != null) {
callbacks = {
iopub : {
output : $.proxy(outputarea.handle_output, outputarea),
clear_output : $.proxy(outputarea.handle_clear_output, outputarea)}
};
};
var data = {sync_method: method, sync_data: model_json};
comm.send(data, callbacks);
}
return model_json;
}

2
IPython/html/static/notebook/js/widgets/bool.js
View File

@ -10,6 +10,7 @@ require(["notebook/js/widget"], function(){
render : function(){
this.$el
.html('')
.addClass('widget_item')
.addClass(this.model.comm.comm_id);
var $label = $('<label />')
@ -19,6 +20,7 @@ require(["notebook/js/widget"], function(){
.attr('type', 'checkbox')
.appendTo($label);
this.$checkbox_label = $('<div />')
.addClass('widget_item')
.appendTo($label);
this.update(); // Set defaults.

19
IPython/html/static/notebook/js/widgets/container.js
View File

@ -5,14 +5,23 @@ require(["notebook/js/widget"], function(){
var ContainerView = IPython.WidgetView.extend({
render : function(){
this.$el.html('');
this.$container = $('<div />')
.addClass('container')
this.$el = $('<div />')
.addClass(this.model.comm.comm_id);
this.$el.append(this.$container);
},
update : function(){},
update : function(){
if (this.model.get('vbox')) {
this.$el.addClass('vbox');
} else {
this.$el.removeClass('vbox');
}
if (this.model.get('hbox')) {
this.$el.addClass('hbox');
} else {
this.$el.removeClass('hbox');
}
},
});
IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView);

6
IPython/html/static/notebook/js/widgets/selection.js
View File

@ -9,8 +9,10 @@ require(["notebook/js/widget"], function(){
this.$el
.html('')
.addClass('widget_item')
.addClass(this.model.comm.comm_id);
this.$buttongroup = $('<div />')
.addClass('widget_item')
.addClass('btn-group')
.appendTo(this.$el);
this.$droplabel = $('<button />')
@ -43,6 +45,7 @@ require(["notebook/js/widget"], function(){
.html(items[index])
.on('click', function(e){
that.model.set('value', $(e.target).html(), this );
that.model.apply(that);
})
this.$droplist.append($('<li />').append(item_button))
@ -71,6 +74,7 @@ require(["notebook/js/widget"], function(){
render : function(){
this.$el
.html('')
.addClass('widget_item')
.addClass(this.model.comm.comm_id);
this.update();
},
@ -136,8 +140,10 @@ require(["notebook/js/widget"], function(){
render : function(){
this.$el
.html('')
.addClass('widget_item')
.addClass(this.model.comm.comm_id);
this.$buttongroup = $('<div />')
.addClass('widget_item')
.addClass('btn-group')
.attr('data-toggle', 'buttons-radio')
.appendTo(this.$el);

12
IPython/html/static/notebook/js/widgets/string.js
View File

@ -6,18 +6,16 @@ require(["notebook/js/widget"], function(){
// Called when view is rendered.
render : function(){
this.$el
.html('');
this.$label = $('<div />')
.addClass(this.model.comm.comm_id)
.appendTo(this.$el);
this.$el = $('<div />')
.addClass('widget_item')
.addClass(this.model.comm.comm_id);
this.update(); // Set defaults.
},
// Handles: Backend -> Frontend Sync
// Frontent -> Frontend Sync
update : function(){
this.$label.html(this.model.get('value'));
this.$el.html(this.model.get('value'));
},
});
@ -30,6 +28,7 @@ require(["notebook/js/widget"], function(){
render : function(){
this.$el
.html('')
.addClass('widget_item')
.addClass(this.model.comm.comm_id);
this.$textbox = $('<textarea />')
.attr('rows', 5)
@ -66,6 +65,7 @@ require(["notebook/js/widget"], function(){
render : function(){
this.$el
.html('')
.addClass('widget_item')
.addClass(this.model.comm.comm_id);
this.$textbox = $('<input type="text" />')
.addClass('input')

13
IPython/html/static/notebook/less/widgetarea.less
View File

@ -1,8 +1,21 @@
div.widget_area {
page-break-inside: avoid;
.vbox();
}
div.widget_hbox {
.hbox();
}
div.widget_vbox {
.vbox();
}
div.widget_item {
display: inline-block;
}
/* This class is for the widget subarea inside the widget_area and after
the prompt div. */
div.widget_subarea {

15
IPython/html/static/style/ipython.min.css vendored
View File

@ -152,3 +152,18 @@ div.text_cell_input{color:#000000;border:1px solid #cfcfcf;border-radius:4px;bac
div.text_cell_render{outline:none;resize:none;width:inherit;border-style:none;padding:5px;color:#000000;}
a.anchor-link:link{text-decoration:none;padding:0px 20px;visibility:hidden;}
h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anchor-link,h5:hover .anchor-link,h6:hover .anchor-link{visibility:visible;}
.toolbar{padding:0px 10px;margin-top:-5px;}.toolbar select,.toolbar label{width:auto;height:26px;vertical-align:middle;margin-right:2px;margin-bottom:0px;display:inline;font-size:92%;margin-left:0.3em;margin-right:0.3em;padding:0px;padding-top:3px;}
.toolbar .btn{padding:2px 8px;}
.toolbar .btn-group{margin-top:0px;}
.toolbar-inner{border:none !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;}
#maintoolbar{margin-bottom:0px;}
@-moz-keyframes fadeOut{from{opacity:1;} to{opacity:0;}}@-webkit-keyframes fadeOut{from{opacity:1;} to{opacity:0;}}@-moz-keyframes fadeIn{from{opacity:0;} to{opacity:1;}}@-webkit-keyframes fadeIn{from{opacity:0;} to{opacity:1;}}.bigtooltip{overflow:auto;height:200px;-webkit-transition-property:height;-webkit-transition-duration:500ms;-moz-transition-property:height;-moz-transition-duration:500ms;transition-property:height;transition-duration:500ms;}
.smalltooltip{-webkit-transition-property:height;-webkit-transition-duration:500ms;-moz-transition-property:height;-moz-transition-duration:500ms;transition-property:height;transition-duration:500ms;text-overflow:ellipsis;overflow:hidden;height:80px;}
.tooltipbuttons{position:absolute;padding-right:15px;top:0px;right:0px;}
.tooltiptext{padding-right:30px;}
.ipython_tooltip{max-width:700px;-webkit-animation:fadeOut 400ms;-moz-animation:fadeOut 400ms;animation:fadeOut 400ms;-webkit-animation:fadeIn 400ms;-moz-animation:fadeIn 400ms;animation:fadeIn 400ms;vertical-align:middle;background-color:#f7f7f7;overflow:visible;border:#ababab 1px solid;outline:none;padding:3px;margin:0px;padding-left:7px;font-family:monospace;min-height:50px;-moz-box-shadow:0px 6px 10px -1px #adadad;-webkit-box-shadow:0px 6px 10px -1px #adadad;box-shadow:0px 6px 10px -1px #adadad;border-radius:4px;position:absolute;z-index:2;}.ipython_tooltip a{float:right;}
.ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;}
.pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;}
.pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
div.widget_area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}

7
IPython/html/widgets/widget_container.py
View File

@ -1,7 +1,10 @@
from base import Widget
from IPython.utils.traitlets import Unicode
from IPython.utils.traitlets import Unicode, Bool
class ContainerWidget(Widget):
target_name = Unicode('container_widget')
default_view_name = Unicode('ContainerView')
_keys = ['vbox', 'hbox']
hbox = Bool(True)
vbox = Bool(False)