Show More
@@ -503,15 +503,54 b' define(["widgets/js/manager",' | |||||
503 | } |
|
503 | } | |
504 | }, |
|
504 | }, | |
505 |
|
505 | |||
506 | update_classes: function (old_classes, new_classes) { |
|
506 | update_classes: function (old_classes, new_classes, $el) { | |
507 |
// Update the DOM classes applied to |
|
507 | // Update the DOM classes applied to an element, default to this.$el. | |
|
508 | if ($el===undefined) { | |||
|
509 | $el = this.$el; | |||
|
510 | } | |||
508 | this.do_diff(old_classes, new_classes, function(removed) { |
|
511 | this.do_diff(old_classes, new_classes, function(removed) { | |
509 |
|
|
512 | $el.removeClass(removed); | |
510 | }, function(added) { |
|
513 | }, function(added) { | |
511 |
|
|
514 | $el.addClass(added); | |
512 | }); |
|
515 | }); | |
513 | }, |
|
516 | }, | |
514 |
|
517 | |||
|
518 | update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) { | |||
|
519 | // Update the DOM classes applied to the widget based on a single | |||
|
520 | // trait's value. | |||
|
521 | // | |||
|
522 | // Given a trait value classes map, this function automatically | |||
|
523 | // handles applying the appropriate classes to the widget element | |||
|
524 | // and removing classes that are no longer valid. | |||
|
525 | // | |||
|
526 | // Parameters | |||
|
527 | // ---------- | |||
|
528 | // class_map: dictionary | |||
|
529 | // Dictionary of trait values to class lists. | |||
|
530 | // Example: | |||
|
531 | // { | |||
|
532 | // success: ['alert', 'alert-success'], | |||
|
533 | // info: ['alert', 'alert-info'], | |||
|
534 | // warning: ['alert', 'alert-warning'], | |||
|
535 | // danger: ['alert', 'alert-danger'] | |||
|
536 | // }; | |||
|
537 | // trait_name: string | |||
|
538 | // Name of the trait to check the value of. | |||
|
539 | // previous_trait_value: optional string, default '' | |||
|
540 | // Last trait value | |||
|
541 | // $el: optional jQuery element handle, defaults to this.$el | |||
|
542 | // Element that the classes are applied to. | |||
|
543 | var key = previous_trait_value; | |||
|
544 | if (key === undefined) { | |||
|
545 | key = this.model.previous(trait_name); | |||
|
546 | } | |||
|
547 | var old_classes = class_map[key] ? class_map[key] : []; | |||
|
548 | key = this.model.get(trait_name); | |||
|
549 | var new_classes = class_map[key] ? class_map[key] : []; | |||
|
550 | ||||
|
551 | this.update_classes(old_classes, new_classes, $el || this.$el); | |||
|
552 | }, | |||
|
553 | ||||
515 | _get_selector_element: function (selector) { |
|
554 | _get_selector_element: function (selector) { | |
516 | // Get the elements via the css selector. |
|
555 | // Get the elements via the css selector. | |
517 | var elements; |
|
556 | var elements; |
@@ -77,8 +77,24 b' define([' | |||||
77 | that.handle_click(); |
|
77 | that.handle_click(); | |
78 | })); |
|
78 | })); | |
79 |
|
79 | |||
|
80 | this.model.on('change:button_style', function(model, value) { | |||
|
81 | this.update_button_style(); | |||
|
82 | }, this); | |||
|
83 | this.update_button_style(''); | |||
|
84 | ||||
80 | this.update(); // Set defaults. |
|
85 | this.update(); // Set defaults. | |
81 | }, |
|
86 | }, | |
|
87 | ||||
|
88 | update_button_style: function(previous_trait_value) { | |||
|
89 | var class_map = { | |||
|
90 | primary: ['btn-primary'], | |||
|
91 | success: ['btn-success'], | |||
|
92 | info: ['btn-info'], | |||
|
93 | warning: ['btn-warning'], | |||
|
94 | danger: ['btn-danger'] | |||
|
95 | }; | |||
|
96 | this.update_mapped_classes(class_map, 'button_style', previous_trait_value); | |||
|
97 | }, | |||
82 |
|
98 | |||
83 | update : function(options){ |
|
99 | update : function(options){ | |
84 | // Update the contents of this view |
|
100 | // Update the contents of this view |
@@ -20,6 +20,9 b' define([' | |||||
20 | this.model.on('change:overflow_y', function(model, value) { |
|
20 | this.model.on('change:overflow_y', function(model, value) { | |
21 | this.update_overflow_y(); |
|
21 | this.update_overflow_y(); | |
22 | }, this); |
|
22 | }, this); | |
|
23 | this.model.on('change:box_style', function(model, value) { | |||
|
24 | this.update_box_style(); | |||
|
25 | }, this); | |||
23 | }, |
|
26 | }, | |
24 |
|
27 | |||
25 | update_attr: function(name, value) { |
|
28 | update_attr: function(name, value) { | |
@@ -34,6 +37,7 b' define([' | |||||
34 | this.update_children([], this.model.get('children')); |
|
37 | this.update_children([], this.model.get('children')); | |
35 | this.update_overflow_x(); |
|
38 | this.update_overflow_x(); | |
36 | this.update_overflow_y(); |
|
39 | this.update_overflow_y(); | |
|
40 | this.update_box_style(''); | |||
37 | }, |
|
41 | }, | |
38 |
|
42 | |||
39 | update_overflow_x: function() { |
|
43 | update_overflow_x: function() { | |
@@ -45,6 +49,16 b' define([' | |||||
45 | // Called when the y-axis overflow setting is changed. |
|
49 | // Called when the y-axis overflow setting is changed. | |
46 | this.$box.css('overflow-y', this.model.get('overflow_y')); |
|
50 | this.$box.css('overflow-y', this.model.get('overflow_y')); | |
47 | }, |
|
51 | }, | |
|
52 | ||||
|
53 | update_box_style: function(previous_trait_value) { | |||
|
54 | var class_map = { | |||
|
55 | success: ['alert', 'alert-success'], | |||
|
56 | info: ['alert', 'alert-info'], | |||
|
57 | warning: ['alert', 'alert-warning'], | |||
|
58 | danger: ['alert', 'alert-danger'] | |||
|
59 | }; | |||
|
60 | this.update_mapped_classes(class_map, 'box_style', previous_trait_value, this.$box); | |||
|
61 | }, | |||
48 |
|
62 | |||
49 | update_children: function(old_list, new_list) { |
|
63 | update_children: function(old_list, new_list) { | |
50 | // Called when the children list changes. |
|
64 | // Called when the children list changes. |
@@ -13,6 +13,11 b' define([' | |||||
13 | this.setElement($("<button />") |
|
13 | this.setElement($("<button />") | |
14 | .addClass('btn btn-default')); |
|
14 | .addClass('btn btn-default')); | |
15 |
|
15 | |||
|
16 | this.model.on('change:button_style', function(model, value) { | |||
|
17 | this.update_button_style(); | |||
|
18 | }, this); | |||
|
19 | this.update_button_style(''); | |||
|
20 | ||||
16 | this.update(); // Set defaults. |
|
21 | this.update(); // Set defaults. | |
17 | }, |
|
22 | }, | |
18 |
|
23 | |||
@@ -37,6 +42,17 b' define([' | |||||
37 | return ButtonView.__super__.update.apply(this); |
|
42 | return ButtonView.__super__.update.apply(this); | |
38 | }, |
|
43 | }, | |
39 |
|
44 | |||
|
45 | update_button_style: function(previous_trait_value) { | |||
|
46 | var class_map = { | |||
|
47 | primary: ['btn-primary'], | |||
|
48 | success: ['btn-success'], | |||
|
49 | info: ['btn-info'], | |||
|
50 | warning: ['btn-warning'], | |||
|
51 | danger: ['btn-danger'] | |||
|
52 | }; | |||
|
53 | this.update_mapped_classes(class_map, 'button_style', previous_trait_value); | |||
|
54 | }, | |||
|
55 | ||||
40 | events: { |
|
56 | events: { | |
41 | // Dictionary of events and their handlers. |
|
57 | // Dictionary of events and their handlers. | |
42 | 'click': '_handle_click', |
|
58 | 'click': '_handle_click', |
@@ -346,7 +346,10 b' define([' | |||||
346 |
|
346 | |||
347 | update_attr: function(name, value) { |
|
347 | update_attr: function(name, value) { | |
348 | // Set a css attr of the widget view. |
|
348 | // Set a css attr of the widget view. | |
349 |
if (name.substring(0, 6) == 'border' || name == 'width' || |
|
349 | if (name.substring(0, 6) == 'border' || name == 'width' || | |
|
350 | name == 'height' || name == 'background' || name == 'margin' || | |||
|
351 | name == 'padding') { | |||
|
352 | ||||
350 | this.$progress.css(name, value); |
|
353 | this.$progress.css(name, value); | |
351 | } else if (name == 'color') { |
|
354 | } else if (name == 'color') { | |
352 | this.$bar.css('background', value); |
|
355 | this.$bar.css('background', value); |
@@ -36,6 +36,11 b' define([' | |||||
36 | this.$droplist = $('<ul />') |
|
36 | this.$droplist = $('<ul />') | |
37 | .addClass('dropdown-menu') |
|
37 | .addClass('dropdown-menu') | |
38 | .appendTo(this.$buttongroup); |
|
38 | .appendTo(this.$buttongroup); | |
|
39 | ||||
|
40 | this.model.on('change:button_style', function(model, value) { | |||
|
41 | this.update_button_style(); | |||
|
42 | }, this); | |||
|
43 | this.update_button_style(''); | |||
39 |
|
44 | |||
40 | // Set defaults. |
|
45 | // Set defaults. | |
41 | this.update(); |
|
46 | this.update(); | |
@@ -96,6 +101,18 b' define([' | |||||
96 | return DropdownView.__super__.update.apply(this); |
|
101 | return DropdownView.__super__.update.apply(this); | |
97 | }, |
|
102 | }, | |
98 |
|
103 | |||
|
104 | update_button_style: function(previous_trait_value) { | |||
|
105 | var class_map = { | |||
|
106 | primary: ['btn-primary'], | |||
|
107 | success: ['btn-success'], | |||
|
108 | info: ['btn-info'], | |||
|
109 | warning: ['btn-warning'], | |||
|
110 | danger: ['btn-danger'] | |||
|
111 | }; | |||
|
112 | this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$droplabel); | |||
|
113 | this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton); | |||
|
114 | }, | |||
|
115 | ||||
99 | update_attr: function(name, value) { |
|
116 | update_attr: function(name, value) { | |
100 | // Set a css attr of the widget view. |
|
117 | // Set a css attr of the widget view. | |
101 | if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') { |
|
118 | if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') { | |
@@ -103,9 +120,13 b' define([' | |||||
103 | this.$dropbutton.css(name, value); |
|
120 | this.$dropbutton.css(name, value); | |
104 | this.$droplist.css(name, value); |
|
121 | this.$droplist.css(name, value); | |
105 | } else if (name == 'width') { |
|
122 | } else if (name == 'width') { | |
106 | var width = value - this.$dropbutton.width(); |
|
123 | this.$droplist.css(name, value); | |
107 |
this.$dropl |
|
124 | this.$droplabel.css(name, value); | |
108 | this.$droplabel.css(name, width); |
|
125 | } else if (name == 'padding') { | |
|
126 | this.$droplist.css(name, value); | |||
|
127 | this.$buttongroup.css(name, value); | |||
|
128 | } else if (name == 'margin') { | |||
|
129 | this.$buttongroup.css(name, value); | |||
109 | } else if (name == 'height') { |
|
130 | } else if (name == 'height') { | |
110 | this.$droplabel.css(name, value); |
|
131 | this.$droplabel.css(name, value); | |
111 | this.$dropbutton.css(name, value); |
|
132 | this.$dropbutton.css(name, value); | |
@@ -239,6 +260,11 b' define([' | |||||
239 | .addClass('btn-group') |
|
260 | .addClass('btn-group') | |
240 | .attr('data-toggle', 'buttons-radio') |
|
261 | .attr('data-toggle', 'buttons-radio') | |
241 | .appendTo(this.$el); |
|
262 | .appendTo(this.$el); | |
|
263 | ||||
|
264 | this.model.on('change:button_style', function(model, value) { | |||
|
265 | this.update_button_style(); | |||
|
266 | }, this); | |||
|
267 | this.update_button_style(''); | |||
242 | this.update(); |
|
268 | this.update(); | |
243 | }, |
|
269 | }, | |
244 |
|
270 | |||
@@ -269,7 +295,7 b' define([' | |||||
269 | .appendTo(that.$buttongroup) |
|
295 | .appendTo(that.$buttongroup) | |
270 | .attr('data-value', item) |
|
296 | .attr('data-value', item) | |
271 | .on('click', $.proxy(that.handle_click, that)); |
|
297 | .on('click', $.proxy(that.handle_click, that)); | |
272 |
that. |
|
298 | that.update_style_traits($item_element); | |
273 | } |
|
299 | } | |
274 | if (that.model.get('value_name') == item) { |
|
300 | if (that.model.get('value_name') == item) { | |
275 | $item_element.addClass('active'); |
|
301 | $item_element.addClass('active'); | |
@@ -310,23 +336,36 b' define([' | |||||
310 | update_attr: function(name, value) { |
|
336 | update_attr: function(name, value) { | |
311 | // Set a css attr of the widget view. |
|
337 | // Set a css attr of the widget view. | |
312 | this._css_state[name] = value; |
|
338 | this._css_state[name] = value; | |
313 |
this. |
|
339 | this.update_style_traits(); | |
314 | }, |
|
340 | }, | |
315 |
|
341 | |||
316 |
|
|
342 | update_style_traits: function(button) { | |
317 | for (var name in this._css_state) { |
|
343 | for (var name in this._css_state) { | |
318 |
if (this._css_state.hasOwnProperty(name) |
|
344 | if (this._css_state.hasOwnProperty(name)) { | |
319 |
if ( |
|
345 | if (name == 'margin') { | |
320 | button.css(name, this._css_state[name]); |
|
346 | this.$buttongroup.css(name, this._css_state[name]); | |
321 | } else { |
|
347 | } else if (name != 'width') { | |
322 | this.$buttongroup.find('button').each(function(i, obj) { |
|
348 | if (button) { | |
323 |
|
|
349 | button.css(name, this._css_state[name]); | |
324 |
} |
|
350 | } else { | |
325 | } |
|
351 | this.$buttongroup.find('button').css(name, this._css_state[name]); | |
|
352 | } | |||
|
353 | } | |||
326 | } |
|
354 | } | |
327 | } |
|
355 | } | |
328 | }, |
|
356 | }, | |
329 |
|
357 | |||
|
358 | update_button_style: function(previous_trait_value) { | |||
|
359 | var class_map = { | |||
|
360 | primary: ['btn-primary'], | |||
|
361 | success: ['btn-success'], | |||
|
362 | info: ['btn-info'], | |||
|
363 | warning: ['btn-warning'], | |||
|
364 | danger: ['btn-danger'] | |||
|
365 | }; | |||
|
366 | this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$buttongroup.find('button')); | |||
|
367 | }, | |||
|
368 | ||||
330 | handle_click: function (e) { |
|
369 | handle_click: function (e) { | |
331 | // Handle when a value is clicked. |
|
370 | // Handle when a value is clicked. | |
332 |
|
371 |
@@ -37,6 +37,11 b' class ToggleButton(_Bool):' | |||||
37 |
|
37 | |||
38 | _view_name = Unicode('ToggleButtonView', sync=True) |
|
38 | _view_name = Unicode('ToggleButtonView', sync=True) | |
39 |
|
39 | |||
|
40 | button_style = CaselessStrEnum( | |||
|
41 | values=['primary', 'success', 'info', 'warning', 'danger', ''], | |||
|
42 | default_value='', allow_none=True, sync=True, help="""Use a | |||
|
43 | predefined styling for the button.""") | |||
|
44 | ||||
40 |
|
45 | |||
41 | # Remove in IPython 4.0 |
|
46 | # Remove in IPython 4.0 | |
42 | CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget') |
|
47 | CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget') |
@@ -29,6 +29,11 b' class Box(DOMWidget):' | |||||
29 | default_value='', allow_none=False, sync=True, help="""Specifies what |
|
29 | default_value='', allow_none=False, sync=True, help="""Specifies what | |
30 | happens to content that is too large for the rendered region.""") |
|
30 | happens to content that is too large for the rendered region.""") | |
31 |
|
31 | |||
|
32 | box_style = CaselessStrEnum( | |||
|
33 | values=['success', 'info', 'warning', 'danger', ''], | |||
|
34 | default_value='', allow_none=True, sync=True, help="""Use a | |||
|
35 | predefined styling for the box.""") | |||
|
36 | ||||
32 | def __init__(self, children = (), **kwargs): |
|
37 | def __init__(self, children = (), **kwargs): | |
33 | kwargs['children'] = children |
|
38 | kwargs['children'] = children | |
34 | super(Box, self).__init__(**kwargs) |
|
39 | super(Box, self).__init__(**kwargs) |
@@ -31,6 +31,11 b' class Button(DOMWidget):' | |||||
31 | # Keys |
|
31 | # Keys | |
32 | description = Unicode('', help="Description of the button (label).", sync=True) |
|
32 | description = Unicode('', help="Description of the button (label).", sync=True) | |
33 | disabled = Bool(False, help="Enable or disable user changes.", sync=True) |
|
33 | disabled = Bool(False, help="Enable or disable user changes.", sync=True) | |
|
34 | ||||
|
35 | button_style = CaselessStrEnum( | |||
|
36 | values=['primary', 'success', 'info', 'warning', 'danger', ''], | |||
|
37 | default_value='', allow_none=True, sync=True, help="""Use a | |||
|
38 | predefined styling for the button.""") | |||
34 |
|
39 | |||
35 | def __init__(self, **kwargs): |
|
40 | def __init__(self, **kwargs): | |
36 | """Constructor""" |
|
41 | """Constructor""" |
@@ -115,6 +115,11 b' class ToggleButtons(_Selection):' | |||||
115 | button can be toggled at any point in time.""" |
|
115 | button can be toggled at any point in time.""" | |
116 | _view_name = Unicode('ToggleButtonsView', sync=True) |
|
116 | _view_name = Unicode('ToggleButtonsView', sync=True) | |
117 |
|
117 | |||
|
118 | button_style = CaselessStrEnum( | |||
|
119 | values=['primary', 'success', 'info', 'warning', 'danger', ''], | |||
|
120 | default_value='', allow_none=True, sync=True, help="""Use a | |||
|
121 | predefined styling for the buttons.""") | |||
|
122 | ||||
118 |
|
123 | |||
119 | class Dropdown(_Selection): |
|
124 | class Dropdown(_Selection): | |
120 | """Allows you to select a single item from a dropdown.""" |
|
125 | """Allows you to select a single item from a dropdown.""" |
General Comments 0
You need to be logged in to leave comments.
Login now