##// END OF EJS Templates
Tabs->Spaces
Jonathan Frederic -
Show More
@@ -1,576 +1,576 b''
1 // Copyright (c) IPython Development Team.
1 // Copyright (c) IPython Development Team.
2 // Distributed under the terms of the Modified BSD License.
2 // Distributed under the terms of the Modified BSD License.
3
3
4 define(["widgets/js/manager",
4 define(["widgets/js/manager",
5 "underscore",
5 "underscore",
6 "backbone",
6 "backbone",
7 "jquery",
7 "jquery",
8 "base/js/namespace",
8 "base/js/namespace",
9 ], function(widgetmanager, _, Backbone, $, IPython){
9 ], function(widgetmanager, _, Backbone, $, IPython){
10
10
11 var WidgetModel = Backbone.Model.extend({
11 var WidgetModel = Backbone.Model.extend({
12 constructor: function (widget_manager, model_id, comm) {
12 constructor: function (widget_manager, model_id, comm) {
13 // Constructor
13 // Constructor
14 //
14 //
15 // Creates a WidgetModel instance.
15 // Creates a WidgetModel instance.
16 //
16 //
17 // Parameters
17 // Parameters
18 // ----------
18 // ----------
19 // widget_manager : WidgetManager instance
19 // widget_manager : WidgetManager instance
20 // model_id : string
20 // model_id : string
21 // An ID unique to this model.
21 // An ID unique to this model.
22 // comm : Comm instance (optional)
22 // comm : Comm instance (optional)
23 this.widget_manager = widget_manager;
23 this.widget_manager = widget_manager;
24 this._buffered_state_diff = {};
24 this._buffered_state_diff = {};
25 this.pending_msgs = 0;
25 this.pending_msgs = 0;
26 this.msg_buffer = null;
26 this.msg_buffer = null;
27 this.key_value_lock = null;
27 this.key_value_lock = null;
28 this.id = model_id;
28 this.id = model_id;
29 this.views = [];
29 this.views = [];
30
30
31 if (comm !== undefined) {
31 if (comm !== undefined) {
32 // Remember comm associated with the model.
32 // Remember comm associated with the model.
33 this.comm = comm;
33 this.comm = comm;
34 comm.model = this;
34 comm.model = this;
35
35
36 // Hook comm messages up to model.
36 // Hook comm messages up to model.
37 comm.on_close($.proxy(this._handle_comm_closed, this));
37 comm.on_close($.proxy(this._handle_comm_closed, this));
38 comm.on_msg($.proxy(this._handle_comm_msg, this));
38 comm.on_msg($.proxy(this._handle_comm_msg, this));
39 }
39 }
40 return Backbone.Model.apply(this);
40 return Backbone.Model.apply(this);
41 },
41 },
42
42
43 send: function (content, callbacks) {
43 send: function (content, callbacks) {
44 // Send a custom msg over the comm.
44 // Send a custom msg over the comm.
45 if (this.comm !== undefined) {
45 if (this.comm !== undefined) {
46 var data = {method: 'custom', content: content};
46 var data = {method: 'custom', content: content};
47 this.comm.send(data, callbacks);
47 this.comm.send(data, callbacks);
48 this.pending_msgs++;
48 this.pending_msgs++;
49 }
49 }
50 },
50 },
51
51
52 _handle_comm_closed: function (msg) {
52 _handle_comm_closed: function (msg) {
53 // Handle when a widget is closed.
53 // Handle when a widget is closed.
54 this.trigger('comm:close');
54 this.trigger('comm:close');
55 delete this.comm.model; // Delete ref so GC will collect widget model.
55 delete this.comm.model; // Delete ref so GC will collect widget model.
56 delete this.comm;
56 delete this.comm;
57 delete this.model_id; // Delete id from model so widget manager cleans up.
57 delete this.model_id; // Delete id from model so widget manager cleans up.
58 _.each(this.views, function(view, i) {
58 _.each(this.views, function(view, i) {
59 view.remove();
59 view.remove();
60 });
60 });
61 },
61 },
62
62
63 _handle_comm_msg: function (msg) {
63 _handle_comm_msg: function (msg) {
64 // Handle incoming comm msg.
64 // Handle incoming comm msg.
65 var method = msg.content.data.method;
65 var method = msg.content.data.method;
66 switch (method) {
66 switch (method) {
67 case 'update':
67 case 'update':
68 this.apply_update(msg.content.data.state);
68 this.apply_update(msg.content.data.state);
69 break;
69 break;
70 case 'custom':
70 case 'custom':
71 this.trigger('msg:custom', msg.content.data.content);
71 this.trigger('msg:custom', msg.content.data.content);
72 break;
72 break;
73 case 'display':
73 case 'display':
74 this.widget_manager.display_view(msg, this);
74 this.widget_manager.display_view(msg, this);
75 break;
75 break;
76 }
76 }
77 },
77 },
78
78
79 apply_update: function (state) {
79 apply_update: function (state) {
80 // Handle when a widget is updated via the python side.
80 // Handle when a widget is updated via the python side.
81 var that = this;
81 var that = this;
82 _.each(state, function(value, key) {
82 _.each(state, function(value, key) {
83 that.key_value_lock = [key, value];
83 that.key_value_lock = [key, value];
84 try {
84 try {
85 WidgetModel.__super__.set.apply(that, [key, that._unpack_models(value)]);
85 WidgetModel.__super__.set.apply(that, [key, that._unpack_models(value)]);
86 } finally {
86 } finally {
87 that.key_value_lock = null;
87 that.key_value_lock = null;
88 }
88 }
89 });
89 });
90 },
90 },
91
91
92 _handle_status: function (msg, callbacks) {
92 _handle_status: function (msg, callbacks) {
93 // Handle status msgs.
93 // Handle status msgs.
94
94
95 // execution_state : ('busy', 'idle', 'starting')
95 // execution_state : ('busy', 'idle', 'starting')
96 if (this.comm !== undefined) {
96 if (this.comm !== undefined) {
97 if (msg.content.execution_state ==='idle') {
97 if (msg.content.execution_state ==='idle') {
98 // Send buffer if this message caused another message to be
98 // Send buffer if this message caused another message to be
99 // throttled.
99 // throttled.
100 if (this.msg_buffer !== null &&
100 if (this.msg_buffer !== null &&
101 (this.get('msg_throttle') || 3) === this.pending_msgs) {
101 (this.get('msg_throttle') || 3) === this.pending_msgs) {
102 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
102 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
103 this.comm.send(data, callbacks);
103 this.comm.send(data, callbacks);
104 this.msg_buffer = null;
104 this.msg_buffer = null;
105 } else {
105 } else {
106 --this.pending_msgs;
106 --this.pending_msgs;
107 }
107 }
108 }
108 }
109 }
109 }
110 },
110 },
111
111
112 callbacks: function(view) {
112 callbacks: function(view) {
113 // Create msg callbacks for a comm msg.
113 // Create msg callbacks for a comm msg.
114 var callbacks = this.widget_manager.callbacks(view);
114 var callbacks = this.widget_manager.callbacks(view);
115
115
116 if (callbacks.iopub === undefined) {
116 if (callbacks.iopub === undefined) {
117 callbacks.iopub = {};
117 callbacks.iopub = {};
118 }
118 }
119
119
120 var that = this;
120 var that = this;
121 callbacks.iopub.status = function (msg) {
121 callbacks.iopub.status = function (msg) {
122 that._handle_status(msg, callbacks);
122 that._handle_status(msg, callbacks);
123 };
123 };
124 return callbacks;
124 return callbacks;
125 },
125 },
126
126
127 set: function(key, val, options) {
127 set: function(key, val, options) {
128 // Set a value.
128 // Set a value.
129 var return_value = WidgetModel.__super__.set.apply(this, arguments);
129 var return_value = WidgetModel.__super__.set.apply(this, arguments);
130
130
131 // Backbone only remembers the diff of the most recent set()
131 // Backbone only remembers the diff of the most recent set()
132 // operation. Calling set multiple times in a row results in a
132 // operation. Calling set multiple times in a row results in a
133 // loss of diff information. Here we keep our own running diff.
133 // loss of diff information. Here we keep our own running diff.
134 this._buffered_state_diff = $.extend(this._buffered_state_diff, this.changedAttributes() || {});
134 this._buffered_state_diff = $.extend(this._buffered_state_diff, this.changedAttributes() || {});
135 return return_value;
135 return return_value;
136 },
136 },
137
137
138 sync: function (method, model, options) {
138 sync: function (method, model, options) {
139 // Handle sync to the back-end. Called when a model.save() is called.
139 // Handle sync to the back-end. Called when a model.save() is called.
140
140
141 // Make sure a comm exists.
141 // Make sure a comm exists.
142 var error = options.error || function() {
142 var error = options.error || function() {
143 console.error('Backbone sync error:', arguments);
143 console.error('Backbone sync error:', arguments);
144 };
144 };
145 if (this.comm === undefined) {
145 if (this.comm === undefined) {
146 error();
146 error();
147 return false;
147 return false;
148 }
148 }
149
149
150 // Delete any key value pairs that the back-end already knows about.
150 // Delete any key value pairs that the back-end already knows about.
151 var attrs = (method === 'patch') ? options.attrs : model.toJSON(options);
151 var attrs = (method === 'patch') ? options.attrs : model.toJSON(options);
152 if (this.key_value_lock !== null) {
152 if (this.key_value_lock !== null) {
153 var key = this.key_value_lock[0];
153 var key = this.key_value_lock[0];
154 var value = this.key_value_lock[1];
154 var value = this.key_value_lock[1];
155 if (attrs[key] === value) {
155 if (attrs[key] === value) {
156 delete attrs[key];
156 delete attrs[key];
157 }
157 }
158 }
158 }
159
159
160 // Only sync if there are attributes to send to the back-end.
160 // Only sync if there are attributes to send to the back-end.
161 attrs = this._pack_models(attrs);
161 attrs = this._pack_models(attrs);
162 if (_.size(attrs) > 0) {
162 if (_.size(attrs) > 0) {
163
163
164 // If this message was sent via backbone itself, it will not
164 // If this message was sent via backbone itself, it will not
165 // have any callbacks. It's important that we create callbacks
165 // have any callbacks. It's important that we create callbacks
166 // so we can listen for status messages, etc...
166 // so we can listen for status messages, etc...
167 var callbacks = options.callbacks || this.callbacks();
167 var callbacks = options.callbacks || this.callbacks();
168
168
169 // Check throttle.
169 // Check throttle.
170 if (this.pending_msgs >= (this.get('msg_throttle') || 3)) {
170 if (this.pending_msgs >= (this.get('msg_throttle') || 3)) {
171 // The throttle has been exceeded, buffer the current msg so
171 // The throttle has been exceeded, buffer the current msg so
172 // it can be sent once the kernel has finished processing
172 // it can be sent once the kernel has finished processing
173 // some of the existing messages.
173 // some of the existing messages.
174
174
175 // Combine updates if it is a 'patch' sync, otherwise replace updates
175 // Combine updates if it is a 'patch' sync, otherwise replace updates
176 switch (method) {
176 switch (method) {
177 case 'patch':
177 case 'patch':
178 this.msg_buffer = $.extend(this.msg_buffer || {}, attrs);
178 this.msg_buffer = $.extend(this.msg_buffer || {}, attrs);
179 break;
179 break;
180 case 'update':
180 case 'update':
181 case 'create':
181 case 'create':
182 this.msg_buffer = attrs;
182 this.msg_buffer = attrs;
183 break;
183 break;
184 default:
184 default:
185 error();
185 error();
186 return false;
186 return false;
187 }
187 }
188 this.msg_buffer_callbacks = callbacks;
188 this.msg_buffer_callbacks = callbacks;
189
189
190 } else {
190 } else {
191 // We haven't exceeded the throttle, send the message like
191 // We haven't exceeded the throttle, send the message like
192 // normal.
192 // normal.
193 var data = {method: 'backbone', sync_data: attrs};
193 var data = {method: 'backbone', sync_data: attrs};
194 this.comm.send(data, callbacks);
194 this.comm.send(data, callbacks);
195 this.pending_msgs++;
195 this.pending_msgs++;
196 }
196 }
197 }
197 }
198 // Since the comm is a one-way communication, assume the message
198 // Since the comm is a one-way communication, assume the message
199 // arrived. Don't call success since we don't have a model back from the server
199 // arrived. Don't call success since we don't have a model back from the server
200 // this means we miss out on the 'sync' event.
200 // this means we miss out on the 'sync' event.
201 this._buffered_state_diff = {};
201 this._buffered_state_diff = {};
202 },
202 },
203
203
204 save_changes: function(callbacks) {
204 save_changes: function(callbacks) {
205 // Push this model's state to the back-end
205 // Push this model's state to the back-end
206 //
206 //
207 // This invokes a Backbone.Sync.
207 // This invokes a Backbone.Sync.
208 this.save(this._buffered_state_diff, {patch: true, callbacks: callbacks});
208 this.save(this._buffered_state_diff, {patch: true, callbacks: callbacks});
209 },
209 },
210
210
211 _pack_models: function(value) {
211 _pack_models: function(value) {
212 // Replace models with model ids recursively.
212 // Replace models with model ids recursively.
213 var that = this;
213 var that = this;
214 var packed;
214 var packed;
215 if (value instanceof Backbone.Model) {
215 if (value instanceof Backbone.Model) {
216 return "IPY_MODEL_" + value.id;
216 return "IPY_MODEL_" + value.id;
217
217
218 } else if ($.isArray(value)) {
218 } else if ($.isArray(value)) {
219 packed = [];
219 packed = [];
220 _.each(value, function(sub_value, key) {
220 _.each(value, function(sub_value, key) {
221 packed.push(that._pack_models(sub_value));
221 packed.push(that._pack_models(sub_value));
222 });
222 });
223 return packed;
223 return packed;
224
224
225 } else if (value instanceof Object) {
225 } else if (value instanceof Object) {
226 packed = {};
226 packed = {};
227 _.each(value, function(sub_value, key) {
227 _.each(value, function(sub_value, key) {
228 packed[key] = that._pack_models(sub_value);
228 packed[key] = that._pack_models(sub_value);
229 });
229 });
230 return packed;
230 return packed;
231
231
232 } else {
232 } else {
233 return value;
233 return value;
234 }
234 }
235 },
235 },
236
236
237 _unpack_models: function(value) {
237 _unpack_models: function(value) {
238 // Replace model ids with models recursively.
238 // Replace model ids with models recursively.
239 var that = this;
239 var that = this;
240 var unpacked;
240 var unpacked;
241 if ($.isArray(value)) {
241 if ($.isArray(value)) {
242 unpacked = [];
242 unpacked = [];
243 _.each(value, function(sub_value, key) {
243 _.each(value, function(sub_value, key) {
244 unpacked.push(that._unpack_models(sub_value));
244 unpacked.push(that._unpack_models(sub_value));
245 });
245 });
246 return unpacked;
246 return unpacked;
247
247
248 } else if (value instanceof Object) {
248 } else if (value instanceof Object) {
249 unpacked = {};
249 unpacked = {};
250 _.each(value, function(sub_value, key) {
250 _.each(value, function(sub_value, key) {
251 unpacked[key] = that._unpack_models(sub_value);
251 unpacked[key] = that._unpack_models(sub_value);
252 });
252 });
253 return unpacked;
253 return unpacked;
254
254
255 } else if (typeof value === 'string' && value.slice(0,10) === "IPY_MODEL_") {
255 } else if (typeof value === 'string' && value.slice(0,10) === "IPY_MODEL_") {
256 var model = this.widget_manager.get_model(value.slice(10, value.length));
256 var model = this.widget_manager.get_model(value.slice(10, value.length));
257 if (model) {
257 if (model) {
258 return model;
258 return model;
259 } else {
259 } else {
260 return value;
260 return value;
261 }
261 }
262 } else {
262 } else {
263 return value;
263 return value;
264 }
264 }
265 },
265 },
266
266
267 });
267 });
268 widgetmanager.WidgetManager.register_widget_model('WidgetModel', WidgetModel);
268 widgetmanager.WidgetManager.register_widget_model('WidgetModel', WidgetModel);
269
269
270
270
271 var WidgetView = Backbone.View.extend({
271 var WidgetView = Backbone.View.extend({
272 initialize: function(parameters) {
272 initialize: function(parameters) {
273 // Public constructor.
273 // Public constructor.
274 this.model.on('change',this.update,this);
274 this.model.on('change',this.update,this);
275 this.options = parameters.options;
275 this.options = parameters.options;
276 this.child_model_views = {};
276 this.child_model_views = {};
277 this.child_views = {};
277 this.child_views = {};
278 this.model.views.push(this);
278 this.model.views.push(this);
279 this.id = this.id || IPython.utils.uuid();
279 this.id = this.id || IPython.utils.uuid();
280 this.on('displayed', function() {
280 this.on('displayed', function() {
281 this.is_displayed = true;
281 this.is_displayed = true;
282 }, this);
282 }, this);
283 },
283 },
284
284
285 update: function(){
285 update: function(){
286 // Triggered on model change.
286 // Triggered on model change.
287 //
287 //
288 // Update view to be consistent with this.model
288 // Update view to be consistent with this.model
289 },
289 },
290
290
291 create_child_view: function(child_model, options) {
291 create_child_view: function(child_model, options) {
292 // Create and return a child view.
292 // Create and return a child view.
293 //
293 //
294 // -given a model and (optionally) a view name if the view name is
294 // -given a model and (optionally) a view name if the view name is
295 // not given, it defaults to the model's default view attribute.
295 // not given, it defaults to the model's default view attribute.
296
296
297 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
297 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
298 // it would be great to have the widget manager add the cell metadata
298 // it would be great to have the widget manager add the cell metadata
299 // to the subview without having to add it here.
299 // to the subview without having to add it here.
300 options = $.extend({ parent: this }, options || {});
300 options = $.extend({ parent: this }, options || {});
301 var child_view = this.model.widget_manager.create_view(child_model, options, this);
301 var child_view = this.model.widget_manager.create_view(child_model, options, this);
302
302
303 // Associate the view id with the model id.
303 // Associate the view id with the model id.
304 if (this.child_model_views[child_model.id] === undefined) {
304 if (this.child_model_views[child_model.id] === undefined) {
305 this.child_model_views[child_model.id] = [];
305 this.child_model_views[child_model.id] = [];
306 }
306 }
307 this.child_model_views[child_model.id].push(child_view.id);
307 this.child_model_views[child_model.id].push(child_view.id);
308
308
309 // Remember the view by id.
309 // Remember the view by id.
310 this.child_views[child_view.id] = child_view;
310 this.child_views[child_view.id] = child_view;
311 return child_view;
311 return child_view;
312 },
312 },
313
313
314 pop_child_view: function(child_model) {
314 pop_child_view: function(child_model) {
315 // Delete a child view that was previously created using create_child_view.
315 // Delete a child view that was previously created using create_child_view.
316 var view_ids = this.child_model_views[child_model.id];
316 var view_ids = this.child_model_views[child_model.id];
317 if (view_ids !== undefined) {
317 if (view_ids !== undefined) {
318
318
319 // Only delete the first view in the list.
319 // Only delete the first view in the list.
320 var view_id = view_ids[0];
320 var view_id = view_ids[0];
321 var view = this.child_views[view_id];
321 var view = this.child_views[view_id];
322 delete this.child_views[view_id];
322 delete this.child_views[view_id];
323 view_ids.splice(0,1);
323 view_ids.splice(0,1);
324 child_model.views.pop(view);
324 child_model.views.pop(view);
325
325
326 // Remove the view list specific to this model if it is empty.
326 // Remove the view list specific to this model if it is empty.
327 if (view_ids.length === 0) {
327 if (view_ids.length === 0) {
328 delete this.child_model_views[child_model.id];
328 delete this.child_model_views[child_model.id];
329 }
329 }
330 return view;
330 return view;
331 }
331 }
332 return null;
332 return null;
333 },
333 },
334
334
335 do_diff: function(old_list, new_list, removed_callback, added_callback) {
335 do_diff: function(old_list, new_list, removed_callback, added_callback) {
336 // Difference a changed list and call remove and add callbacks for
336 // Difference a changed list and call remove and add callbacks for
337 // each removed and added item in the new list.
337 // each removed and added item in the new list.
338 //
338 //
339 // Parameters
339 // Parameters
340 // ----------
340 // ----------
341 // old_list : array
341 // old_list : array
342 // new_list : array
342 // new_list : array
343 // removed_callback : Callback(item)
343 // removed_callback : Callback(item)
344 // Callback that is called for each item removed.
344 // Callback that is called for each item removed.
345 // added_callback : Callback(item)
345 // added_callback : Callback(item)
346 // Callback that is called for each item added.
346 // Callback that is called for each item added.
347
347
348 // Walk the lists until an unequal entry is found.
348 // Walk the lists until an unequal entry is found.
349 var i;
349 var i;
350 for (i = 0; i < new_list.length; i++) {
350 for (i = 0; i < new_list.length; i++) {
351 if (i >= old_list.length || new_list[i] !== old_list[i]) {
351 if (i >= old_list.length || new_list[i] !== old_list[i]) {
352 break;
352 break;
353 }
353 }
354 }
354 }
355
355
356 // Remove the non-matching items from the old list.
356 // Remove the non-matching items from the old list.
357 for (var j = i; j < old_list.length; j++) {
357 for (var j = i; j < old_list.length; j++) {
358 removed_callback(old_list[j]);
358 removed_callback(old_list[j]);
359 }
359 }
360
360
361 // Add the rest of the new list items.
361 // Add the rest of the new list items.
362 for (; i < new_list.length; i++) {
362 for (; i < new_list.length; i++) {
363 added_callback(new_list[i]);
363 added_callback(new_list[i]);
364 }
364 }
365 },
365 },
366
366
367 callbacks: function(){
367 callbacks: function(){
368 // Create msg callbacks for a comm msg.
368 // Create msg callbacks for a comm msg.
369 return this.model.callbacks(this);
369 return this.model.callbacks(this);
370 },
370 },
371
371
372 render: function(){
372 render: function(){
373 // Render the view.
373 // Render the view.
374 //
374 //
375 // By default, this is only called the first time the view is created
375 // By default, this is only called the first time the view is created
376 },
376 },
377
377
378 show: function(){
378 show: function(){
379 // Show the widget-area
379 // Show the widget-area
380 if (this.options && this.options.cell &&
380 if (this.options && this.options.cell &&
381 this.options.cell.widget_area !== undefined) {
381 this.options.cell.widget_area !== undefined) {
382 this.options.cell.widget_area.show();
382 this.options.cell.widget_area.show();
383 }
383 }
384 },
384 },
385
385
386 send: function (content) {
386 send: function (content) {
387 // Send a custom msg associated with this view.
387 // Send a custom msg associated with this view.
388 this.model.send(content, this.callbacks());
388 this.model.send(content, this.callbacks());
389 },
389 },
390
390
391 touch: function () {
391 touch: function () {
392 this.model.save_changes(this.callbacks());
392 this.model.save_changes(this.callbacks());
393 },
393 },
394
394
395 after_displayed: function (callback, context) {
395 after_displayed: function (callback, context) {
396 // Calls the callback right away is the view is already displayed
396 // Calls the callback right away is the view is already displayed
397 // otherwise, register the callback to the 'displayed' event.
397 // otherwise, register the callback to the 'displayed' event.
398 if (this.is_displayed) {
398 if (this.is_displayed) {
399 callback.apply(context);
399 callback.apply(context);
400 } else {
400 } else {
401 this.on('displayed', callback, context);
401 this.on('displayed', callback, context);
402 }
402 }
403 },
403 },
404 });
404 });
405
405
406
406
407 var DOMWidgetView = WidgetView.extend({
407 var DOMWidgetView = WidgetView.extend({
408 initialize: function (parameters) {
408 initialize: function (parameters) {
409 // Public constructor
409 // Public constructor
410 DOMWidgetView.__super__.initialize.apply(this, [parameters]);
410 DOMWidgetView.__super__.initialize.apply(this, [parameters]);
411 this.on('displayed', this.show, this);
411 this.on('displayed', this.show, this);
412 this.model.on('change:visible', this.update_visible, this);
412 this.model.on('change:visible', this.update_visible, this);
413 this.model.on('change:_css', this.update_css, this);
413 this.model.on('change:_css', this.update_css, this);
414
414
415 this.model.on('change:_dom_classes', function(model, new_classes) {
415 this.model.on('change:_dom_classes', function(model, new_classes) {
416 var old_classes = model.previous('_dom_classes');
416 var old_classes = model.previous('_dom_classes');
417 this.update_classes(old_classes, new_classes);
417 this.update_classes(old_classes, new_classes);
418 }, this);
418 }, this);
419
419
420 this.model.on('change:color', function (model, value) {
420 this.model.on('change:color', function (model, value) {
421 this.update_attr('color', value); }, this);
421 this.update_attr('color', value); }, this);
422
422
423 this.model.on('change:background_color', function (model, value) {
423 this.model.on('change:background_color', function (model, value) {
424 this.update_attr('background', value); }, this);
424 this.update_attr('background', value); }, this);
425
425
426 this.model.on('change:width', function (model, value) {
426 this.model.on('change:width', function (model, value) {
427 this.update_attr('width', value); }, this);
427 this.update_attr('width', value); }, this);
428
428
429 this.model.on('change:height', function (model, value) {
429 this.model.on('change:height', function (model, value) {
430 this.update_attr('height', value); }, this);
430 this.update_attr('height', value); }, this);
431
431
432 this.model.on('change:border_color', function (model, value) {
432 this.model.on('change:border_color', function (model, value) {
433 this.update_attr('border-color', value); }, this);
433 this.update_attr('border-color', value); }, this);
434
434
435 this.model.on('change:border_width', function (model, value) {
435 this.model.on('change:border_width', function (model, value) {
436 this.update_attr('border-width', value); }, this);
436 this.update_attr('border-width', value); }, this);
437
437
438 this.model.on('change:border_style', function (model, value) {
438 this.model.on('change:border_style', function (model, value) {
439 this.update_attr('border-style', value); }, this);
439 this.update_attr('border-style', value); }, this);
440
440
441 this.model.on('change:font_style', function (model, value) {
441 this.model.on('change:font_style', function (model, value) {
442 this.update_attr('font-style', value); }, this);
442 this.update_attr('font-style', value); }, this);
443
443
444 this.model.on('change:font_weight', function (model, value) {
444 this.model.on('change:font_weight', function (model, value) {
445 this.update_attr('font-weight', value); }, this);
445 this.update_attr('font-weight', value); }, this);
446
446
447 this.model.on('change:font_size', function (model, value) {
447 this.model.on('change:font_size', function (model, value) {
448 this.update_attr('font-size', value); }, this);
448 this.update_attr('font-size', value); }, this);
449
449
450 this.model.on('change:font_family', function (model, value) {
450 this.model.on('change:font_family', function (model, value) {
451 this.update_attr('font-family', value); }, this);
451 this.update_attr('font-family', value); }, this);
452
452
453 this.model.on('change:padding', function (model, value) {
453 this.model.on('change:padding', function (model, value) {
454 this.update_attr('padding', value); }, this);
454 this.update_attr('padding', value); }, this);
455
455
456 this.model.on('change:margin', function (model, value) {
456 this.model.on('change:margin', function (model, value) {
457 this.update_attr('margin', value); }, this);
457 this.update_attr('margin', value); }, this);
458
458
459 this.after_displayed(function() {
459 this.after_displayed(function() {
460 this.update_visible(this.model, this.model.get("visible"));
460 this.update_visible(this.model, this.model.get("visible"));
461 this.update_css(this.model, this.model.get("_css"));
461 this.update_css(this.model, this.model.get("_css"));
462
462
463 this.update_classes([], this.model.get('_dom_classes'));
463 this.update_classes([], this.model.get('_dom_classes'));
464 this.update_attr('color', this.model.get('color'));
464 this.update_attr('color', this.model.get('color'));
465 this.update_attr('background', this.model.get('background_color'));
465 this.update_attr('background', this.model.get('background_color'));
466 this.update_attr('width', this.model.get('width'));
466 this.update_attr('width', this.model.get('width'));
467 this.update_attr('height', this.model.get('height'));
467 this.update_attr('height', this.model.get('height'));
468 this.update_attr('border-color', this.model.get('border_color'));
468 this.update_attr('border-color', this.model.get('border_color'));
469 this.update_attr('border-width', this.model.get('border_width'));
469 this.update_attr('border-width', this.model.get('border_width'));
470 this.update_attr('border-style', this.model.get('border_style'));
470 this.update_attr('border-style', this.model.get('border_style'));
471 this.update_attr('font-style', this.model.get('font_style'));
471 this.update_attr('font-style', this.model.get('font_style'));
472 this.update_attr('font-weight', this.model.get('font_weight'));
472 this.update_attr('font-weight', this.model.get('font_weight'));
473 this.update_attr('font-size', this.model.get('font_size'));
473 this.update_attr('font-size', this.model.get('font_size'));
474 this.update_attr('font-family', this.model.get('font_family'));
474 this.update_attr('font-family', this.model.get('font_family'));
475 this.update_attr('padding', this.model.get('padding'));
475 this.update_attr('padding', this.model.get('padding'));
476 this.update_attr('margin', this.model.get('margin'));
476 this.update_attr('margin', this.model.get('margin'));
477 }, this);
477 }, this);
478 },
478 },
479
479
480 update_attr: function(name, value) {
480 update_attr: function(name, value) {
481 // Set a css attr of the widget view.
481 // Set a css attr of the widget view.
482 this.$el.css(name, value);
482 this.$el.css(name, value);
483 },
483 },
484
484
485 update_visible: function(model, value) {
485 update_visible: function(model, value) {
486 // Update visibility
486 // Update visibility
487 this.$el.toggle(value);
487 this.$el.toggle(value);
488 },
488 },
489
489
490 update_css: function (model, css) {
490 update_css: function (model, css) {
491 // Update the css styling of this view.
491 // Update the css styling of this view.
492 var e = this.$el;
492 var e = this.$el;
493 if (css === undefined) {return;}
493 if (css === undefined) {return;}
494 for (var i = 0; i < css.length; i++) {
494 for (var i = 0; i < css.length; i++) {
495 // Apply the css traits to all elements that match the selector.
495 // Apply the css traits to all elements that match the selector.
496 var selector = css[i][0];
496 var selector = css[i][0];
497 var elements = this._get_selector_element(selector);
497 var elements = this._get_selector_element(selector);
498 if (elements.length > 0) {
498 if (elements.length > 0) {
499 var trait_key = css[i][1];
499 var trait_key = css[i][1];
500 var trait_value = css[i][2];
500 var trait_value = css[i][2];
501 elements.css(trait_key ,trait_value);
501 elements.css(trait_key ,trait_value);
502 }
502 }
503 }
503 }
504 },
504 },
505
505
506 update_classes: function (old_classes, new_classes, $el) {
506 update_classes: function (old_classes, new_classes, $el) {
507 // Update the DOM classes applied to an element, default to this.$el.
507 // Update the DOM classes applied to an element, default to this.$el.
508 if ($el===undefined) {
508 if ($el===undefined) {
509 $el = this.$el;
509 $el = this.$el;
510 }
510 }
511 this.do_diff(old_classes, new_classes, function(removed) {
511 this.do_diff(old_classes, new_classes, function(removed) {
512 $el.removeClass(removed);
512 $el.removeClass(removed);
513 }, function(added) {
513 }, function(added) {
514 $el.addClass(added);
514 $el.addClass(added);
515 });
515 });
516 },
516 },
517
517
518 update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) {
518 update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) {
519 // Update the DOM classes applied to the widget based on a single
519 // Update the DOM classes applied to the widget based on a single
520 // trait's value.
520 // trait's value.
521 //
521 //
522 // Given a trait value classes map, this function automatically
522 // Given a trait value classes map, this function automatically
523 // handles applying the appropriate classes to the widget element
523 // handles applying the appropriate classes to the widget element
524 // and removing classes that are no longer valid.
524 // and removing classes that are no longer valid.
525 //
525 //
526 // Parameters
526 // Parameters
527 // ----------
527 // ----------
528 // class_map: dictionary
528 // class_map: dictionary
529 // Dictionary of trait values to class lists.
529 // Dictionary of trait values to class lists.
530 // Example:
530 // Example:
531 // {
531 // {
532 // success: ['alert', 'alert-success'],
532 // success: ['alert', 'alert-success'],
533 // info: ['alert', 'alert-info'],
533 // info: ['alert', 'alert-info'],
534 // warning: ['alert', 'alert-warning'],
534 // warning: ['alert', 'alert-warning'],
535 // danger: ['alert', 'alert-danger']
535 // danger: ['alert', 'alert-danger']
536 // };
536 // };
537 // trait_name: string
537 // trait_name: string
538 // Name of the trait to check the value of.
538 // Name of the trait to check the value of.
539 // previous_trait_value: optional string, default ''
539 // previous_trait_value: optional string, default ''
540 // Last trait value
540 // Last trait value
541 // $el: optional jQuery element handle, defaults to this.$el
541 // $el: optional jQuery element handle, defaults to this.$el
542 // Element that the classes are applied to.
542 // Element that the classes are applied to.
543 var key = previous_trait_value;
543 var key = previous_trait_value;
544 if (key === undefined) {
544 if (key === undefined) {
545 key = this.model.previous(trait_name);
545 key = this.model.previous(trait_name);
546 }
546 }
547 var old_classes = class_map[key] ? class_map[key] : [];
547 var old_classes = class_map[key] ? class_map[key] : [];
548 key = this.model.get(trait_name);
548 key = this.model.get(trait_name);
549 var new_classes = class_map[key] ? class_map[key] : [];
549 var new_classes = class_map[key] ? class_map[key] : [];
550
550
551 this.update_classes(old_classes, new_classes, $el || this.$el);
551 this.update_classes(old_classes, new_classes, $el || this.$el);
552 },
552 },
553
553
554 _get_selector_element: function (selector) {
554 _get_selector_element: function (selector) {
555 // Get the elements via the css selector.
555 // Get the elements via the css selector.
556 var elements;
556 var elements;
557 if (!selector) {
557 if (!selector) {
558 elements = this.$el;
558 elements = this.$el;
559 } else {
559 } else {
560 elements = this.$el.find(selector).addBack(selector);
560 elements = this.$el.find(selector).addBack(selector);
561 }
561 }
562 return elements;
562 return elements;
563 },
563 },
564 });
564 });
565
565
566 var widget = {
566 var widget = {
567 'WidgetModel': WidgetModel,
567 'WidgetModel': WidgetModel,
568 'WidgetView': WidgetView,
568 'WidgetView': WidgetView,
569 'DOMWidgetView': DOMWidgetView,
569 'DOMWidgetView': DOMWidgetView,
570 };
570 };
571
571
572 // For backwards compatability.
572 // For backwards compatability.
573 $.extend(IPython, widget);
573 $.extend(IPython, widget);
574
574
575 return widget;
575 return widget;
576 });
576 });
General Comments 0
You need to be logged in to leave comments. Login now