##// END OF EJS Templates
remove length test add_class and remove_class
Jonathan Frederic -
Show More
@@ -1,326 +1,320
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2013 The IPython Development Team
2 // Copyright (C) 2013 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // Base Widget Model and View classes
9 // Base Widget Model and View classes
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 **/
15 **/
16
16
17 define(["notebook/js/widgetmanager",
17 define(["notebook/js/widgetmanager",
18 "underscore",
18 "underscore",
19 "backbone"],
19 "backbone"],
20 function(widget_manager, underscore, backbone){
20 function(widget_manager, underscore, backbone){
21
21
22 //--------------------------------------------------------------------
22 //--------------------------------------------------------------------
23 // WidgetModel class
23 // WidgetModel class
24 //--------------------------------------------------------------------
24 //--------------------------------------------------------------------
25 var WidgetModel = Backbone.Model.extend({
25 var WidgetModel = Backbone.Model.extend({
26 constructor: function (widget_manager, model_id, comm) {
26 constructor: function (widget_manager, model_id, comm) {
27 // Construcctor
27 // Construcctor
28 //
28 //
29 // Creates a WidgetModel instance.
29 // Creates a WidgetModel instance.
30 //
30 //
31 // Parameters
31 // Parameters
32 // ----------
32 // ----------
33 // widget_manager : WidgetManager instance
33 // widget_manager : WidgetManager instance
34 // model_id : string
34 // model_id : string
35 // An ID unique to this model.
35 // An ID unique to this model.
36 // comm : Comm instance (optional)
36 // comm : Comm instance (optional)
37 this.widget_manager = widget_manager;
37 this.widget_manager = widget_manager;
38 this.pending_msgs = 0;
38 this.pending_msgs = 0;
39 this.msg_throttle = 3;
39 this.msg_throttle = 3;
40 this.msg_buffer = null;
40 this.msg_buffer = null;
41 this.key_value_lock = null;
41 this.key_value_lock = null;
42 this.id = model_id;
42 this.id = model_id;
43 this.views = [];
43 this.views = [];
44
44
45 if (comm !== undefined) {
45 if (comm !== undefined) {
46 // Remember comm associated with the model.
46 // Remember comm associated with the model.
47 this.comm = comm;
47 this.comm = comm;
48 comm.model = this;
48 comm.model = this;
49
49
50 // Hook comm messages up to model.
50 // Hook comm messages up to model.
51 comm.on_close($.proxy(this._handle_comm_closed, this));
51 comm.on_close($.proxy(this._handle_comm_closed, this));
52 comm.on_msg($.proxy(this._handle_comm_msg, this));
52 comm.on_msg($.proxy(this._handle_comm_msg, this));
53 }
53 }
54 return Backbone.Model.apply(this);
54 return Backbone.Model.apply(this);
55 },
55 },
56
56
57 send: function (content, callbacks) {
57 send: function (content, callbacks) {
58 if (this.comm !== undefined) {
58 if (this.comm !== undefined) {
59 var data = {method: 'custom', custom_content: content};
59 var data = {method: 'custom', custom_content: content};
60 this.comm.send(data, callbacks);
60 this.comm.send(data, callbacks);
61 }
61 }
62 },
62 },
63
63
64 // Handle when a widget is closed.
64 // Handle when a widget is closed.
65 _handle_comm_closed: function (msg) {
65 _handle_comm_closed: function (msg) {
66 this.trigger('comm:close');
66 this.trigger('comm:close');
67 delete this.comm.model; // Delete ref so GC will collect widget model.
67 delete this.comm.model; // Delete ref so GC will collect widget model.
68 delete this.comm;
68 delete this.comm;
69 delete this.model_id; // Delete id from model so widget manager cleans up.
69 delete this.model_id; // Delete id from model so widget manager cleans up.
70 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
70 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
71 },
71 },
72
72
73
73
74 // Handle incoming comm msg.
74 // Handle incoming comm msg.
75 _handle_comm_msg: function (msg) {
75 _handle_comm_msg: function (msg) {
76 var method = msg.content.data.method;
76 var method = msg.content.data.method;
77 switch (method) {
77 switch (method) {
78 case 'update':
78 case 'update':
79 this.apply_update(msg.content.data.state);
79 this.apply_update(msg.content.data.state);
80 break;
80 break;
81 case 'custom':
81 case 'custom':
82 this.trigger('msg:custom', msg.content.data.custom_content);
82 this.trigger('msg:custom', msg.content.data.custom_content);
83 break;
83 break;
84 case 'display':
84 case 'display':
85 this.widget_manager.display_view(msg.parent_header.msg_id, this);
85 this.widget_manager.display_view(msg.parent_header.msg_id, this);
86 break;
86 break;
87 }
87 }
88 },
88 },
89
89
90
90
91 // Handle when a widget is updated via the python side.
91 // Handle when a widget is updated via the python side.
92 apply_update: function (state) {
92 apply_update: function (state) {
93 for (var key in state) {
93 for (var key in state) {
94 if (state.hasOwnProperty(key)) {
94 if (state.hasOwnProperty(key)) {
95 var value = state[key];
95 var value = state[key];
96 this.key_value_lock = [key, value];
96 this.key_value_lock = [key, value];
97 try {
97 try {
98 this.set(key, state[key]);
98 this.set(key, state[key]);
99 } finally {
99 } finally {
100 this.key_value_lock = null;
100 this.key_value_lock = null;
101 }
101 }
102 }
102 }
103 }
103 }
104 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
104 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
105 this.save();
105 this.save();
106 },
106 },
107
107
108
108
109 _handle_status: function (msg, callbacks) {
109 _handle_status: function (msg, callbacks) {
110 //execution_state : ('busy', 'idle', 'starting')
110 //execution_state : ('busy', 'idle', 'starting')
111 if (this.comm !== undefined && msg.content.execution_state ==='idle') {
111 if (this.comm !== undefined && msg.content.execution_state ==='idle') {
112 // Send buffer if this message caused another message to be
112 // Send buffer if this message caused another message to be
113 // throttled.
113 // throttled.
114 if (this.msg_buffer !== null &&
114 if (this.msg_buffer !== null &&
115 this.msg_throttle === this.pending_msgs) {
115 this.msg_throttle === this.pending_msgs) {
116 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
116 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
117 this.comm.send(data, callbacks);
117 this.comm.send(data, callbacks);
118 this.msg_buffer = null;
118 this.msg_buffer = null;
119 } else {
119 } else {
120 // Only decrease the pending message count if the buffer
120 // Only decrease the pending message count if the buffer
121 // doesn't get flushed (sent).
121 // doesn't get flushed (sent).
122 --this.pending_msgs;
122 --this.pending_msgs;
123 }
123 }
124 }
124 }
125 },
125 },
126
126
127
127
128 // Custom syncronization logic.
128 // Custom syncronization logic.
129 _handle_sync: function (method, options) {
129 _handle_sync: function (method, options) {
130 var model_json = this.toJSON();
130 var model_json = this.toJSON();
131 var attr;
131 var attr;
132
132
133 // Only send updated state if the state hasn't been changed
133 // Only send updated state if the state hasn't been changed
134 // during an update.
134 // during an update.
135 if (this.comm !== undefined) {
135 if (this.comm !== undefined) {
136 if (this.pending_msgs >= this.msg_throttle) {
136 if (this.pending_msgs >= this.msg_throttle) {
137 // The throttle has been exceeded, buffer the current msg so
137 // The throttle has been exceeded, buffer the current msg so
138 // it can be sent once the kernel has finished processing
138 // it can be sent once the kernel has finished processing
139 // some of the existing messages.
139 // some of the existing messages.
140 if (method=='patch') {
140 if (method=='patch') {
141 if (this.msg_buffer === null) {
141 if (this.msg_buffer === null) {
142 this.msg_buffer = $.extend({}, model_json); // Copy
142 this.msg_buffer = $.extend({}, model_json); // Copy
143 }
143 }
144 for (attr in options.attrs) {
144 for (attr in options.attrs) {
145 var value = options.attrs[attr];
145 var value = options.attrs[attr];
146 if (this.key_value_lock === null || attr != this.key_value_lock[0] || value != this.key_value_lock[1]) {
146 if (this.key_value_lock === null || attr != this.key_value_lock[0] || value != this.key_value_lock[1]) {
147 this.msg_buffer[attr] = value;
147 this.msg_buffer[attr] = value;
148 }
148 }
149 }
149 }
150 } else {
150 } else {
151 this.msg_buffer = $.extend({}, model_json); // Copy
151 this.msg_buffer = $.extend({}, model_json); // Copy
152 }
152 }
153
153
154 } else {
154 } else {
155 // We haven't exceeded the throttle, send the message like
155 // We haven't exceeded the throttle, send the message like
156 // normal. If this is a patch operation, just send the
156 // normal. If this is a patch operation, just send the
157 // changes.
157 // changes.
158 var send_json = model_json;
158 var send_json = model_json;
159 if (method =='patch') {
159 if (method =='patch') {
160 send_json = {};
160 send_json = {};
161 for (attr in options.attrs) {
161 for (attr in options.attrs) {
162 var value = options.attrs[attr];
162 var value = options.attrs[attr];
163 if (this.key_value_lock === null || attr != this.key_value_lock[0] || value != this.key_value_lock[1]) {
163 if (this.key_value_lock === null || attr != this.key_value_lock[0] || value != this.key_value_lock[1]) {
164 send_json[attr] = value;
164 send_json[attr] = value;
165 }
165 }
166 }
166 }
167 }
167 }
168
168
169 var data = {method: 'backbone', sync_data: send_json};
169 var data = {method: 'backbone', sync_data: send_json};
170 this.comm.send(data, options.callbacks);
170 this.comm.send(data, options.callbacks);
171 this.pending_msgs++;
171 this.pending_msgs++;
172 }
172 }
173 }
173 }
174
174
175 // Since the comm is a one-way communication, assume the message
175 // Since the comm is a one-way communication, assume the message
176 // arrived.
176 // arrived.
177 return model_json;
177 return model_json;
178 },
178 },
179
179
180 });
180 });
181
181
182
182
183 //--------------------------------------------------------------------
183 //--------------------------------------------------------------------
184 // WidgetView class
184 // WidgetView class
185 //--------------------------------------------------------------------
185 //--------------------------------------------------------------------
186 var WidgetView = Backbone.View.extend({
186 var WidgetView = Backbone.View.extend({
187 initialize: function(parameters) {
187 initialize: function(parameters) {
188 this.model.on('change',this.update,this);
188 this.model.on('change',this.update,this);
189 this.options = parameters.options;
189 this.options = parameters.options;
190 this.child_views = [];
190 this.child_views = [];
191 this.model.views.push(this);
191 this.model.views.push(this);
192 },
192 },
193
193
194 update: function(){
194 update: function(){
195 // update view to be consistent with this.model
195 // update view to be consistent with this.model
196 // triggered on model change
196 // triggered on model change
197 },
197 },
198
198
199 child_view: function(model_id, options) {
199 child_view: function(model_id, options) {
200 // create and return a child view, given a model id for a model and (optionally) a view name
200 // create and return a child view, given a model id for a model and (optionally) a view name
201 // if the view name is not given, it defaults to the model's default view attribute
201 // if the view name is not given, it defaults to the model's default view attribute
202 var child_model = this.widget_manager.get_model(model_id);
202 var child_model = this.widget_manager.get_model(model_id);
203 var child_view = this.widget_manager.create_view(child_model, options);
203 var child_view = this.widget_manager.create_view(child_model, options);
204 this.child_views[model_id] = child_view;
204 this.child_views[model_id] = child_view;
205 return child_view;
205 return child_view;
206 },
206 },
207
207
208 update_child_views: function(old_list, new_list) {
208 update_child_views: function(old_list, new_list) {
209 // this function takes an old list and new list of model ids
209 // this function takes an old list and new list of model ids
210 // views in child_views that correspond to deleted ids are deleted
210 // views in child_views that correspond to deleted ids are deleted
211 // views corresponding to added ids are added child_views
211 // views corresponding to added ids are added child_views
212
212
213 // delete old views
213 // delete old views
214 _.each(_.difference(old_list, new_list), function(element, index, list) {
214 _.each(_.difference(old_list, new_list), function(element, index, list) {
215 var view = this.child_views[element];
215 var view = this.child_views[element];
216 delete this.child_views[element];
216 delete this.child_views[element];
217 view.remove();
217 view.remove();
218 }, this);
218 }, this);
219
219
220 // add new views
220 // add new views
221 _.each(_.difference(new_list, old_list), function(element, index, list) {
221 _.each(_.difference(new_list, old_list), function(element, index, list) {
222 // this function adds the view to the child_views dictionary
222 // this function adds the view to the child_views dictionary
223 this.child_view(element);
223 this.child_view(element);
224 }, this);
224 }, this);
225 },
225 },
226
226
227 callbacks: function(){
227 callbacks: function(){
228 return this.widget_manager.callbacks(this);
228 return this.widget_manager.callbacks(this);
229 },
229 },
230
230
231 render: function(){
231 render: function(){
232 // render the view. By default, this is only called the first time the view is created
232 // render the view. By default, this is only called the first time the view is created
233 },
233 },
234 send: function (content) {
234 send: function (content) {
235 this.model.send(content, this.callbacks());
235 this.model.send(content, this.callbacks());
236 },
236 },
237
237
238 touch: function () {
238 touch: function () {
239 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.callbacks()});
239 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.callbacks()});
240 },
240 },
241
241
242 });
242 });
243
243
244 var DOMWidgetView = WidgetView.extend({
244 var DOMWidgetView = WidgetView.extend({
245 initialize: function (options) {
245 initialize: function (options) {
246 // TODO: make changes more granular (e.g., trigger on visible:change)
246 // TODO: make changes more granular (e.g., trigger on visible:change)
247 this.model.on('change', this.update, this);
247 this.model.on('change', this.update, this);
248 this.model.on('msg:custom', this.on_msg, this);
248 this.model.on('msg:custom', this.on_msg, this);
249 WidgetView.prototype.initialize.apply(this, arguments);
249 WidgetView.prototype.initialize.apply(this, arguments);
250 },
250 },
251
251
252 on_msg: function(msg) {
252 on_msg: function(msg) {
253 switch(msg.msg_type) {
253 switch(msg.msg_type) {
254 case 'add_class':
254 case 'add_class':
255 this.add_class(msg.selector, msg.class_list);
255 this.add_class(msg.selector, msg.class_list);
256 break;
256 break;
257 case 'remove_class':
257 case 'remove_class':
258 this.remove_class(msg.selector, msg.class_list);
258 this.remove_class(msg.selector, msg.class_list);
259 break;
259 break;
260 }
260 }
261 },
261 },
262
262
263 add_class: function (selector, class_list) {
263 add_class: function (selector, class_list) {
264 var elements = this._get_selector_element(selector);
264 this._get_selector_element(selector).addClass(class_list);
265 if (elements.length > 0) {
266 elements.addClass(class_list);
267 }
268 },
265 },
269
266
270 remove_class: function (selector, class_list) {
267 remove_class: function (selector, class_list) {
271 var elements = this._get_selector_element(selector);
268 this._get_selector_element(selector).removeClass(class_list);
272 if (elements.length > 0) {
273 elements.removeClass(class_list);
274 }
275 },
269 },
276
270
277 update: function () {
271 update: function () {
278 // the very first update seems to happen before the element is finished rendering
272 // the very first update seems to happen before the element is finished rendering
279 // so we use setTimeout to give the element time to render
273 // so we use setTimeout to give the element time to render
280 var e = this.$el;
274 var e = this.$el;
281 var visible = this.model.get('visible');
275 var visible = this.model.get('visible');
282 setTimeout(function() {e.toggle(visible)},0);
276 setTimeout(function() {e.toggle(visible)},0);
283
277
284 var css = this.model.get('_css');
278 var css = this.model.get('_css');
285 if (css === undefined) {return;}
279 if (css === undefined) {return;}
286 for (var selector in css) {
280 for (var selector in css) {
287 if (css.hasOwnProperty(selector)) {
281 if (css.hasOwnProperty(selector)) {
288 // Apply the css traits to all elements that match the selector.
282 // Apply the css traits to all elements that match the selector.
289 var elements = this._get_selector_element(selector);
283 var elements = this._get_selector_element(selector);
290 if (elements.length > 0) {
284 if (elements.length > 0) {
291 var css_traits = css[selector];
285 var css_traits = css[selector];
292 for (var css_key in css_traits) {
286 for (var css_key in css_traits) {
293 if (css_traits.hasOwnProperty(css_key)) {
287 if (css_traits.hasOwnProperty(css_key)) {
294 elements.css(css_key, css_traits[css_key]);
288 elements.css(css_key, css_traits[css_key]);
295 }
289 }
296 }
290 }
297 }
291 }
298 }
292 }
299 }
293 }
300 },
294 },
301
295
302 _get_selector_element: function (selector) {
296 _get_selector_element: function (selector) {
303 // Get the elements via the css selector. If the selector is
297 // Get the elements via the css selector. If the selector is
304 // blank, apply the style to the $el_to_style element. If
298 // blank, apply the style to the $el_to_style element. If
305 // the $el_to_style element is not defined, use apply the
299 // the $el_to_style element is not defined, use apply the
306 // style to the view's element.
300 // style to the view's element.
307 var elements;
301 var elements;
308 if (selector === undefined || selector === null || selector === '') {
302 if (selector === undefined || selector === null || selector === '') {
309 if (this.$el_to_style === undefined) {
303 if (this.$el_to_style === undefined) {
310 elements = this.$el;
304 elements = this.$el;
311 } else {
305 } else {
312 elements = this.$el_to_style;
306 elements = this.$el_to_style;
313 }
307 }
314 } else {
308 } else {
315 elements = this.$el.find(selector);
309 elements = this.$el.find(selector);
316 }
310 }
317 return elements;
311 return elements;
318 },
312 },
319 });
313 });
320
314
321 IPython.WidgetModel = WidgetModel;
315 IPython.WidgetModel = WidgetModel;
322 IPython.WidgetView = WidgetView;
316 IPython.WidgetView = WidgetView;
323 IPython.DOMWidgetView = DOMWidgetView;
317 IPython.DOMWidgetView = DOMWidgetView;
324
318
325 return widget_manager;
319 return widget_manager;
326 });
320 });
General Comments 0
You need to be logged in to leave comments. Login now