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