##// END OF EJS Templates
Pass the whole message into the widget manager display_view call...
Jason Grout -
Show More
@@ -1,202 +1,204
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 // Backbone.sync method must be in widgetmanager.js file instead of
28 // Backbone.sync method must be in widgetmanager.js file instead of
29 // widget.js so it can be overwritten for different contexts.
29 // widget.js so it can be overwritten for different contexts.
30 Backbone.sync = function (method, model, options) {
30 Backbone.sync = function (method, model, options) {
31 var result = model._handle_sync(method, options);
31 var result = model._handle_sync(method, options);
32 if (options.success) {
32 if (options.success) {
33 options.success(result);
33 options.success(result);
34 }
34 }
35 };
35 };
36
36
37 //--------------------------------------------------------------------
37 //--------------------------------------------------------------------
38 // WidgetManager class
38 // WidgetManager class
39 //--------------------------------------------------------------------
39 //--------------------------------------------------------------------
40 var WidgetManager = function () {
40 var WidgetManager = function () {
41 this.comm_manager = null;
41 this.comm_manager = null;
42 this._model_types = {}; /* Dictionary of model type names
42 this._model_types = {}; /* Dictionary of model type names
43 (target_name) and model types. */
43 (target_name) and model types. */
44 this._view_types = {}; /* Dictionary of view names and view types. */
44 this._view_types = {}; /* Dictionary of view names and view types. */
45 this._models = {}; /* Dictionary of model ids and model instances */
45 this._models = {}; /* Dictionary of model ids and model instances */
46 };
46 };
47
47
48
48
49 WidgetManager.prototype.attach_comm_manager = function (comm_manager) {
49 WidgetManager.prototype.attach_comm_manager = function (comm_manager) {
50 this.comm_manager = comm_manager;
50 this.comm_manager = comm_manager;
51
51
52 // Register already-registered widget model types with the comm manager.
52 // Register already-registered widget model types with the comm manager.
53 for (var widget_model_name in this._model_types) {
53 for (var widget_model_name in this._model_types) {
54 // TODO: Should not be a for.
54 // TODO: Should not be a for.
55 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
55 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
56 }
56 }
57 };
57 };
58
58
59
59
60 WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
60 WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
61 // Register the widget with the comm manager. Make sure to pass this object's context
61 // Register the widget with the comm manager. Make sure to pass this object's context
62 // in so `this` works in the call back.
62 // in so `this` works in the call back.
63 if (this.comm_manager !== null) {
63 if (this.comm_manager !== null) {
64 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
64 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
65 }
65 }
66 this._model_types[widget_model_name] = widget_model_type;
66 this._model_types[widget_model_name] = widget_model_type;
67 };
67 };
68
68
69
69
70 WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
70 WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
71 this._view_types[widget_view_name] = widget_view_type;
71 this._view_types[widget_view_name] = widget_view_type;
72 };
72 };
73
73
74
74
75 WidgetManager.prototype.display_view = function(msg_id, model) {
75 WidgetManager.prototype.display_view = function(msg, model) {
76 var cell = this.get_msg_cell(msg_id);
76 var cell = this.get_msg_cell(msg.parent_header.msg_id);
77 if (cell === null) {
77 if (cell === null) {
78 console.log("Could not determine where the display" +
78 console.log("Could not determine where the display" +
79 " message was from. Widget will not be displayed");
79 " message was from. Widget will not be displayed");
80 } else {
80 } else {
81 var view = this.create_view(model, {cell: cell});
81 var view = this.create_view(model, {cell: cell});
82 if (view !== undefined
82 if (view === undefined) {
83 && cell.widget_subarea !== undefined
83 console.error("View creation failed", model);
84 }
85 if (cell.widget_subarea !== undefined
84 && cell.widget_subarea !== null) {
86 && cell.widget_subarea !== null) {
85
87
86 cell.widget_area.show();
88 cell.widget_area.show();
87 cell.widget_subarea.append(view.$el);
89 cell.widget_subarea.append(view.$el);
88 }
90 }
89 }
91 }
90 },
92 },
91
93
92
94
93 WidgetManager.prototype.create_view = function(model, options) {
95 WidgetManager.prototype.create_view = function(model, options) {
94 var view_name = model.get('view_name');
96 var view_name = model.get('view_name');
95 var ViewType = this._view_types[view_name];
97 var ViewType = this._view_types[view_name];
96 if (ViewType !== undefined && ViewType !== null) {
98 if (ViewType !== undefined && ViewType !== null) {
97 var parameters = {model: model, options: options};
99 var parameters = {model: model, options: options};
98 var view = new ViewType(parameters);
100 var view = new ViewType(parameters);
99 view.render();
101 view.render();
100 IPython.keyboard_manager.register_events(view.$el);
102 IPython.keyboard_manager.register_events(view.$el);
101 model.views.push(view);
103 model.views.push(view);
102 model.on('destroy', view.remove, view);
104 model.on('destroy', view.remove, view);
103 return view;
105 return view;
104 }
106 }
105 },
107 },
106
108
107
109
108 WidgetManager.prototype.get_msg_cell = function (msg_id) {
110 WidgetManager.prototype.get_msg_cell = function (msg_id) {
109 var cell = null;
111 var cell = null;
110 // First, check to see if the msg was triggered by cell execution.
112 // First, check to see if the msg was triggered by cell execution.
111 if (IPython.notebook !== undefined && IPython.notebook !== null) {
113 if (IPython.notebook !== undefined && IPython.notebook !== null) {
112 cell = IPython.notebook.get_msg_cell(msg_id);
114 cell = IPython.notebook.get_msg_cell(msg_id);
113 }
115 }
114 if (cell !== null) {
116 if (cell !== null) {
115 return cell
117 return cell
116 }
118 }
117 // Second, check to see if a get_cell callback was defined
119 // Second, check to see if a get_cell callback was defined
118 // for the message. get_cell callbacks are registered for
120 // for the message. get_cell callbacks are registered for
119 // widget messages, so this block is actually checking to see if the
121 // widget messages, so this block is actually checking to see if the
120 // message was triggered by a widget.
122 // message was triggered by a widget.
121 var kernel = null;
123 var kernel = null;
122 if (this.comm_manager !== null) {
124 if (this.comm_manager !== null) {
123 kernel = this.comm_manager.kernel;
125 kernel = this.comm_manager.kernel;
124 }
126 }
125 if (kernel !== undefined && kernel !== null) {
127 if (kernel !== undefined && kernel !== null) {
126 var callbacks = kernel.get_callbacks_for_msg(msg_id);
128 var callbacks = kernel.get_callbacks_for_msg(msg_id);
127 if (callbacks !== undefined &&
129 if (callbacks !== undefined &&
128 callbacks.iopub !== undefined &&
130 callbacks.iopub !== undefined &&
129 callbacks.iopub.get_cell !== undefined) {
131 callbacks.iopub.get_cell !== undefined) {
130
132
131 return callbacks.iopub.get_cell();
133 return callbacks.iopub.get_cell();
132 }
134 }
133 }
135 }
134
136
135 // Not triggered by a cell or widget (no get_cell callback
137 // Not triggered by a cell or widget (no get_cell callback
136 // exists).
138 // exists).
137 return null;
139 return null;
138 };
140 };
139
141
140 WidgetManager.prototype.callbacks = function (view) {
142 WidgetManager.prototype.callbacks = function (view) {
141 // callback handlers specific a view
143 // callback handlers specific a view
142 var callbacks = {};
144 var callbacks = {};
143 var cell = view.options.cell;
145 var cell = view.options.cell;
144 if (cell !== null) {
146 if (cell !== null) {
145 // Try to get output handlers
147 // Try to get output handlers
146 var handle_output = null;
148 var handle_output = null;
147 var handle_clear_output = null;
149 var handle_clear_output = null;
148 if (cell.output_area !== undefined && cell.output_area !== null) {
150 if (cell.output_area !== undefined && cell.output_area !== null) {
149 handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
151 handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
150 handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
152 handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
151 }
153 }
152
154
153 // Create callback dict using what is known
155 // Create callback dict using what is known
154 var that = this;
156 var that = this;
155 callbacks = {
157 callbacks = {
156 iopub : {
158 iopub : {
157 output : handle_output,
159 output : handle_output,
158 clear_output : handle_clear_output,
160 clear_output : handle_clear_output,
159
161
160 status : function (msg) {
162 status : function (msg) {
161 view.model._handle_status(msg, that.callbacks(view));
163 view.model._handle_status(msg, that.callbacks(view));
162 },
164 },
163
165
164 // Special function only registered by widget messages.
166 // Special function only registered by widget messages.
165 // Allows us to get the cell for a message so we know
167 // Allows us to get the cell for a message so we know
166 // where to add widgets if the code requires it.
168 // where to add widgets if the code requires it.
167 get_cell : function () {
169 get_cell : function () {
168 return cell;
170 return cell;
169 },
171 },
170 },
172 },
171 };
173 };
172 }
174 }
173 return callbacks;
175 return callbacks;
174 };
176 };
175
177
176
178
177 WidgetManager.prototype.get_model = function (model_id) {
179 WidgetManager.prototype.get_model = function (model_id) {
178 var model = this._models[model_id];
180 var model = this._models[model_id];
179 if (model !== undefined && model.id == model_id) {
181 if (model !== undefined && model.id == model_id) {
180 return model;
182 return model;
181 }
183 }
182 return null;
184 return null;
183 };
185 };
184
186
185
187
186 WidgetManager.prototype._handle_comm_open = function (comm, msg) {
188 WidgetManager.prototype._handle_comm_open = function (comm, msg) {
187 var widget_type_name = msg.content.target_name;
189 var widget_type_name = msg.content.target_name;
188 var widget_model = new this._model_types[widget_type_name](this, comm.comm_id, comm);
190 var widget_model = new this._model_types[widget_type_name](this, comm.comm_id, comm);
189 this._models[comm.comm_id] = widget_model; // comm_id == model_id
191 this._models[comm.comm_id] = widget_model; // comm_id == model_id
190 };
192 };
191
193
192 //--------------------------------------------------------------------
194 //--------------------------------------------------------------------
193 // Init code
195 // Init code
194 //--------------------------------------------------------------------
196 //--------------------------------------------------------------------
195 IPython.WidgetManager = WidgetManager;
197 IPython.WidgetManager = WidgetManager;
196 if (IPython.widget_manager === undefined || IPython.widget_manager === null) {
198 if (IPython.widget_manager === undefined || IPython.widget_manager === null) {
197 IPython.widget_manager = new WidgetManager();
199 IPython.widget_manager = new WidgetManager();
198 }
200 }
199
201
200 return IPython.widget_manager;
202 return IPython.widget_manager;
201 });
203 });
202 }());
204 }());
@@ -1,393 +1,393
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 var WidgetModel = Backbone.Model.extend({
22 var WidgetModel = Backbone.Model.extend({
23 constructor: function (widget_manager, model_id, comm) {
23 constructor: function (widget_manager, model_id, comm) {
24 // Construcctor
24 // Construcctor
25 //
25 //
26 // Creates a WidgetModel instance.
26 // Creates a WidgetModel instance.
27 //
27 //
28 // Parameters
28 // Parameters
29 // ----------
29 // ----------
30 // widget_manager : WidgetManager instance
30 // widget_manager : WidgetManager instance
31 // model_id : string
31 // model_id : string
32 // An ID unique to this model.
32 // An ID unique to this model.
33 // comm : Comm instance (optional)
33 // comm : Comm instance (optional)
34 this.widget_manager = widget_manager;
34 this.widget_manager = widget_manager;
35 this.pending_msgs = 0;
35 this.pending_msgs = 0;
36 this.msg_throttle = 2;
36 this.msg_throttle = 2;
37 this.msg_buffer = null;
37 this.msg_buffer = null;
38 this.key_value_lock = null;
38 this.key_value_lock = null;
39 this.id = model_id;
39 this.id = model_id;
40 this.views = [];
40 this.views = [];
41
41
42 if (comm !== undefined) {
42 if (comm !== undefined) {
43 // Remember comm associated with the model.
43 // Remember comm associated with the model.
44 this.comm = comm;
44 this.comm = comm;
45 comm.model = this;
45 comm.model = this;
46
46
47 // Hook comm messages up to model.
47 // Hook comm messages up to model.
48 comm.on_close($.proxy(this._handle_comm_closed, this));
48 comm.on_close($.proxy(this._handle_comm_closed, this));
49 comm.on_msg($.proxy(this._handle_comm_msg, this));
49 comm.on_msg($.proxy(this._handle_comm_msg, this));
50 }
50 }
51 return Backbone.Model.apply(this);
51 return Backbone.Model.apply(this);
52 },
52 },
53
53
54 send: function (content, callbacks) {
54 send: function (content, callbacks) {
55 // Send a custom msg over the comm.
55 // Send a custom msg over the comm.
56 if (this.comm !== undefined) {
56 if (this.comm !== undefined) {
57 var data = {method: 'custom', custom_content: content};
57 var data = {method: 'custom', custom_content: content};
58 this.comm.send(data, callbacks);
58 this.comm.send(data, callbacks);
59 }
59 }
60 },
60 },
61
61
62 _handle_comm_closed: function (msg) {
62 _handle_comm_closed: function (msg) {
63 // Handle when a widget is closed.
63 // Handle when a widget is closed.
64 this.trigger('comm:close');
64 this.trigger('comm:close');
65 delete this.comm.model; // Delete ref so GC will collect widget model.
65 delete this.comm.model; // Delete ref so GC will collect widget model.
66 delete this.comm;
66 delete this.comm;
67 delete this.model_id; // Delete id from model so widget manager cleans up.
67 delete this.model_id; // Delete id from model so widget manager cleans up.
68 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
68 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
69 },
69 },
70
70
71 _handle_comm_msg: function (msg) {
71 _handle_comm_msg: function (msg) {
72 // Handle incoming comm msg.
72 // Handle incoming comm msg.
73 var method = msg.content.data.method;
73 var method = msg.content.data.method;
74 switch (method) {
74 switch (method) {
75 case 'update':
75 case 'update':
76 this.apply_update(msg.content.data.state);
76 this.apply_update(msg.content.data.state);
77 break;
77 break;
78 case 'custom':
78 case 'custom':
79 this.trigger('msg:custom', msg.content.data.custom_content);
79 this.trigger('msg:custom', msg.content.data.custom_content);
80 break;
80 break;
81 case 'display':
81 case 'display':
82 this.widget_manager.display_view(msg.parent_header.msg_id, this);
82 this.widget_manager.display_view(msg, this);
83 break;
83 break;
84 }
84 }
85 },
85 },
86
86
87 apply_update: function (state) {
87 apply_update: function (state) {
88 // Handle when a widget is updated via the python side.
88 // Handle when a widget is updated via the python side.
89 for (var key in state) {
89 for (var key in state) {
90 if (state.hasOwnProperty(key)) {
90 if (state.hasOwnProperty(key)) {
91 var value = state[key];
91 var value = state[key];
92 this.key_value_lock = [key, value];
92 this.key_value_lock = [key, value];
93 try {
93 try {
94 this.set(key, this._unpack_models(value));
94 this.set(key, this._unpack_models(value));
95 } finally {
95 } finally {
96 this.key_value_lock = null;
96 this.key_value_lock = null;
97 }
97 }
98 }
98 }
99 }
99 }
100 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
100 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
101 this.save();
101 this.save();
102 },
102 },
103
103
104 _handle_status: function (msg, callbacks) {
104 _handle_status: function (msg, callbacks) {
105 // Handle status msgs.
105 // Handle status msgs.
106
106
107 // execution_state : ('busy', 'idle', 'starting')
107 // execution_state : ('busy', 'idle', 'starting')
108 if (this.comm !== undefined) {
108 if (this.comm !== undefined) {
109 if (msg.content.execution_state ==='idle') {
109 if (msg.content.execution_state ==='idle') {
110 // Send buffer if this message caused another message to be
110 // Send buffer if this message caused another message to be
111 // throttled.
111 // throttled.
112 if (this.msg_buffer !== null &&
112 if (this.msg_buffer !== null &&
113 this.msg_throttle === this.pending_msgs) {
113 this.msg_throttle === this.pending_msgs) {
114 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
114 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
115 this.comm.send(data, callbacks);
115 this.comm.send(data, callbacks);
116 this.msg_buffer = null;
116 this.msg_buffer = null;
117 } else {
117 } else {
118 --this.pending_msgs;
118 --this.pending_msgs;
119 }
119 }
120 }
120 }
121 }
121 }
122 },
122 },
123
123
124 _handle_sync: function (method, options) {
124 _handle_sync: function (method, options) {
125 // Custom syncronization logic.
125 // Custom syncronization logic.
126 var model_json = this.toJSON();
126 var model_json = this.toJSON();
127 var attr;
127 var attr;
128
128
129 // Only send updated state if the state hasn't been changed
129 // Only send updated state if the state hasn't been changed
130 // during an update.
130 // during an update.
131 if (this.comm !== undefined) {
131 if (this.comm !== undefined) {
132 if (this.pending_msgs >= this.msg_throttle) {
132 if (this.pending_msgs >= this.msg_throttle) {
133 // The throttle has been exceeded, buffer the current msg so
133 // The throttle has been exceeded, buffer the current msg so
134 // it can be sent once the kernel has finished processing
134 // it can be sent once the kernel has finished processing
135 // some of the existing messages.
135 // some of the existing messages.
136 if (this.msg_buffer === null) {
136 if (this.msg_buffer === null) {
137 this.msg_buffer = $.extend({}, model_json); // Copy
137 this.msg_buffer = $.extend({}, model_json); // Copy
138 }
138 }
139 for (attr in options.attrs) {
139 for (attr in options.attrs) {
140 var value = this._pack_models(options.attrs[attr]);
140 var value = this._pack_models(options.attrs[attr]);
141 if (this.key_value_lock === null || attr !== this.key_value_lock[0] || value !== this.key_value_lock[1]) {
141 if (this.key_value_lock === null || attr !== this.key_value_lock[0] || value !== this.key_value_lock[1]) {
142 this.msg_buffer[attr] = value;
142 this.msg_buffer[attr] = value;
143 }
143 }
144 }
144 }
145
145
146 } else {
146 } else {
147 // We haven't exceeded the throttle, send the message like
147 // We haven't exceeded the throttle, send the message like
148 // normal. If this is a patch operation, just send the
148 // normal. If this is a patch operation, just send the
149 // changes.
149 // changes.
150 var send_json = model_json;
150 var send_json = model_json;
151 send_json = {};
151 send_json = {};
152 for (attr in options.attrs) {
152 for (attr in options.attrs) {
153 var value = this._pack_models(options.attrs[attr]);
153 var value = this._pack_models(options.attrs[attr]);
154 if (this.key_value_lock === null || attr !== this.key_value_lock[0] || value !== this.key_value_lock[1]) {
154 if (this.key_value_lock === null || attr !== this.key_value_lock[0] || value !== this.key_value_lock[1]) {
155 send_json[attr] = value;
155 send_json[attr] = value;
156 }
156 }
157 }
157 }
158
158
159 var is_empty = true;
159 var is_empty = true;
160 for (var prop in send_json) if (send_json.hasOwnProperty(prop)) is_empty = false;
160 for (var prop in send_json) if (send_json.hasOwnProperty(prop)) is_empty = false;
161 if (!is_empty) {
161 if (!is_empty) {
162 ++this.pending_msgs;
162 ++this.pending_msgs;
163 var data = {method: 'backbone', sync_data: send_json};
163 var data = {method: 'backbone', sync_data: send_json};
164 this.comm.send(data, options.callbacks);
164 this.comm.send(data, options.callbacks);
165 }
165 }
166 }
166 }
167 }
167 }
168
168
169 // Since the comm is a one-way communication, assume the message
169 // Since the comm is a one-way communication, assume the message
170 // arrived.
170 // arrived.
171 return model_json;
171 return model_json;
172 },
172 },
173
173
174 push: function(callbacks) {
174 push: function(callbacks) {
175 // Push this model's state to the back-end
175 // Push this model's state to the back-end
176 //
176 //
177 // This invokes a Backbone.Sync.
177 // This invokes a Backbone.Sync.
178 this.save(this.changedAttributes(), {patch: true, callbacks: callbacks});
178 this.save(this.changedAttributes(), {patch: true, callbacks: callbacks});
179 },
179 },
180
180
181 _pack_models: function(value) {
181 _pack_models: function(value) {
182 // Replace models with model ids recursively.
182 // Replace models with model ids recursively.
183 if (value instanceof Backbone.Model) {
183 if (value instanceof Backbone.Model) {
184 return value.id;
184 return value.id;
185 } else if (value instanceof Object) {
185 } else if (value instanceof Object) {
186 var packed = {};
186 var packed = {};
187 for (var key in value) {
187 for (var key in value) {
188 packed[key] = this._pack_models(value[key]);
188 packed[key] = this._pack_models(value[key]);
189 }
189 }
190 return packed;
190 return packed;
191 } else {
191 } else {
192 return value;
192 return value;
193 }
193 }
194 },
194 },
195
195
196 _unpack_models: function(value) {
196 _unpack_models: function(value) {
197 // Replace model ids with models recursively.
197 // Replace model ids with models recursively.
198 if (value instanceof Object) {
198 if (value instanceof Object) {
199 var unpacked = {};
199 var unpacked = {};
200 for (var key in value) {
200 for (var key in value) {
201 unpacked[key] = this._unpack_models(value[key]);
201 unpacked[key] = this._unpack_models(value[key]);
202 }
202 }
203 return unpacked;
203 return unpacked;
204 } else {
204 } else {
205 var model = this.widget_manager.get_model(value);
205 var model = this.widget_manager.get_model(value);
206 if (model !== null) {
206 if (model !== null) {
207 return model;
207 return model;
208 } else {
208 } else {
209 return value;
209 return value;
210 }
210 }
211 }
211 }
212 },
212 },
213
213
214 });
214 });
215 widget_manager.register_widget_model('WidgetModel', WidgetModel);
215 widget_manager.register_widget_model('WidgetModel', WidgetModel);
216
216
217
217
218 var WidgetView = Backbone.View.extend({
218 var WidgetView = Backbone.View.extend({
219 initialize: function(parameters) {
219 initialize: function(parameters) {
220 // Public constructor.
220 // Public constructor.
221 this.model.on('change',this.update,this);
221 this.model.on('change',this.update,this);
222 this.options = parameters.options;
222 this.options = parameters.options;
223 this.child_views = [];
223 this.child_views = [];
224 this.model.views.push(this);
224 this.model.views.push(this);
225 },
225 },
226
226
227 update: function(){
227 update: function(){
228 // Triggered on model change.
228 // Triggered on model change.
229 //
229 //
230 // Update view to be consistent with this.model
230 // Update view to be consistent with this.model
231 },
231 },
232
232
233 create_child_view: function(child_model, options) {
233 create_child_view: function(child_model, options) {
234 // Create and return a child view.
234 // Create and return a child view.
235 //
235 //
236 // -given a model and (optionally) a view name if the view name is
236 // -given a model and (optionally) a view name if the view name is
237 // not given, it defaults to the model's default view attribute.
237 // not given, it defaults to the model's default view attribute.
238
238
239 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
239 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
240 // it would be great to have the widget manager add the cell metadata
240 // it would be great to have the widget manager add the cell metadata
241 // to the subview without having to add it here.
241 // to the subview without having to add it here.
242 options = options || {};
242 options = options || {};
243 options.cell = this.options.cell;
243 options.cell = this.options.cell;
244 var child_view = this.model.widget_manager.create_view(child_model, options);
244 var child_view = this.model.widget_manager.create_view(child_model, options);
245 this.child_views[child_model.id] = child_view;
245 this.child_views[child_model.id] = child_view;
246 return child_view;
246 return child_view;
247 },
247 },
248
248
249 delete_child_view: function(child_model, options) {
249 delete_child_view: function(child_model, options) {
250 // Delete a child view that was previously created using create_child_view.
250 // Delete a child view that was previously created using create_child_view.
251 var view = this.child_views[child_model.id];
251 var view = this.child_views[child_model.id];
252 delete this.child_views[child_model.id];
252 delete this.child_views[child_model.id];
253 view.remove();
253 view.remove();
254 },
254 },
255
255
256 do_diff: function(old_list, new_list, removed_callback, added_callback) {
256 do_diff: function(old_list, new_list, removed_callback, added_callback) {
257 // Difference a changed list and call remove and add callbacks for
257 // Difference a changed list and call remove and add callbacks for
258 // each removed and added item in the new list.
258 // each removed and added item in the new list.
259 //
259 //
260 // Parameters
260 // Parameters
261 // ----------
261 // ----------
262 // old_list : array
262 // old_list : array
263 // new_list : array
263 // new_list : array
264 // removed_callback : Callback(item)
264 // removed_callback : Callback(item)
265 // Callback that is called for each item removed.
265 // Callback that is called for each item removed.
266 // added_callback : Callback(item)
266 // added_callback : Callback(item)
267 // Callback that is called for each item added.
267 // Callback that is called for each item added.
268
268
269
269
270 // removed items
270 // removed items
271 _.each(_.difference(old_list, new_list), function(item, index, list) {
271 _.each(_.difference(old_list, new_list), function(item, index, list) {
272 removed_callback(item);
272 removed_callback(item);
273 }, this);
273 }, this);
274
274
275 // added items
275 // added items
276 _.each(_.difference(new_list, old_list), function(item, index, list) {
276 _.each(_.difference(new_list, old_list), function(item, index, list) {
277 added_callback(item);
277 added_callback(item);
278 }, this);
278 }, this);
279 },
279 },
280
280
281 callbacks: function(){
281 callbacks: function(){
282 // Create msg callbacks for a comm msg.
282 // Create msg callbacks for a comm msg.
283 return this.model.widget_manager.callbacks(this);
283 return this.model.widget_manager.callbacks(this);
284 },
284 },
285
285
286 render: function(){
286 render: function(){
287 // Render the view.
287 // Render the view.
288 //
288 //
289 // By default, this is only called the first time the view is created
289 // By default, this is only called the first time the view is created
290 },
290 },
291
291
292 send: function (content) {
292 send: function (content) {
293 // Send a custom msg associated with this view.
293 // Send a custom msg associated with this view.
294 this.model.send(content, this.callbacks());
294 this.model.send(content, this.callbacks());
295 },
295 },
296
296
297 touch: function () {
297 touch: function () {
298 this.model.push(this.callbacks());
298 this.model.push(this.callbacks());
299 },
299 },
300
300
301 });
301 });
302
302
303
303
304 var DOMWidgetView = WidgetView.extend({
304 var DOMWidgetView = WidgetView.extend({
305 initialize: function (options) {
305 initialize: function (options) {
306 // Public constructor
306 // Public constructor
307
307
308 // In the future we may want to make changes more granular
308 // In the future we may want to make changes more granular
309 // (e.g., trigger on visible:change).
309 // (e.g., trigger on visible:change).
310 this.model.on('change', this.update, this);
310 this.model.on('change', this.update, this);
311 this.model.on('msg:custom', this.on_msg, this);
311 this.model.on('msg:custom', this.on_msg, this);
312 DOMWidgetView.__super__.initialize.apply(this, arguments);
312 DOMWidgetView.__super__.initialize.apply(this, arguments);
313 },
313 },
314
314
315 on_msg: function(msg) {
315 on_msg: function(msg) {
316 // Handle DOM specific msgs.
316 // Handle DOM specific msgs.
317 switch(msg.msg_type) {
317 switch(msg.msg_type) {
318 case 'add_class':
318 case 'add_class':
319 this.add_class(msg.selector, msg.class_list);
319 this.add_class(msg.selector, msg.class_list);
320 break;
320 break;
321 case 'remove_class':
321 case 'remove_class':
322 this.remove_class(msg.selector, msg.class_list);
322 this.remove_class(msg.selector, msg.class_list);
323 break;
323 break;
324 }
324 }
325 },
325 },
326
326
327 add_class: function (selector, class_list) {
327 add_class: function (selector, class_list) {
328 // Add a DOM class to an element.
328 // Add a DOM class to an element.
329 this._get_selector_element(selector).addClass(class_list);
329 this._get_selector_element(selector).addClass(class_list);
330 },
330 },
331
331
332 remove_class: function (selector, class_list) {
332 remove_class: function (selector, class_list) {
333 // Remove a DOM class from an element.
333 // Remove a DOM class from an element.
334 this._get_selector_element(selector).removeClass(class_list);
334 this._get_selector_element(selector).removeClass(class_list);
335 },
335 },
336
336
337 update: function () {
337 update: function () {
338 // Update the contents of this view
338 // Update the contents of this view
339 //
339 //
340 // Called when the model is changed. The model may have been
340 // Called when the model is changed. The model may have been
341 // changed by another view or by a state update from the back-end.
341 // changed by another view or by a state update from the back-end.
342 // The very first update seems to happen before the element is
342 // The very first update seems to happen before the element is
343 // finished rendering so we use setTimeout to give the element time
343 // finished rendering so we use setTimeout to give the element time
344 // to render
344 // to render
345 var e = this.$el;
345 var e = this.$el;
346 var visible = this.model.get('visible');
346 var visible = this.model.get('visible');
347 setTimeout(function() {e.toggle(visible)},0);
347 setTimeout(function() {e.toggle(visible)},0);
348
348
349 var css = this.model.get('_css');
349 var css = this.model.get('_css');
350 if (css === undefined) {return;}
350 if (css === undefined) {return;}
351 for (var selector in css) {
351 for (var selector in css) {
352 if (css.hasOwnProperty(selector)) {
352 if (css.hasOwnProperty(selector)) {
353 // Apply the css traits to all elements that match the selector.
353 // Apply the css traits to all elements that match the selector.
354 var elements = this._get_selector_element(selector);
354 var elements = this._get_selector_element(selector);
355 if (elements.length > 0) {
355 if (elements.length > 0) {
356 var css_traits = css[selector];
356 var css_traits = css[selector];
357 for (var css_key in css_traits) {
357 for (var css_key in css_traits) {
358 if (css_traits.hasOwnProperty(css_key)) {
358 if (css_traits.hasOwnProperty(css_key)) {
359 elements.css(css_key, css_traits[css_key]);
359 elements.css(css_key, css_traits[css_key]);
360 }
360 }
361 }
361 }
362 }
362 }
363 }
363 }
364 }
364 }
365 },
365 },
366
366
367 _get_selector_element: function (selector) {
367 _get_selector_element: function (selector) {
368 // Get the elements via the css selector.
368 // Get the elements via the css selector.
369
369
370 // If the selector is blank, apply the style to the $el_to_style
370 // If the selector is blank, apply the style to the $el_to_style
371 // element. If the $el_to_style element is not defined, use apply
371 // element. If the $el_to_style element is not defined, use apply
372 // the style to the view's element.
372 // the style to the view's element.
373 var elements;
373 var elements;
374 if (selector === undefined || selector === null || selector === '') {
374 if (selector === undefined || selector === null || selector === '') {
375 if (this.$el_to_style === undefined) {
375 if (this.$el_to_style === undefined) {
376 elements = this.$el;
376 elements = this.$el;
377 } else {
377 } else {
378 elements = this.$el_to_style;
378 elements = this.$el_to_style;
379 }
379 }
380 } else {
380 } else {
381 elements = this.$el.find(selector);
381 elements = this.$el.find(selector);
382 }
382 }
383 return elements;
383 return elements;
384 },
384 },
385 });
385 });
386
386
387 IPython.WidgetModel = WidgetModel;
387 IPython.WidgetModel = WidgetModel;
388 IPython.WidgetView = WidgetView;
388 IPython.WidgetView = WidgetView;
389 IPython.DOMWidgetView = DOMWidgetView;
389 IPython.DOMWidgetView = DOMWidgetView;
390
390
391 // Pass through widget_manager instance (probably not a good practice).
391 // Pass through widget_manager instance (probably not a good practice).
392 return widget_manager;
392 return widget_manager;
393 });
393 });
General Comments 0
You need to be logged in to leave comments. Login now