Show More
@@ -7,7 +7,7 b' define([' | |||||
7 | "jquery", |
|
7 | "jquery", | |
8 | "base/js/namespace" |
|
8 | "base/js/namespace" | |
9 | ], function (_, Backbone, $, IPython) { |
|
9 | ], function (_, Backbone, $, IPython) { | |
10 |
|
10 | "use strict"; | ||
11 | //-------------------------------------------------------------------- |
|
11 | //-------------------------------------------------------------------- | |
12 | // WidgetManager class |
|
12 | // WidgetManager class | |
13 | //-------------------------------------------------------------------- |
|
13 | //-------------------------------------------------------------------- | |
@@ -52,15 +52,14 b' define([' | |||||
52 | console.log("Could not determine where the display" + |
|
52 | console.log("Could not determine where the display" + | |
53 | " message was from. Widget will not be displayed"); |
|
53 | " message was from. Widget will not be displayed"); | |
54 | } else { |
|
54 | } else { | |
55 | var view = this.create_view(model, {cell: cell}); |
|
55 | var that = this; | |
56 | if (view === null) { |
|
56 | this.create_view(model, {cell: cell, callback: function(view) { | |
57 | console.error("View creation failed", model); |
|
57 | that._handle_display_view(view); | |
58 | } |
|
|||
59 | this._handle_display_view(view); |
|
|||
60 | if (cell.widget_subarea) { |
|
58 | if (cell.widget_subarea) { | |
61 | cell.widget_subarea.append(view.$el); |
|
59 | cell.widget_subarea.append(view.$el); | |
62 | } |
|
60 | } | |
63 | view.trigger('displayed'); |
|
61 | view.trigger('displayed'); | |
|
62 | }}); | |||
64 | } |
|
63 | } | |
65 | }; |
|
64 | }; | |
66 |
|
65 | |||
@@ -79,27 +78,42 b' define([' | |||||
79 | } |
|
78 | } | |
80 | }; |
|
79 | }; | |
81 |
|
80 | |||
82 | WidgetManager.prototype.create_view = function(model, options, view) { |
|
81 | ||
|
82 | WidgetManager.prototype.create_view = function(model, options) { | |||
83 | // Creates a view for a particular model. |
|
83 | // Creates a view for a particular model. | |
|
84 | ||||
84 | var view_name = model.get('_view_name'); |
|
85 | var view_name = model.get('_view_name'); | |
85 | var ViewType = WidgetManager._view_types[view_name]; |
|
86 | var view_mod = model.get('_view_module'); | |
86 | if (ViewType) { |
|
87 | var errback = options.errback || function(err) {console.log(err);}; | |
87 |
|
88 | |||
|
89 | var instantiate_view = function(ViewType) { | |||
|
90 | if (ViewType) { | |||
88 | // If a view is passed into the method, use that view's cell as |
|
91 | // If a view is passed into the method, use that view's cell as | |
89 | // the cell for the view that is created. |
|
92 | // the cell for the view that is created. | |
90 | options = options || {}; |
|
93 | options = options || {}; | |
91 |
if ( |
|
94 | if (options.parent !== undefined) { | |
92 |
options.cell = |
|
95 | options.cell = options.parent.options.cell; | |
93 | } |
|
96 | } | |
94 |
|
97 | |||
95 | // Create and render the view... |
|
98 | // Create and render the view... | |
96 | var parameters = {model: model, options: options}; |
|
99 | var parameters = {model: model, options: options}; | |
97 | view = new ViewType(parameters); |
|
100 | var view = new ViewType(parameters); | |
98 | view.render(); |
|
101 | view.render(); | |
99 | model.on('destroy', view.remove, view); |
|
102 | model.on('destroy', view.remove, view); | |
100 |
|
|
103 | options.callback(view); | |
|
104 | } else { | |||
|
105 | errback({unknown_view: true, view_name: view_name, | |||
|
106 | view_module: view_mod}); | |||
|
107 | } | |||
|
108 | }; | |||
|
109 | ||||
|
110 | if (view_mod) { | |||
|
111 | require([view_mod], function(module) { | |||
|
112 | instantiate_view(module[view_name]); | |||
|
113 | }, errback); | |||
|
114 | } else { | |||
|
115 | instantiate_view(WidgetManager._view_types[view_name]); | |||
101 | } |
|
116 | } | |
102 | return null; |
|
|||
103 | }; |
|
117 | }; | |
104 |
|
118 | |||
105 | WidgetManager.prototype.get_msg_cell = function (msg_id) { |
|
119 | WidgetManager.prototype.get_msg_cell = function (msg_id) { |
@@ -317,18 +317,21 b' define(["widgets/js/manager",' | |||||
317 | // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior |
|
317 | // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior | |
318 | // it would be great to have the widget manager add the cell metadata |
|
318 | // it would be great to have the widget manager add the cell metadata | |
319 | // to the subview without having to add it here. |
|
319 | // to the subview without having to add it here. | |
320 | options = $.extend({ parent: this }, options || {}); |
|
320 | var that = this; | |
321 | var child_view = this.model.widget_manager.create_view(child_model, options, this); |
|
321 | var old_callback = options.callback || function(view) {}; | |
322 |
|
322 | options = $.extend({ parent: this, callback: function(child_view) { | ||
323 | // Associate the view id with the model id. |
|
323 | // Associate the view id with the model id. | |
324 |
if (th |
|
324 | if (that.child_model_views[child_model.id] === undefined) { | |
325 |
|
|
325 | that.child_model_views[child_model.id] = []; | |
326 | } |
|
326 | } | |
327 |
|
|
327 | that.child_model_views[child_model.id].push(child_view.id); | |
328 |
|
328 | |||
329 | // Remember the view by id. |
|
329 | // Remember the view by id. | |
330 |
|
|
330 | that.child_views[child_view.id] = child_view; | |
331 |
|
|
331 | old_callback(child_view); | |
|
332 | }}, options || {}); | |||
|
333 | ||||
|
334 | this.model.widget_manager.create_view(child_model, options); | |||
332 | }, |
|
335 | }, | |
333 |
|
336 | |||
334 | pop_child_view: function(child_model) { |
|
337 | pop_child_view: function(child_model) { |
@@ -74,13 +74,15 b' define([' | |||||
74 |
|
74 | |||
75 | add_child_model: function(model) { |
|
75 | add_child_model: function(model) { | |
76 | // Called when a model is added to the children list. |
|
76 | // Called when a model is added to the children list. | |
77 | var view = this.create_child_view(model); |
|
77 | var that = this; | |
78 | this.$box.append(view.$el); |
|
78 | this.create_child_view(model, {callback: function(view) { | |
|
79 | that.$box.append(view.$el); | |||
79 |
|
80 | |||
80 | // Trigger the displayed event of the child view. |
|
81 | // Trigger the displayed event of the child view. | |
81 |
|
|
82 | that.after_displayed(function() { | |
82 | view.trigger('displayed'); |
|
83 | view.trigger('displayed'); | |
83 | }); |
|
84 | }); | |
|
85 | }}); | |||
84 | }, |
|
86 | }, | |
85 | }); |
|
87 | }); | |
86 |
|
88 |
@@ -81,7 +81,6 b' define([' | |||||
81 |
|
81 | |||
82 | add_child_model: function(model) { |
|
82 | add_child_model: function(model) { | |
83 | // Called when a child is added to children list. |
|
83 | // Called when a child is added to children list. | |
84 | var view = this.create_child_view(model); |
|
|||
85 | var index = this.containers.length; |
|
84 | var index = this.containers.length; | |
86 | var uuid = utils.uuid(); |
|
85 | var uuid = utils.uuid(); | |
87 | var accordion_group = $('<div />') |
|
86 | var accordion_group = $('<div />') | |
@@ -114,15 +113,18 b' define([' | |||||
114 | var container_index = this.containers.push(accordion_group) - 1; |
|
113 | var container_index = this.containers.push(accordion_group) - 1; | |
115 | accordion_group.container_index = container_index; |
|
114 | accordion_group.container_index = container_index; | |
116 | this.model_containers[model.id] = accordion_group; |
|
115 | this.model_containers[model.id] = accordion_group; | |
|
116 | ||||
|
117 | this.create_child_view(model, {callback: function(view) { | |||
117 | accordion_inner.append(view.$el); |
|
118 | accordion_inner.append(view.$el); | |
118 |
|
119 | |||
119 |
|
|
120 | that.update(); | |
120 |
|
|
121 | that.update_titles(); | |
121 |
|
122 | |||
122 | // Trigger the displayed event of the child view. |
|
123 | // Trigger the displayed event of the child view. | |
123 |
|
|
124 | that.after_displayed(function() { | |
124 | view.trigger('displayed'); |
|
125 | view.trigger('displayed'); | |
125 | }); |
|
126 | }); | |
|
127 | }}); | |||
126 | }, |
|
128 | }, | |
127 | }); |
|
129 | }); | |
128 |
|
130 | |||
@@ -176,7 +178,6 b' define([' | |||||
176 |
|
178 | |||
177 | add_child_model: function(model) { |
|
179 | add_child_model: function(model) { | |
178 | // Called when a child is added to children list. |
|
180 | // Called when a child is added to children list. | |
179 | var view = this.create_child_view(model); |
|
|||
180 | var index = this.containers.length; |
|
181 | var index = this.containers.length; | |
181 | var uuid = utils.uuid(); |
|
182 | var uuid = utils.uuid(); | |
182 |
|
183 | |||
@@ -184,6 +185,8 b' define([' | |||||
184 | var tab = $('<li />') |
|
185 | var tab = $('<li />') | |
185 | .css('list-style-type', 'none') |
|
186 | .css('list-style-type', 'none') | |
186 | .appendTo(this.$tabs); |
|
187 | .appendTo(this.$tabs); | |
|
188 | ||||
|
189 | this.create_child_view(model, {callback: function(view) { | |||
187 | view.parent_tab = tab; |
|
190 | view.parent_tab = tab; | |
188 |
|
191 | |||
189 | var tab_text = $('<a />') |
|
192 | var tab_text = $('<a />') | |
@@ -195,23 +198,24 b' define([' | |||||
195 |
|
198 | |||
196 | // Calling model.set will trigger all of the other views of the |
|
199 | // Calling model.set will trigger all of the other views of the | |
197 | // model to update. |
|
200 | // model to update. | |
198 |
that.model.set("selected_index", index, {updated_view: th |
|
201 | that.model.set("selected_index", index, {updated_view: that}); | |
199 | that.touch(); |
|
202 | that.touch(); | |
200 | that.select_page(index); |
|
203 | that.select_page(index); | |
201 | }); |
|
204 | }); | |
202 |
tab.tab_text_index = th |
|
205 | tab.tab_text_index = that.containers.push(tab_text) - 1; | |
203 |
|
206 | |||
204 | var contents_div = $('<div />', {id: uuid}) |
|
207 | var contents_div = $('<div />', {id: uuid}) | |
205 | .addClass('tab-pane') |
|
208 | .addClass('tab-pane') | |
206 | .addClass('fade') |
|
209 | .addClass('fade') | |
207 | .append(view.$el) |
|
210 | .append(view.$el) | |
208 |
.appendTo(th |
|
211 | .appendTo(that.$tab_contents); | |
209 | view.parent_container = contents_div; |
|
212 | view.parent_container = contents_div; | |
210 |
|
213 | |||
211 | // Trigger the displayed event of the child view. |
|
214 | // Trigger the displayed event of the child view. | |
212 |
|
|
215 | that.after_displayed(function() { | |
213 | view.trigger('displayed'); |
|
216 | view.trigger('displayed'); | |
214 | }); |
|
217 | }); | |
|
218 | }}); | |||
215 | }, |
|
219 | }, | |
216 |
|
220 | |||
217 | update: function(options) { |
|
221 | update: function(options) { |
@@ -100,6 +100,8 b' class Widget(LoggingConfigurable):' | |||||
100 | #------------------------------------------------------------------------- |
|
100 | #------------------------------------------------------------------------- | |
101 | _model_name = Unicode('WidgetModel', help="""Name of the backbone model |
|
101 | _model_name = Unicode('WidgetModel', help="""Name of the backbone model | |
102 | registered in the front-end to create and sync this widget with.""") |
|
102 | registered in the front-end to create and sync this widget with.""") | |
|
103 | _view_module = Unicode(help="""A requirejs module in which to find _view_name. | |||
|
104 | If empty, look in the global registry.""", sync=True) | |||
103 | _view_name = Unicode(None, allow_none=True, help="""Default view registered in the front-end |
|
105 | _view_name = Unicode(None, allow_none=True, help="""Default view registered in the front-end | |
104 | to use to represent the widget.""", sync=True) |
|
106 | to use to represent the widget.""", sync=True) | |
105 | comm = Instance('IPython.kernel.comm.Comm') |
|
107 | comm = Instance('IPython.kernel.comm.Comm') |
General Comments 0
You need to be logged in to leave comments.
Login now