##// END OF EJS Templates
Converted tabs to spaces
Jonathan Frederic -
Show More
@@ -1,208 +1,208 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 (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 WidgetManager.prototype.handle_msg = function(msg, model) {
69 WidgetManager.prototype.handle_msg = function(msg, model) {
70 var method = msg.content.data.method;
70 var method = msg.content.data.method;
71 switch (method) {
71 switch (method) {
72 case 'display':
72 case 'display':
73 var cell = this.get_msg_cell(msg.parent_header.msg_id);
73 var cell = this.get_msg_cell(msg.parent_header.msg_id);
74 if (cell === null) {
74 if (cell === null) {
75 console.log("Could not determine where the display" +
75 console.log("Could not determine where the display" +
76 " message was from. Widget will not be displayed");
76 " message was from. Widget will not be displayed");
77 } else {
77 } else {
78 var view = this.create_view(model,
78 var view = this.create_view(model,
79 msg.content.data.view_name, cell);
79 msg.content.data.view_name, cell);
80 if (view !== undefined
80 if (view !== undefined
81 && cell.widget_subarea !== undefined
81 && cell.widget_subarea !== undefined
82 && cell.widget_subarea !== null) {
82 && cell.widget_subarea !== null) {
83 cell.widget_area.show();
83 cell.widget_area.show();
84 cell.widget_subarea.append(view.$el);
84 cell.widget_subarea.append(view.$el);
85 }
85 }
86 }
86 }
87 break;
87 break;
88 }
88 }
89 }
89 }
90
90
91 WidgetManager.prototype.create_view = function(model, view_name, cell) {
91 WidgetManager.prototype.create_view = function(model, view_name, cell) {
92 view_name = view_name || model.get('default_view_name');
92 view_name = view_name || model.get('default_view_name');
93 var ViewType = this.widget_view_types[view_name];
93 var ViewType = this.widget_view_types[view_name];
94 if (ViewType !== undefined && ViewType !== null) {
94 if (ViewType !== undefined && ViewType !== null) {
95 var view = new ViewType({model: model, widget_manager: this, cell: cell});
95 var view = new ViewType({model: model, widget_manager: this, cell: cell});
96 view.render();
96 view.render();
97 model.views.push(view);
97 model.views.push(view);
98 model.on('destroy', view.remove, view);
98 model.on('destroy', view.remove, view);
99 /*
99 /*
100 // TODO: handle view deletion. Don't forget to delete child views
100 // TODO: handle view deletion. Don't forget to delete child views
101 var that = this;
101 var that = this;
102 view.$el.on("remove", function () {
102 view.$el.on("remove", function () {
103 var index = that.views.indexOf(view);
103 var index = that.views.indexOf(view);
104 if (index > -1) {
104 if (index > -1) {
105 that.views.splice(index, 1);
105 that.views.splice(index, 1);
106 }
106 }
107 view.remove(); // Clean-up view
107 view.remove(); // Clean-up view
108
108
109 // Close the comm if there are no views left.
109 // Close the comm if there are no views left.
110 if (that.views.length() === 0) {
110 if (that.views.length() === 0) {
111 //trigger comm close event?
111 //trigger comm close event?
112 }
112 }
113
113
114
114
115 if (that.comm !== undefined) {
115 if (that.comm !== undefined) {
116 that.comm.close();
116 that.comm.close();
117 delete that.comm.model; // Delete ref so GC will collect widget model.
117 delete that.comm.model; // Delete ref so GC will collect widget model.
118 delete that.comm;
118 delete that.comm;
119 }
119 }
120 delete that.widget_id; // Delete id from model so widget manager cleans up.
120 delete that.widget_id; // Delete id from model so widget manager cleans up.
121 });
121 });
122 */
122 */
123 return view;
123 return view;
124 }
124 }
125 },
125 },
126
126
127 WidgetManager.prototype.get_msg_cell = function (msg_id) {
127 WidgetManager.prototype.get_msg_cell = function (msg_id) {
128 var cell = null;
128 var cell = null;
129 // First, check to see if the msg was triggered by cell execution.
129 // First, check to see if the msg was triggered by cell execution.
130 if (IPython.notebook !== undefined && IPython.notebook !== null) {
130 if (IPython.notebook !== undefined && IPython.notebook !== null) {
131 cell = IPython.notebook.get_msg_cell(msg_id);
131 cell = IPython.notebook.get_msg_cell(msg_id);
132 }
132 }
133 if (cell !== null) {
133 if (cell !== null) {
134 return cell
134 return cell
135 }
135 }
136 // Second, check to see if a get_cell callback was defined
136 // Second, check to see if a get_cell callback was defined
137 // for the message. get_cell callbacks are registered for
137 // for the message. get_cell callbacks are registered for
138 // widget messages, so this block is actually checking to see if the
138 // widget messages, so this block is actually checking to see if the
139 // message was triggered by a widget.
139 // message was triggered by a widget.
140 var kernel = this.get_kernel();
140 var kernel = this.get_kernel();
141 if (kernel !== undefined && kernel !== null) {
141 if (kernel !== undefined && kernel !== null) {
142 var callbacks = kernel.get_callbacks_for_msg(msg_id);
142 var callbacks = kernel.get_callbacks_for_msg(msg_id);
143 if (callbacks !== undefined &&
143 if (callbacks !== undefined &&
144 callbacks.iopub !== undefined &&
144 callbacks.iopub !== undefined &&
145 callbacks.iopub.get_cell !== undefined) {
145 callbacks.iopub.get_cell !== undefined) {
146
146
147 return callbacks.iopub.get_cell();
147 return callbacks.iopub.get_cell();
148 }
148 }
149 }
149 }
150
150
151 // Not triggered by a cell or widget (no get_cell callback
151 // Not triggered by a cell or widget (no get_cell callback
152 // exists).
152 // exists).
153 return null;
153 return null;
154 };
154 };
155
155
156
156
157 WidgetManager.prototype.get_model = function (widget_id) {
157 WidgetManager.prototype.get_model = function (widget_id) {
158 var model = this._model_instances[widget_id];
158 var model = this._model_instances[widget_id];
159 if (model !== undefined && model.id == widget_id) {
159 if (model !== undefined && model.id == widget_id) {
160 return model;
160 return model;
161 }
161 }
162 return null;
162 return null;
163 };
163 };
164
164
165
165
166 WidgetManager.prototype.get_kernel = function () {
166 WidgetManager.prototype.get_kernel = function () {
167 if (this.comm_manager === null) {
167 if (this.comm_manager === null) {
168 return null;
168 return null;
169 } else {
169 } else {
170 return this.comm_manager.kernel;
170 return this.comm_manager.kernel;
171 }
171 }
172 };
172 };
173
173
174
174
175 WidgetManager.prototype.on_create_widget = function (callback) {
175 WidgetManager.prototype.on_create_widget = function (callback) {
176 this._create_widget_callback = callback;
176 this._create_widget_callback = callback;
177 };
177 };
178
178
179
179
180 WidgetManager.prototype._handle_create_widget = function (widget_model) {
180 WidgetManager.prototype._handle_create_widget = function (widget_model) {
181 if (this._create_widget_callback) {
181 if (this._create_widget_callback) {
182 try {
182 try {
183 this._create_widget_callback(widget_model);
183 this._create_widget_callback(widget_model);
184 } catch (e) {
184 } catch (e) {
185 console.log("Exception in WidgetManager callback", e, widget_model);
185 console.log("Exception in WidgetManager callback", e, widget_model);
186 }
186 }
187 }
187 }
188 };
188 };
189
189
190
190
191 WidgetManager.prototype._handle_comm_open = function (comm, msg) {
191 WidgetManager.prototype._handle_comm_open = function (comm, msg) {
192 var widget_type_name = msg.content.target_name;
192 var widget_type_name = msg.content.target_name;
193 var widget_model = new this.widget_model_types[widget_type_name](this, comm.comm_id, comm);
193 var widget_model = new this.widget_model_types[widget_type_name](this, comm.comm_id, comm);
194 this._model_instances[comm.comm_id] = widget_model;
194 this._model_instances[comm.comm_id] = widget_model;
195 this._handle_create_widget(widget_model);
195 this._handle_create_widget(widget_model);
196 };
196 };
197
197
198 //--------------------------------------------------------------------
198 //--------------------------------------------------------------------
199 // Init code
199 // Init code
200 //--------------------------------------------------------------------
200 //--------------------------------------------------------------------
201 IPython.WidgetManager = WidgetManager;
201 IPython.WidgetManager = WidgetManager;
202 if (IPython.widget_manager === undefined || IPython.widget_manager === null) {
202 if (IPython.widget_manager === undefined || IPython.widget_manager === null) {
203 IPython.widget_manager = new WidgetManager();
203 IPython.widget_manager = new WidgetManager();
204 }
204 }
205
205
206 return IPython.widget_manager;
206 return IPython.widget_manager;
207 });
207 });
208 }());
208 }());
@@ -1,345 +1,345 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(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, widget_id, comm) {
26 constructor: function (widget_manager, widget_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 = widget_id;
31 this.id = widget_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.widget_id; // Delete id from model so widget manager cleans up.
58 delete this.widget_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;
175 this.cell = options.cell;
176 this.child_views = [];
176 this.child_views = [];
177 },
177 },
178
178
179 update: function(){
179 update: function(){
180 // update view to be consistent with this.model
180 // update view to be consistent with this.model
181 // triggered on model change
181 // triggered on model change
182 },
182 },
183
183
184 child_view: function(comm_id, view_name) {
184 child_view: function(comm_id, view_name) {
185 // create and return a child view, given a comm id for a model and (optionally) a view name
185 // create and return a child view, given a comm id for a model and (optionally) a view name
186 // if the view name is not given, it defaults to the model's default view attribute
186 // if the view name is not given, it defaults to the model's default view attribute
187 var child_model = this.comm_manager.comms[comm_id].model;
187 var child_model = this.comm_manager.comms[comm_id].model;
188 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell);
188 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell);
189 this.child_views[comm_id] = child_view;
189 this.child_views[comm_id] = child_view;
190 return child_view;
190 return child_view;
191 },
191 },
192
192
193 update_child_views: function(old_list, new_list) {
193 update_child_views: function(old_list, new_list) {
194 // this function takes an old list and new list of comm ids
194 // this function takes an old list and new list of comm ids
195 // views in child_views that correspond to deleted ids are deleted
195 // views in child_views that correspond to deleted ids are deleted
196 // views corresponding to added ids are added child_views
196 // views corresponding to added ids are added child_views
197
197
198 // delete old views
198 // delete old views
199 _.each(_.difference(old_list, new_list), function(element, index, list) {
199 _.each(_.difference(old_list, new_list), function(element, index, list) {
200 var view = this.child_views[element];
200 var view = this.child_views[element];
201 delete this.child_views[element];
201 delete this.child_views[element];
202 view.remove();
202 view.remove();
203 }, this);
203 }, this);
204
204
205 // add new views
205 // add new views
206 _.each(_.difference(new_list, old_list), function(element, index, list) {
206 _.each(_.difference(new_list, old_list), function(element, index, list) {
207 // this function adds the view to the child_views dictionary
207 // this function adds the view to the child_views dictionary
208 this.child_view(element);
208 this.child_view(element);
209 }, this);
209 }, this);
210 },
210 },
211
211
212
212
213
213
214 render: function(){
214 render: function(){
215 // render the view. By default, this is only called the first time the view is created
215 // render the view. By default, this is only called the first time the view is created
216 },
216 },
217 send: function (content) {
217 send: function (content) {
218 this.model.send(content, this._callbacks());
218 this.model.send(content, this._callbacks());
219 },
219 },
220
220
221 touch: function () {
221 touch: function () {
222 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this._callbacks()});
222 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this._callbacks()});
223 },
223 },
224
224
225 _callbacks: function () {
225 _callbacks: function () {
226 // callback handlers specific to this view's cell
226 // callback handlers specific to this view's cell
227 var callbacks = {};
227 var callbacks = {};
228 var cell = this.cell;
228 var cell = this.cell;
229 if (cell !== null) {
229 if (cell !== null) {
230 // Try to get output handlers
230 // Try to get output handlers
231 var handle_output = null;
231 var handle_output = null;
232 var handle_clear_output = null;
232 var handle_clear_output = null;
233 if (cell.output_area !== undefined && cell.output_area !== null) {
233 if (cell.output_area !== undefined && cell.output_area !== null) {
234 handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
234 handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
235 handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
235 handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
236 }
236 }
237
237
238 // Create callback dict using what is known
238 // Create callback dict using what is known
239 var that = this;
239 var that = this;
240 callbacks = {
240 callbacks = {
241 iopub : {
241 iopub : {
242 output : handle_output,
242 output : handle_output,
243 clear_output : handle_clear_output,
243 clear_output : handle_clear_output,
244
244
245 status : function (msg) {
245 status : function (msg) {
246 that.model._handle_status(msg, that._callbacks());
246 that.model._handle_status(msg, that._callbacks());
247 },
247 },
248
248
249 // Special function only registered by widget messages.
249 // Special function only registered by widget messages.
250 // Allows us to get the cell for a message so we know
250 // Allows us to get the cell for a message so we know
251 // where to add widgets if the code requires it.
251 // where to add widgets if the code requires it.
252 get_cell : function () {
252 get_cell : function () {
253 return cell;
253 return cell;
254 },
254 },
255 },
255 },
256 };
256 };
257 }
257 }
258 return callbacks;
258 return callbacks;
259 },
259 },
260
260
261 });
261 });
262
262
263 var WidgetView = BaseWidgetView.extend({
263 var WidgetView = BaseWidgetView.extend({
264 initialize: function (options) {
264 initialize: function (options) {
265 // TODO: make changes more granular (e.g., trigger on visible:change)
265 // TODO: make changes more granular (e.g., trigger on visible:change)
266 this.model.on('change', this.update, this);
266 this.model.on('change', this.update, this);
267 this.model.on('msg:custom', this.on_msg, this);
267 this.model.on('msg:custom', this.on_msg, this);
268 BaseWidgetView.prototype.initialize.apply(this, arguments);
268 BaseWidgetView.prototype.initialize.apply(this, arguments);
269 },
269 },
270
270
271 on_msg: function(msg) {
271 on_msg: function(msg) {
272 switch(msg.msg_type) {
272 switch(msg.msg_type) {
273 case 'add_class':
273 case 'add_class':
274 this.add_class(msg.selector, msg.class_list);
274 this.add_class(msg.selector, msg.class_list);
275 break;
275 break;
276 case 'remove_class':
276 case 'remove_class':
277 this.remove_class(msg.selector, msg.class_list);
277 this.remove_class(msg.selector, msg.class_list);
278 break;
278 break;
279 }
279 }
280 },
280 },
281
281
282 add_class: function (selector, class_list) {
282 add_class: function (selector, class_list) {
283 var elements = this._get_selector_element(selector);
283 var elements = this._get_selector_element(selector);
284 if (elements.length > 0) {
284 if (elements.length > 0) {
285 elements.addClass(class_list);
285 elements.addClass(class_list);
286 }
286 }
287 },
287 },
288
288
289 remove_class: function (selector, class_list) {
289 remove_class: function (selector, class_list) {
290 var elements = this._get_selector_element(selector);
290 var elements = this._get_selector_element(selector);
291 if (elements.length > 0) {
291 if (elements.length > 0) {
292 elements.removeClass(class_list);
292 elements.removeClass(class_list);
293 }
293 }
294 },
294 },
295
295
296 update: function () {
296 update: function () {
297 // the very first update seems to happen before the element is finished rendering
297 // the very first update seems to happen before the element is finished rendering
298 // so we use setTimeout to give the element time to render
298 // so we use setTimeout to give the element time to render
299 var e = this.$el;
299 var e = this.$el;
300 var visible = this.model.get('visible');
300 var visible = this.model.get('visible');
301 setTimeout(function() {e.toggle(visible)},0);
301 setTimeout(function() {e.toggle(visible)},0);
302
302
303 var css = this.model.get('_css');
303 var css = this.model.get('_css');
304 if (css === undefined) {return;}
304 if (css === undefined) {return;}
305 for (var selector in css) {
305 for (var selector in css) {
306 if (css.hasOwnProperty(selector)) {
306 if (css.hasOwnProperty(selector)) {
307 // Apply the css traits to all elements that match the selector.
307 // Apply the css traits to all elements that match the selector.
308 var elements = this._get_selector_element(selector);
308 var elements = this._get_selector_element(selector);
309 if (elements.length > 0) {
309 if (elements.length > 0) {
310 var css_traits = css[selector];
310 var css_traits = css[selector];
311 for (var css_key in css_traits) {
311 for (var css_key in css_traits) {
312 if (css_traits.hasOwnProperty(css_key)) {
312 if (css_traits.hasOwnProperty(css_key)) {
313 elements.css(css_key, css_traits[css_key]);
313 elements.css(css_key, css_traits[css_key]);
314 }
314 }
315 }
315 }
316 }
316 }
317 }
317 }
318 }
318 }
319 },
319 },
320
320
321 _get_selector_element: function (selector) {
321 _get_selector_element: function (selector) {
322 // Get the elements via the css selector. If the selector is
322 // Get the elements via the css selector. If the selector is
323 // blank, apply the style to the $el_to_style element. If
323 // blank, apply the style to the $el_to_style element. If
324 // the $el_to_style element is not defined, use apply the
324 // the $el_to_style element is not defined, use apply the
325 // style to the view's element.
325 // style to the view's element.
326 var elements;
326 var elements;
327 if (selector === undefined || selector === null || selector === '') {
327 if (selector === undefined || selector === null || selector === '') {
328 if (this.$el_to_style === undefined) {
328 if (this.$el_to_style === undefined) {
329 elements = this.$el;
329 elements = this.$el;
330 } else {
330 } else {
331 elements = this.$el_to_style;
331 elements = this.$el_to_style;
332 }
332 }
333 } else {
333 } else {
334 elements = this.$el.find(selector);
334 elements = this.$el.find(selector);
335 }
335 }
336 return elements;
336 return elements;
337 },
337 },
338 });
338 });
339
339
340 IPython.WidgetModel = WidgetModel;
340 IPython.WidgetModel = WidgetModel;
341 IPython.WidgetView = WidgetView;
341 IPython.WidgetView = WidgetView;
342 IPython.BaseWidgetView = BaseWidgetView;
342 IPython.BaseWidgetView = BaseWidgetView;
343
343
344 return widget_manager;
344 return widget_manager;
345 });
345 });
@@ -1,197 +1,197 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 // MultiContainerWidget
9 // MultiContainerWidget
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/widgets/base"], function(widget_manager){
17 define(["notebook/js/widgets/base"], function(widget_manager){
18 var MulticontainerModel = IPython.WidgetModel.extend({});
18 var MulticontainerModel = IPython.WidgetModel.extend({});
19 widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel);
19 widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel);
20
20
21 var AccordionView = IPython.WidgetView.extend({
21 var AccordionView = IPython.WidgetView.extend({
22
22
23 render: function(){
23 render: function(){
24 var guid = 'accordion' + IPython.utils.uuid();
24 var guid = 'accordion' + IPython.utils.uuid();
25 this.$el
25 this.$el
26 .attr('id', guid)
26 .attr('id', guid)
27 .addClass('accordion');
27 .addClass('accordion');
28 this.containers = [];
28 this.containers = [];
29 this.update_children([], this.model.get('children'));
29 this.update_children([], this.model.get('children'));
30 this.model.on('change:children', function(model, value, options) {
30 this.model.on('change:children', function(model, value, options) {
31 this.update_children(model.previous('children'), value);
31 this.update_children(model.previous('children'), value);
32 }, this);
32 }, this);
33 },
33 },
34
34
35 update_children: function(old_list, new_list) {
35 update_children: function(old_list, new_list) {
36 _.each(this.containers, function(element, index, list) {
36 _.each(this.containers, function(element, index, list) {
37 element.remove();
37 element.remove();
38 }, this);
38 }, this);
39 this.containers = [];
39 this.containers = [];
40 this.update_child_views(old_list, new_list);
40 this.update_child_views(old_list, new_list);
41 _.each(new_list, function(element, index, list) {
41 _.each(new_list, function(element, index, list) {
42 this.add_child_view(this.child_views[element]);
42 this.add_child_view(this.child_views[element]);
43 }, this)
43 }, this)
44 },
44 },
45
45
46
46
47 update: function() {
47 update: function() {
48 // Set tab titles
48 // Set tab titles
49 var titles = this.model.get('_titles');
49 var titles = this.model.get('_titles');
50 for (var page_index in titles) {
50 for (var page_index in titles) {
51
51
52 var accordian = this.containers[page_index];
52 var accordian = this.containers[page_index];
53 if (accordian !== undefined) {
53 if (accordian !== undefined) {
54 accordian
54 accordian
55 .find('.accordion-heading')
55 .find('.accordion-heading')
56 .find('.accordion-toggle')
56 .find('.accordion-toggle')
57 .html(titles[page_index]);
57 .html(titles[page_index]);
58 }
58 }
59 }
59 }
60
60
61 // Set selected page
61 // Set selected page
62 var selected_index = this.model.get("selected_index");
62 var selected_index = this.model.get("selected_index");
63 if (0 <= selected_index && selected_index < this.containers.length) {
63 if (0 <= selected_index && selected_index < this.containers.length) {
64 for (var index in this.containers) {
64 for (var index in this.containers) {
65 if (index==selected_index) {
65 if (index==selected_index) {
66 this.containers[index].find('.accordion-body').collapse('show');
66 this.containers[index].find('.accordion-body').collapse('show');
67 } else {
67 } else {
68 this.containers[index].find('.accordion-body').collapse('hide');
68 this.containers[index].find('.accordion-body').collapse('hide');
69 }
69 }
70
70
71 }
71 }
72 }
72 }
73
73
74 return IPython.WidgetView.prototype.update.call(this);
74 return IPython.WidgetView.prototype.update.call(this);
75 },
75 },
76
76
77 add_child_view: function(view) {
77 add_child_view: function(view) {
78
78
79 var index = this.containers.length;
79 var index = this.containers.length;
80 var uuid = IPython.utils.uuid();
80 var uuid = IPython.utils.uuid();
81 var accordion_group = $('<div />')
81 var accordion_group = $('<div />')
82 .addClass('accordion-group')
82 .addClass('accordion-group')
83 .appendTo(this.$el);
83 .appendTo(this.$el);
84 var accordion_heading = $('<div />')
84 var accordion_heading = $('<div />')
85 .addClass('accordion-heading')
85 .addClass('accordion-heading')
86 .appendTo(accordion_group);
86 .appendTo(accordion_group);
87 var that = this;
87 var that = this;
88 var accordion_toggle = $('<a />')
88 var accordion_toggle = $('<a />')
89 .addClass('accordion-toggle')
89 .addClass('accordion-toggle')
90 .attr('data-toggle', 'collapse')
90 .attr('data-toggle', 'collapse')
91 .attr('data-parent', '#' + this.$el.attr('id'))
91 .attr('data-parent', '#' + this.$el.attr('id'))
92 .attr('href', '#' + uuid)
92 .attr('href', '#' + uuid)
93 .click(function(evt){
93 .click(function(evt){
94 that.model.set("selected_index", index);
94 that.model.set("selected_index", index);
95 that.touch();
95 that.touch();
96 })
96 })
97 .html('Page ' + index)
97 .html('Page ' + index)
98 .appendTo(accordion_heading);
98 .appendTo(accordion_heading);
99 var accordion_body = $('<div />', {id: uuid})
99 var accordion_body = $('<div />', {id: uuid})
100 .addClass('accordion-body collapse')
100 .addClass('accordion-body collapse')
101 .appendTo(accordion_group);
101 .appendTo(accordion_group);
102 var accordion_inner = $('<div />')
102 var accordion_inner = $('<div />')
103 .addClass('accordion-inner')
103 .addClass('accordion-inner')
104 .appendTo(accordion_body);
104 .appendTo(accordion_body);
105 this.containers.push(accordion_group);
105 this.containers.push(accordion_group);
106 accordion_inner.append(view.$el);
106 accordion_inner.append(view.$el);
107
107
108 this.update();
108 this.update();
109
109
110 // Stupid workaround to close the bootstrap accordion tabs which
110 // Stupid workaround to close the bootstrap accordion tabs which
111 // open by default even though they don't have the `in` class
111 // open by default even though they don't have the `in` class
112 // attached to them. For some reason a delay is required.
112 // attached to them. For some reason a delay is required.
113 // TODO: Better fix.
113 // TODO: Better fix.
114 setTimeout(function(){ that.update(); }, 500);
114 setTimeout(function(){ that.update(); }, 500);
115 },
115 },
116 });
116 });
117
117
118 widget_manager.register_widget_view('AccordionView', AccordionView);
118 widget_manager.register_widget_view('AccordionView', AccordionView);
119
119
120 var TabView = IPython.WidgetView.extend({
120 var TabView = IPython.WidgetView.extend({
121
121
122 initialize: function() {
122 initialize: function() {
123 this.containers = [];
123 this.containers = [];
124 IPython.WidgetView.prototype.initialize.apply(this, arguments);
124 IPython.WidgetView.prototype.initialize.apply(this, arguments);
125 },
125 },
126
126
127 render: function(){
127 render: function(){
128 var uuid = 'tabs'+IPython.utils.uuid();
128 var uuid = 'tabs'+IPython.utils.uuid();
129 var that = this;
129 var that = this;
130 this.$tabs = $('<div />', {id: uuid})
130 this.$tabs = $('<div />', {id: uuid})
131 .addClass('nav')
131 .addClass('nav')
132 .addClass('nav-tabs')
132 .addClass('nav-tabs')
133 .appendTo(this.$el);
133 .appendTo(this.$el);
134 this.$tab_contents = $('<div />', {id: uuid + 'Content'})
134 this.$tab_contents = $('<div />', {id: uuid + 'Content'})
135 .addClass('tab-content')
135 .addClass('tab-content')
136 .appendTo(this.$el);
136 .appendTo(this.$el);
137 var children = this.model.get('children');
137 var children = this.model.get('children');
138 for (var i in children) {
138 for (var i in children) {
139 this.add_child_view(this.child_view(children[i]))
139 this.add_child_view(this.child_view(children[i]))
140 }
140 }
141 this.update();
141 this.update();
142 },
142 },
143
143
144 update: function() {
144 update: function() {
145 // Set tab titles
145 // Set tab titles
146 var titles = this.model.get('_titles');
146 var titles = this.model.get('_titles');
147 for (var page_index in titles) {
147 for (var page_index in titles) {
148 var tab_text = this.containers[page_index];
148 var tab_text = this.containers[page_index];
149 if (tab_text !== undefined) {
149 if (tab_text !== undefined) {
150 tab_text.html(titles[page_index]);
150 tab_text.html(titles[page_index]);
151 }
151 }
152 }
152 }
153
153
154 var selected_index = this.model.get('selected_index');
154 var selected_index = this.model.get('selected_index');
155 if (0 <= selected_index && selected_index < this.containers.length) {
155 if (0 <= selected_index && selected_index < this.containers.length) {
156 this.select_page(selected_index);
156 this.select_page(selected_index);
157 }
157 }
158
158
159 return IPython.WidgetView.prototype.update.call(this);
159 return IPython.WidgetView.prototype.update.call(this);
160 },
160 },
161
161
162 add_child_view: function(view) {
162 add_child_view: function(view) {
163 var index = this.containers.length;
163 var index = this.containers.length;
164 var uuid = IPython.utils.uuid();
164 var uuid = IPython.utils.uuid();
165
165
166 var that = this;
166 var that = this;
167 var tab = $('<li />')
167 var tab = $('<li />')
168 .css('list-style-type', 'none')
168 .css('list-style-type', 'none')
169 .appendTo(this.$tabs);
169 .appendTo(this.$tabs);
170 var tab_text = $('<a />')
170 var tab_text = $('<a />')
171 .attr('href', '#' + uuid)
171 .attr('href', '#' + uuid)
172 .attr('data-toggle', 'tab')
172 .attr('data-toggle', 'tab')
173 .html('Page ' + index)
173 .html('Page ' + index)
174 .appendTo(tab)
174 .appendTo(tab)
175 .click(function (e) {
175 .click(function (e) {
176 that.model.set("selected_index", index);
176 that.model.set("selected_index", index);
177 that.touch();
177 that.touch();
178 that.select_page(index);
178 that.select_page(index);
179 });
179 });
180 this.containers.push(tab_text);
180 this.containers.push(tab_text);
181
181
182 var contents_div = $('<div />', {id: uuid})
182 var contents_div = $('<div />', {id: uuid})
183 .addClass('tab-pane')
183 .addClass('tab-pane')
184 .addClass('fade')
184 .addClass('fade')
185 .append(view.$el)
185 .append(view.$el)
186 .appendTo(this.$tab_contents);
186 .appendTo(this.$tab_contents);
187 },
187 },
188
188
189 select_page: function(index) {
189 select_page: function(index) {
190 this.$tabs.find('li')
190 this.$tabs.find('li')
191 .removeClass('active');
191 .removeClass('active');
192 this.containers[index].tab('show');
192 this.containers[index].tab('show');
193 },
193 },
194 });
194 });
195
195
196 widget_manager.register_widget_view('TabView', TabView);
196 widget_manager.register_widget_view('TabView', TabView);
197 });
197 });
General Comments 0
You need to be logged in to leave comments. Login now