p2yq6ufca
/
monkeyking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Bootstrap specific classes,

Browse Source 
and fixed a few bugs here and there...
Jonathan Frederic 12 years ago
parent a0e70e350f
commit 9b4d19bad7
10 changed files with 166 additions and 19 deletions
Show Stats Download Patch File Download Diff File

47
IPython/html/static/widgets/js/widget.js
Unescape View File

@ -503,15 +503,54 @@ define(["widgets/js/manager",
}
},
update_classes: function (old_classes, new_classes) {
// Update the DOM classes applied to the topmost element.
update_classes: function (old_classes, new_classes, $el) {
// Update the DOM classes applied to an element, default to this.$el.
if ($el===undefined) {
$el = this.$el;
}
this.do_diff(old_classes, new_classes, function(removed) {
this.$el.removeClass(removed);
$el.removeClass(removed);
}, function(added) {
this.$el.addClass(added);
$el.addClass(added);
});
},
update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) {
// Update the DOM classes applied to the widget based on a single
// trait's value.
//
// Given a trait value classes map, this function automatically
// handles applying the appropriate classes to the widget element
// and removing classes that are no longer valid.
//
// Parameters
// ----------
// class_map: dictionary
// Dictionary of trait values to class lists.
// Example:
// {
// success: ['alert', 'alert-success'],
// info: ['alert', 'alert-info'],
// warning: ['alert', 'alert-warning'],
// danger: ['alert', 'alert-danger']
// };
// trait_name: string
// Name of the trait to check the value of.
// previous_trait_value: optional string, default ''
// Last trait value
// $el: optional jQuery element handle, defaults to this.$el
// Element that the classes are applied to.
var key = previous_trait_value;
if (key === undefined) {
key = this.model.previous(trait_name);
}
var old_classes = class_map[key] ? class_map[key] : [];
key = this.model.get(trait_name);
var new_classes = class_map[key] ? class_map[key] : [];
this.update_classes(old_classes, new_classes, $el || this.$el);
},
_get_selector_element: function (selector) {
// Get the elements via the css selector.
var elements;

16
IPython/html/static/widgets/js/widget_bool.js
Unescape View File

@ -77,8 +77,24 @@ define([
that.handle_click();
}));
this.model.on('change:button_style', function(model, value) {
this.update_button_style();
}, this);
this.update_button_style('');
this.update(); // Set defaults.
},
update_button_style: function(previous_trait_value) {
var class_map = {
primary: ['btn-primary'],
success: ['btn-success'],
info: ['btn-info'],
warning: ['btn-warning'],
danger: ['btn-danger']
};
this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
},
update : function(options){
// Update the contents of this view

14
IPython/html/static/widgets/js/widget_box.js
Unescape View File

@ -20,6 +20,9 @@ define([
this.model.on('change:overflow_y', function(model, value) {
this.update_overflow_y();
}, this);
this.model.on('change:box_style', function(model, value) {
this.update_box_style();
}, this);
},
update_attr: function(name, value) {
@ -34,6 +37,7 @@ define([
this.update_children([], this.model.get('children'));
this.update_overflow_x();
this.update_overflow_y();
this.update_box_style('');
},
update_overflow_x: function() {
@ -45,6 +49,16 @@ define([
// Called when the y-axis overflow setting is changed.
this.$box.css('overflow-y', this.model.get('overflow_y'));
},
update_box_style: function(previous_trait_value) {
var class_map = {
success: ['alert', 'alert-success'],
info: ['alert', 'alert-info'],
warning: ['alert', 'alert-warning'],
danger: ['alert', 'alert-danger']
};
this.update_mapped_classes(class_map, 'box_style', previous_trait_value, this.$box);
},
update_children: function(old_list, new_list) {
// Called when the children list changes.

16
IPython/html/static/widgets/js/widget_button.js
Unescape View File

@ -13,6 +13,11 @@ define([
this.setElement($("<button />")
.addClass('btn btn-default'));
this.model.on('change:button_style', function(model, value) {
this.update_button_style();
}, this);
this.update_button_style('');
this.update(); // Set defaults.
},
@ -37,6 +42,17 @@ define([
return ButtonView.__super__.update.apply(this);
},
update_button_style: function(previous_trait_value) {
var class_map = {
primary: ['btn-primary'],
success: ['btn-success'],
info: ['btn-info'],
warning: ['btn-warning'],
danger: ['btn-danger']
};
this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
},
events: {
// Dictionary of events and their handlers.
'click': '_handle_click',

5
IPython/html/static/widgets/js/widget_int.js
Unescape View File

@ -346,7 +346,10 @@ define([
update_attr: function(name, value) {
// Set a css attr of the widget view.
if (name.substring(0, 6) == 'border' || name == 'width' || name == 'height' || name == 'background') {
if (name.substring(0, 6) == 'border' || name == 'width' ||
name == 'height' || name == 'background' || name == 'margin' ||
name == 'padding') {
this.$progress.css(name, value);
} else if (name == 'color') {
this.$bar.css('background', value);

67
IPython/html/static/widgets/js/widget_selection.js
Unescape View File

@ -36,6 +36,11 @@ define([
this.$droplist = $('<ul />')
.addClass('dropdown-menu')
.appendTo(this.$buttongroup);
this.model.on('change:button_style', function(model, value) {
this.update_button_style();
}, this);
this.update_button_style('');
// Set defaults.
this.update();
@ -96,6 +101,18 @@ define([
return DropdownView.__super__.update.apply(this);
},
update_button_style: function(previous_trait_value) {
var class_map = {
primary: ['btn-primary'],
success: ['btn-success'],
info: ['btn-info'],
warning: ['btn-warning'],
danger: ['btn-danger']
};
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$droplabel);
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$dropbutton);
},
update_attr: function(name, value) {
// Set a css attr of the widget view.
if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') {
@ -103,9 +120,13 @@ define([
this.$dropbutton.css(name, value);
this.$droplist.css(name, value);
} else if (name == 'width') {
var width = value - this.$dropbutton.width();
this.$droplist.css(name, width);
this.$droplabel.css(name, width);
this.$droplist.css(name, value);
this.$droplabel.css(name, value);
} else if (name == 'padding') {
this.$droplist.css(name, value);
this.$buttongroup.css(name, value);
} else if (name == 'margin') {
this.$buttongroup.css(name, value);
} else if (name == 'height') {
this.$droplabel.css(name, value);
this.$dropbutton.css(name, value);
@ -239,6 +260,11 @@ define([
.addClass('btn-group')
.attr('data-toggle', 'buttons-radio')
.appendTo(this.$el);
this.model.on('change:button_style', function(model, value) {
this.update_button_style();
}, this);
this.update_button_style('');
this.update();
},
@ -269,7 +295,7 @@ define([
.appendTo(that.$buttongroup)
.attr('data-value', item)
.on('click', $.proxy(that.handle_click, that));
that._update_button_style($item_element);
that.update_style_traits($item_element);
}
if (that.model.get('value_name') == item) {
$item_element.addClass('active');
@ -310,23 +336,36 @@ define([
update_attr: function(name, value) {
// Set a css attr of the widget view.
this._css_state[name] = value;
this._update_button_style();
this.update_style_traits();
},
_update_button_style: function(button) {
update_style_traits: function(button) {
for (var name in this._css_state) {
if (this._css_state.hasOwnProperty(name) && name != 'width') {
if (button) {
button.css(name, this._css_state[name]);
} else {
this.$buttongroup.find('button').each(function(i, obj) {
$(obj).css(name, this._css_state[name]);
});
}
if (this._css_state.hasOwnProperty(name)) {
if (name == 'margin') {
this.$buttongroup.css(name, this._css_state[name]);
} else if (name != 'width') {
if (button) {
button.css(name, this._css_state[name]);
} else {
this.$buttongroup.find('button').css(name, this._css_state[name]);
}
}
}
}
},
update_button_style: function(previous_trait_value) {
var class_map = {
primary: ['btn-primary'],
success: ['btn-success'],
info: ['btn-info'],
warning: ['btn-warning'],
danger: ['btn-danger']
};
this.update_mapped_classes(class_map, 'button_style', previous_trait_value, this.$buttongroup.find('button'));
},
handle_click: function (e) {
// Handle when a value is clicked.

5
IPython/html/widgets/widget_bool.py
Unescape View File

@ -37,6 +37,11 @@ class ToggleButton(_Bool):
_view_name = Unicode('ToggleButtonView', sync=True)
button_style = CaselessStrEnum(
values=['primary', 'success', 'info', 'warning', 'danger', ''],
default_value='', allow_none=True, sync=True, help="""Use a
predefined styling for the button.""")
# Remove in IPython 4.0
CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')

5
IPython/html/widgets/widget_box.py
Unescape View File

@ -29,6 +29,11 @@ class Box(DOMWidget):
default_value='', allow_none=False, sync=True, help="""Specifies what
happens to content that is too large for the rendered region.""")
box_style = CaselessStrEnum(
values=['success', 'info', 'warning', 'danger', ''],
default_value='', allow_none=True, sync=True, help="""Use a
predefined styling for the box.""")
def __init__(self, children = (), **kwargs):
kwargs['children'] = children
super(Box, self).__init__(**kwargs)

5
IPython/html/widgets/widget_button.py
Unescape View File

@ -31,6 +31,11 @@ class Button(DOMWidget):
# Keys
description = Unicode('', help="Description of the button (label).", sync=True)
disabled = Bool(False, help="Enable or disable user changes.", sync=True)
button_style = CaselessStrEnum(
values=['primary', 'success', 'info', 'warning', 'danger', ''],
default_value='', allow_none=True, sync=True, help="""Use a
predefined styling for the button.""")
def __init__(self, **kwargs):
"""Constructor"""

5
IPython/html/widgets/widget_selection.py
Unescape View File

@ -115,6 +115,11 @@ class ToggleButtons(_Selection):
button can be toggled at any point in time."""
_view_name = Unicode('ToggleButtonsView', sync=True)
button_style = CaselessStrEnum(
values=['primary', 'success', 'info', 'warning', 'danger', ''],
default_value='', allow_none=True, sync=True, help="""Use a
predefined styling for the buttons.""")
class Dropdown(_Selection):
"""Allows you to select a single item from a dropdown."""

Write Preview
Loading…
Cancel
Save