##// END OF EJS Templates
- remove second line in create_child_view...
Jonathan Frederic -
Show More
@@ -1,407 +1,407 b''
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(WidgetManager, Underscore, Backbone){
21 21
22 22 var WidgetModel = Backbone.Model.extend({
23 23 constructor: function (widget_manager, model_id, comm) {
24 24 // Construcctor
25 25 //
26 26 // Creates a WidgetModel instance.
27 27 //
28 28 // Parameters
29 29 // ----------
30 30 // widget_manager : WidgetManager instance
31 31 // model_id : string
32 32 // An ID unique to this model.
33 33 // comm : Comm instance (optional)
34 34 this.widget_manager = widget_manager;
35 35 this.pending_msgs = 0;
36 36 this.msg_throttle = 2;
37 37 this.msg_buffer = null;
38 38 this.key_value_lock = null;
39 39 this.id = model_id;
40 40 this.views = [];
41 41
42 42 if (comm !== undefined) {
43 43 // Remember comm associated with the model.
44 44 this.comm = comm;
45 45 comm.model = this;
46 46
47 47 // Hook comm messages up to model.
48 48 comm.on_close($.proxy(this._handle_comm_closed, this));
49 49 comm.on_msg($.proxy(this._handle_comm_msg, this));
50 50 }
51 51 return Backbone.Model.apply(this);
52 52 },
53 53
54 54 send: function (content, callbacks) {
55 55 // Send a custom msg over the comm.
56 56 if (this.comm !== undefined) {
57 57 var data = {method: 'custom', content: content};
58 58 this.comm.send(data, callbacks);
59 59 }
60 60 },
61 61
62 62 _handle_comm_closed: function (msg) {
63 63 // Handle when a widget is closed.
64 64 this.trigger('comm:close');
65 65 delete this.comm.model; // Delete ref so GC will collect widget model.
66 66 delete this.comm;
67 67 delete this.model_id; // Delete id from model so widget manager cleans up.
68 68 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
69 69 },
70 70
71 71 _handle_comm_msg: function (msg) {
72 72 // Handle incoming comm msg.
73 73 var method = msg.content.data.method;
74 74 switch (method) {
75 75 case 'update':
76 76 this.apply_update(msg.content.data.state);
77 77 break;
78 78 case 'custom':
79 79 this.trigger('msg:custom', msg.content.data.content);
80 80 break;
81 81 case 'display':
82 82 this.widget_manager.display_view(msg, this);
83 83 break;
84 84 }
85 85 },
86 86
87 87 apply_update: function (state) {
88 88 // Handle when a widget is updated via the python side.
89 89 _.each(state, function(value, key) {
90 90 this.key_value_lock = [key, value];
91 91 try {
92 92 this.set(key, this._unpack_models(value));
93 93 } finally {
94 94 this.key_value_lock = null;
95 95 }
96 96 });
97 97 },
98 98
99 99 _handle_status: function (msg, callbacks) {
100 100 // Handle status msgs.
101 101
102 102 // execution_state : ('busy', 'idle', 'starting')
103 103 if (this.comm !== undefined) {
104 104 if (msg.content.execution_state ==='idle') {
105 105 // Send buffer if this message caused another message to be
106 106 // throttled.
107 107 if (this.msg_buffer !== null &&
108 108 this.msg_throttle === this.pending_msgs) {
109 109 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
110 110 this.comm.send(data, callbacks);
111 111 this.msg_buffer = null;
112 112 } else {
113 113 --this.pending_msgs;
114 114 }
115 115 }
116 116 }
117 117 },
118 118
119 119 callbacks: function(view) {
120 120 // Create msg callbacks for a comm msg.
121 121 var callbacks = this.widget_manager.callbacks(view);
122 122
123 123 if (callbacks.iopub === undefined) {
124 124 callbacks.iopub = {};
125 125 }
126 126
127 127 var that = this;
128 128 callbacks.iopub.status = function (msg) {
129 129 that._handle_status(msg, callbacks);
130 130 }
131 131 return callbacks;
132 132 },
133 133
134 134 sync: function (method, model, options) {
135 135
136 136 // Make sure a comm exists.
137 137 var error = options.error || function() {
138 138 console.error('Backbone sync error:', arguments);
139 139 }
140 140 if (this.comm === undefined) {
141 141 error();
142 142 return false;
143 143 }
144 144
145 145 // Delete any key value pairs that the back-end already knows about.
146 146 var attrs = (method === 'patch') ? options.attrs : model.toJSON(options);
147 147 if (this.key_value_lock !== null) {
148 148 var key = this.key_value_lock[0];
149 149 var value = this.key_value_lock[1];
150 150 if (attrs[key] === value) {
151 151 delete attrs[key];
152 152 }
153 153 }
154 154
155 155 // Only sync if there are attributes to send to the back-end.
156 156 if (attr.length > 0) {
157 157 var callbacks = options.callbacks || {};
158 158 if (this.pending_msgs >= this.msg_throttle) {
159 159 // The throttle has been exceeded, buffer the current msg so
160 160 // it can be sent once the kernel has finished processing
161 161 // some of the existing messages.
162 162
163 163 // Combine updates if it is a 'patch' sync, otherwise replace updates
164 164 switch (method) {
165 165 case 'patch':
166 166 this.msg_buffer = $.extend(this.msg_buffer || {}, attrs);
167 167 break;
168 168 case 'update':
169 169 case 'create':
170 170 this.msg_buffer = attrs;
171 171 break;
172 172 default:
173 173 error();
174 174 return false;
175 175 }
176 176 this.msg_buffer_callbacks = callbacks;
177 177
178 178 } else {
179 179 // We haven't exceeded the throttle, send the message like
180 180 // normal. If this is a patch operation, just send the
181 181 // changes.
182 182 var data = {method: 'backbone', sync_data: attrs};
183 183 this.comm.send(data, callbacks);
184 184 this.pending_msgs++;
185 185 }
186 186 }
187 187 // Since the comm is a one-way communication, assume the message
188 188 // arrived. Don't call success since we don't have a model back from the server
189 189 // this means we miss out on the 'sync' event.
190 190 },
191 191
192 192 save_changes: function(callbacks) {
193 193 // Push this model's state to the back-end
194 194 //
195 195 // This invokes a Backbone.Sync.
196 196 this.save(this.changedAttributes(), {patch: true, callbacks: callbacks});
197 197 },
198 198
199 199 _pack_models: function(value) {
200 200 // Replace models with model ids recursively.
201 201 if (value instanceof Backbone.Model) {
202 202 return value.id;
203 203 } else if (value instanceof Object) {
204 204 var packed = {};
205 205 _.each(value, function(sub_value, key) {
206 206 packed[key] = this._pack_models(sub_value);
207 207 });
208 208 return packed;
209 209 } else {
210 210 return value;
211 211 }
212 212 },
213 213
214 214 _unpack_models: function(value) {
215 215 // Replace model ids with models recursively.
216 216 if (value instanceof Object) {
217 217 var unpacked = {};
218 218 _.each(value, function(sub_value, key) {
219 219 unpacked[key] = this._unpack_models(sub_value);
220 220 });
221 221 return unpacked;
222 222 } else {
223 223 var model = this.widget_manager.get_model(value);
224 224 if (model !== null) {
225 225 return model;
226 226 } else {
227 227 return value;
228 228 }
229 229 }
230 230 },
231 231
232 232 });
233 233 WidgetManager.register_widget_model('WidgetModel', WidgetModel);
234 234
235 235
236 236 var WidgetView = Backbone.View.extend({
237 237 initialize: function(parameters) {
238 238 // Public constructor.
239 239 this.model.on('change',this.update,this);
240 240 this.options = parameters.options;
241 241 this.child_views = [];
242 242 this.model.views.push(this);
243 243 },
244 244
245 245 update: function(){
246 246 // Triggered on model change.
247 247 //
248 248 // Update view to be consistent with this.model
249 249 },
250 250
251 251 create_child_view: function(child_model, options) {
252 252 // Create and return a child view.
253 253 //
254 254 // -given a model and (optionally) a view name if the view name is
255 255 // not given, it defaults to the model's default view attribute.
256 256
257 257 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
258 258 // it would be great to have the widget manager add the cell metadata
259 259 // to the subview without having to add it here.
260 options = options || {};
261 options.cell = this.options.cell;
262 var child_view = this.model.widget_manager.create_view(child_model, options);
260 var child_view = this.model.widget_manager.create_view(child_model, options || {});
263 261 this.child_views[child_model.id] = child_view;
264 262 return child_view;
265 263 },
266 264
267 265 delete_child_view: function(child_model, options) {
268 266 // Delete a child view that was previously created using create_child_view.
269 267 var view = this.child_views[child_model.id];
270 delete this.child_views[child_model.id];
271 view.remove();
268 if (view !== undefined) {
269 delete this.child_views[child_model.id];
270 view.remove();
271 }
272 272 },
273 273
274 274 do_diff: function(old_list, new_list, removed_callback, added_callback) {
275 275 // Difference a changed list and call remove and add callbacks for
276 276 // each removed and added item in the new list.
277 277 //
278 278 // Parameters
279 279 // ----------
280 280 // old_list : array
281 281 // new_list : array
282 282 // removed_callback : Callback(item)
283 283 // Callback that is called for each item removed.
284 284 // added_callback : Callback(item)
285 285 // Callback that is called for each item added.
286 286
287 287
288 288 // removed items
289 289 _.each(_.difference(old_list, new_list), function(item, index, list) {
290 290 removed_callback(item);
291 291 }, this);
292 292
293 293 // added items
294 294 _.each(_.difference(new_list, old_list), function(item, index, list) {
295 295 added_callback(item);
296 296 }, this);
297 297 },
298 298
299 299 callbacks: function(){
300 300 // Create msg callbacks for a comm msg.
301 301 return this.model.callbacks(this);
302 302 },
303 303
304 304 render: function(){
305 305 // Render the view.
306 306 //
307 307 // By default, this is only called the first time the view is created
308 308 },
309 309
310 310 send: function (content) {
311 311 // Send a custom msg associated with this view.
312 312 this.model.send(content, this.callbacks());
313 313 },
314 314
315 315 touch: function () {
316 316 this.model.save_changes(this.callbacks());
317 317 },
318 318
319 319 });
320 320
321 321
322 322 var DOMWidgetView = WidgetView.extend({
323 323 initialize: function (options) {
324 324 // Public constructor
325 325
326 326 // In the future we may want to make changes more granular
327 327 // (e.g., trigger on visible:change).
328 328 this.model.on('change', this.update, this);
329 329 this.model.on('msg:custom', this.on_msg, this);
330 330 DOMWidgetView.__super__.initialize.apply(this, arguments);
331 331 },
332 332
333 333 on_msg: function(msg) {
334 334 // Handle DOM specific msgs.
335 335 switch(msg.msg_type) {
336 336 case 'add_class':
337 337 this.add_class(msg.selector, msg.class_list);
338 338 break;
339 339 case 'remove_class':
340 340 this.remove_class(msg.selector, msg.class_list);
341 341 break;
342 342 }
343 343 },
344 344
345 345 add_class: function (selector, class_list) {
346 346 // Add a DOM class to an element.
347 347 this._get_selector_element(selector).addClass(class_list);
348 348 },
349 349
350 350 remove_class: function (selector, class_list) {
351 351 // Remove a DOM class from an element.
352 352 this._get_selector_element(selector).removeClass(class_list);
353 353 },
354 354
355 355 update: function () {
356 356 // Update the contents of this view
357 357 //
358 358 // Called when the model is changed. The model may have been
359 359 // changed by another view or by a state update from the back-end.
360 360 // The very first update seems to happen before the element is
361 361 // finished rendering so we use setTimeout to give the element time
362 362 // to render
363 363 var e = this.$el;
364 364 var visible = this.model.get('visible');
365 365 setTimeout(function() {e.toggle(visible)},0);
366 366
367 367 var css = this.model.get('_css');
368 368 if (css === undefined) {return;}
369 369 _.each(css, function(css_traits, selector){
370 370 // Apply the css traits to all elements that match the selector.
371 371 var elements = this._get_selector_element(selector);
372 372 if (elements.length > 0) {
373 373 _.each(css_traits, function(css_value, css_key){
374 374 elements.css(css_key, css_value);
375 375 });
376 376 }
377 377 });
378 378
379 379 },
380 380
381 381 _get_selector_element: function (selector) {
382 382 // Get the elements via the css selector.
383 383
384 384 // If the selector is blank, apply the style to the $el_to_style
385 385 // element. If the $el_to_style element is not defined, use apply
386 386 // the style to the view's element.
387 387 var elements;
388 388 if (selector === undefined || selector === null || selector === '') {
389 389 if (this.$el_to_style === undefined) {
390 390 elements = this.$el;
391 391 } else {
392 392 elements = this.$el_to_style;
393 393 }
394 394 } else {
395 395 elements = this.$el.find(selector);
396 396 }
397 397 return elements;
398 398 },
399 399 });
400 400
401 401 IPython.WidgetModel = WidgetModel;
402 402 IPython.WidgetView = WidgetView;
403 403 IPython.DOMWidgetView = DOMWidgetView;
404 404
405 405 // Pass through WidgetManager namespace.
406 406 return WidgetManager;
407 407 });
General Comments 0
You need to be logged in to leave comments. Login now