diff --git a/IPython/html/static/notebook/js/widgets/widget.js b/IPython/html/static/notebook/js/widgets/widget.js index 95fca66..e5d68c7 100644 --- a/IPython/html/static/notebook/js/widgets/widget.js +++ b/IPython/html/static/notebook/js/widgets/widget.js @@ -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; }); diff --git a/IPython/html/static/notebook/js/widgets/widget_bool.js b/IPython/html/static/notebook/js/widgets/widget_bool.js index 8f3365f..1c2569f 100644 --- a/IPython/html/static/notebook/js/widgets/widget_bool.js +++ b/IPython/html/static/notebook/js/widgets/widget_bool.js @@ -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 = $('
') @@ -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($('') .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); - }); diff --git a/IPython/html/static/notebook/js/widgets/widget_button.js b/IPython/html/static/notebook/js/widgets/widget_button.js index 1c7de73..f2df595 100644 --- a/IPython/html/static/notebook/js/widgets/widget_button.js +++ b/IPython/html/static/notebook/js/widgets/widget_button.js @@ -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($("") .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); - }); diff --git a/IPython/html/static/notebook/js/widgets/widget_container.js b/IPython/html/static/notebook/js/widgets/widget_container.js index 88ad035..41ec0d4 100644 --- a/IPython/html/static/notebook/js/widgets/widget_container.js +++ b/IPython/html/static/notebook/js/widgets/widget_container.js @@ -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); }); diff --git a/IPython/html/static/notebook/js/widgets/widget_float_range.js b/IPython/html/static/notebook/js/widgets/widget_float_range.js index c454956..b2a3349 100644 --- a/IPython/html/static/notebook/js/widgets/widget_float_range.js +++ b/IPython/html/static/notebook/js/widgets/widget_float_range.js @@ -15,10 +15,10 @@ **/ define(["notebook/js/widgets/widget"], function(widget_manager){ + var FloatSliderView = IPython.DOMWidgetView.extend({ - - // Called when view is rendered. render : function(){ + // Called when view is rendered. this.$el .addClass('widget-hbox-single'); this.$label = $('') @@ -107,24 +107,26 @@ define(["notebook/js/widgets/widget"], function(widget_manager){ return FloatSliderView.__super__.update.apply(this); }, - // Handles: User input - events: { "slide" : "handleSliderChange" }, + events: { + // Dictionary of events and their handlers. + "slide" : "handleSliderChange" + }, + handleSliderChange: function(e, ui) { - + // Handle when the slider value is changed. + // Calling model.set will trigger all of the other views of the // model to update. this.model.set('value', ui.value, {updated_view: this}); this.touch(); }, }); - widget_manager.register_widget_view('FloatSliderView', FloatSliderView); - var FloatTextView = IPython.DOMWidgetView.extend({ - - // Called when view is rendered. + var FloatTextView = IPython.DOMWidgetView.extend({ render : function(){ + // Called when view is rendered. this.$el .addClass('widget-hbox-single'); this.$label = $('') @@ -144,7 +146,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) { var value = this.model.get('value'); if (parseFloat(this.$textbox.val()) != value) { @@ -168,15 +169,20 @@ define(["notebook/js/widgets/widget"], function(widget_manager){ return FloatTextView.__super__.update.apply(this); }, + events: { + // Dictionary of events and their handlers. + + "keyup input" : "handleChanging", + "paste input" : "handleChanging", + "cut input" : "handleChanging", + + // Fires only when control is validated or looses focus. + "change input" : "handleChanged" + }, - events: {"keyup input" : "handleChanging", - "paste input" : "handleChanging", - "cut input" : "handleChanging", - "change input" : "handleChanged"}, // Fires only when control is validated or looses focus. - - // Handles and validates user input. handleChanging: function(e) { - + // Handles and validates user input. + // Try to parse value as a float. var numericalValue = 0.0; if (e.target.value !== '') { @@ -205,22 +211,19 @@ define(["notebook/js/widgets/widget"], function(widget_manager){ } }, - // Applies validated input. handleChanged: function(e) { - // Update the textbox + // Applies validated input. if (this.model.get('value') != e.target.value) { e.target.value = this.model.get('value'); } } }); - widget_manager.register_widget_view('FloatTextView', FloatTextView); - var ProgressView = IPython.DOMWidgetView.extend({ - - // Called when view is rendered. + var ProgressView = IPython.DOMWidgetView.extend({ render : function(){ + // Called when view is rendered. this.$el .addClass('widget-hbox-single'); this.$label = $('') @@ -258,9 +261,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){ this.$label.show(); } return ProgressView.__super__.update.apply(this); - }, - + }, }); - widget_manager.register_widget_view('ProgressView', ProgressView); }); diff --git a/IPython/html/static/notebook/js/widgets/widget_image.js b/IPython/html/static/notebook/js/widgets/widget_image.js index d167756..b2b1045 100644 --- a/IPython/html/static/notebook/js/widgets/widget_image.js +++ b/IPython/html/static/notebook/js/widgets/widget_image.js @@ -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($("")); 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); - }); diff --git a/IPython/html/static/notebook/js/widgets/widget_int_range.js b/IPython/html/static/notebook/js/widgets/widget_int_range.js index fabe9ac..1930dcd 100644 --- a/IPython/html/static/notebook/js/widgets/widget_int_range.js +++ b/IPython/html/static/notebook/js/widgets/widget_int_range.js @@ -15,10 +15,10 @@ **/ define(["notebook/js/widgets/widget"], function(widget_manager){ - var IntSliderView = IPython.DOMWidgetView.extend({ - - // Called when view is rendered. + + var IntSliderView = IPython.DOMWidgetView.extend({ render : function(){ + // Called when view is rendered. this.$el .addClass('widget-hbox-single'); this.$label = $('') @@ -106,23 +106,26 @@ define(["notebook/js/widgets/widget"], function(widget_manager){ return IntSliderView.__super__.update.apply(this); }, - // Handles: User input - events: { "slide" : "handleSliderChange" }, + events: { + // Dictionary of events and their handlers. + "slide" : "handleSliderChange" + }, + handleSliderChange: function(e, ui) { - + // Called when the slider value is changed. + // Calling model.set will trigger all of the other views of the // model to update. this.model.set('value', ~~ui.value, {updated_view: this}); // Double bit-wise not to truncate decimel this.touch(); }, }); - widget_manager.register_widget_view('IntSliderView', IntSliderView); - var IntTextView = IPython.DOMWidgetView.extend({ - - // Called when view is rendered. + + var IntTextView = IPython.DOMWidgetView.extend({ render : function(){ + // Called when view is rendered. this.$el .addClass('widget-hbox-single'); this.$label = $('') @@ -164,15 +167,19 @@ define(["notebook/js/widgets/widget"], function(widget_manager){ } return IntTextView.__super__.update.apply(this); }, + + events: { + // Dictionary of events and their handlers. + "keyup input" : "handleChanging", + "paste input" : "handleChanging", + "cut input" : "handleChanging", + + // Fires only when control is validated or looses focus. + "change input" : "handleChanged" + }, - - events: {"keyup input" : "handleChanging", - "paste input" : "handleChanging", - "cut input" : "handleChanging", - "change input" : "handleChanged"}, // Fires only when control is validated or looses focus. - - // Handles and validates user input. handleChanging: function(e) { + // Handles and validates user input. // Try to parse value as a float. var numericalValue = 0; @@ -202,14 +209,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){ } }, - // Applies validated input. handleChanged: function(e) { - // Update the textbox + // Applies validated input. if (this.model.get('value') != e.target.value) { e.target.value = this.model.get('value'); } } }); - widget_manager.register_widget_view('IntTextView', IntTextView); }); diff --git a/IPython/html/static/notebook/js/widgets/widget_selection.js b/IPython/html/static/notebook/js/widgets/widget_selection.js index 19ac592..08af062 100644 --- a/IPython/html/static/notebook/js/widgets/widget_selection.js +++ b/IPython/html/static/notebook/js/widgets/widget_selection.js @@ -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 = $('') @@ -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 = $('') @@ -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 = $('') @@ -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); }); diff --git a/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js b/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js index e0a4e31..3bd6ce3 100644 --- a/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js +++ b/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js @@ -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 = $('', {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); }); diff --git a/IPython/html/static/notebook/js/widgets/widget_string.js b/IPython/html/static/notebook/js/widgets/widget_string.js index 4ed650a..7866e77 100644 --- a/IPython/html/static/notebook/js/widgets/widget_string.js +++ b/IPython/html/static/notebook/js/widgets/widget_string.js @@ -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); });