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