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