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