##// END OF EJS Templates
Finished renaming Multicontainer to SelectionContainer
Jonathan Frederic -
Show More
@@ -1,349 +1,349 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 // Basic Widgets
9 // Basic Widgets
10 //============================================================================
10 //============================================================================
11
11
12 <<<<<<< HEAD
12 <<<<<<< HEAD
13 /**
13 /**
14 * @module IPython
14 * @module IPython
15 * @namespace IPython
15 * @namespace IPython
16 **/
16 **/
17
17
18 define(["notebook/js/widgetmanager",
18 define(["notebook/js/widgetmanager",
19 "underscore",
19 "underscore",
20 "backbone"],
20 "backbone"],
21 function(widget_manager, underscore, backbone){
21 function(widget_manager, underscore, backbone){
22
22
23 //--------------------------------------------------------------------
23 //--------------------------------------------------------------------
24 // WidgetModel class
24 // WidgetModel class
25 //--------------------------------------------------------------------
25 //--------------------------------------------------------------------
26 var WidgetModel = Backbone.Model.extend({
26 var WidgetModel = Backbone.Model.extend({
27 constructor: function (widget_manager, model_id, comm) {
27 constructor: function (widget_manager, model_id, comm) {
28 this.widget_manager = widget_manager;
28 this.widget_manager = widget_manager;
29 this.pending_msgs = 0;
29 this.pending_msgs = 0;
30 this.msg_throttle = 3;
30 this.msg_throttle = 3;
31 this.msg_buffer = null;
31 this.msg_buffer = null;
32 this.id = model_id;
32 this.id = model_id;
33 this.views = [];
33 this.views = [];
34
34
35 if (comm !== undefined) {
35 if (comm !== undefined) {
36 // Remember comm associated with the model.
36 // Remember comm associated with the model.
37 this.comm = comm;
37 this.comm = comm;
38 comm.model = this;
38 comm.model = this;
39
39
40 // Hook comm messages up to model.
40 // Hook comm messages up to model.
41 comm.on_close($.proxy(this._handle_comm_closed, this));
41 comm.on_close($.proxy(this._handle_comm_closed, this));
42 comm.on_msg($.proxy(this._handle_comm_msg, this));
42 comm.on_msg($.proxy(this._handle_comm_msg, this));
43 }
43 }
44 return Backbone.Model.apply(this);
44 return Backbone.Model.apply(this);
45 },
45 },
46
46
47 send: function (content, callbacks) {
47 send: function (content, callbacks) {
48 if (this.comm !== undefined) {
48 if (this.comm !== undefined) {
49 var data = {method: 'custom', custom_content: content};
49 var data = {method: 'custom', custom_content: content};
50 this.comm.send(data, callbacks);
50 this.comm.send(data, callbacks);
51 }
51 }
52 },
52 },
53
53
54 // Handle when a widget is closed.
54 // Handle when a widget is closed.
55 _handle_comm_closed: function (msg) {
55 _handle_comm_closed: function (msg) {
56 this.trigger('comm:close');
56 this.trigger('comm:close');
57 delete this.comm.model; // Delete ref so GC will collect widget model.
57 delete this.comm.model; // Delete ref so GC will collect widget model.
58 delete this.comm;
58 delete this.comm;
59 delete this.model_id; // Delete id from model so widget manager cleans up.
59 delete this.model_id; // Delete id from model so widget manager cleans up.
60 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
60 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
61 },
61 },
62
62
63
63
64 // Handle incoming comm msg.
64 // Handle incoming comm msg.
65 _handle_comm_msg: function (msg) {
65 _handle_comm_msg: function (msg) {
66 var method = msg.content.data.method;
66 var method = msg.content.data.method;
67 switch (method) {
67 switch (method) {
68 case 'update':
68 case 'update':
69 this.apply_update(msg.content.data.state);
69 this.apply_update(msg.content.data.state);
70 break;
70 break;
71 case 'custom':
71 case 'custom':
72 this.trigger('msg:custom', msg.content.data.custom_content);
72 this.trigger('msg:custom', msg.content.data.custom_content);
73 break;
73 break;
74 default:
74 default:
75 // pass on to widget manager
75 // pass on to widget manager
76 this.widget_manager.handle_msg(msg, this);
76 this.widget_manager.handle_msg(msg, this);
77 }
77 }
78 },
78 },
79
79
80
80
81 // Handle when a widget is updated via the python side.
81 // Handle when a widget is updated via the python side.
82 apply_update: function (state) {
82 apply_update: function (state) {
83 this.updating = true;
83 this.updating = true;
84 try {
84 try {
85 for (var key in state) {
85 for (var key in state) {
86 if (state.hasOwnProperty(key)) {
86 if (state.hasOwnProperty(key)) {
87 this.set(key, state[key]);
87 this.set(key, state[key]);
88 }
88 }
89 }
89 }
90 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
90 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
91 this.save();
91 this.save();
92 } finally {
92 } finally {
93 this.updating = false;
93 this.updating = false;
94 }
94 }
95 },
95 },
96
96
97
97
98 _handle_status: function (msg, callbacks) {
98 _handle_status: function (msg, callbacks) {
99 //execution_state : ('busy', 'idle', 'starting')
99 //execution_state : ('busy', 'idle', 'starting')
100 if (this.comm !== undefined && msg.content.execution_state ==='idle') {
100 if (this.comm !== undefined && msg.content.execution_state ==='idle') {
101 // Send buffer if this message caused another message to be
101 // Send buffer if this message caused another message to be
102 // throttled.
102 // throttled.
103 if (this.msg_buffer !== null &&
103 if (this.msg_buffer !== null &&
104 this.msg_throttle === this.pending_msgs) {
104 this.msg_throttle === this.pending_msgs) {
105 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
105 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
106 this.comm.send(data, callbacks);
106 this.comm.send(data, callbacks);
107 this.msg_buffer = null;
107 this.msg_buffer = null;
108 } else {
108 } else {
109 // Only decrease the pending message count if the buffer
109 // Only decrease the pending message count if the buffer
110 // doesn't get flushed (sent).
110 // doesn't get flushed (sent).
111 --this.pending_msgs;
111 --this.pending_msgs;
112 }
112 }
113 }
113 }
114 },
114 },
115
115
116
116
117 // Custom syncronization logic.
117 // Custom syncronization logic.
118 _handle_sync: function (method, options) {
118 _handle_sync: function (method, options) {
119 var model_json = this.toJSON();
119 var model_json = this.toJSON();
120 var attr;
120 var attr;
121
121
122 // Only send updated state if the state hasn't been changed
122 // Only send updated state if the state hasn't been changed
123 // during an update.
123 // during an update.
124 if (this.comm !== undefined) {
124 if (this.comm !== undefined) {
125 if (!this.updating) {
125 if (!this.updating) {
126 if (this.pending_msgs >= this.msg_throttle) {
126 if (this.pending_msgs >= this.msg_throttle) {
127 // The throttle has been exceeded, buffer the current msg so
127 // The throttle has been exceeded, buffer the current msg so
128 // it can be sent once the kernel has finished processing
128 // it can be sent once the kernel has finished processing
129 // some of the existing messages.
129 // some of the existing messages.
130 if (method=='patch') {
130 if (method=='patch') {
131 if (this.msg_buffer === null) {
131 if (this.msg_buffer === null) {
132 this.msg_buffer = $.extend({}, model_json); // Copy
132 this.msg_buffer = $.extend({}, model_json); // Copy
133 }
133 }
134 for (attr in options.attrs) {
134 for (attr in options.attrs) {
135 this.msg_buffer[attr] = options.attrs[attr];
135 this.msg_buffer[attr] = options.attrs[attr];
136 }
136 }
137 } else {
137 } else {
138 this.msg_buffer = $.extend({}, model_json); // Copy
138 this.msg_buffer = $.extend({}, model_json); // Copy
139 }
139 }
140
140
141 } else {
141 } else {
142 // We haven't exceeded the throttle, send the message like
142 // We haven't exceeded the throttle, send the message like
143 // normal. If this is a patch operation, just send the
143 // normal. If this is a patch operation, just send the
144 // changes.
144 // changes.
145 var send_json = model_json;
145 var send_json = model_json;
146 if (method =='patch') {
146 if (method =='patch') {
147 send_json = {};
147 send_json = {};
148 for (attr in options.attrs) {
148 for (attr in options.attrs) {
149 send_json[attr] = options.attrs[attr];
149 send_json[attr] = options.attrs[attr];
150 }
150 }
151 }
151 }
152
152
153 var data = {method: 'backbone', sync_data: send_json};
153 var data = {method: 'backbone', sync_data: send_json};
154 this.comm.send(data, options.callbacks);
154 this.comm.send(data, options.callbacks);
155 this.pending_msgs++;
155 this.pending_msgs++;
156 }
156 }
157 }
157 }
158 }
158 }
159
159
160 // Since the comm is a one-way communication, assume the message
160 // Since the comm is a one-way communication, assume the message
161 // arrived.
161 // arrived.
162 return model_json;
162 return model_json;
163 },
163 },
164
164
165 });
165 });
166
166
167
167
168 //--------------------------------------------------------------------
168 //--------------------------------------------------------------------
169 // WidgetView class
169 // WidgetView class
170 //--------------------------------------------------------------------
170 //--------------------------------------------------------------------
171 var BaseWidgetView = Backbone.View.extend({
171 var BaseWidgetView = Backbone.View.extend({
172 initialize: function(options) {
172 initialize: function(options) {
173 this.model.on('change',this.update,this);
173 this.model.on('change',this.update,this);
174 this.widget_manager = options.widget_manager;
174 this.widget_manager = options.widget_manager;
175 this.comm_manager = options.widget_manager.comm_manager;
175 this.comm_manager = options.widget_manager.comm_manager;
176 this.options = options.options;
176 this.options = options.options;
177 this.child_views = [];
177 this.child_views = [];
178 this.model.views.push(this);
178 this.model.views.push(this);
179 },
179 },
180
180
181 update: function(){
181 update: function(){
182 // update view to be consistent with this.model
182 // update view to be consistent with this.model
183 // triggered on model change
183 // triggered on model change
184 },
184 },
185
185
186 <<<<<<< HEAD
186 <<<<<<< HEAD
187 <<<<<<< HEAD
187 <<<<<<< HEAD
188 child_view: function(model_id, view_name) {
188 child_view: function(model_id, view_name) {
189 =======
189 =======
190 child_view: function(model_id, view_name, options) {
190 child_view: function(model_id, view_name, options) {
191 <<<<<<< HEAD
191 <<<<<<< HEAD
192 >>>>>>> s/comm_id/model_id (left over from before)
192 >>>>>>> s/comm_id/model_id (left over from before)
193 // create and return a child view, given a comm id for a model and (optionally) a view name
193 // create and return a child view, given a comm id for a model and (optionally) a view name
194 =======
194 =======
195 // create and return a child view, given a model id for a model and (optionally) a view name
195 // create and return a child view, given a model id for a model and (optionally) a view name
196 >>>>>>> Updated comm id comments in view to model id
196 >>>>>>> Updated comm id comments in view to model id
197 // if the view name is not given, it defaults to the model's default view attribute
197 // if the view name is not given, it defaults to the model's default view attribute
198 var child_model = this.widget_manager.get_model(model_id);
198 var child_model = this.widget_manager.get_model(model_id);
199 <<<<<<< HEAD
199 <<<<<<< HEAD
200 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell);
200 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell);
201 =======
201 =======
202 var child_view = this.widget_manager.create_view(child_model, view_name, options);
202 var child_view = this.widget_manager.create_view(child_model, view_name, options);
203 >>>>>>> Completely remove cell from model and view.
203 >>>>>>> Completely remove cell from model and view.
204 this.child_views[model_id] = child_view;
204 this.child_views[model_id] = child_view;
205 =======
205 =======
206 child_view: function(comm_id, view_name, options) {
206 child_view: function(comm_id, view_name, options) {
207 // create and return a child view, given a comm id for a model and (optionally) a view name
207 // create and return a child view, given a comm id for a model and (optionally) a view name
208 // if the view name is not given, it defaults to the model's default view attribute
208 // if the view name is not given, it defaults to the model's default view attribute
209 var child_model = this.comm_manager.comms[comm_id].model;
209 var child_model = this.comm_manager.comms[comm_id].model;
210 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell, options);
210 var child_view = this.widget_manager.create_view(child_model, view_name, this.cell, options);
211 this.child_views[comm_id] = child_view;
211 this.child_views[comm_id] = child_view;
212 >>>>>>> Add widget view options in creating child views
212 >>>>>>> Add widget view options in creating child views
213 return child_view;
213 return child_view;
214 },
214 },
215
215
216 update_child_views: function(old_list, new_list) {
216 update_child_views: function(old_list, new_list) {
217 // this function takes an old list and new list of model ids
217 // this function takes an old list and new list of model ids
218 // views in child_views that correspond to deleted ids are deleted
218 // views in child_views that correspond to deleted ids are deleted
219 // views corresponding to added ids are added child_views
219 // views corresponding to added ids are added child_views
220
220
221 // delete old views
221 // delete old views
222 _.each(_.difference(old_list, new_list), function(element, index, list) {
222 _.each(_.difference(old_list, new_list), function(element, index, list) {
223 var view = this.child_views[element];
223 var view = this.child_views[element];
224 delete this.child_views[element];
224 delete this.child_views[element];
225 view.remove();
225 view.remove();
226 }, this);
226 }, this);
227
227
228 // add new views
228 // add new views
229 _.each(_.difference(new_list, old_list), function(element, index, list) {
229 _.each(_.difference(new_list, old_list), function(element, index, list) {
230 // this function adds the view to the child_views dictionary
230 // this function adds the view to the child_views dictionary
231 this.child_view(element);
231 this.child_view(element);
232 }, this);
232 }, this);
233 },
233 },
234
234
235 callbacks: function(){
235 callbacks: function(){
236 return this.widget_manager.callbacks(this);
236 return this.widget_manager.callbacks(this);
237 }
237 }
238
238
239 render: function(){
239 render: function(){
240 // render the view. By default, this is only called the first time the view is created
240 // render the view. By default, this is only called the first time the view is created
241 },
241 },
242 send: function (content) {
242 send: function (content) {
243 this.model.send(content, this.callbacks());
243 this.model.send(content, this.callbacks());
244 },
244 },
245
245
246 touch: function () {
246 touch: function () {
247 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.callbacks()});
247 this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.callbacks()});
248 },
248 },
249
249
250 });
250 });
251
251
252 var WidgetView = BaseWidgetView.extend({
252 var WidgetView = BaseWidgetView.extend({
253 initialize: function (options) {
253 initialize: function (options) {
254 // TODO: make changes more granular (e.g., trigger on visible:change)
254 // TODO: make changes more granular (e.g., trigger on visible:change)
255 this.model.on('change', this.update, this);
255 this.model.on('change', this.update, this);
256 this.model.on('msg:custom', this.on_msg, this);
256 this.model.on('msg:custom', this.on_msg, this);
257 BaseWidgetView.prototype.initialize.apply(this, arguments);
257 BaseWidgetView.prototype.initialize.apply(this, arguments);
258 },
258 },
259
259
260 on_msg: function(msg) {
260 on_msg: function(msg) {
261 switch(msg.msg_type) {
261 switch(msg.msg_type) {
262 case 'add_class':
262 case 'add_class':
263 this.add_class(msg.selector, msg.class_list);
263 this.add_class(msg.selector, msg.class_list);
264 break;
264 break;
265 case 'remove_class':
265 case 'remove_class':
266 this.remove_class(msg.selector, msg.class_list);
266 this.remove_class(msg.selector, msg.class_list);
267 break;
267 break;
268 }
268 }
269 },
269 },
270
270
271 add_class: function (selector, class_list) {
271 add_class: function (selector, class_list) {
272 var elements = this._get_selector_element(selector);
272 var elements = this._get_selector_element(selector);
273 if (elements.length > 0) {
273 if (elements.length > 0) {
274 elements.addClass(class_list);
274 elements.addClass(class_list);
275 }
275 }
276 },
276 },
277
277
278 remove_class: function (selector, class_list) {
278 remove_class: function (selector, class_list) {
279 var elements = this._get_selector_element(selector);
279 var elements = this._get_selector_element(selector);
280 if (elements.length > 0) {
280 if (elements.length > 0) {
281 elements.removeClass(class_list);
281 elements.removeClass(class_list);
282 }
282 }
283 },
283 },
284
284
285 update: function () {
285 update: function () {
286 // the very first update seems to happen before the element is finished rendering
286 // the very first update seems to happen before the element is finished rendering
287 // so we use setTimeout to give the element time to render
287 // so we use setTimeout to give the element time to render
288 var e = this.$el;
288 var e = this.$el;
289 var visible = this.model.get('visible');
289 var visible = this.model.get('visible');
290 setTimeout(function() {e.toggle(visible)},0);
290 setTimeout(function() {e.toggle(visible)},0);
291
291
292 var css = this.model.get('_css');
292 var css = this.model.get('_css');
293 if (css === undefined) {return;}
293 if (css === undefined) {return;}
294 for (var selector in css) {
294 for (var selector in css) {
295 if (css.hasOwnProperty(selector)) {
295 if (css.hasOwnProperty(selector)) {
296 // Apply the css traits to all elements that match the selector.
296 // Apply the css traits to all elements that match the selector.
297 var elements = this._get_selector_element(selector);
297 var elements = this._get_selector_element(selector);
298 if (elements.length > 0) {
298 if (elements.length > 0) {
299 var css_traits = css[selector];
299 var css_traits = css[selector];
300 for (var css_key in css_traits) {
300 for (var css_key in css_traits) {
301 if (css_traits.hasOwnProperty(css_key)) {
301 if (css_traits.hasOwnProperty(css_key)) {
302 elements.css(css_key, css_traits[css_key]);
302 elements.css(css_key, css_traits[css_key]);
303 }
303 }
304 }
304 }
305 }
305 }
306 }
306 }
307 }
307 }
308 },
308 },
309
309
310 _get_selector_element: function (selector) {
310 _get_selector_element: function (selector) {
311 // Get the elements via the css selector. If the selector is
311 // Get the elements via the css selector. If the selector is
312 // blank, apply the style to the $el_to_style element. If
312 // blank, apply the style to the $el_to_style element. If
313 // the $el_to_style element is not defined, use apply the
313 // the $el_to_style element is not defined, use apply the
314 // style to the view's element.
314 // style to the view's element.
315 var elements;
315 var elements;
316 if (selector === undefined || selector === null || selector === '') {
316 if (selector === undefined || selector === null || selector === '') {
317 if (this.$el_to_style === undefined) {
317 if (this.$el_to_style === undefined) {
318 elements = this.$el;
318 elements = this.$el;
319 } else {
319 } else {
320 elements = this.$el_to_style;
320 elements = this.$el_to_style;
321 }
321 }
322 } else {
322 } else {
323 elements = this.$el.find(selector);
323 elements = this.$el.find(selector);
324 }
324 }
325 return elements;
325 return elements;
326 },
326 },
327 });
327 });
328
328
329 IPython.WidgetModel = WidgetModel;
329 IPython.WidgetModel = WidgetModel;
330 IPython.WidgetView = WidgetView;
330 IPython.WidgetView = WidgetView;
331 IPython.BaseWidgetView = BaseWidgetView;
331 IPython.BaseWidgetView = BaseWidgetView;
332
332
333 return widget_manager;
333 return widget_manager;
334 });
334 });
335 =======
335 =======
336 define([
336 define([
337 "notebook/js/widgets/widget_bool",
337 "notebook/js/widgets/widget_bool",
338 "notebook/js/widgets/widget_button",
338 "notebook/js/widgets/widget_button",
339 "notebook/js/widgets/widget_container",
339 "notebook/js/widgets/widget_container",
340 "notebook/js/widgets/widget_float",
340 "notebook/js/widgets/widget_float",
341 "notebook/js/widgets/widget_float_range",
341 "notebook/js/widgets/widget_float_range",
342 "notebook/js/widgets/widget_image",
342 "notebook/js/widgets/widget_image",
343 "notebook/js/widgets/widget_int",
343 "notebook/js/widgets/widget_int",
344 "notebook/js/widgets/widget_int_range",
344 "notebook/js/widgets/widget_int_range",
345 "notebook/js/widgets/widget_multicontainer",
346 "notebook/js/widgets/widget_selection",
345 "notebook/js/widgets/widget_selection",
346 "notebook/js/widgets/widget_selectioncontainer",
347 "notebook/js/widgets/widget_string",
347 "notebook/js/widgets/widget_string",
348 ], function(){ return true; });
348 ], function(){ return true; });
349 >>>>>>> renamed: basic_widgets.js -> init.js
349 >>>>>>> renamed: basic_widgets.js -> init.js
@@ -1,225 +1,225 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 // SelectionContainerWidget
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/widget"], function(widget_manager){
17 define(["notebook/js/widgets/widget"], function(widget_manager){
18 var MulticontainerModel = IPython.WidgetModel.extend({});
18 var SelectionContainerModel = IPython.WidgetModel.extend({});
19 widget_manager.register_widget_model('MulticontainerWidgetModel', MulticontainerModel);
19 widget_manager.register_widget_model('SelectionContainerWidgetModel', SelectionContainerModel);
20
20
21 var AccordionView = IPython.DOMWidgetView.extend({
21 var AccordionView = IPython.DOMWidgetView.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(options) {
47 update: function(options) {
48 // Update the contents of this view
48 // Update the contents of this view
49 //
49 //
50 // Called when the model is changed. The model may have been
50 // Called when the model is changed. The model may have been
51 // changed by another view or by a state update from the back-end.
51 // changed by another view or by a state update from the back-end.
52
52
53 if (options === undefined || options.updated_view != this) {
53 if (options === undefined || options.updated_view != this) {
54 // Set tab titles
54 // Set tab titles
55 var titles = this.model.get('_titles');
55 var titles = this.model.get('_titles');
56 for (var page_index in titles) {
56 for (var page_index in titles) {
57
57
58 var accordian = this.containers[page_index];
58 var accordian = this.containers[page_index];
59 if (accordian !== undefined) {
59 if (accordian !== undefined) {
60 accordian
60 accordian
61 .find('.accordion-heading')
61 .find('.accordion-heading')
62 .find('.accordion-toggle')
62 .find('.accordion-toggle')
63 .html(titles[page_index]);
63 .html(titles[page_index]);
64 }
64 }
65 }
65 }
66
66
67 // Set selected page
67 // Set selected page
68 var selected_index = this.model.get("selected_index");
68 var selected_index = this.model.get("selected_index");
69 if (0 <= selected_index && selected_index < this.containers.length) {
69 if (0 <= selected_index && selected_index < this.containers.length) {
70 for (var index in this.containers) {
70 for (var index in this.containers) {
71 if (index==selected_index) {
71 if (index==selected_index) {
72 this.containers[index].find('.accordion-body').collapse('show');
72 this.containers[index].find('.accordion-body').collapse('show');
73 } else {
73 } else {
74 this.containers[index].find('.accordion-body').collapse('hide');
74 this.containers[index].find('.accordion-body').collapse('hide');
75 }
75 }
76
76
77 }
77 }
78 }
78 }
79 }
79 }
80 return IPython.DOMWidgetView.prototype.update.call(this);
80 return IPython.DOMWidgetView.prototype.update.call(this);
81 },
81 },
82
82
83 add_child_view: function(view) {
83 add_child_view: function(view) {
84
84
85 var index = this.containers.length;
85 var index = this.containers.length;
86 var uuid = IPython.utils.uuid();
86 var uuid = IPython.utils.uuid();
87 var accordion_group = $('<div />')
87 var accordion_group = $('<div />')
88 .addClass('accordion-group')
88 .addClass('accordion-group')
89 .appendTo(this.$el);
89 .appendTo(this.$el);
90 var accordion_heading = $('<div />')
90 var accordion_heading = $('<div />')
91 .addClass('accordion-heading')
91 .addClass('accordion-heading')
92 .appendTo(accordion_group);
92 .appendTo(accordion_group);
93 var that = this;
93 var that = this;
94 var accordion_toggle = $('<a />')
94 var accordion_toggle = $('<a />')
95 .addClass('accordion-toggle')
95 .addClass('accordion-toggle')
96 .attr('data-toggle', 'collapse')
96 .attr('data-toggle', 'collapse')
97 .attr('data-parent', '#' + this.$el.attr('id'))
97 .attr('data-parent', '#' + this.$el.attr('id'))
98 .attr('href', '#' + uuid)
98 .attr('href', '#' + uuid)
99 .click(function(evt){
99 .click(function(evt){
100
100
101 // Calling model.set will trigger all of the other views of the
101 // Calling model.set will trigger all of the other views of the
102 // model to update.
102 // model to update.
103 that.model.set("selected_index", index, {updated_view: this});
103 that.model.set("selected_index", index, {updated_view: this});
104 that.touch();
104 that.touch();
105 })
105 })
106 .html('Page ' + index)
106 .html('Page ' + index)
107 .appendTo(accordion_heading);
107 .appendTo(accordion_heading);
108 var accordion_body = $('<div />', {id: uuid})
108 var accordion_body = $('<div />', {id: uuid})
109 .addClass('accordion-body collapse')
109 .addClass('accordion-body collapse')
110 .appendTo(accordion_group);
110 .appendTo(accordion_group);
111 var accordion_inner = $('<div />')
111 var accordion_inner = $('<div />')
112 .addClass('accordion-inner')
112 .addClass('accordion-inner')
113 .appendTo(accordion_body);
113 .appendTo(accordion_body);
114 this.containers.push(accordion_group);
114 this.containers.push(accordion_group);
115 accordion_inner.append(view.$el);
115 accordion_inner.append(view.$el);
116
116
117 this.update();
117 this.update();
118
118
119 // Stupid workaround to close the bootstrap accordion tabs which
119 // Stupid workaround to close the bootstrap accordion tabs which
120 // open by default even though they don't have the `in` class
120 // open by default even though they don't have the `in` class
121 // attached to them. For some reason a delay is required.
121 // attached to them. For some reason a delay is required.
122 // TODO: Better fix.
122 // TODO: Better fix.
123 setTimeout(function(){ that.update(); }, 500);
123 setTimeout(function(){ that.update(); }, 500);
124 },
124 },
125 });
125 });
126
126
127 widget_manager.register_widget_view('AccordionView', AccordionView);
127 widget_manager.register_widget_view('AccordionView', AccordionView);
128
128
129 var TabView = IPython.DOMWidgetView.extend({
129 var TabView = IPython.DOMWidgetView.extend({
130
130
131 initialize: function() {
131 initialize: function() {
132 this.containers = [];
132 this.containers = [];
133 IPython.DOMWidgetView.prototype.initialize.apply(this, arguments);
133 IPython.DOMWidgetView.prototype.initialize.apply(this, arguments);
134 },
134 },
135
135
136 render: function(){
136 render: function(){
137 var uuid = 'tabs'+IPython.utils.uuid();
137 var uuid = 'tabs'+IPython.utils.uuid();
138 var that = this;
138 var that = this;
139 this.$tabs = $('<div />', {id: uuid})
139 this.$tabs = $('<div />', {id: uuid})
140 .addClass('nav')
140 .addClass('nav')
141 .addClass('nav-tabs')
141 .addClass('nav-tabs')
142 .appendTo(this.$el);
142 .appendTo(this.$el);
143 this.$tab_contents = $('<div />', {id: uuid + 'Content'})
143 this.$tab_contents = $('<div />', {id: uuid + 'Content'})
144 .addClass('tab-content')
144 .addClass('tab-content')
145 .appendTo(this.$el);
145 .appendTo(this.$el);
146 this.containers = [];
146 this.containers = [];
147 this.update_children([], this.model.get('children'));
147 this.update_children([], this.model.get('children'));
148 this.model.on('change:children', function(model, value, options) {
148 this.model.on('change:children', function(model, value, options) {
149 this.update_children(model.previous('children'), value);
149 this.update_children(model.previous('children'), value);
150 }, this);
150 }, this);
151 },
151 },
152
152
153 update_children: function(old_list, new_list) {
153 update_children: function(old_list, new_list) {
154 _.each(this.containers, function(element, index, list) {
154 _.each(this.containers, function(element, index, list) {
155 element.remove();
155 element.remove();
156 }, this);
156 }, this);
157 this.containers = [];
157 this.containers = [];
158 this.update_child_views(old_list, new_list);
158 this.update_child_views(old_list, new_list);
159 _.each(new_list, function(element, index, list) {
159 _.each(new_list, function(element, index, list) {
160 this.add_child_view(this.child_views[element]);
160 this.add_child_view(this.child_views[element]);
161 }, this)
161 }, this)
162 },
162 },
163
163
164 update: function(options) {
164 update: function(options) {
165 // Update the contents of this view
165 // Update the contents of this view
166 //
166 //
167 // Called when the model is changed. The model may have been
167 // Called when the model is changed. The model may have been
168 // changed by another view or by a state update from the back-end.
168 // changed by another view or by a state update from the back-end.
169 if (options === undefined || options.updated_view != this) {
169 if (options === undefined || options.updated_view != this) {
170 // Set tab titles
170 // Set tab titles
171 var titles = this.model.get('_titles');
171 var titles = this.model.get('_titles');
172 for (var page_index in titles) {
172 for (var page_index in titles) {
173 var tab_text = this.containers[page_index];
173 var tab_text = this.containers[page_index];
174 if (tab_text !== undefined) {
174 if (tab_text !== undefined) {
175 tab_text.html(titles[page_index]);
175 tab_text.html(titles[page_index]);
176 }
176 }
177 }
177 }
178
178
179 var selected_index = this.model.get('selected_index');
179 var selected_index = this.model.get('selected_index');
180 if (0 <= selected_index && selected_index < this.containers.length) {
180 if (0 <= selected_index && selected_index < this.containers.length) {
181 this.select_page(selected_index);
181 this.select_page(selected_index);
182 }
182 }
183 }
183 }
184 return IPython.DOMWidgetView.prototype.update.call(this);
184 return IPython.DOMWidgetView.prototype.update.call(this);
185 },
185 },
186
186
187 add_child_view: function(view) {
187 add_child_view: function(view) {
188 var index = this.containers.length;
188 var index = this.containers.length;
189 var uuid = IPython.utils.uuid();
189 var uuid = IPython.utils.uuid();
190
190
191 var that = this;
191 var that = this;
192 var tab = $('<li />')
192 var tab = $('<li />')
193 .css('list-style-type', 'none')
193 .css('list-style-type', 'none')
194 .appendTo(this.$tabs);
194 .appendTo(this.$tabs);
195 var tab_text = $('<a />')
195 var tab_text = $('<a />')
196 .attr('href', '#' + uuid)
196 .attr('href', '#' + uuid)
197 .attr('data-toggle', 'tab')
197 .attr('data-toggle', 'tab')
198 .html('Page ' + index)
198 .html('Page ' + index)
199 .appendTo(tab)
199 .appendTo(tab)
200 .click(function (e) {
200 .click(function (e) {
201
201
202 // Calling model.set will trigger all of the other views of the
202 // Calling model.set will trigger all of the other views of the
203 // model to update.
203 // model to update.
204 that.model.set("selected_index", index, {updated_view: this});
204 that.model.set("selected_index", index, {updated_view: this});
205 that.touch();
205 that.touch();
206 that.select_page(index);
206 that.select_page(index);
207 });
207 });
208 this.containers.push(tab_text);
208 this.containers.push(tab_text);
209
209
210 var contents_div = $('<div />', {id: uuid})
210 var contents_div = $('<div />', {id: uuid})
211 .addClass('tab-pane')
211 .addClass('tab-pane')
212 .addClass('fade')
212 .addClass('fade')
213 .append(view.$el)
213 .append(view.$el)
214 .appendTo(this.$tab_contents);
214 .appendTo(this.$tab_contents);
215 },
215 },
216
216
217 select_page: function(index) {
217 select_page: function(index) {
218 this.$tabs.find('li')
218 this.$tabs.find('li')
219 .removeClass('active');
219 .removeClass('active');
220 this.containers[index].tab('show');
220 this.containers[index].tab('show');
221 },
221 },
222 });
222 });
223
223
224 widget_manager.register_widget_view('TabView', TabView);
224 widget_manager.register_widget_view('TabView', TabView);
225 });
225 });
@@ -1,13 +1,13 b''
1 from .widget import Widget, DOMWidget
1 from .widget import Widget, DOMWidget
2
2
3 from .widget_bool import BoolWidget
3 from .widget_bool import BoolWidget
4 from .widget_button import ButtonWidget
4 from .widget_button import ButtonWidget
5 from .widget_container import ContainerWidget
5 from .widget_container import ContainerWidget
6 from .widget_float import FloatWidget
6 from .widget_float import FloatWidget
7 from .widget_float_range import FloatRangeWidget
7 from .widget_float_range import FloatRangeWidget
8 from .widget_image import ImageWidget
8 from .widget_image import ImageWidget
9 from .widget_int import IntWidget
9 from .widget_int import IntWidget
10 from .widget_int_range import IntRangeWidget
10 from .widget_int_range import IntRangeWidget
11 from .widget_multicontainer import MulticontainerWidget
12 from .widget_selection import SelectionWidget
11 from .widget_selection import SelectionWidget
12 from .widget_selectioncontainer import SelectionContainerWidget
13 from .widget_string import StringWidget
13 from .widget_string import StringWidget
@@ -1,58 +1,58 b''
1 """MulticontainerWidget class.
1 """SelectionContainerWidget class.
2
2
3 Represents a multipage container that can be used to group other widgets into
3 Represents a multipage container that can be used to group other widgets into
4 pages.
4 pages.
5 """
5 """
6 #-----------------------------------------------------------------------------
6 #-----------------------------------------------------------------------------
7 # Copyright (c) 2013, the IPython Development Team.
7 # Copyright (c) 2013, the IPython Development Team.
8 #
8 #
9 # Distributed under the terms of the Modified BSD License.
9 # Distributed under the terms of the Modified BSD License.
10 #
10 #
11 # The full license is in the file COPYING.txt, distributed with this software.
11 # The full license is in the file COPYING.txt, distributed with this software.
12 #-----------------------------------------------------------------------------
12 #-----------------------------------------------------------------------------
13
13
14 #-----------------------------------------------------------------------------
14 #-----------------------------------------------------------------------------
15 # Imports
15 # Imports
16 #-----------------------------------------------------------------------------
16 #-----------------------------------------------------------------------------
17 from .widget import DOMWidget
17 from .widget import DOMWidget
18 from IPython.utils.traitlets import Unicode, Dict, Int, List, Instance
18 from IPython.utils.traitlets import Unicode, Dict, Int, List, Instance
19
19
20 #-----------------------------------------------------------------------------
20 #-----------------------------------------------------------------------------
21 # Classes
21 # Classes
22 #-----------------------------------------------------------------------------
22 #-----------------------------------------------------------------------------
23 class MulticontainerWidget(DOMWidget):
23 class SelectionContainerWidget(DOMWidget):
24 target_name = Unicode('MulticontainerWidgetModel')
24 target_name = Unicode('SelectionContainerWidgetModel')
25 view_name = Unicode('TabView')
25 view_name = Unicode('TabView')
26
26
27 # Keys
27 # Keys
28 keys = ['_titles', 'selected_index', 'children'] + DOMWidget.keys
28 keys = ['_titles', 'selected_index', 'children'] + DOMWidget.keys
29 _titles = Dict(help="Titles of the pages")
29 _titles = Dict(help="Titles of the pages")
30 selected_index = Int(0)
30 selected_index = Int(0)
31
31
32 children = List(Instance(DOMWidget))
32 children = List(Instance(DOMWidget))
33
33
34 # Public methods
34 # Public methods
35 def set_title(self, index, title):
35 def set_title(self, index, title):
36 """Sets the title of a container page
36 """Sets the title of a container page
37
37
38 Parameters
38 Parameters
39 ----------
39 ----------
40 index : int
40 index : int
41 Index of the container page
41 Index of the container page
42 title : unicode
42 title : unicode
43 New title"""
43 New title"""
44 self._titles[index] = title
44 self._titles[index] = title
45 self.send_state('_titles')
45 self.send_state('_titles')
46
46
47
47
48 def get_title(self, index):
48 def get_title(self, index):
49 """Gets the title of a container pages
49 """Gets the title of a container pages
50
50
51 Parameters
51 Parameters
52 ----------
52 ----------
53 index : int
53 index : int
54 Index of the container page"""
54 Index of the container page"""
55 if index in self._titles:
55 if index in self._titles:
56 return self._titles[index]
56 return self._titles[index]
57 else:
57 else:
58 return None
58 return None
General Comments 0
You need to be logged in to leave comments. Login now