##// END OF EJS Templates
Completely remove cell from model and view.
Jonathan Frederic -
Show More
@@ -1,238 +1,279
1 1 //----------------------------------------------------------------------------
2 2 // Copyright (C) 2013 The IPython Development Team
3 3 //
4 4 // Distributed under the terms of the BSD License. The full license is in
5 5 // the file COPYING, distributed as part of this software.
6 6 //----------------------------------------------------------------------------
7 7
8 8 //============================================================================
9 9 // WidgetModel, WidgetView, and WidgetManager
10 10 //============================================================================
11 11 /**
12 12 * Base Widget classes
13 13 * @module IPython
14 14 * @namespace IPython
15 15 * @submodule widget
16 16 */
17 17
18 18 (function () {
19 19 "use strict";
20 20
21 21 // Use require.js 'define' method so that require.js is intelligent enough to
22 22 // syncronously load everything within this file when it is being 'required'
23 23 // elsewhere.
24 24 define(["underscore",
25 25 "backbone",
26 26 ], function (underscore, backbone) {
27 27
28 28 //--------------------------------------------------------------------
29 29 // WidgetManager class
30 30 //--------------------------------------------------------------------
31 31 var WidgetManager = function () {
32 32 this.comm_manager = null;
33 33 this.widget_model_types = {};
34 34 this.widget_view_types = {};
35 35 this._model_instances = {};
36 36
37 37 Backbone.sync = function (method, model, options, error) {
38 38 var result = model._handle_sync(method, options);
39 39 if (options.success) {
40 40 options.success(result);
41 41 }
42 42 };
43 43 };
44 44
45 45
46 46 WidgetManager.prototype.attach_comm_manager = function (comm_manager) {
47 47 this.comm_manager = comm_manager;
48 48
49 49 // Register already-registered widget model types with the comm manager.
50 50 for (var widget_model_name in this.widget_model_types) {
51 51 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
52 52 }
53 53 };
54 54
55 55
56 56 WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
57 57 // Register the widget with the comm manager. Make sure to pass this object's context
58 58 // in so `this` works in the call back.
59 59 if (this.comm_manager !== null) {
60 60 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
61 61 }
62 62 this.widget_model_types[widget_model_name] = widget_model_type;
63 63 };
64 64
65 65
66 66 WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
67 67 this.widget_view_types[widget_view_name] = widget_view_type;
68 68 };
69 69
70 70
71 71 WidgetManager.prototype.handle_msg = function(msg, model) {
72 72 var method = msg.content.data.method;
73 73 switch (method) {
74 74 case 'display':
75 75 var cell = this.get_msg_cell(msg.parent_header.msg_id);
76 76 if (cell === null) {
77 77 console.log("Could not determine where the display" +
78 78 " message was from. Widget will not be displayed");
79 79 } else {
80 var view = this.create_view(model, msg.content.data.view_name, cell);
80 var view = this.create_view(model, msg.content.data.view_name);
81 81 if (view !== undefined
82 82 && cell.widget_subarea !== undefined
83 83 && cell.widget_subarea !== null) {
84 84
85 view.cell = cell;
85 86 cell.widget_area.show();
86 87 cell.widget_subarea.append(view.$el);
87 88 }
88 89 }
89 90 break;
90 91 }
91 92 }
92 93
93 94 <<<<<<< HEAD
95 <<<<<<< HEAD
94 96 WidgetManager.prototype.create_view = function(model, view_name, cell) {
97 =======
98 WidgetManager.prototype.create_view = function(model, view_name, options) {
99 >>>>>>> Completely remove cell from model and view.
95 100 view_name = view_name || model.get('default_view_name');
96 101 =======
97 102 WidgetManager.prototype.create_view = function(model, view_name, cell, options) {
98 103 view_name = view_name || model.get('default_view_name');
99 104 >>>>>>> Add widget view options in creating child views
100 105 var ViewType = this.widget_view_types[view_name];
101 106 if (ViewType !== undefined && ViewType !== null) {
102 var view = new ViewType({model: model, widget_manager: this, cell: cell, options: options});
107 var view = new ViewType({model: model, widget_manager: this, options: options});
103 108 view.render();
104 109 model.views.push(view);
105 110 model.on('destroy', view.remove, view);
106 111 <<<<<<< HEAD
107 112 /*
108 113 // TODO: handle view deletion. Don't forget to delete child views
109 114 var that = this;
110 115 view.$el.on("remove", function () {
111 116 var index = that.views.indexOf(view);
112 117 if (index > -1) {
113 118 that.views.splice(index, 1);
114 119 =======
115 120 /*
116 121 // TODO: handle view deletion. Don't forget to delete child views
117 122 var that = this;
118 123 view.$el.on("remove", function () {
119 124 var index = that.views.indexOf(view);
120 125 if (index > -1) {
121 126 that.views.splice(index, 1);
122 127 }
123 128 view.remove(); // Clean-up view
124 129
125 130 // Close the comm if there are no views left.
126 131 if (that.views.length() === 0) {
127 132 //trigger comm close event?
128 133 }
129 134
130 135
131 136 if (that.comm !== undefined) {
132 137 that.comm.close();
133 138 delete that.comm.model; // Delete ref so GC will collect widget model.
134 139 delete that.comm;
135 140 >>>>>>> Add widget view options in creating child views
136 141 }
137 142 view.remove(); // Clean-up view
138 143
139 144 // Close the comm if there are no views left.
140 145 if (that.views.length() === 0) {
141 146 //trigger comm close event?
142 147 }
143 148
144 149
145 150 if (that.comm !== undefined) {
146 151 that.comm.close();
147 152 delete that.comm.model; // Delete ref so GC will collect widget model.
148 153 delete that.comm;
149 154 }
150 155 delete that.model_id; // Delete id from model so widget manager cleans up.
151 156 });
152 157 */
153 158 return view;
154 159 }
155 160 },
156 161
157 162 WidgetManager.prototype.get_msg_cell = function (msg_id) {
158 var cell = null;
163 var cell = null;
159 164 // First, check to see if the msg was triggered by cell execution.
160 165 if (IPython.notebook !== undefined && IPython.notebook !== null) {
161 166 cell = IPython.notebook.get_msg_cell(msg_id);
162 167 }
163 if (cell !== null) {
164 return cell
165 }
168 if (cell !== null) {
169 return cell
170 }
166 171 // Second, check to see if a get_cell callback was defined
167 172 // for the message. get_cell callbacks are registered for
168 173 // widget messages, so this block is actually checking to see if the
169 174 // message was triggered by a widget.
170 175 var kernel = this.get_kernel();
171 176 if (kernel !== undefined && kernel !== null) {
172 177 var callbacks = kernel.get_callbacks_for_msg(msg_id);
173 178 if (callbacks !== undefined &&
174 179 callbacks.iopub !== undefined &&
175 180 callbacks.iopub.get_cell !== undefined) {
176 181
177 182 return callbacks.iopub.get_cell();
178 183 }
179 184 }
180 185
181 186 // Not triggered by a cell or widget (no get_cell callback
182 187 // exists).
183 188 return null;
184 189 };
185 190
191 WidgetManager.prototype.callbacks = function (view) {
192 // callback handlers specific a view
193 var callbacks = {};
194 var cell = view.cell;
195 if (cell !== null) {
196 // Try to get output handlers
197 var handle_output = null;
198 var handle_clear_output = null;
199 if (cell.output_area !== undefined && cell.output_area !== null) {
200 handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
201 handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
202 }
203
204 // Create callback dict using what is known
205 var that = this;
206 callbacks = {
207 iopub : {
208 output : handle_output,
209 clear_output : handle_clear_output,
210
211 status : function (msg) {
212 view.model._handle_status(msg, that.callbacks());
213 },
214
215 // Special function only registered by widget messages.
216 // Allows us to get the cell for a message so we know
217 // where to add widgets if the code requires it.
218 get_cell : function () {
219 return cell;
220 },
221 },
222 };
223 }
224 return callbacks;
225 };
226
186 227
187 228 WidgetManager.prototype.get_model = function (model_id) {
188 229 var model = this._model_instances[model_id];
189 230 if (model !== undefined && model.id == model_id) {
190 231 return model;
191 232 }
192 233 return null;
193 234 };
194 235
195 236
196 237 WidgetManager.prototype.get_kernel = function () {
197 238 if (this.comm_manager === null) {
198 239 return null;
199 240 } else {
200 241 return this.comm_manager.kernel;
201 242 }
202 243 };
203 244
204 245
205 246 WidgetManager.prototype.on_create_widget = function (callback) {
206 247 this._create_widget_callback = callback;
207 248 };
208 249
209 250
210 251 WidgetManager.prototype._handle_create_widget = function (widget_model) {
211 252 if (this._create_widget_callback) {
212 253 try {
213 254 this._create_widget_callback(widget_model);
214 255 } catch (e) {
215 256 console.log("Exception in WidgetManager callback", e, widget_model);
216 257 }
217 258 }
218 259 };
219 260
220 261
221 262 WidgetManager.prototype._handle_comm_open = function (comm, msg) {
222 263 var widget_type_name = msg.content.target_name;
223 264 var widget_model = new this.widget_model_types[widget_type_name](this, comm.comm_id, comm);
224 265 this._model_instances[comm.comm_id] = widget_model; // comm_id == model_id
225 266 this._handle_create_widget(widget_model);
226 267 };
227 268
228 269 //--------------------------------------------------------------------
229 270 // Init code
230 271 //--------------------------------------------------------------------
231 272 IPython.WidgetManager = WidgetManager;
232 273 if (IPython.widget_manager === undefined || IPython.widget_manager === null) {
233 274 IPython.widget_manager = new WidgetManager();
234 275 }
235 276
236 277 return IPython.widget_manager;
237 278 });
238 279 }());
@@ -1,364 +1,331
1 1 //----------------------------------------------------------------------------
2 2 // Copyright (C) 2013 The IPython Development Team
3 3 //
4 4 // Distributed under the terms of the BSD License. The full license is in
5 5 // the file COPYING, distributed as part of this software.
6 6 //----------------------------------------------------------------------------
7 7
8 8 //============================================================================
9 9 // Base Widget Model and View classes
10 10 //============================================================================
11 11
12 12 /**
13 13 * @module IPython
14 14 * @namespace IPython
15 15 **/
16 16
17 17 define(["notebook/js/widgetmanager",
18 18 "underscore",
19 19 "backbone"],
20 20 function(widget_manager, underscore, backbone){
21 21
22 22 //--------------------------------------------------------------------
23 23 // WidgetModel class
24 24 //--------------------------------------------------------------------
25 25 var WidgetModel = Backbone.Model.extend({
26 26 constructor: function (widget_manager, model_id, comm) {
27 27 this.widget_manager = widget_manager;
28 28 this.pending_msgs = 0;
29 29 this.msg_throttle = 3;
30 30 this.msg_buffer = null;
31 31 this.id = model_id;
32 32 this.views = [];
33 33
34 34 if (comm !== undefined) {
35 35 // Remember comm associated with the model.
36 36 this.comm = comm;
37 37 comm.model = this;
38 38
39 39 // Hook comm messages up to model.
40 40 comm.on_close($.proxy(this._handle_comm_closed, this));
41 41 comm.on_msg($.proxy(this._handle_comm_msg, this));
42 42 }
43 43 return Backbone.Model.apply(this);
44 44 },
45 45
46 46 send: function (content, callbacks) {
47 47 if (this.comm !== undefined) {
48 48 var data = {method: 'custom', custom_content: content};
49 49 this.comm.send(data, callbacks);
50 50 }
51 51 },
52 52
53 53 // Handle when a widget is closed.
54 54 _handle_comm_closed: function (msg) {
55 55 this.trigger('comm:close');
56 56 delete this.comm.model; // Delete ref so GC will collect widget model.
57 57 delete this.comm;
58 58 delete this.model_id; // Delete id from model so widget manager cleans up.
59 59 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
60 60 },
61 61
62 62
63 63 // Handle incoming comm msg.
64 64 _handle_comm_msg: function (msg) {
65 65 var method = msg.content.data.method;
66 66 switch (method) {
67 67 case 'update':
68 68 this.apply_update(msg.content.data.state);
69 69 break;
70 70 case 'custom':
71 71 this.trigger('msg:custom', msg.content.data.custom_content);
72 72 break;
73 73 default:
74 74 // pass on to widget manager
75 75 this.widget_manager.handle_msg(msg, this);
76 76 }
77 77 },
78 78
79 79
80 80 // Handle when a widget is updated via the python side.
81 81 apply_update: function (state) {
82 82 this.updating = true;
83 83 try {
84 84 for (var key in state) {
85 85 if (state.hasOwnProperty(key)) {
86 86 this.set(key, state[key]);
87 87 }
88 88 }
89 89 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
90 90 this.save();
91 91 } finally {
92 92 this.updating = false;
93 93 }
94 94 },
95 95
96 96
97 97 _handle_status: function (msg, callbacks) {
98 98 //execution_state : ('busy', 'idle', 'starting')
99 99 if (this.comm !== undefined && msg.content.execution_state ==='idle') {
100 100 // Send buffer if this message caused another message to be
101 101 // throttled.
102 102 if (this.msg_buffer !== null &&
103 103 this.msg_throttle === this.pending_msgs) {
104 104 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
105 105 this.comm.send(data, callbacks);
106 106 this.msg_buffer = null;
107 107 } else {
108 108 // Only decrease the pending message count if the buffer
109 109 // doesn't get flushed (sent).
110 110 --this.pending_msgs;
111 111 }
112 112 }
113 113 },
114 114
115 115
116 116 // Custom syncronization logic.
117 117 _handle_sync: function (method, options) {
118 118 var model_json = this.toJSON();
119 119 var attr;
120 120
121 121 // Only send updated state if the state hasn't been changed
122 122 // during an update.
123 123 if (this.comm !== undefined) {
124 124 if (!this.updating) {
125 125 if (this.pending_msgs >= this.msg_throttle) {
126 126 // The throttle has been exceeded, buffer the current msg so
127 127 // it can be sent once the kernel has finished processing
128 128 // some of the existing messages.
129 129 if (method=='patch') {
130 130 if (this.msg_buffer === null) {
131 131 this.msg_buffer = $.extend({}, model_json); // Copy
132 132 }
133 133 for (attr in options.attrs) {
134 134 this.msg_buffer[attr] = options.attrs[attr];
135 135 }
136 136 } else {
137 137 this.msg_buffer = $.extend({}, model_json); // Copy
138 138 }
139 139
140 140 } else {
141 141 // We haven't exceeded the throttle, send the message like
142 142 // normal. If this is a patch operation, just send the
143 143 // changes.
144 144 var send_json = model_json;
145 145 if (method =='patch') {
146 146 send_json = {};
147 147 for (attr in options.attrs) {
148 148 send_json[attr] = options.attrs[attr];
149 149 }
150 150 }
151 151
152 152 var data = {method: 'backbone', sync_method: method, sync_data: send_json};
153 153 this.comm.send(data, options.callbacks);
154 154 this.pending_msgs++;
155 155 }
156 156 }
157 157 }
158 158
159 159 // Since the comm is a one-way communication, assume the message
160 160 // arrived.
161 161 return model_json;
162 162 },
163 163
164 164 });
165 165
166 166
167 167 //--------------------------------------------------------------------
168 168 // WidgetView class
169 169 //--------------------------------------------------------------------
170 170 var BaseWidgetView = Backbone.View.extend({
171 171 initialize: function(options) {
172 172 this.model.on('change',this.update,this);
173 173 this.widget_manager = options.widget_manager;
174 174 this.comm_manager = options.widget_manager.comm_manager;
175 this.cell = options.cell;
176 175 this.options = options.options;
177 176 this.child_views = [];
178 177 this.model.views.push(this);
179 178 },
180 179
181 180 update: function(){
182 181 // update view to be consistent with this.model
183 182 // triggered on model change
184 183 },
185 184
186 185 <<<<<<< HEAD
187 186 <<<<<<< HEAD
188 187 child_view: function(model_id, view_name) {
189 188 =======
190 189 child_view: function(model_id, view_name, options) {
191 190 <<<<<<< HEAD
192 191 >>>>>>> s/comm_id/model_id (left over from before)
193 192 // create and return a child view, given a comm id for a model and (optionally) a view name
194 193 =======
195 194 // create and return a child view, given a model id for a model and (optionally) a view name
196 195 >>>>>>> Updated comm id comments in view to model id
197 196 // if the view name is not given, it defaults to the model's default view attribute
198 197 var child_model = this.widget_manager.get_model(model_id);
198 <<<<<<< HEAD
199 199 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell);
200 =======
201 var child_view = this.widget_manager.create_view(child_model, view_name, options);
202 >>>>>>> Completely remove cell from model and view.
200 203 this.child_views[model_id] = child_view;
201 204 =======
202 205 child_view: function(comm_id, view_name, options) {
203 206 // create and return a child view, given a comm id for a model and (optionally) a view name
204 207 // if the view name is not given, it defaults to the model's default view attribute
205 208 var child_model = this.comm_manager.comms[comm_id].model;
206 209 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell, options);
207 210 this.child_views[comm_id] = child_view;
208 211 >>>>>>> Add widget view options in creating child views
209 212 return child_view;
210 213 },
211 214
212 215 update_child_views: function(old_list, new_list) {
213 216 // this function takes an old list and new list of model ids
214 217 // views in child_views that correspond to deleted ids are deleted
215 218 // views corresponding to added ids are added child_views
216 219
217 220 // delete old views
218 221 _.each(_.difference(old_list, new_list), function(element, index, list) {
219 222 var view = this.child_views[element];
220 223 delete this.child_views[element];
221 224 view.remove();
222 225 }, this);
223 226
224 227 // add new views
225 228 _.each(_.difference(new_list, old_list), function(element, index, list) {
226 229 // this function adds the view to the child_views dictionary
227 230 this.child_view(element);
228 231 }, this);
229 232 },
230 233
231 234
232 235
233 236 render: function(){
234 237 // render the view. By default, this is only called the first time the view is created
235 238 },
236 239 send: function (content) {
237 this.model.send(content, this._callbacks());
240 this.model.send(content, this.widget_manager.callbacks(this));
238 241 },
239 242
240 243 touch: function () {
241 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this._callbacks()});
242 },
243
244 _callbacks: function () {
245 // callback handlers specific to this view's cell
246 var callbacks = {};
247 var cell = this.cell;
248 if (cell !== null) {
249 // Try to get output handlers
250 var handle_output = null;
251 var handle_clear_output = null;
252 if (cell.output_area !== undefined && cell.output_area !== null) {
253 handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
254 handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
255 }
256
257 // Create callback dict using what is known
258 var that = this;
259 callbacks = {
260 iopub : {
261 output : handle_output,
262 clear_output : handle_clear_output,
263
264 status : function (msg) {
265 that.model._handle_status(msg, that._callbacks());
266 },
267
268 // Special function only registered by widget messages.
269 // Allows us to get the cell for a message so we know
270 // where to add widgets if the code requires it.
271 get_cell : function () {
272 return cell;
273 },
274 },
275 };
276 }
277 return callbacks;
244 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.widget_manager.callbacks(this)});
278 245 },
279 246
280 247 });
281 248
282 249 var WidgetView = BaseWidgetView.extend({
283 250 initialize: function (options) {
284 251 // TODO: make changes more granular (e.g., trigger on visible:change)
285 252 this.model.on('change', this.update, this);
286 253 this.model.on('msg:custom', this.on_msg, this);
287 254 BaseWidgetView.prototype.initialize.apply(this, arguments);
288 255 },
289 256
290 257 on_msg: function(msg) {
291 258 switch(msg.msg_type) {
292 259 case 'add_class':
293 260 this.add_class(msg.selector, msg.class_list);
294 261 break;
295 262 case 'remove_class':
296 263 this.remove_class(msg.selector, msg.class_list);
297 264 break;
298 265 }
299 266 },
300 267
301 268 add_class: function (selector, class_list) {
302 269 var elements = this._get_selector_element(selector);
303 270 if (elements.length > 0) {
304 271 elements.addClass(class_list);
305 272 }
306 273 },
307 274
308 275 remove_class: function (selector, class_list) {
309 276 var elements = this._get_selector_element(selector);
310 277 if (elements.length > 0) {
311 278 elements.removeClass(class_list);
312 279 }
313 280 },
314 281
315 282 update: function () {
316 283 // the very first update seems to happen before the element is finished rendering
317 284 // so we use setTimeout to give the element time to render
318 285 var e = this.$el;
319 286 var visible = this.model.get('visible');
320 287 setTimeout(function() {e.toggle(visible)},0);
321 288
322 289 var css = this.model.get('_css');
323 290 if (css === undefined) {return;}
324 291 for (var selector in css) {
325 292 if (css.hasOwnProperty(selector)) {
326 293 // Apply the css traits to all elements that match the selector.
327 294 var elements = this._get_selector_element(selector);
328 295 if (elements.length > 0) {
329 296 var css_traits = css[selector];
330 297 for (var css_key in css_traits) {
331 298 if (css_traits.hasOwnProperty(css_key)) {
332 299 elements.css(css_key, css_traits[css_key]);
333 300 }
334 301 }
335 302 }
336 303 }
337 304 }
338 305 },
339 306
340 307 _get_selector_element: function (selector) {
341 308 // Get the elements via the css selector. If the selector is
342 309 // blank, apply the style to the $el_to_style element. If
343 310 // the $el_to_style element is not defined, use apply the
344 311 // style to the view's element.
345 312 var elements;
346 313 if (selector === undefined || selector === null || selector === '') {
347 314 if (this.$el_to_style === undefined) {
348 315 elements = this.$el;
349 316 } else {
350 317 elements = this.$el_to_style;
351 318 }
352 319 } else {
353 320 elements = this.$el.find(selector);
354 321 }
355 322 return elements;
356 323 },
357 324 });
358 325
359 326 IPython.WidgetModel = WidgetModel;
360 327 IPython.WidgetView = WidgetView;
361 328 IPython.BaseWidgetView = BaseWidgetView;
362 329
363 330 return widget_manager;
364 331 });
General Comments 0
You need to be logged in to leave comments. Login now