Show More
@@ -34,14 +34,12 b'' | |||||
34 |
|
34 | |||
35 | // Attach a comm manager to the |
|
35 | // Attach a comm manager to the | |
36 | this.comm_manager = comm_manager; |
|
36 | this.comm_manager = comm_manager; | |
|
37 | this._models = {}; /* Dictionary of model ids and model instances */ | |||
37 |
|
38 | |||
38 | // Register already-registered widget model types with the comm manager. |
|
39 | // Register already-registered widget model types with the comm manager. | |
39 |
|
|
40 | _.each(WidgetManager._model_types, function(value, key) { | |
40 | if (WidgetManager._model_types.hasOwnProperty(name)) { |
|
41 | this.comm_manager.register_target(value, $.proxy(this._handle_comm_open, this)); | |
41 | this.comm_manager.register_target(name, $.proxy(this._handle_comm_open, this)); |
|
42 | }); | |
42 |
|
||||
43 | } |
|
|||
44 | } |
|
|||
45 | }; |
|
43 | }; | |
46 |
|
44 | |||
47 | //-------------------------------------------------------------------- |
|
45 | //-------------------------------------------------------------------- | |
@@ -49,7 +47,6 b'' | |||||
49 | //-------------------------------------------------------------------- |
|
47 | //-------------------------------------------------------------------- | |
50 | WidgetManager._model_types = {}; /* Dictionary of model type names (target_name) and model types. */ |
|
48 | WidgetManager._model_types = {}; /* Dictionary of model type names (target_name) and model types. */ | |
51 | WidgetManager._view_types = {}; /* Dictionary of view names and view types. */ |
|
49 | WidgetManager._view_types = {}; /* Dictionary of view names and view types. */ | |
52 | WidgetManager._models = {}; /* Dictionary of model ids and model instances */ |
|
|||
53 | WidgetManager._managers = []; /* List of widget managers */ |
|
50 | WidgetManager._managers = []; /* List of widget managers */ | |
54 |
|
51 | |||
55 | WidgetManager.register_widget_model = function (model_name, model_type) { |
|
52 | WidgetManager.register_widget_model = function (model_name, model_type) { | |
@@ -58,12 +55,11 b'' | |||||
58 |
|
55 | |||
59 | // Register the widget with the comm manager. Make sure to pass this object's context |
|
56 | // Register the widget with the comm manager. Make sure to pass this object's context | |
60 | // in so `this` works in the call back. |
|
57 | // in so `this` works in the call back. | |
61 |
|
|
58 | _.each(WidgetManager._managers, function(instance, i) { | |
62 | var instance = WidgetManager._managers[i]; |
|
|||
63 | if (instance.comm_manager !== null) { |
|
59 | if (instance.comm_manager !== null) { | |
64 | instance.comm_manager.register_target(model_name, $.proxy(instance._handle_comm_open, instance)); |
|
60 | instance.comm_manager.register_target(model_name, $.proxy(instance._handle_comm_open, instance)); | |
65 | } |
|
61 | } | |
66 | } |
|
62 | }); | |
67 | }; |
|
63 | }; | |
68 |
|
64 | |||
69 | WidgetManager.register_widget_view = function (view_name, view_type) { |
|
65 | WidgetManager.register_widget_view = function (view_name, view_type) { | |
@@ -169,7 +165,7 b'' | |||||
169 | }; |
|
165 | }; | |
170 |
|
166 | |||
171 | WidgetManager.prototype.get_model = function (model_id) { |
|
167 | WidgetManager.prototype.get_model = function (model_id) { | |
172 |
var model = |
|
168 | var model = this._models[model_id]; | |
173 | if (model !== undefined && model.id == model_id) { |
|
169 | if (model !== undefined && model.id == model_id) { | |
174 | return model; |
|
170 | return model; | |
175 | } |
|
171 | } | |
@@ -180,7 +176,7 b'' | |||||
180 | var model_id = comm.comm_id; |
|
176 | var model_id = comm.comm_id; | |
181 | var widget_type_name = msg.content.target_name; |
|
177 | var widget_type_name = msg.content.target_name; | |
182 | var widget_model = new WidgetManager._model_types[widget_type_name](this, model_id, comm); |
|
178 | var widget_model = new WidgetManager._model_types[widget_type_name](this, model_id, comm); | |
183 |
|
|
179 | this._models[model_id] = widget_model; | |
184 | }; |
|
180 | }; | |
185 |
|
181 | |||
186 | IPython.WidgetManager = WidgetManager; |
|
182 | IPython.WidgetManager = WidgetManager; |
@@ -86,17 +86,14 b' function(WidgetManager, Underscore, Backbone){' | |||||
86 |
|
86 | |||
87 | apply_update: function (state) { |
|
87 | apply_update: function (state) { | |
88 | // Handle when a widget is updated via the python side. |
|
88 | // Handle when a widget is updated via the python side. | |
89 | for (var key in state) { |
|
89 | _.each(state, function(value, key) { | |
90 | if (state.hasOwnProperty(key)) { |
|
90 | this.key_value_lock = [key, value]; | |
91 | var value = state[key]; |
|
91 | try { | |
92 | this.key_value_lock = [key, value]; |
|
92 | this.set(key, this._unpack_models(value)); | |
93 |
|
|
93 | } finally { | |
94 |
|
|
94 | this.key_value_lock = null; | |
95 | } finally { |
|
|||
96 | this.key_value_lock = null; |
|
|||
97 | } |
|
|||
98 | } |
|
95 | } | |
99 | } |
|
96 | }); | |
100 | }, |
|
97 | }, | |
101 |
|
98 | |||
102 | _handle_status: function (msg, callbacks) { |
|
99 | _handle_status: function (msg, callbacks) { | |
@@ -205,9 +202,9 b' function(WidgetManager, Underscore, Backbone){' | |||||
205 | return value.id; |
|
202 | return value.id; | |
206 | } else if (value instanceof Object) { |
|
203 | } else if (value instanceof Object) { | |
207 | var packed = {}; |
|
204 | var packed = {}; | |
208 | for (var key in value) { |
|
205 | _.each(value, function(sub_value, key) { | |
209 |
packed[key] = this._pack_models(value |
|
206 | packed[key] = this._pack_models(sub_value); | |
210 | } |
|
207 | }); | |
211 | return packed; |
|
208 | return packed; | |
212 | } else { |
|
209 | } else { | |
213 | return value; |
|
210 | return value; | |
@@ -218,9 +215,9 b' function(WidgetManager, Underscore, Backbone){' | |||||
218 | // Replace model ids with models recursively. |
|
215 | // Replace model ids with models recursively. | |
219 | if (value instanceof Object) { |
|
216 | if (value instanceof Object) { | |
220 | var unpacked = {}; |
|
217 | var unpacked = {}; | |
221 | for (var key in value) { |
|
218 | _.each(value, function(sub_value, key) { | |
222 |
unpacked[key] = this._unpack_models(value |
|
219 | unpacked[key] = this._unpack_models(sub_value); | |
223 | } |
|
220 | }); | |
224 | return unpacked; |
|
221 | return unpacked; | |
225 | } else { |
|
222 | } else { | |
226 | var model = this.widget_manager.get_model(value); |
|
223 | var model = this.widget_manager.get_model(value); | |
@@ -369,20 +366,16 b' function(WidgetManager, Underscore, Backbone){' | |||||
369 |
|
366 | |||
370 | var css = this.model.get('_css'); |
|
367 | var css = this.model.get('_css'); | |
371 | if (css === undefined) {return;} |
|
368 | if (css === undefined) {return;} | |
372 | for (var selector in css) { |
|
369 | _.each(css, function(css_traits, selector){ | |
373 | if (css.hasOwnProperty(selector)) { |
|
370 | // Apply the css traits to all elements that match the selector. | |
374 | // Apply the css traits to all elements that match the selector. |
|
371 | var elements = this._get_selector_element(selector); | |
375 | var elements = this._get_selector_element(selector); |
|
372 | if (elements.length > 0) { | |
376 | if (elements.length > 0) { |
|
373 | _.each(css_traits, function(css_value, css_key){ | |
377 | var css_traits = css[selector]; |
|
374 | elements.css(css_key, css_value); | |
378 | for (var css_key in css_traits) { |
|
375 | }); | |
379 | if (css_traits.hasOwnProperty(css_key)) { |
|
|||
380 | elements.css(css_key, css_traits[css_key]); |
|
|||
381 | } |
|
|||
382 | } |
|
|||
383 | } |
|
|||
384 | } |
|
376 | } | |
385 | } |
|
377 | }); | |
|
378 | ||||
386 | }, |
|
379 | }, | |
387 |
|
380 | |||
388 | _get_selector_element: function (selector) { |
|
381 | _get_selector_element: function (selector) { |
@@ -50,12 +50,12 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
50 | // JQuery slider option keys. These keys happen to have a |
|
50 | // JQuery slider option keys. These keys happen to have a | |
51 | // one-to-one mapping with the corrosponding keys of the model. |
|
51 | // one-to-one mapping with the corrosponding keys of the model. | |
52 | var jquery_slider_keys = ['step', 'max', 'min', 'disabled']; |
|
52 | var jquery_slider_keys = ['step', 'max', 'min', 'disabled']; | |
53 |
|
|
53 | _.each(jquery_slider_keys, function(key, i) { | |
54 | var key = jquery_slider_keys[index]; |
|
54 | var model_value = this.model.get(key); | |
55 |
if ( |
|
55 | if (model_value !== undefined) { | |
56 |
this.$slider.slider("option", key, |
|
56 | this.$slider.slider("option", key, model_value); | |
57 | } |
|
57 | } | |
58 | } |
|
58 | }); | |
59 |
|
59 | |||
60 | // WORKAROUND FOR JQUERY SLIDER BUG. |
|
60 | // WORKAROUND FOR JQUERY SLIDER BUG. | |
61 | // The horizontal position of the slider handle |
|
61 | // The horizontal position of the slider handle |
@@ -49,12 +49,12 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
49 | // JQuery slider option keys. These keys happen to have a |
|
49 | // JQuery slider option keys. These keys happen to have a | |
50 | // one-to-one mapping with the corrosponding keys of the model. |
|
50 | // one-to-one mapping with the corrosponding keys of the model. | |
51 | var jquery_slider_keys = ['step', 'max', 'min', 'disabled']; |
|
51 | var jquery_slider_keys = ['step', 'max', 'min', 'disabled']; | |
52 |
|
|
52 | _.each(jquery_slider_keys, function(key, i) { | |
53 | var key = jquery_slider_keys[index]; |
|
53 | var model_value = this.model.get(key); | |
54 |
if ( |
|
54 | if (model_value !== undefined) { | |
55 |
this.$slider.slider("option", key, |
|
55 | this.$slider.slider("option", key, model_value); | |
56 | } |
|
56 | } | |
57 | } |
|
57 | }); | |
58 |
|
58 | |||
59 | // WORKAROUND FOR JQUERY SLIDER BUG. |
|
59 | // WORKAROUND FOR JQUERY SLIDER BUG. | |
60 | // The horizontal position of the slider handle |
|
60 | // The horizontal position of the slider handle |
@@ -67,13 +67,13 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
67 | var items = this.model.get('values'); |
|
67 | var items = this.model.get('values'); | |
68 | var $replace_droplist = $('<ul />') |
|
68 | var $replace_droplist = $('<ul />') | |
69 | .addClass('dropdown-menu'); |
|
69 | .addClass('dropdown-menu'); | |
70 | for (var index in items) { |
|
70 | _.each(items, function(item, i) { | |
71 | var that = this; |
|
|||
72 | var item_button = $('<a href="#"/>') |
|
71 | var item_button = $('<a href="#"/>') | |
73 |
.text(item |
|
72 | .text(item) | |
74 | .on('click', $.proxy(this.handle_click, this)); |
|
73 | .on('click', $.proxy(this.handle_click, this)); | |
75 | $replace_droplist.append($('<li />').append(item_button)); |
|
74 | $replace_droplist.append($('<li />').append(item_button)); | |
76 | } |
|
75 | }); | |
|
76 | ||||
77 | this.$droplist.replaceWith($replace_droplist); |
|
77 | this.$droplist.replaceWith($replace_droplist); | |
78 | this.$droplist.remove(); |
|
78 | this.$droplist.remove(); | |
79 | this.$droplist = $replace_droplist; |
|
79 | this.$droplist = $replace_droplist; | |
@@ -140,41 +140,41 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
140 | // Add missing items to the DOM. |
|
140 | // Add missing items to the DOM. | |
141 | var items = this.model.get('values'); |
|
141 | var items = this.model.get('values'); | |
142 | var disabled = this.model.get('disabled'); |
|
142 | var disabled = this.model.get('disabled'); | |
143 | for (var index in items) { |
|
143 | _.each(items, function(item, index) { | |
144 |
var item_query = ' :input[value="' + item |
|
144 | var item_query = ' :input[value="' + item + '"]'; | |
145 | if (this.$el.find(item_query).length === 0) { |
|
145 | if (this.$el.find(item_query).length === 0) { | |
146 | var $label = $('<label />') |
|
146 | var $label = $('<label />') | |
147 | .addClass('radio') |
|
147 | .addClass('radio') | |
148 |
.text(item |
|
148 | .text(item) | |
149 | .appendTo(this.$container); |
|
149 | .appendTo(this.$container); | |
150 |
|
150 | |||
151 | $('<input />') |
|
151 | $('<input />') | |
152 | .attr('type', 'radio') |
|
152 | .attr('type', 'radio') | |
153 | .addClass(this.model) |
|
153 | .addClass(this.model) | |
154 |
.val(item |
|
154 | .val(item) | |
155 | .prependTo($label) |
|
155 | .prependTo($label) | |
156 | .on('click', $.proxy(this.handle_click, this)); |
|
156 | .on('click', $.proxy(this.handle_click, this)); | |
157 | } |
|
157 | } | |
158 |
|
158 | |||
159 | var $item_element = this.$container.find(item_query); |
|
159 | var $item_element = this.$container.find(item_query); | |
160 |
if (this.model.get('value') == item |
|
160 | if (this.model.get('value') == item) { | |
161 | $item_element.prop('checked', true); |
|
161 | $item_element.prop('checked', true); | |
162 | } else { |
|
162 | } else { | |
163 | $item_element.prop('checked', false); |
|
163 | $item_element.prop('checked', false); | |
164 | } |
|
164 | } | |
165 | $item_element.prop('disabled', disabled); |
|
165 | $item_element.prop('disabled', disabled); | |
166 | } |
|
166 | }); | |
167 |
|
167 | |||
168 | // Remove items that no longer exist. |
|
168 | // Remove items that no longer exist. | |
169 | this.$container.find('input').each(function(i, obj) { |
|
169 | this.$container.find('input').each(function(i, obj) { | |
170 | var value = $(obj).val(); |
|
170 | var value = $(obj).val(); | |
171 | var found = false; |
|
171 | var found = false; | |
172 |
|
|
172 | _.each(items, function(item, index) { | |
173 |
if (item |
|
173 | if (item == value) { | |
174 | found = true; |
|
174 | found = true; | |
175 | break; |
|
175 | break; | |
176 | } |
|
176 | } | |
177 | } |
|
177 | }); | |
178 |
|
178 | |||
179 | if (!found) { |
|
179 | if (!found) { | |
180 | $(obj).parent().remove(); |
|
180 | $(obj).parent().remove(); | |
@@ -230,37 +230,37 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
230 | // Add missing items to the DOM. |
|
230 | // Add missing items to the DOM. | |
231 | var items = this.model.get('values'); |
|
231 | var items = this.model.get('values'); | |
232 | var disabled = this.model.get('disabled'); |
|
232 | var disabled = this.model.get('disabled'); | |
233 | for (var index in items) { |
|
233 | _.each(items, function(item, index) { | |
234 |
|
|
234 | var item_query = ' :contains("' + item + '")'; | |
235 | if (this.$buttongroup.find(item_query).length === 0) { |
|
235 | if (this.$buttongroup.find(item_query).length === 0) { | |
236 | $('<button />') |
|
236 | $('<button />') | |
237 | .attr('type', 'button') |
|
237 | .attr('type', 'button') | |
238 | .addClass('btn') |
|
238 | .addClass('btn') | |
239 |
.text(item |
|
239 | .text(item) | |
240 | .appendTo(this.$buttongroup) |
|
240 | .appendTo(this.$buttongroup) | |
241 | .on('click', $.proxy(this.handle_click, this)); |
|
241 | .on('click', $.proxy(this.handle_click, this)); | |
242 | } |
|
242 | } | |
243 |
|
243 | |||
244 | var $item_element = this.$buttongroup.find(item_query); |
|
244 | var $item_element = this.$buttongroup.find(item_query); | |
245 |
if (this.model.get('value') == item |
|
245 | if (this.model.get('value') == item) { | |
246 | $item_element.addClass('active'); |
|
246 | $item_element.addClass('active'); | |
247 | } else { |
|
247 | } else { | |
248 | $item_element.removeClass('active'); |
|
248 | $item_element.removeClass('active'); | |
249 | } |
|
249 | } | |
250 | $item_element.prop('disabled', disabled); |
|
250 | $item_element.prop('disabled', disabled); | |
251 | } |
|
251 | }); | |
252 |
|
252 | |||
253 | // Remove items that no longer exist. |
|
253 | // Remove items that no longer exist. | |
254 | this.$buttongroup.find('button').each(function(i, obj) { |
|
254 | this.$buttongroup.find('button').each(function(i, obj) { | |
255 | var value = $(obj).text(); |
|
255 | var value = $(obj).text(); | |
256 | var found = false; |
|
256 | var found = false; | |
257 |
|
|
257 | _.each(items, function(item, index) { | |
258 |
if (item |
|
258 | if (item == value) { | |
259 | found = true; |
|
259 | found = true; | |
260 | break; |
|
260 | break; | |
261 | } |
|
261 | } | |
262 | } |
|
262 | }); | |
263 |
|
263 | |||
264 | if (!found) { |
|
264 | if (!found) { | |
265 | $(obj).remove(); |
|
265 | $(obj).remove(); | |
266 | } |
|
266 | } | |
@@ -314,16 +314,16 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
314 | if (options === undefined || options.updated_view != this) { |
|
314 | if (options === undefined || options.updated_view != this) { | |
315 | // Add missing items to the DOM. |
|
315 | // Add missing items to the DOM. | |
316 | var items = this.model.get('values'); |
|
316 | var items = this.model.get('values'); | |
317 | for (var index in items) { |
|
317 | _.each(items, function(item, index) { | |
318 |
|
|
318 | var item_query = ' :contains("' + item + '")'; | |
319 | if (this.$listbox.find(item_query).length === 0) { |
|
319 | if (this.$listbox.find(item_query).length === 0) { | |
320 | $('<option />') |
|
320 | $('<option />') | |
321 |
.text(item |
|
321 | .text(item) | |
322 |
.attr('value', item |
|
322 | .attr('value', item) | |
323 | .appendTo(this.$listbox) |
|
323 | .appendTo(this.$listbox) | |
324 | .on('click', $.proxy(this.handle_click, this)); |
|
324 | .on('click', $.proxy(this.handle_click, this)); | |
325 | } |
|
325 | } | |
326 | } |
|
326 | }); | |
327 |
|
327 | |||
328 | // Select the correct element |
|
328 | // Select the correct element | |
329 | this.$listbox.val(this.model.get('value')); |
|
329 | this.$listbox.val(this.model.get('value')); | |
@@ -336,12 +336,12 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
336 | this.$listbox.find('option').each(function(i, obj) { |
|
336 | this.$listbox.find('option').each(function(i, obj) { | |
337 | var value = $(obj).text(); |
|
337 | var value = $(obj).text(); | |
338 | var found = false; |
|
338 | var found = false; | |
339 |
|
|
339 | _.each(items, function(item, index) { | |
340 |
if (item |
|
340 | if (item == value) { | |
341 | found = true; |
|
341 | found = true; | |
342 | break; |
|
342 | break; | |
343 | } |
|
343 | } | |
344 | } |
|
344 | }); | |
345 |
|
345 | |||
346 | if (!found) { |
|
346 | if (!found) { | |
347 | $(obj).remove(); |
|
347 | $(obj).remove(); |
@@ -39,28 +39,26 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
39 | if (options === undefined || options.updated_view != this) { |
|
39 | if (options === undefined || options.updated_view != this) { | |
40 | // Set tab titles |
|
40 | // Set tab titles | |
41 | var titles = this.model.get('_titles'); |
|
41 | var titles = this.model.get('_titles'); | |
42 |
|
|
42 | _.each(titles, function(title, page_index) { | |
43 |
|
||||
44 | var accordian = this.containers[page_index]; |
|
43 | var accordian = this.containers[page_index]; | |
45 | if (accordian !== undefined) { |
|
44 | if (accordian !== undefined) { | |
46 | accordian |
|
45 | accordian | |
47 | .find('.accordion-heading') |
|
46 | .find('.accordion-heading') | |
48 | .find('.accordion-toggle') |
|
47 | .find('.accordion-toggle') | |
49 |
.text(title |
|
48 | .text(title); | |
50 | } |
|
49 | } | |
51 | } |
|
50 | }); | |
52 |
|
51 | |||
53 | // Set selected page |
|
52 | // Set selected page | |
54 | var selected_index = this.model.get("selected_index"); |
|
53 | var selected_index = this.model.get("selected_index"); | |
55 | if (0 <= selected_index && selected_index < this.containers.length) { |
|
54 | if (0 <= selected_index && selected_index < this.containers.length) { | |
56 |
|
|
55 | _.each(this.containers, function(container, index) { | |
57 | if (index==selected_index) { |
|
56 | if (index==selected_index) { | |
58 |
|
|
57 | container.find('.accordion-body').collapse('show'); | |
59 | } else { |
|
58 | } else { | |
60 |
|
|
59 | container.find('.accordion-body').collapse('hide'); | |
61 | } |
|
60 | } | |
62 |
|
|
61 | }); | |
63 | } |
|
|||
64 | } |
|
62 | } | |
65 | } |
|
63 | } | |
66 | return AccordionView.__super__.update.apply(this); |
|
64 | return AccordionView.__super__.update.apply(this); | |
@@ -218,12 +216,12 b' define(["notebook/js/widgets/widget"], function(WidgetManager){' | |||||
218 | if (options === undefined || options.updated_view != this) { |
|
216 | if (options === undefined || options.updated_view != this) { | |
219 | // Set tab titles |
|
217 | // Set tab titles | |
220 | var titles = this.model.get('_titles'); |
|
218 | var titles = this.model.get('_titles'); | |
221 |
|
|
219 | _.each(titles, function(title, page_index) { | |
222 |
|
|
220 | var tab_text = this.containers[page_index]; | |
223 | if (tab_text !== undefined) { |
|
221 | if (tab_text !== undefined) { | |
224 |
tab_text.text(title |
|
222 | tab_text.text(title); | |
225 | } |
|
223 | } | |
226 | } |
|
224 | }); | |
227 |
|
225 | |||
228 | var selected_index = this.model.get('selected_index'); |
|
226 | var selected_index = this.model.get('selected_index'); | |
229 | if (0 <= selected_index && selected_index < this.containers.length) { |
|
227 | if (0 <= selected_index && selected_index < this.containers.length) { |
General Comments 0
You need to be logged in to leave comments.
Login now