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