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

Added PEP8 style comments to all of the JS code.

Browse Source
This commit is contained in:
Jonathan Frederic 2014-01-16 16:48:14 +00:00
parent 7387f886c6
commit bd3ba3328c
8 changed files with 132 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
IPython/html/static/notebook/js/widgets/widget.js
View File

@ -18,10 +18,7 @@ define(["notebook/js/widgetmanager",
"underscore",
"backbone"],
function(widget_manager, underscore, backbone){
//--------------------------------------------------------------------
// WidgetModel class
//--------------------------------------------------------------------
var WidgetModel = Backbone.Model.extend({
constructor: function (widget_manager, model_id, comm) {
// Construcctor
@ -55,14 +52,15 @@ function(widget_manager, underscore, backbone){
},
send: function (content, callbacks) {
// Send a custom msg over the comm.
if (this.comm !== undefined) {
var data = {method: 'custom', custom_content: content};
this.comm.send(data, callbacks);
}
},
// Handle when a widget is closed.
_handle_comm_closed: function (msg) {
// Handle when a widget is closed.
this.trigger('comm:close');
delete this.comm.model; // Delete ref so GC will collect widget model.
delete this.comm;
@ -70,9 +68,8 @@ function(widget_manager, underscore, backbone){
// TODO: Handle deletion, like this.destroy(), and delete views, etc.
},
// Handle incoming comm msg.
_handle_comm_msg: function (msg) {
// Handle incoming comm msg.
var method = msg.content.data.method;
switch (method) {
case 'update':
@ -87,9 +84,8 @@ function(widget_manager, underscore, backbone){
}
},
// Handle when a widget is updated via the python side.
apply_update: function (state) {
// Handle when a widget is updated via the python side.
for (var key in state) {
if (state.hasOwnProperty(key)) {
var value = state[key];
@ -105,9 +101,10 @@ function(widget_manager, underscore, backbone){
this.save();
},
_handle_status: function (msg, callbacks) {
//execution_state : ('busy', 'idle', 'starting')
// Handle status msgs.
// execution_state : ('busy', 'idle', 'starting')
if (this.comm !== undefined) {
if (msg.content.execution_state ==='idle') {
// Send buffer if this message caused another message to be
@ -124,9 +121,8 @@ function(widget_manager, underscore, backbone){
}
},
// Custom syncronization logic.
_handle_sync: function (method, options) {
// Custom syncronization logic.
var model_json = this.toJSON();
var attr;
@ -176,6 +172,7 @@ function(widget_manager, underscore, backbone){
},
_pack_models: function(value) {
// Replace models with model ids recursively.
if (value instanceof Backbone.Model) {
return value.id;
} else if (value instanceof Object) {
@ -190,6 +187,7 @@ function(widget_manager, underscore, backbone){
},
_unpack_models: function(value) {
// Replace model ids with models recursively.
if (value instanceof Object) {
var unpacked = {};
for (var key in value) {
@ -210,11 +208,9 @@ function(widget_manager, underscore, backbone){
widget_manager.register_widget_model('WidgetModel', WidgetModel);
//--------------------------------------------------------------------
// WidgetView class
//--------------------------------------------------------------------
var WidgetView = Backbone.View.extend({
initialize: function(parameters) {
// Public constructor.
this.model.on('change',this.update,this);
this.options = parameters.options;
this.child_views = [];
@ -222,19 +218,23 @@ function(widget_manager, underscore, backbone){
},
update: function(){
// update view to be consistent with this.model
// triggered on model change
// Triggered on model change.
//
// Update view to be consistent with this.model
},
create_child_view: function(child_model, options) {
// create and return a child view, given a model and (optionally) a view name
// if the view name is not given, it defaults to the model's default view attribute
// Create and return a child view.
//
// - given a model and (optionally) a view name if the view name is
// not given, it defaults to the model's default view attribute.
var child_view = this.model.widget_manager.create_view(child_model, options);
this.child_views[child_model.id] = child_view;
return child_view;
},
delete_child_view: function(child_model, options) {
// Delete a child view that was previously created using create_child_view.
var view = this.child_views[child_model.id];
delete this.child_views[child_model.id];
view.remove();
@ -266,31 +266,42 @@ function(widget_manager, underscore, backbone){
},
callbacks: function(){
// Create msg callbacks for a comm msg.
return this.model.widget_manager.callbacks(this);
},
render: function(){
// render the view. By default, this is only called the first time the view is created
// Render the view.
//
// By default, this is only called the first time the view is created
},
send: function (content) {
// Send a custom msg associated with this view.
this.model.send(content, this.callbacks());
},
touch: function () {
// Associate recent model changes with this notebook.
this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.callbacks()});
},
});
var DOMWidgetView = WidgetView.extend({
initialize: function (options) {
// TODO: make changes more granular (e.g., trigger on visible:change)
// Public constructor
// In the future we may want to make changes more granular
// (e.g., trigger on visible:change).
this.model.on('change', this.update, this);
this.model.on('msg:custom', this.on_msg, this);
DOMWidgetView.__super__.initialize.apply(this, arguments);
},
on_msg: function(msg) {
// Handle DOM specific msgs.
switch(msg.msg_type) {
case 'add_class':
this.add_class(msg.selector, msg.class_list);
@ -302,10 +313,12 @@ function(widget_manager, underscore, backbone){
},
add_class: function (selector, class_list) {
// Add a DOM class to an element.
this._get_selector_element(selector).addClass(class_list);
},
remove_class: function (selector, class_list) {
// Remove a DOM class from an element.
this._get_selector_element(selector).removeClass(class_list);
},
@ -340,10 +353,11 @@ function(widget_manager, underscore, backbone){
},
_get_selector_element: function (selector) {
// Get the elements via the css selector. If the selector is
// blank, apply the style to the $el_to_style element. If
// the $el_to_style element is not defined, use apply the
// style to the view's element.
// Get the elements via the css selector.
// If the selector is blank, apply the style to the $el_to_style
// element. If the $el_to_style element is not defined, use apply
// the style to the view's element.
var elements;
if (selector === undefined || selector === null || selector === '') {
if (this.$el_to_style === undefined) {
@ -362,5 +376,6 @@ function(widget_manager, underscore, backbone){
IPython.WidgetView = WidgetView;
IPython.DOMWidgetView = DOMWidgetView;
// Pass through widget_manager instance (probably not a good practice).
return widget_manager;
});

15
IPython/html/static/notebook/js/widgets/widget_bool.js
View File

@ -15,10 +15,10 @@
**/
define(["notebook/js/widgets/widget"], function(widget_manager){
var CheckBoxView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
render : function(){
// Called when view is rendered.
this.$el
.addClass('widget-hbox-single');
this.$label = $('<div />')
@ -35,6 +35,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
handle_click: function() {
// Handles when the checkbox is clicked.
// Calling model.set will trigger all of the other views of the
// model to update.
var value = this.model.get('value');
@ -65,13 +67,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
});
widget_manager.register_widget_view('CheckBoxView', CheckBoxView);
var ToggleButtonView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
render : function() {
// Called when view is rendered.
var that = this;
this.setElement($('<button />')
.addClass('btn')
@ -110,8 +111,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
return ToggleButtonView.__super__.update.apply(this);
},
// Handles and validates user input.
handle_click: function(e) {
// Handles and validates user input.
// Calling model.set will trigger all of the other views of the
// model to update.
@ -120,7 +121,5 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
this.touch();
},
});
widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView);
});

10
IPython/html/static/notebook/js/widgets/widget_button.js
View File

@ -15,10 +15,10 @@
**/
define(["notebook/js/widgets/widget"], function(widget_manager){
var ButtonView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var ButtonView = IPython.DOMWidgetView.extend({
render : function(){
// Called when view is rendered.
this.setElement($("<button />")
.addClass('btn'));
@ -49,14 +49,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
events: {
// Dictionary of events and their handlers.
'click': '_handle_click',
},
_handle_click: function(){
// Handles when the button is clicked.
this.send({event: 'click'});
},
});
widget_manager.register_widget_view('ButtonView', ButtonView);
});

25
IPython/html/static/notebook/js/widgets/widget_container.js
View File

@ -15,9 +15,10 @@
**/
define(["notebook/js/widgets/widget"], function(widget_manager) {
var ContainerView = IPython.DOMWidgetView.extend({
var ContainerView = IPython.DOMWidgetView.extend({
render: function(){
// Called when view is rendered.
this.$el
.addClass('widget-container');
this.children={};
@ -29,6 +30,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
},
update_children: function(old_list, new_list) {
// Called when the children list changes.
this.do_diff(old_list,
new_list,
$.proxy(this.remove_child_model, this),
@ -36,11 +38,13 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
},
remove_child_model: function(model) {
// Called when a model is removed from the children list.
this.child_views[model.id].remove();
this.delete_child_view(model);
},
add_child_model: function(model) {
// Called when a model is added to the children list.
var view = this.create_child_view(model);
this.$el.append(view.$el);
},
@ -53,13 +57,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
return ContainerView.__super__.update.apply(this);
},
});
widget_manager.register_widget_view('ContainerView', ContainerView);
var ModalView = IPython.DOMWidgetView.extend({
var ModalView = IPython.DOMWidgetView.extend({
render: function(){
// Called when view is rendered.
var that = this;
this.children={};
this.update_children([], this.model.get('children'));
@ -160,13 +163,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
},
hide: function() {
// Called when the modal hide button is clicked.
this.$window.hide();
this.$show_button.removeClass('btn-info');
},
show: function() {
// Called when the modal show button is clicked.
this.$show_button.addClass('btn-info');
this.$window.show();
if (this.popped_out) {
this.$window.css("positon", "absolute");
@ -178,6 +182,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
},
bring_to_front: function() {
// Make the modal top-most, z-ordered about the other modals.
var $widget_modals = $(".widget-modal");
var max_zindex = 0;
$widget_modals.each(function (index, el){
@ -197,6 +202,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
},
update_children: function(old_list, new_list) {
// Called when the children list is modified.
this.do_diff(old_list,
new_list,
$.proxy(this.remove_child_model, this),
@ -204,11 +210,13 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
},
remove_child_model: function(model) {
// Called when a child is removed from children list.
this.child_views[model.id].remove();
this.delete_child_view(model);
},
add_child_model: function(model) {
// Called when a child is added to children list.
var view = this.create_child_view(model);
this.$body.append(view.$el);
},
@ -245,7 +253,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
},
_get_selector_element: function(selector) {
// Get an element view a 'special' jquery selector. (see widget.js)
//
// Since the modal actually isn't within the $el in the DOM, we need to extend
// the selector logic to allow the user to set css on the modal if need be.
// The convention used is:
@ -263,8 +272,6 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
return ModalView.__super__._get_selector_element.apply(this, [selector]);
}
},
});
widget_manager.register_widget_view('ModalView', ModalView);
});

9
IPython/html/static/notebook/js/widgets/widget_image.js
View File

@ -15,10 +15,10 @@
**/
define(["notebook/js/widgets/widget"], function(widget_manager){
var ImageView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var ImageView = IPython.DOMWidgetView.extend({
render : function(){
// Called when view is rendered.
this.setElement($("<img />"));
this.update(); // Set defaults.
},
@ -46,9 +46,6 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
}
return ImageView.__super__.update.apply(this);
},
});
widget_manager.register_widget_view('ImageView', ImageView);
});

40
IPython/html/static/notebook/js/widgets/widget_selection.js
View File

@ -15,11 +15,10 @@
**/
define(["notebook/js/widgets/widget"], function(widget_manager){
var DropdownView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
render : function(){
// Called when view is rendered.
this.$el
.addClass('widget-hbox-single')
.html('');
@ -101,8 +100,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
return DropdownView.__super__.update.apply(this);
},
// Handle when a value is clicked.
handle_click: function (e) {
// Handle when a value is clicked.
// Calling model.set will trigger all of the other views of the
// model to update.
@ -111,13 +110,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
});
widget_manager.register_widget_view('DropdownView', DropdownView);
var RadioButtonsView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var RadioButtonsView = IPython.DOMWidgetView.extend({
render : function(){
// Called when view is rendered.
this.$el
.addClass('widget-hbox');
this.$label = $('<div />')
@ -193,8 +191,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
return RadioButtonsView.__super__.update.apply(this);
},
// Handle when a value is clicked.
handle_click: function (e) {
// Handle when a value is clicked.
// Calling model.set will trigger all of the other views of the
// model to update.
@ -202,14 +200,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
this.touch();
},
});
widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
var ToggleButtonsView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var ToggleButtonsView = IPython.DOMWidgetView.extend({
render : function(){
// Called when view is rendered.
this.$el
.addClass('widget-hbox-single');
this.$label = $('<div />')
@ -280,23 +276,21 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
return ToggleButtonsView.__super__.update.apply(this);
},
// Handle when a value is clicked.
handle_click: function (e) {
// Handle when a value is clicked.
// Calling model.set will trigger all of the other views of the
// model to update.
this.model.set('value', $(e.target).html(), {updated_view: this});
this.touch();
},
},
});
widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
var ListBoxView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var ListBoxView = IPython.DOMWidgetView.extend({
render : function(){
// Called when view is rendered.
this.$el
.addClass('widget-hbox');
this.$label = $('<div />')
@ -364,16 +358,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
return ListBoxView.__super__.update.apply(this);
},
// Handle when a value is clicked.
handle_click: function (e) {
// Handle when a value is clicked.
// Calling model.set will trigger all of the other views of the
// model to update.
this.model.set('value', $(e.target).html(), {updated_view: this});
this.touch();
},
},
});
widget_manager.register_widget_view('ListBoxView', ListBoxView);
});

32
IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js
View File

@ -15,9 +15,10 @@
**/
define(["notebook/js/widgets/widget"], function(widget_manager){
var AccordionView = IPython.DOMWidgetView.extend({
render: function(){
// Called when view is rendered.
var guid = 'accordion' + IPython.utils.uuid();
this.$el
.attr('id', guid)
@ -35,7 +36,6 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
//
// Called when the model is changed. The model may have been
// changed by another view or by a state update from the back-end.
if (options === undefined || options.updated_view != this) {
// Set tab titles
var titles = this.model.get('_titles');
@ -67,6 +67,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
update_children: function(old_list, new_list) {
// Called when the children list is modified.
this.do_diff(old_list,
new_list,
$.proxy(this.remove_child_model, this),
@ -74,6 +75,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
remove_child_model: function(model) {
// Called when a child is removed from children list.
var accordion_group = this.model_containers[model.id];
this.containers.splice(accordion_group.container_index, 1);
delete this.model_containers[model.id];
@ -82,6 +84,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
add_child_model: function(model) {
// Called when a child is added to children list.
var view = this.create_child_view(model);
var index = this.containers.length;
var uuid = IPython.utils.uuid();
@ -126,17 +129,18 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
setTimeout(function(){ that.update(); }, 500);
},
});
widget_manager.register_widget_view('AccordionView', AccordionView);
var TabView = IPython.DOMWidgetView.extend({
var TabView = IPython.DOMWidgetView.extend({
initialize: function() {
// Public constructor.
this.containers = [];
TabView.__super__.initialize.apply(this, arguments);
},
render: function(){
// Called when view is rendered.
var uuid = 'tabs'+IPython.utils.uuid();
var that = this;
this.$tabs = $('<div />', {id: uuid})
@ -152,19 +156,9 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
this.update_children(model.previous('children'), value);
}, this);
},
update_children: function(old_list, new_list) {
_.each(this.containers, function(element, index, list) {
element.remove();
}, this);
this.containers = [];
this.update_child_views(old_list, new_list);
_.each(new_list, function(element, index, list) {
this.add_child_view(this.child_views[element]);
}, this)
},
update_children: function(old_list, new_list) {
// Called when the children list is modified.
this.do_diff(old_list,
new_list,
$.proxy(this.remove_child_model, this),
@ -172,6 +166,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
remove_child_model: function(model) {
// Called when a child is removed from children list.
var view = this.child_views[model.id];
this.containers.splice(view.parent_tab.tab_text_index, 1);
view.parent_tab.remove();
@ -181,6 +176,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
add_child_model: function(model) {
// Called when a child is added to children list.
var view = this.create_child_view(model);
var index = this.containers.length;
var uuid = IPython.utils.uuid();
@ -238,11 +234,11 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
},
select_page: function(index) {
// Select a page.
this.$tabs.find('li')
.removeClass('active');
this.containers[index].tab('show');
},
});
widget_manager.register_widget_view('TabView', TabView);
});

62
IPython/html/static/notebook/js/widgets/widget_string.js
View File

@ -15,10 +15,10 @@
**/
define(["notebook/js/widgets/widget"], function(widget_manager){
var HTMLView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var HTMLView = IPython.DOMWidgetView.extend({
render : function(){
// Called when view is rendered.
this.update(); // Set defaults.
},
@ -30,16 +30,13 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
this.$el.html(this.model.get('value'));
return HTMLView.__super__.update.apply(this);
},
});
widget_manager.register_widget_view('HTMLView', HTMLView);
var LatexView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var LatexView = IPython.DOMWidgetView.extend({
render : function(){
// Called when view is rendered.
this.update(); // Set defaults.
},
@ -52,16 +49,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$el.get(0)]);
return LatexView.__super__.update.apply(this);
},
},
});
widget_manager.register_widget_view('LatexView', LatexView);
var TextAreaView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var TextAreaView = IPython.DOMWidgetView.extend({
render: function(){
// Called when view is rendered.
this.$el
.addClass('widget-hbox')
.html('');
@ -79,19 +74,18 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
},
_handle_textarea_msg: function (content){
// Handle when a custom msg is recieved from the back-end.
if (content.method == "scroll_to_bottom") {
this.scroll_to_bottom();
}
},
scroll_to_bottom: function (){
// Scroll the text-area view to the bottom.
this.$textbox.scrollTop(this.$textbox[0].scrollHeight);
},
update: function(options){
// Update the contents of this view
//
@ -114,12 +108,15 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
return TextAreaView.__super__.update.apply(this);
},
events: {"keyup textarea": "handleChanging",
"paste textarea": "handleChanging",
"cut textarea": "handleChanging"},
events: {
// Dictionary of events and their handlers.
"keyup textarea": "handleChanging",
"paste textarea": "handleChanging",
"cut textarea": "handleChanging"
},
// Handles and validates user input.
handleChanging: function(e) {
// Handles and validates user input.
// Calling model.set will trigger all of the other views of the
// model to update.
@ -127,13 +124,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
this.touch();
},
});
widget_manager.register_widget_view('TextAreaView', TextAreaView);
var TextBoxView = IPython.DOMWidgetView.extend({
// Called when view is rendered.
var TextBoxView = IPython.DOMWidgetView.extend({
render: function(){
// Called when view is rendered.
this.$el
.addClass('widget-hbox-single')
.html('');
@ -173,13 +169,16 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
return TextBoxView.__super__.update.apply(this);
},
events: {"keyup input": "handleChanging",
"paste input": "handleChanging",
"cut input": "handleChanging",
"keypress input": "handleKeypress"},
events: {
// Dictionary of events and their handlers.
"keyup input": "handleChanging",
"paste input": "handleChanging",
"cut input": "handleChanging",
"keypress input": "handleKeypress"
},
// Handles and validates user input.
handleChanging: function(e) {
// Handles and validates user input.
// Calling model.set will trigger all of the other views of the
// model to update.
@ -187,13 +186,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
this.touch();
},
// Handles text submition
handleKeypress: function(e) {
// Handles text submition
if (e.keyCode == 13) { // Return key
this.send({event: 'submit'});
}
},
});
widget_manager.register_widget_view('TextBoxView', TextBoxView);
});