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