Show More
@@ -1,763 +1,765 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/utils", |
|
8 | "base/js/utils", | |
9 | "base/js/namespace", |
|
9 | "base/js/namespace", | |
10 | ], function(widgetmanager, _, Backbone, $, utils, IPython){ |
|
10 | ], function(widgetmanager, _, Backbone, $, utils, IPython){ | |
11 | "use strict"; |
|
11 | "use strict"; | |
12 |
|
12 | |||
13 | var WidgetModel = Backbone.Model.extend({ |
|
13 | var WidgetModel = Backbone.Model.extend({ | |
14 | constructor: function (widget_manager, model_id, comm) { |
|
14 | constructor: function (widget_manager, model_id, comm) { | |
15 | /** |
|
15 | /** | |
16 | * Constructor |
|
16 | * Constructor | |
17 | * |
|
17 | * | |
18 | * Creates a WidgetModel instance. |
|
18 | * Creates a WidgetModel instance. | |
19 | * |
|
19 | * | |
20 | * Parameters |
|
20 | * Parameters | |
21 | * ---------- |
|
21 | * ---------- | |
22 | * widget_manager : WidgetManager instance |
|
22 | * widget_manager : WidgetManager instance | |
23 | * model_id : string |
|
23 | * model_id : string | |
24 | * An ID unique to this model. |
|
24 | * An ID unique to this model. | |
25 | * comm : Comm instance (optional) |
|
25 | * comm : Comm instance (optional) | |
26 | */ |
|
26 | */ | |
27 | this.widget_manager = widget_manager; |
|
27 | this.widget_manager = widget_manager; | |
28 | this.state_change = Promise.resolve(); |
|
28 | this.state_change = Promise.resolve(); | |
29 | this._buffered_state_diff = {}; |
|
29 | this._buffered_state_diff = {}; | |
30 | this.pending_msgs = 0; |
|
30 | this.pending_msgs = 0; | |
31 | this.msg_buffer = null; |
|
31 | this.msg_buffer = null; | |
32 | this.state_lock = null; |
|
32 | this.state_lock = null; | |
33 | this.id = model_id; |
|
33 | this.id = model_id; | |
34 | this.views = {}; |
|
34 | this.views = {}; | |
35 | this._resolve_received_state = {}; |
|
35 | this._resolve_received_state = {}; | |
36 |
|
36 | |||
37 | if (comm !== undefined) { |
|
37 | if (comm !== undefined) { | |
38 | // Remember comm associated with the model. |
|
38 | // Remember comm associated with the model. | |
39 | this.comm = comm; |
|
39 | this.comm = comm; | |
40 | comm.model = this; |
|
40 | comm.model = this; | |
41 |
|
41 | |||
42 | // Hook comm messages up to model. |
|
42 | // Hook comm messages up to model. | |
43 | comm.on_close($.proxy(this._handle_comm_closed, this)); |
|
43 | comm.on_close($.proxy(this._handle_comm_closed, this)); | |
44 | comm.on_msg($.proxy(this._handle_comm_msg, this)); |
|
44 | comm.on_msg($.proxy(this._handle_comm_msg, this)); | |
45 |
|
45 | |||
46 | // Assume the comm is alive. |
|
46 | // Assume the comm is alive. | |
47 | this.set_comm_live(true); |
|
47 | this.set_comm_live(true); | |
48 | } else { |
|
48 | } else { | |
49 | this.set_comm_live(false); |
|
49 | this.set_comm_live(false); | |
50 | } |
|
50 | } | |
51 |
|
51 | |||
52 | // Listen for the events that lead to the websocket being terminated. |
|
52 | // Listen for the events that lead to the websocket being terminated. | |
53 | var that = this; |
|
53 | var that = this; | |
54 | var died = function() { |
|
54 | var died = function() { | |
55 | that.set_comm_live(false); |
|
55 | that.set_comm_live(false); | |
56 | }; |
|
56 | }; | |
57 | widget_manager.notebook.events.on('kernel_disconnected.Kernel', died); |
|
57 | widget_manager.notebook.events.on('kernel_disconnected.Kernel', died); | |
58 | widget_manager.notebook.events.on('kernel_killed.Kernel', died); |
|
58 | widget_manager.notebook.events.on('kernel_killed.Kernel', died); | |
59 | widget_manager.notebook.events.on('kernel_restarting.Kernel', died); |
|
59 | widget_manager.notebook.events.on('kernel_restarting.Kernel', died); | |
60 | widget_manager.notebook.events.on('kernel_dead.Kernel', died); |
|
60 | widget_manager.notebook.events.on('kernel_dead.Kernel', died); | |
61 |
|
61 | |||
62 | return Backbone.Model.apply(this); |
|
62 | return Backbone.Model.apply(this); | |
63 | }, |
|
63 | }, | |
64 |
|
64 | |||
65 | send: function (content, callbacks) { |
|
65 | send: function (content, callbacks) { | |
66 | /** |
|
66 | /** | |
67 | * Send a custom msg over the comm. |
|
67 | * Send a custom msg over the comm. | |
68 | */ |
|
68 | */ | |
69 | if (this.comm !== undefined) { |
|
69 | if (this.comm !== undefined) { | |
70 | var data = {method: 'custom', content: content}; |
|
70 | var data = {method: 'custom', content: content}; | |
71 | this.comm.send(data, callbacks); |
|
71 | this.comm.send(data, callbacks); | |
72 | this.pending_msgs++; |
|
72 | this.pending_msgs++; | |
73 | } |
|
73 | } | |
74 | }, |
|
74 | }, | |
75 |
|
75 | |||
76 | request_state: function(callbacks) { |
|
76 | request_state: function(callbacks) { | |
77 | /** |
|
77 | /** | |
78 | * Request a state push from the back-end. |
|
78 | * Request a state push from the back-end. | |
79 | */ |
|
79 | */ | |
80 | if (!this.comm) { |
|
80 | if (!this.comm) { | |
81 | console.error("Could not request_state because comm doesn't exist!"); |
|
81 | console.error("Could not request_state because comm doesn't exist!"); | |
82 | return; |
|
82 | return; | |
83 | } |
|
83 | } | |
84 |
|
84 | |||
85 | var msg_id = this.comm.send({method: 'request_state'}, callbacks || this.widget_manager.callbacks()); |
|
85 | var msg_id = this.comm.send({method: 'request_state'}, callbacks || this.widget_manager.callbacks()); | |
86 |
|
86 | |||
87 | // Promise that is resolved when a state is received |
|
87 | // Promise that is resolved when a state is received | |
88 | // from the back-end. |
|
88 | // from the back-end. | |
89 | var that = this; |
|
89 | var that = this; | |
90 | var received_state = new Promise(function(resolve) { |
|
90 | var received_state = new Promise(function(resolve) { | |
91 | that._resolve_received_state[msg_id] = resolve; |
|
91 | that._resolve_received_state[msg_id] = resolve; | |
92 | }); |
|
92 | }); | |
93 | return received_state; |
|
93 | return received_state; | |
94 | }, |
|
94 | }, | |
95 |
|
95 | |||
96 | set_comm_live: function(live) { |
|
96 | set_comm_live: function(live) { | |
97 | /** |
|
97 | /** | |
98 | * Change the comm_live state of the model. |
|
98 | * Change the comm_live state of the model. | |
99 | */ |
|
99 | */ | |
100 | if (this.comm_live === undefined || this.comm_live != live) { |
|
100 | if (this.comm_live === undefined || this.comm_live != live) { | |
101 | this.comm_live = live; |
|
101 | this.comm_live = live; | |
102 | this.trigger(live ? 'comm:live' : 'comm:dead', {model: this}); |
|
102 | this.trigger(live ? 'comm:live' : 'comm:dead', {model: this}); | |
103 | } |
|
103 | } | |
104 | }, |
|
104 | }, | |
105 |
|
105 | |||
106 | close: function(comm_closed) { |
|
106 | close: function(comm_closed) { | |
107 | /** |
|
107 | /** | |
108 | * Close model |
|
108 | * Close model | |
109 | */ |
|
109 | */ | |
110 | if (this.comm && !comm_closed) { |
|
110 | if (this.comm && !comm_closed) { | |
111 | this.comm.close(); |
|
111 | this.comm.close(); | |
112 | } |
|
112 | } | |
113 | this.stopListening(); |
|
113 | this.stopListening(); | |
114 | this.trigger('destroy', this); |
|
114 | this.trigger('destroy', this); | |
115 | delete this.comm.model; // Delete ref so GC will collect widget model. |
|
115 | delete this.comm.model; // Delete ref so GC will collect widget model. | |
116 | delete this.comm; |
|
116 | delete this.comm; | |
117 | delete this.model_id; // Delete id from model so widget manager cleans up. |
|
117 | delete this.model_id; // Delete id from model so widget manager cleans up. | |
118 | _.each(this.views, function(v, id, views) { |
|
118 | _.each(this.views, function(v, id, views) { | |
119 | v.then(function(view) { |
|
119 | v.then(function(view) { | |
120 | view.remove(); |
|
120 | view.remove(); | |
121 | delete views[id]; |
|
121 | delete views[id]; | |
122 | }); |
|
122 | }); | |
123 | }); |
|
123 | }); | |
124 | }, |
|
124 | }, | |
125 |
|
125 | |||
126 | _handle_comm_closed: function (msg) { |
|
126 | _handle_comm_closed: function (msg) { | |
127 | /** |
|
127 | /** | |
128 | * Handle when a widget is closed. |
|
128 | * Handle when a widget is closed. | |
129 | */ |
|
129 | */ | |
130 | this.trigger('comm:close'); |
|
130 | this.trigger('comm:close'); | |
131 | this.close(true); |
|
131 | this.close(true); | |
132 | }, |
|
132 | }, | |
133 |
|
133 | |||
134 | _handle_comm_msg: function (msg) { |
|
134 | _handle_comm_msg: function (msg) { | |
135 | /** |
|
135 | /** | |
136 | * Handle incoming comm msg. |
|
136 | * Handle incoming comm msg. | |
137 | */ |
|
137 | */ | |
138 | var method = msg.content.data.method; |
|
138 | var method = msg.content.data.method; | |
139 | var that = this; |
|
139 | var that = this; | |
140 | switch (method) { |
|
140 | switch (method) { | |
141 | case 'update': |
|
141 | case 'update': | |
142 | this.state_change = this.state_change |
|
142 | this.state_change = this.state_change | |
143 | .then(function() { |
|
143 | .then(function() { | |
144 | return that.set_state(msg.content.data.state); |
|
144 | return that.set_state(msg.content.data.state); | |
145 | }).catch(utils.reject("Couldn't process update msg for model id '" + String(that.id) + "'", true)) |
|
145 | }).catch(utils.reject("Couldn't process update msg for model id '" + String(that.id) + "'", true)) | |
146 | .then(function() { |
|
146 | .then(function() { | |
147 | var parent_id = msg.parent_header.msg_id; |
|
147 | var parent_id = msg.parent_header.msg_id; | |
148 | if (that._resolve_received_state[parent_id] !== undefined) { |
|
148 | if (that._resolve_received_state[parent_id] !== undefined) { | |
149 | that._resolve_received_state[parent_id].call(); |
|
149 | that._resolve_received_state[parent_id].call(); | |
150 | delete that._resolve_received_state[parent_id]; |
|
150 | delete that._resolve_received_state[parent_id]; | |
151 | } |
|
151 | } | |
152 | }).catch(utils.reject("Couldn't resolve state request promise", true)); |
|
152 | }).catch(utils.reject("Couldn't resolve state request promise", true)); | |
153 | break; |
|
153 | break; | |
154 | case 'custom': |
|
154 | case 'custom': | |
155 | this.trigger('msg:custom', msg.content.data.content); |
|
155 | this.trigger('msg:custom', msg.content.data.content); | |
156 | break; |
|
156 | break; | |
157 | case 'display': |
|
157 | case 'display': | |
158 | this.state_change = this.state_change.then(function() { |
|
158 | this.state_change = this.state_change.then(function() { | |
159 | that.widget_manager.display_view(msg, that); |
|
159 | that.widget_manager.display_view(msg, that); | |
160 | }).catch(utils.reject('Could not process display view msg', true)); |
|
160 | }).catch(utils.reject('Could not process display view msg', true)); | |
161 | break; |
|
161 | break; | |
162 | } |
|
162 | } | |
163 | }, |
|
163 | }, | |
164 |
|
164 | |||
165 | set_state: function (state) { |
|
165 | set_state: function (state) { | |
166 | var that = this; |
|
166 | var that = this; | |
167 | // Handle when a widget is updated via the python side. |
|
167 | // Handle when a widget is updated via the python side. | |
168 | return this._unpack_models(state).then(function(state) { |
|
168 | return this._unpack_models(state).then(function(state) { | |
169 | that.state_lock = state; |
|
169 | that.state_lock = state; | |
170 | try { |
|
170 | try { | |
171 | WidgetModel.__super__.set.call(that, state); |
|
171 | WidgetModel.__super__.set.call(that, state); | |
172 | } finally { |
|
172 | } finally { | |
173 | that.state_lock = null; |
|
173 | that.state_lock = null; | |
174 | } |
|
174 | } | |
175 | }).catch(utils.reject("Couldn't set model state", true)); |
|
175 | }).catch(utils.reject("Couldn't set model state", true)); | |
176 | }, |
|
176 | }, | |
177 |
|
177 | |||
178 | get_state: function() { |
|
178 | get_state: function() { | |
179 | // Get the serializable state of the model. |
|
179 | // Get the serializable state of the model. | |
180 | var state = this.toJSON(); |
|
180 | var state = this.toJSON(); | |
181 | for (var key in state) { |
|
181 | for (var key in state) { | |
182 | if (state.hasOwnProperty(key)) { |
|
182 | if (state.hasOwnProperty(key)) { | |
183 | state[key] = this._pack_models(state[key]); |
|
183 | state[key] = this._pack_models(state[key]); | |
184 | } |
|
184 | } | |
185 | } |
|
185 | } | |
186 | return state; |
|
186 | return state; | |
187 | }, |
|
187 | }, | |
188 |
|
188 | |||
189 | _handle_status: function (msg, callbacks) { |
|
189 | _handle_status: function (msg, callbacks) { | |
190 | /** |
|
190 | /** | |
191 | * Handle status msgs. |
|
191 | * Handle status msgs. | |
192 | * |
|
192 | * | |
193 | * execution_state : ('busy', 'idle', 'starting') |
|
193 | * execution_state : ('busy', 'idle', 'starting') | |
194 | */ |
|
194 | */ | |
195 | if (this.comm !== undefined) { |
|
195 | if (this.comm !== undefined) { | |
196 | if (msg.content.execution_state ==='idle') { |
|
196 | if (msg.content.execution_state ==='idle') { | |
197 | // Send buffer if this message caused another message to be |
|
197 | // Send buffer if this message caused another message to be | |
198 | // throttled. |
|
198 | // throttled. | |
199 | if (this.msg_buffer !== null && |
|
199 | if (this.msg_buffer !== null && | |
200 | (this.get('msg_throttle') || 3) === this.pending_msgs) { |
|
200 | (this.get('msg_throttle') || 3) === this.pending_msgs) { | |
201 | var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer}; |
|
201 | var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer}; | |
202 | this.comm.send(data, callbacks); |
|
202 | this.comm.send(data, callbacks); | |
203 | this.msg_buffer = null; |
|
203 | this.msg_buffer = null; | |
204 | } else { |
|
204 | } else { | |
205 | --this.pending_msgs; |
|
205 | --this.pending_msgs; | |
206 | } |
|
206 | } | |
207 | } |
|
207 | } | |
208 | } |
|
208 | } | |
209 | }, |
|
209 | }, | |
210 |
|
210 | |||
211 | callbacks: function(view) { |
|
211 | callbacks: function(view) { | |
212 | /** |
|
212 | /** | |
213 | * Create msg callbacks for a comm msg. |
|
213 | * Create msg callbacks for a comm msg. | |
214 | */ |
|
214 | */ | |
215 | var callbacks = this.widget_manager.callbacks(view); |
|
215 | var callbacks = this.widget_manager.callbacks(view); | |
216 |
|
216 | |||
217 | if (callbacks.iopub === undefined) { |
|
217 | if (callbacks.iopub === undefined) { | |
218 | callbacks.iopub = {}; |
|
218 | callbacks.iopub = {}; | |
219 | } |
|
219 | } | |
220 |
|
220 | |||
221 | var that = this; |
|
221 | var that = this; | |
222 | callbacks.iopub.status = function (msg) { |
|
222 | callbacks.iopub.status = function (msg) { | |
223 | that._handle_status(msg, callbacks); |
|
223 | that._handle_status(msg, callbacks); | |
224 | }; |
|
224 | }; | |
225 | return callbacks; |
|
225 | return callbacks; | |
226 | }, |
|
226 | }, | |
227 |
|
227 | |||
228 | set: function(key, val, options) { |
|
228 | set: function(key, val, options) { | |
229 | /** |
|
229 | /** | |
230 | * Set a value. |
|
230 | * Set a value. | |
231 | */ |
|
231 | */ | |
232 | var return_value = WidgetModel.__super__.set.apply(this, arguments); |
|
232 | var return_value = WidgetModel.__super__.set.apply(this, arguments); | |
233 |
|
233 | |||
234 | // Backbone only remembers the diff of the most recent set() |
|
234 | // Backbone only remembers the diff of the most recent set() | |
235 | // operation. Calling set multiple times in a row results in a |
|
235 | // operation. Calling set multiple times in a row results in a | |
236 | // loss of diff information. Here we keep our own running diff. |
|
236 | // loss of diff information. Here we keep our own running diff. | |
237 | this._buffered_state_diff = $.extend(this._buffered_state_diff, this.changedAttributes() || {}); |
|
237 | this._buffered_state_diff = $.extend(this._buffered_state_diff, this.changedAttributes() || {}); | |
238 | return return_value; |
|
238 | return return_value; | |
239 | }, |
|
239 | }, | |
240 |
|
240 | |||
241 | sync: function (method, model, options) { |
|
241 | sync: function (method, model, options) { | |
242 | /** |
|
242 | /** | |
243 | * Handle sync to the back-end. Called when a model.save() is called. |
|
243 | * Handle sync to the back-end. Called when a model.save() is called. | |
244 | * |
|
244 | * | |
245 | * Make sure a comm exists. |
|
245 | * Make sure a comm exists. | |
246 | */ |
|
246 | */ | |
247 | var error = options.error || function() { |
|
247 | var error = options.error || function() { | |
248 | console.error('Backbone sync error:', arguments); |
|
248 | console.error('Backbone sync error:', arguments); | |
249 | }; |
|
249 | }; | |
250 | if (this.comm === undefined) { |
|
250 | if (this.comm === undefined) { | |
251 | error(); |
|
251 | error(); | |
252 | return false; |
|
252 | return false; | |
253 | } |
|
253 | } | |
254 |
|
254 | |||
255 | // Delete any key value pairs that the back-end already knows about. |
|
255 | // Delete any key value pairs that the back-end already knows about. | |
256 | var attrs = (method === 'patch') ? options.attrs : model.toJSON(options); |
|
256 | var attrs = (method === 'patch') ? options.attrs : model.toJSON(options); | |
257 | if (this.state_lock !== null) { |
|
257 | if (this.state_lock !== null) { | |
258 | var keys = Object.keys(this.state_lock); |
|
258 | var keys = Object.keys(this.state_lock); | |
259 | for (var i=0; i<keys.length; i++) { |
|
259 | for (var i=0; i<keys.length; i++) { | |
260 | var key = keys[i]; |
|
260 | var key = keys[i]; | |
261 | if (attrs[key] === this.state_lock[key]) { |
|
261 | if (attrs[key] === this.state_lock[key]) { | |
262 | delete attrs[key]; |
|
262 | delete attrs[key]; | |
263 | } |
|
263 | } | |
264 | } |
|
264 | } | |
265 | } |
|
265 | } | |
266 |
|
266 | |||
267 | // Only sync if there are attributes to send to the back-end. |
|
267 | // Only sync if there are attributes to send to the back-end. | |
268 | attrs = this._pack_models(attrs); |
|
268 | attrs = this._pack_models(attrs); | |
269 | if (_.size(attrs) > 0) { |
|
269 | if (_.size(attrs) > 0) { | |
270 |
|
270 | |||
271 | // If this message was sent via backbone itself, it will not |
|
271 | // If this message was sent via backbone itself, it will not | |
272 | // have any callbacks. It's important that we create callbacks |
|
272 | // have any callbacks. It's important that we create callbacks | |
273 | // so we can listen for status messages, etc... |
|
273 | // so we can listen for status messages, etc... | |
274 | var callbacks = options.callbacks || this.callbacks(); |
|
274 | var callbacks = options.callbacks || this.callbacks(); | |
275 |
|
275 | |||
276 | // Check throttle. |
|
276 | // Check throttle. | |
277 | if (this.pending_msgs >= (this.get('msg_throttle') || 3)) { |
|
277 | if (this.pending_msgs >= (this.get('msg_throttle') || 3)) { | |
278 | // The throttle has been exceeded, buffer the current msg so |
|
278 | // The throttle has been exceeded, buffer the current msg so | |
279 | // it can be sent once the kernel has finished processing |
|
279 | // it can be sent once the kernel has finished processing | |
280 | // some of the existing messages. |
|
280 | // some of the existing messages. | |
281 |
|
281 | |||
282 | // Combine updates if it is a 'patch' sync, otherwise replace updates |
|
282 | // Combine updates if it is a 'patch' sync, otherwise replace updates | |
283 | switch (method) { |
|
283 | switch (method) { | |
284 | case 'patch': |
|
284 | case 'patch': | |
285 | this.msg_buffer = $.extend(this.msg_buffer || {}, attrs); |
|
285 | this.msg_buffer = $.extend(this.msg_buffer || {}, attrs); | |
286 | break; |
|
286 | break; | |
287 | case 'update': |
|
287 | case 'update': | |
288 | case 'create': |
|
288 | case 'create': | |
289 | this.msg_buffer = attrs; |
|
289 | this.msg_buffer = attrs; | |
290 | break; |
|
290 | break; | |
291 | default: |
|
291 | default: | |
292 | error(); |
|
292 | error(); | |
293 | return false; |
|
293 | return false; | |
294 | } |
|
294 | } | |
295 | this.msg_buffer_callbacks = callbacks; |
|
295 | this.msg_buffer_callbacks = callbacks; | |
296 |
|
296 | |||
297 | } else { |
|
297 | } else { | |
298 | // We haven't exceeded the throttle, send the message like |
|
298 | // We haven't exceeded the throttle, send the message like | |
299 | // normal. |
|
299 | // normal. | |
300 | var data = {method: 'backbone', sync_data: attrs}; |
|
300 | var data = {method: 'backbone', sync_data: attrs}; | |
301 | this.comm.send(data, callbacks); |
|
301 | this.comm.send(data, callbacks); | |
302 | this.pending_msgs++; |
|
302 | this.pending_msgs++; | |
303 | } |
|
303 | } | |
304 | } |
|
304 | } | |
305 | // Since the comm is a one-way communication, assume the message |
|
305 | // Since the comm is a one-way communication, assume the message | |
306 | // arrived. Don't call success since we don't have a model back from the server |
|
306 | // arrived. Don't call success since we don't have a model back from the server | |
307 | // this means we miss out on the 'sync' event. |
|
307 | // this means we miss out on the 'sync' event. | |
308 | this._buffered_state_diff = {}; |
|
308 | this._buffered_state_diff = {}; | |
309 | }, |
|
309 | }, | |
310 |
|
310 | |||
311 | save_changes: function(callbacks) { |
|
311 | save_changes: function(callbacks) { | |
312 | /** |
|
312 | /** | |
313 | * Push this model's state to the back-end |
|
313 | * Push this model's state to the back-end | |
314 | * |
|
314 | * | |
315 | * This invokes a Backbone.Sync. |
|
315 | * This invokes a Backbone.Sync. | |
316 | */ |
|
316 | */ | |
317 | this.save(this._buffered_state_diff, {patch: true, callbacks: callbacks}); |
|
317 | if (this.comm_live) { | |
|
318 | this.save(this._buffered_state_diff, {patch: true, callbacks: callbacks}); | |||
|
319 | } | |||
318 | }, |
|
320 | }, | |
319 |
|
321 | |||
320 | _pack_models: function(value) { |
|
322 | _pack_models: function(value) { | |
321 | /** |
|
323 | /** | |
322 | * Replace models with model ids recursively. |
|
324 | * Replace models with model ids recursively. | |
323 | */ |
|
325 | */ | |
324 | var that = this; |
|
326 | var that = this; | |
325 | var packed; |
|
327 | var packed; | |
326 | if (value instanceof Backbone.Model) { |
|
328 | if (value instanceof Backbone.Model) { | |
327 | return "IPY_MODEL_" + value.id; |
|
329 | return "IPY_MODEL_" + value.id; | |
328 |
|
330 | |||
329 | } else if ($.isArray(value)) { |
|
331 | } else if ($.isArray(value)) { | |
330 | packed = []; |
|
332 | packed = []; | |
331 | _.each(value, function(sub_value, key) { |
|
333 | _.each(value, function(sub_value, key) { | |
332 | packed.push(that._pack_models(sub_value)); |
|
334 | packed.push(that._pack_models(sub_value)); | |
333 | }); |
|
335 | }); | |
334 | return packed; |
|
336 | return packed; | |
335 | } else if (value instanceof Date || value instanceof String) { |
|
337 | } else if (value instanceof Date || value instanceof String) { | |
336 | return value; |
|
338 | return value; | |
337 | } else if (value instanceof Object) { |
|
339 | } else if (value instanceof Object) { | |
338 | packed = {}; |
|
340 | packed = {}; | |
339 | _.each(value, function(sub_value, key) { |
|
341 | _.each(value, function(sub_value, key) { | |
340 | packed[key] = that._pack_models(sub_value); |
|
342 | packed[key] = that._pack_models(sub_value); | |
341 | }); |
|
343 | }); | |
342 | return packed; |
|
344 | return packed; | |
343 |
|
345 | |||
344 | } else { |
|
346 | } else { | |
345 | return value; |
|
347 | return value; | |
346 | } |
|
348 | } | |
347 | }, |
|
349 | }, | |
348 |
|
350 | |||
349 | _unpack_models: function(value) { |
|
351 | _unpack_models: function(value) { | |
350 | /** |
|
352 | /** | |
351 | * Replace model ids with models recursively. |
|
353 | * Replace model ids with models recursively. | |
352 | */ |
|
354 | */ | |
353 | var that = this; |
|
355 | var that = this; | |
354 | var unpacked; |
|
356 | var unpacked; | |
355 | if ($.isArray(value)) { |
|
357 | if ($.isArray(value)) { | |
356 | unpacked = []; |
|
358 | unpacked = []; | |
357 | _.each(value, function(sub_value, key) { |
|
359 | _.each(value, function(sub_value, key) { | |
358 | unpacked.push(that._unpack_models(sub_value)); |
|
360 | unpacked.push(that._unpack_models(sub_value)); | |
359 | }); |
|
361 | }); | |
360 | return Promise.all(unpacked); |
|
362 | return Promise.all(unpacked); | |
361 | } else if (value instanceof Object) { |
|
363 | } else if (value instanceof Object) { | |
362 | unpacked = {}; |
|
364 | unpacked = {}; | |
363 | _.each(value, function(sub_value, key) { |
|
365 | _.each(value, function(sub_value, key) { | |
364 | unpacked[key] = that._unpack_models(sub_value); |
|
366 | unpacked[key] = that._unpack_models(sub_value); | |
365 | }); |
|
367 | }); | |
366 | return utils.resolve_promises_dict(unpacked); |
|
368 | return utils.resolve_promises_dict(unpacked); | |
367 | } else if (typeof value === 'string' && value.slice(0,10) === "IPY_MODEL_") { |
|
369 | } else if (typeof value === 'string' && value.slice(0,10) === "IPY_MODEL_") { | |
368 | // get_model returns a promise already |
|
370 | // get_model returns a promise already | |
369 | return this.widget_manager.get_model(value.slice(10, value.length)); |
|
371 | return this.widget_manager.get_model(value.slice(10, value.length)); | |
370 | } else { |
|
372 | } else { | |
371 | return Promise.resolve(value); |
|
373 | return Promise.resolve(value); | |
372 | } |
|
374 | } | |
373 | }, |
|
375 | }, | |
374 |
|
376 | |||
375 | on_some_change: function(keys, callback, context) { |
|
377 | on_some_change: function(keys, callback, context) { | |
376 | /** |
|
378 | /** | |
377 | * on_some_change(["key1", "key2"], foo, context) differs from |
|
379 | * on_some_change(["key1", "key2"], foo, context) differs from | |
378 | * on("change:key1 change:key2", foo, context). |
|
380 | * on("change:key1 change:key2", foo, context). | |
379 | * If the widget attributes key1 and key2 are both modified, |
|
381 | * If the widget attributes key1 and key2 are both modified, | |
380 | * the second form will result in foo being called twice |
|
382 | * the second form will result in foo being called twice | |
381 | * while the first will call foo only once. |
|
383 | * while the first will call foo only once. | |
382 | */ |
|
384 | */ | |
383 | this.on('change', function() { |
|
385 | this.on('change', function() { | |
384 | if (keys.some(this.hasChanged, this)) { |
|
386 | if (keys.some(this.hasChanged, this)) { | |
385 | callback.apply(context); |
|
387 | callback.apply(context); | |
386 | } |
|
388 | } | |
387 | }, this); |
|
389 | }, this); | |
388 |
|
390 | |||
389 | }, |
|
391 | }, | |
390 | }); |
|
392 | }); | |
391 | widgetmanager.WidgetManager.register_widget_model('WidgetModel', WidgetModel); |
|
393 | widgetmanager.WidgetManager.register_widget_model('WidgetModel', WidgetModel); | |
392 |
|
394 | |||
393 |
|
395 | |||
394 | var WidgetView = Backbone.View.extend({ |
|
396 | var WidgetView = Backbone.View.extend({ | |
395 | initialize: function(parameters) { |
|
397 | initialize: function(parameters) { | |
396 | /** |
|
398 | /** | |
397 | * Public constructor. |
|
399 | * Public constructor. | |
398 | */ |
|
400 | */ | |
399 | this.model.on('change',this.update,this); |
|
401 | this.model.on('change',this.update,this); | |
400 |
|
402 | |||
401 | // Bubble the comm live events. |
|
403 | // Bubble the comm live events. | |
402 | this.model.on('comm:live', function() { |
|
404 | this.model.on('comm:live', function() { | |
403 | this.trigger('comm:live', this); |
|
405 | this.trigger('comm:live', this); | |
404 | }, this); |
|
406 | }, this); | |
405 | this.model.on('comm:dead', function() { |
|
407 | this.model.on('comm:dead', function() { | |
406 | this.trigger('comm:dead', this); |
|
408 | this.trigger('comm:dead', this); | |
407 | }, this); |
|
409 | }, this); | |
408 |
|
410 | |||
409 | this.options = parameters.options; |
|
411 | this.options = parameters.options; | |
410 | this.on('displayed', function() { |
|
412 | this.on('displayed', function() { | |
411 | this.is_displayed = true; |
|
413 | this.is_displayed = true; | |
412 | }, this); |
|
414 | }, this); | |
413 | }, |
|
415 | }, | |
414 |
|
416 | |||
415 | update: function(){ |
|
417 | update: function(){ | |
416 | /** |
|
418 | /** | |
417 | * Triggered on model change. |
|
419 | * Triggered on model change. | |
418 | * |
|
420 | * | |
419 | * Update view to be consistent with this.model |
|
421 | * Update view to be consistent with this.model | |
420 | */ |
|
422 | */ | |
421 | }, |
|
423 | }, | |
422 |
|
424 | |||
423 | create_child_view: function(child_model, options) { |
|
425 | create_child_view: function(child_model, options) { | |
424 | /** |
|
426 | /** | |
425 | * Create and promise that resolves to a child view of a given model |
|
427 | * Create and promise that resolves to a child view of a given model | |
426 | */ |
|
428 | */ | |
427 | var that = this; |
|
429 | var that = this; | |
428 | options = $.extend({ parent: this }, options || {}); |
|
430 | options = $.extend({ parent: this }, options || {}); | |
429 | return this.model.widget_manager.create_view(child_model, options).catch(utils.reject("Couldn't create child view"), true); |
|
431 | return this.model.widget_manager.create_view(child_model, options).catch(utils.reject("Couldn't create child view"), true); | |
430 | }, |
|
432 | }, | |
431 |
|
433 | |||
432 | callbacks: function(){ |
|
434 | callbacks: function(){ | |
433 | /** |
|
435 | /** | |
434 | * Create msg callbacks for a comm msg. |
|
436 | * Create msg callbacks for a comm msg. | |
435 | */ |
|
437 | */ | |
436 | return this.model.callbacks(this); |
|
438 | return this.model.callbacks(this); | |
437 | }, |
|
439 | }, | |
438 |
|
440 | |||
439 | render: function(){ |
|
441 | render: function(){ | |
440 | /** |
|
442 | /** | |
441 | * Render the view. |
|
443 | * Render the view. | |
442 | * |
|
444 | * | |
443 | * By default, this is only called the first time the view is created |
|
445 | * By default, this is only called the first time the view is created | |
444 | */ |
|
446 | */ | |
445 | }, |
|
447 | }, | |
446 |
|
448 | |||
447 | send: function (content) { |
|
449 | send: function (content) { | |
448 | /** |
|
450 | /** | |
449 | * Send a custom msg associated with this view. |
|
451 | * Send a custom msg associated with this view. | |
450 | */ |
|
452 | */ | |
451 | this.model.send(content, this.callbacks()); |
|
453 | this.model.send(content, this.callbacks()); | |
452 | }, |
|
454 | }, | |
453 |
|
455 | |||
454 | touch: function () { |
|
456 | touch: function () { | |
455 | this.model.save_changes(this.callbacks()); |
|
457 | this.model.save_changes(this.callbacks()); | |
456 | }, |
|
458 | }, | |
457 |
|
459 | |||
458 | after_displayed: function (callback, context) { |
|
460 | after_displayed: function (callback, context) { | |
459 | /** |
|
461 | /** | |
460 | * Calls the callback right away is the view is already displayed |
|
462 | * Calls the callback right away is the view is already displayed | |
461 | * otherwise, register the callback to the 'displayed' event. |
|
463 | * otherwise, register the callback to the 'displayed' event. | |
462 | */ |
|
464 | */ | |
463 | if (this.is_displayed) { |
|
465 | if (this.is_displayed) { | |
464 | callback.apply(context); |
|
466 | callback.apply(context); | |
465 | } else { |
|
467 | } else { | |
466 | this.on('displayed', callback, context); |
|
468 | this.on('displayed', callback, context); | |
467 | } |
|
469 | } | |
468 | }, |
|
470 | }, | |
469 |
|
471 | |||
470 | remove: function () { |
|
472 | remove: function () { | |
471 | // Raise a remove event when the view is removed. |
|
473 | // Raise a remove event when the view is removed. | |
472 | WidgetView.__super__.remove.apply(this, arguments); |
|
474 | WidgetView.__super__.remove.apply(this, arguments); | |
473 | this.trigger('remove'); |
|
475 | this.trigger('remove'); | |
474 | } |
|
476 | } | |
475 | }); |
|
477 | }); | |
476 |
|
478 | |||
477 |
|
479 | |||
478 | var DOMWidgetView = WidgetView.extend({ |
|
480 | var DOMWidgetView = WidgetView.extend({ | |
479 | initialize: function (parameters) { |
|
481 | initialize: function (parameters) { | |
480 | /** |
|
482 | /** | |
481 | * Public constructor |
|
483 | * Public constructor | |
482 | */ |
|
484 | */ | |
483 | DOMWidgetView.__super__.initialize.apply(this, [parameters]); |
|
485 | DOMWidgetView.__super__.initialize.apply(this, [parameters]); | |
484 | this.model.on('change:visible', this.update_visible, this); |
|
486 | this.model.on('change:visible', this.update_visible, this); | |
485 | this.model.on('change:_css', this.update_css, this); |
|
487 | this.model.on('change:_css', this.update_css, this); | |
486 |
|
488 | |||
487 | this.model.on('change:_dom_classes', function(model, new_classes) { |
|
489 | this.model.on('change:_dom_classes', function(model, new_classes) { | |
488 | var old_classes = model.previous('_dom_classes'); |
|
490 | var old_classes = model.previous('_dom_classes'); | |
489 | this.update_classes(old_classes, new_classes); |
|
491 | this.update_classes(old_classes, new_classes); | |
490 | }, this); |
|
492 | }, this); | |
491 |
|
493 | |||
492 | this.model.on('change:color', function (model, value) { |
|
494 | this.model.on('change:color', function (model, value) { | |
493 | this.update_attr('color', value); }, this); |
|
495 | this.update_attr('color', value); }, this); | |
494 |
|
496 | |||
495 | this.model.on('change:background_color', function (model, value) { |
|
497 | this.model.on('change:background_color', function (model, value) { | |
496 | this.update_attr('background', value); }, this); |
|
498 | this.update_attr('background', value); }, this); | |
497 |
|
499 | |||
498 | this.model.on('change:width', function (model, value) { |
|
500 | this.model.on('change:width', function (model, value) { | |
499 | this.update_attr('width', value); }, this); |
|
501 | this.update_attr('width', value); }, this); | |
500 |
|
502 | |||
501 | this.model.on('change:height', function (model, value) { |
|
503 | this.model.on('change:height', function (model, value) { | |
502 | this.update_attr('height', value); }, this); |
|
504 | this.update_attr('height', value); }, this); | |
503 |
|
505 | |||
504 | this.model.on('change:border_color', function (model, value) { |
|
506 | this.model.on('change:border_color', function (model, value) { | |
505 | this.update_attr('border-color', value); }, this); |
|
507 | this.update_attr('border-color', value); }, this); | |
506 |
|
508 | |||
507 | this.model.on('change:border_width', function (model, value) { |
|
509 | this.model.on('change:border_width', function (model, value) { | |
508 | this.update_attr('border-width', value); }, this); |
|
510 | this.update_attr('border-width', value); }, this); | |
509 |
|
511 | |||
510 | this.model.on('change:border_style', function (model, value) { |
|
512 | this.model.on('change:border_style', function (model, value) { | |
511 | this.update_attr('border-style', value); }, this); |
|
513 | this.update_attr('border-style', value); }, this); | |
512 |
|
514 | |||
513 | this.model.on('change:font_style', function (model, value) { |
|
515 | this.model.on('change:font_style', function (model, value) { | |
514 | this.update_attr('font-style', value); }, this); |
|
516 | this.update_attr('font-style', value); }, this); | |
515 |
|
517 | |||
516 | this.model.on('change:font_weight', function (model, value) { |
|
518 | this.model.on('change:font_weight', function (model, value) { | |
517 | this.update_attr('font-weight', value); }, this); |
|
519 | this.update_attr('font-weight', value); }, this); | |
518 |
|
520 | |||
519 | this.model.on('change:font_size', function (model, value) { |
|
521 | this.model.on('change:font_size', function (model, value) { | |
520 | this.update_attr('font-size', this._default_px(value)); }, this); |
|
522 | this.update_attr('font-size', this._default_px(value)); }, this); | |
521 |
|
523 | |||
522 | this.model.on('change:font_family', function (model, value) { |
|
524 | this.model.on('change:font_family', function (model, value) { | |
523 | this.update_attr('font-family', value); }, this); |
|
525 | this.update_attr('font-family', value); }, this); | |
524 |
|
526 | |||
525 | this.model.on('change:padding', function (model, value) { |
|
527 | this.model.on('change:padding', function (model, value) { | |
526 | this.update_attr('padding', value); }, this); |
|
528 | this.update_attr('padding', value); }, this); | |
527 |
|
529 | |||
528 | this.model.on('change:margin', function (model, value) { |
|
530 | this.model.on('change:margin', function (model, value) { | |
529 | this.update_attr('margin', this._default_px(value)); }, this); |
|
531 | this.update_attr('margin', this._default_px(value)); }, this); | |
530 |
|
532 | |||
531 | this.model.on('change:border_radius', function (model, value) { |
|
533 | this.model.on('change:border_radius', function (model, value) { | |
532 | this.update_attr('border-radius', this._default_px(value)); }, this); |
|
534 | this.update_attr('border-radius', this._default_px(value)); }, this); | |
533 |
|
535 | |||
534 | this.after_displayed(function() { |
|
536 | this.after_displayed(function() { | |
535 | this.update_visible(this.model, this.model.get("visible")); |
|
537 | this.update_visible(this.model, this.model.get("visible")); | |
536 | this.update_classes([], this.model.get('_dom_classes')); |
|
538 | this.update_classes([], this.model.get('_dom_classes')); | |
537 |
|
539 | |||
538 | this.update_attr('color', this.model.get('color')); |
|
540 | this.update_attr('color', this.model.get('color')); | |
539 | this.update_attr('background', this.model.get('background_color')); |
|
541 | this.update_attr('background', this.model.get('background_color')); | |
540 | this.update_attr('width', this.model.get('width')); |
|
542 | this.update_attr('width', this.model.get('width')); | |
541 | this.update_attr('height', this.model.get('height')); |
|
543 | this.update_attr('height', this.model.get('height')); | |
542 | this.update_attr('border-color', this.model.get('border_color')); |
|
544 | this.update_attr('border-color', this.model.get('border_color')); | |
543 | this.update_attr('border-width', this.model.get('border_width')); |
|
545 | this.update_attr('border-width', this.model.get('border_width')); | |
544 | this.update_attr('border-style', this.model.get('border_style')); |
|
546 | this.update_attr('border-style', this.model.get('border_style')); | |
545 | this.update_attr('font-style', this.model.get('font_style')); |
|
547 | this.update_attr('font-style', this.model.get('font_style')); | |
546 | this.update_attr('font-weight', this.model.get('font_weight')); |
|
548 | this.update_attr('font-weight', this.model.get('font_weight')); | |
547 | this.update_attr('font-size', this._default_px(this.model.get('font_size'))); |
|
549 | this.update_attr('font-size', this._default_px(this.model.get('font_size'))); | |
548 | this.update_attr('font-family', this.model.get('font_family')); |
|
550 | this.update_attr('font-family', this.model.get('font_family')); | |
549 | this.update_attr('padding', this.model.get('padding')); |
|
551 | this.update_attr('padding', this.model.get('padding')); | |
550 | this.update_attr('margin', this._default_px(this.model.get('margin'))); |
|
552 | this.update_attr('margin', this._default_px(this.model.get('margin'))); | |
551 | this.update_attr('border-radius', this._default_px(this.model.get('border_radius'))); |
|
553 | this.update_attr('border-radius', this._default_px(this.model.get('border_radius'))); | |
552 |
|
554 | |||
553 | this.update_css(this.model, this.model.get("_css")); |
|
555 | this.update_css(this.model, this.model.get("_css")); | |
554 | }, this); |
|
556 | }, this); | |
555 | }, |
|
557 | }, | |
556 |
|
558 | |||
557 | _default_px: function(value) { |
|
559 | _default_px: function(value) { | |
558 | /** |
|
560 | /** | |
559 | * Makes browser interpret a numerical string as a pixel value. |
|
561 | * Makes browser interpret a numerical string as a pixel value. | |
560 | */ |
|
562 | */ | |
561 | if (/^\d+\.?(\d+)?$/.test(value.trim())) { |
|
563 | if (/^\d+\.?(\d+)?$/.test(value.trim())) { | |
562 | return value.trim() + 'px'; |
|
564 | return value.trim() + 'px'; | |
563 | } |
|
565 | } | |
564 | return value; |
|
566 | return value; | |
565 | }, |
|
567 | }, | |
566 |
|
568 | |||
567 | update_attr: function(name, value) { |
|
569 | update_attr: function(name, value) { | |
568 | /** |
|
570 | /** | |
569 | * Set a css attr of the widget view. |
|
571 | * Set a css attr of the widget view. | |
570 | */ |
|
572 | */ | |
571 | this.$el.css(name, value); |
|
573 | this.$el.css(name, value); | |
572 | }, |
|
574 | }, | |
573 |
|
575 | |||
574 | update_visible: function(model, value) { |
|
576 | update_visible: function(model, value) { | |
575 | /** |
|
577 | /** | |
576 | * Update visibility |
|
578 | * Update visibility | |
577 | */ |
|
579 | */ | |
578 | switch(value) { |
|
580 | switch(value) { | |
579 | case null: // python None |
|
581 | case null: // python None | |
580 | this.$el.show().css('visibility', 'hidden'); break; |
|
582 | this.$el.show().css('visibility', 'hidden'); break; | |
581 | case false: |
|
583 | case false: | |
582 | this.$el.hide(); break; |
|
584 | this.$el.hide(); break; | |
583 | case true: |
|
585 | case true: | |
584 | this.$el.show().css('visibility', ''); break; |
|
586 | this.$el.show().css('visibility', ''); break; | |
585 | } |
|
587 | } | |
586 | }, |
|
588 | }, | |
587 |
|
589 | |||
588 | update_css: function (model, css) { |
|
590 | update_css: function (model, css) { | |
589 | /** |
|
591 | /** | |
590 | * Update the css styling of this view. |
|
592 | * Update the css styling of this view. | |
591 | */ |
|
593 | */ | |
592 | if (css === undefined) {return;} |
|
594 | if (css === undefined) {return;} | |
593 | for (var i = 0; i < css.length; i++) { |
|
595 | for (var i = 0; i < css.length; i++) { | |
594 | // Apply the css traits to all elements that match the selector. |
|
596 | // Apply the css traits to all elements that match the selector. | |
595 | var selector = css[i][0]; |
|
597 | var selector = css[i][0]; | |
596 | var elements = this._get_selector_element(selector); |
|
598 | var elements = this._get_selector_element(selector); | |
597 | if (elements.length > 0) { |
|
599 | if (elements.length > 0) { | |
598 | var trait_key = css[i][1]; |
|
600 | var trait_key = css[i][1]; | |
599 | var trait_value = css[i][2]; |
|
601 | var trait_value = css[i][2]; | |
600 | elements.css(trait_key ,trait_value); |
|
602 | elements.css(trait_key ,trait_value); | |
601 | } |
|
603 | } | |
602 | } |
|
604 | } | |
603 | }, |
|
605 | }, | |
604 |
|
606 | |||
605 | update_classes: function (old_classes, new_classes, $el) { |
|
607 | update_classes: function (old_classes, new_classes, $el) { | |
606 | /** |
|
608 | /** | |
607 | * Update the DOM classes applied to an element, default to this.$el. |
|
609 | * Update the DOM classes applied to an element, default to this.$el. | |
608 | */ |
|
610 | */ | |
609 | if ($el===undefined) { |
|
611 | if ($el===undefined) { | |
610 | $el = this.$el; |
|
612 | $el = this.$el; | |
611 | } |
|
613 | } | |
612 | _.difference(old_classes, new_classes).map(function(c) {$el.removeClass(c);}) |
|
614 | _.difference(old_classes, new_classes).map(function(c) {$el.removeClass(c);}) | |
613 | _.difference(new_classes, old_classes).map(function(c) {$el.addClass(c);}) |
|
615 | _.difference(new_classes, old_classes).map(function(c) {$el.addClass(c);}) | |
614 | }, |
|
616 | }, | |
615 |
|
617 | |||
616 | update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) { |
|
618 | update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) { | |
617 | /** |
|
619 | /** | |
618 | * Update the DOM classes applied to the widget based on a single |
|
620 | * Update the DOM classes applied to the widget based on a single | |
619 | * trait's value. |
|
621 | * trait's value. | |
620 | * |
|
622 | * | |
621 | * Given a trait value classes map, this function automatically |
|
623 | * Given a trait value classes map, this function automatically | |
622 | * handles applying the appropriate classes to the widget element |
|
624 | * handles applying the appropriate classes to the widget element | |
623 | * and removing classes that are no longer valid. |
|
625 | * and removing classes that are no longer valid. | |
624 | * |
|
626 | * | |
625 | * Parameters |
|
627 | * Parameters | |
626 | * ---------- |
|
628 | * ---------- | |
627 | * class_map: dictionary |
|
629 | * class_map: dictionary | |
628 | * Dictionary of trait values to class lists. |
|
630 | * Dictionary of trait values to class lists. | |
629 | * Example: |
|
631 | * Example: | |
630 | * { |
|
632 | * { | |
631 | * success: ['alert', 'alert-success'], |
|
633 | * success: ['alert', 'alert-success'], | |
632 | * info: ['alert', 'alert-info'], |
|
634 | * info: ['alert', 'alert-info'], | |
633 | * warning: ['alert', 'alert-warning'], |
|
635 | * warning: ['alert', 'alert-warning'], | |
634 | * danger: ['alert', 'alert-danger'] |
|
636 | * danger: ['alert', 'alert-danger'] | |
635 | * }; |
|
637 | * }; | |
636 | * trait_name: string |
|
638 | * trait_name: string | |
637 | * Name of the trait to check the value of. |
|
639 | * Name of the trait to check the value of. | |
638 | * previous_trait_value: optional string, default '' |
|
640 | * previous_trait_value: optional string, default '' | |
639 | * Last trait value |
|
641 | * Last trait value | |
640 | * $el: optional jQuery element handle, defaults to this.$el |
|
642 | * $el: optional jQuery element handle, defaults to this.$el | |
641 | * Element that the classes are applied to. |
|
643 | * Element that the classes are applied to. | |
642 | */ |
|
644 | */ | |
643 | var key = previous_trait_value; |
|
645 | var key = previous_trait_value; | |
644 | if (key === undefined) { |
|
646 | if (key === undefined) { | |
645 | key = this.model.previous(trait_name); |
|
647 | key = this.model.previous(trait_name); | |
646 | } |
|
648 | } | |
647 | var old_classes = class_map[key] ? class_map[key] : []; |
|
649 | var old_classes = class_map[key] ? class_map[key] : []; | |
648 | key = this.model.get(trait_name); |
|
650 | key = this.model.get(trait_name); | |
649 | var new_classes = class_map[key] ? class_map[key] : []; |
|
651 | var new_classes = class_map[key] ? class_map[key] : []; | |
650 |
|
652 | |||
651 | this.update_classes(old_classes, new_classes, $el || this.$el); |
|
653 | this.update_classes(old_classes, new_classes, $el || this.$el); | |
652 | }, |
|
654 | }, | |
653 |
|
655 | |||
654 | _get_selector_element: function (selector) { |
|
656 | _get_selector_element: function (selector) { | |
655 | /** |
|
657 | /** | |
656 | * Get the elements via the css selector. |
|
658 | * Get the elements via the css selector. | |
657 | */ |
|
659 | */ | |
658 | var elements; |
|
660 | var elements; | |
659 | if (!selector) { |
|
661 | if (!selector) { | |
660 | elements = this.$el; |
|
662 | elements = this.$el; | |
661 | } else { |
|
663 | } else { | |
662 | elements = this.$el.find(selector).addBack(selector); |
|
664 | elements = this.$el.find(selector).addBack(selector); | |
663 | } |
|
665 | } | |
664 | return elements; |
|
666 | return elements; | |
665 | }, |
|
667 | }, | |
666 |
|
668 | |||
667 | typeset: function(element, text){ |
|
669 | typeset: function(element, text){ | |
668 | utils.typeset.apply(null, arguments); |
|
670 | utils.typeset.apply(null, arguments); | |
669 | }, |
|
671 | }, | |
670 | }); |
|
672 | }); | |
671 |
|
673 | |||
672 |
|
674 | |||
673 | var ViewList = function(create_view, remove_view, context) { |
|
675 | var ViewList = function(create_view, remove_view, context) { | |
674 | /** |
|
676 | /** | |
675 | * - create_view and remove_view are default functions called when adding or removing views |
|
677 | * - create_view and remove_view are default functions called when adding or removing views | |
676 | * - create_view takes a model and returns a view or a promise for a view for that model |
|
678 | * - create_view takes a model and returns a view or a promise for a view for that model | |
677 | * - remove_view takes a view and destroys it (including calling `view.remove()`) |
|
679 | * - remove_view takes a view and destroys it (including calling `view.remove()`) | |
678 | * - each time the update() function is called with a new list, the create and remove |
|
680 | * - each time the update() function is called with a new list, the create and remove | |
679 | * callbacks will be called in an order so that if you append the views created in the |
|
681 | * callbacks will be called in an order so that if you append the views created in the | |
680 | * create callback and remove the views in the remove callback, you will duplicate |
|
682 | * create callback and remove the views in the remove callback, you will duplicate | |
681 | * the order of the list. |
|
683 | * the order of the list. | |
682 | * - the remove callback defaults to just removing the view (e.g., pass in null for the second parameter) |
|
684 | * - the remove callback defaults to just removing the view (e.g., pass in null for the second parameter) | |
683 | * - the context defaults to the created ViewList. If you pass another context, the create and remove |
|
685 | * - the context defaults to the created ViewList. If you pass another context, the create and remove | |
684 | * will be called in that context. |
|
686 | * will be called in that context. | |
685 | */ |
|
687 | */ | |
686 |
|
688 | |||
687 | this.initialize.apply(this, arguments); |
|
689 | this.initialize.apply(this, arguments); | |
688 | }; |
|
690 | }; | |
689 |
|
691 | |||
690 | _.extend(ViewList.prototype, { |
|
692 | _.extend(ViewList.prototype, { | |
691 | initialize: function(create_view, remove_view, context) { |
|
693 | initialize: function(create_view, remove_view, context) { | |
692 | this._handler_context = context || this; |
|
694 | this._handler_context = context || this; | |
693 | this._models = []; |
|
695 | this._models = []; | |
694 | this.views = []; // list of promises for views |
|
696 | this.views = []; // list of promises for views | |
695 | this._create_view = create_view; |
|
697 | this._create_view = create_view; | |
696 | this._remove_view = remove_view || function(view) {view.remove();}; |
|
698 | this._remove_view = remove_view || function(view) {view.remove();}; | |
697 | }, |
|
699 | }, | |
698 |
|
700 | |||
699 | update: function(new_models, create_view, remove_view, context) { |
|
701 | update: function(new_models, create_view, remove_view, context) { | |
700 | /** |
|
702 | /** | |
701 | * the create_view, remove_view, and context arguments override the defaults |
|
703 | * the create_view, remove_view, and context arguments override the defaults | |
702 | * specified when the list is created. |
|
704 | * specified when the list is created. | |
703 | * after this function, the .views attribute is a list of promises for views |
|
705 | * after this function, the .views attribute is a list of promises for views | |
704 | * if you want to perform some action on the list of views, do something like |
|
706 | * if you want to perform some action on the list of views, do something like | |
705 | * `Promise.all(myviewlist.views).then(function(views) {...});` |
|
707 | * `Promise.all(myviewlist.views).then(function(views) {...});` | |
706 | */ |
|
708 | */ | |
707 | var remove = remove_view || this._remove_view; |
|
709 | var remove = remove_view || this._remove_view; | |
708 | var create = create_view || this._create_view; |
|
710 | var create = create_view || this._create_view; | |
709 | context = context || this._handler_context; |
|
711 | context = context || this._handler_context; | |
710 | var i = 0; |
|
712 | var i = 0; | |
711 | // first, skip past the beginning of the lists if they are identical |
|
713 | // first, skip past the beginning of the lists if they are identical | |
712 | for (; i < new_models.length; i++) { |
|
714 | for (; i < new_models.length; i++) { | |
713 | if (i >= this._models.length || new_models[i] !== this._models[i]) { |
|
715 | if (i >= this._models.length || new_models[i] !== this._models[i]) { | |
714 | break; |
|
716 | break; | |
715 | } |
|
717 | } | |
716 | } |
|
718 | } | |
717 |
|
719 | |||
718 | var first_removed = i; |
|
720 | var first_removed = i; | |
719 | // Remove the non-matching items from the old list. |
|
721 | // Remove the non-matching items from the old list. | |
720 | var removed = this.views.splice(first_removed, this.views.length-first_removed); |
|
722 | var removed = this.views.splice(first_removed, this.views.length-first_removed); | |
721 | for (var j = 0; j < removed.length; j++) { |
|
723 | for (var j = 0; j < removed.length; j++) { | |
722 | removed[j].then(function(view) { |
|
724 | removed[j].then(function(view) { | |
723 | remove.call(context, view) |
|
725 | remove.call(context, view) | |
724 | }); |
|
726 | }); | |
725 | } |
|
727 | } | |
726 |
|
728 | |||
727 | // Add the rest of the new list items. |
|
729 | // Add the rest of the new list items. | |
728 | for (; i < new_models.length; i++) { |
|
730 | for (; i < new_models.length; i++) { | |
729 | this.views.push(Promise.resolve(create.call(context, new_models[i]))); |
|
731 | this.views.push(Promise.resolve(create.call(context, new_models[i]))); | |
730 | } |
|
732 | } | |
731 | // make a copy of the input array |
|
733 | // make a copy of the input array | |
732 | this._models = new_models.slice(); |
|
734 | this._models = new_models.slice(); | |
733 | }, |
|
735 | }, | |
734 |
|
736 | |||
735 | remove: function() { |
|
737 | remove: function() { | |
736 | /** |
|
738 | /** | |
737 | * removes every view in the list; convenience function for `.update([])` |
|
739 | * removes every view in the list; convenience function for `.update([])` | |
738 | * that should be faster |
|
740 | * that should be faster | |
739 | * returns a promise that resolves after this removal is done |
|
741 | * returns a promise that resolves after this removal is done | |
740 | */ |
|
742 | */ | |
741 | var that = this; |
|
743 | var that = this; | |
742 | return Promise.all(this.views).then(function(views) { |
|
744 | return Promise.all(this.views).then(function(views) { | |
743 | for (var i = 0; i < that.views.length; i++) { |
|
745 | for (var i = 0; i < that.views.length; i++) { | |
744 | that._remove_view.call(that._handler_context, views[i]); |
|
746 | that._remove_view.call(that._handler_context, views[i]); | |
745 | } |
|
747 | } | |
746 | that.views = []; |
|
748 | that.views = []; | |
747 | that._models = []; |
|
749 | that._models = []; | |
748 | }); |
|
750 | }); | |
749 | }, |
|
751 | }, | |
750 | }); |
|
752 | }); | |
751 |
|
753 | |||
752 | var widget = { |
|
754 | var widget = { | |
753 | 'WidgetModel': WidgetModel, |
|
755 | 'WidgetModel': WidgetModel, | |
754 | 'WidgetView': WidgetView, |
|
756 | 'WidgetView': WidgetView, | |
755 | 'DOMWidgetView': DOMWidgetView, |
|
757 | 'DOMWidgetView': DOMWidgetView, | |
756 | 'ViewList': ViewList, |
|
758 | 'ViewList': ViewList, | |
757 | }; |
|
759 | }; | |
758 |
|
760 | |||
759 | // For backwards compatability. |
|
761 | // For backwards compatability. | |
760 | $.extend(IPython, widget); |
|
762 | $.extend(IPython, widget); | |
761 |
|
763 | |||
762 | return widget; |
|
764 | return widget; | |
763 | }); |
|
765 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now