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