Font-awesome icons for toggle buttons

IPython/html/static/widgets/js/widget_selection.js

@@ -1,575 +1,583 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "base/js/utils",
     "jquery",
     "underscore",
     "bootstrap",
 ], function(widget, utils, $, _){
 
     var DropdownView = widget.DOMWidgetView.extend({
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-dropdown');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('widget_item')
                 .addClass('btn-group')
                 .appendTo(this.$el);
             this.$droplabel = $('<button />')
                 .addClass('btn btn-default')
                 .addClass('widget-combo-btn')
                 .html("&nbsp;")
                 .appendTo(this.$buttongroup);
             this.$dropbutton = $('<button />')
                 .addClass('btn btn-default')
                 .addClass('dropdown-toggle')
                 .addClass('widget-combo-carrot-btn')
                 .attr('data-toggle', 'dropdown')
                 .append($('<span />').addClass("caret"))
                 .appendTo(this.$buttongroup);
             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();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been
              * changed by another view or by a state update from the back-end.
              */
 
             if (options === undefined || options.updated_view != this) {
                 var selected_item_text = this.model.get('selected_label');
                 if (selected_item_text.trim().length === 0) {
                     this.$droplabel.html("&nbsp;");
                 } else {
                     this.$droplabel.text(selected_item_text);
                 }
                 
                 var items = this.model.get('_options_labels');
                 var $replace_droplist = $('<ul />')
                     .addClass('dropdown-menu');
                 // Copy the style
                 $replace_droplist.attr('style', this.$droplist.attr('style'));
                 var that = this;
                 _.each(items, function(item, i) {
                     var item_button = $('<a href="#"/>')
                         .text(item)
                         .on('click', $.proxy(that.handle_click, that));
                     $replace_droplist.append($('<li />').append(item_button));
                 });
 
                 this.$droplist.replaceWith($replace_droplist);
                 this.$droplist.remove();
                 this.$droplist = $replace_droplist;
                 
                 if (this.model.get('disabled')) {
                     this.$buttongroup.attr('disabled','disabled');
                     this.$droplabel.attr('disabled','disabled');
                     this.$dropbutton.attr('disabled','disabled');
                     this.$droplist.attr('disabled','disabled');
                 } else {
                     this.$buttongroup.removeAttr('disabled');
                     this.$droplabel.removeAttr('disabled');
                     this.$dropbutton.removeAttr('disabled');
                     this.$droplist.removeAttr('disabled');
                 }
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             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') {
                 this.$droplabel.css(name, value);
                 this.$dropbutton.css(name, value);
                 this.$droplist.css(name, value);
             } else if (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);
             } else if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$droplist.css(name, value);
                 this.$droplabel.css(name, value);
             }
         },
 
         handle_click: function (e) {
             /**
              * Handle when a value is clicked.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', $(e.target).text(), {updated_view: this});
             this.touch();
 
             // Manually hide the droplist.
             e.stopPropagation();
             e.preventDefault();
             this.$buttongroup.removeClass('open');
         },
         
     });
 
 
     var RadioButtonsView = widget.DOMWidgetView.extend({    
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-radio');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$container = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-radio-box');
             this.update();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('_options_labels');
                 var disabled = this.model.get('disabled');
                 var that = this;
                 _.each(items, function(item, index) {
                     var item_query = ' :input[data-value="' + encodeURIComponent(item) + '"]';
                     if (that.$el.find(item_query).length === 0) {
                         var $label = $('<label />')
                             .addClass('radio')
                             .text(item)
                             .appendTo(that.$container);
                         
                         $('<input />')
                             .attr('type', 'radio')
                             .addClass(that.model)
                             .val(item)
                             .attr('data-value', encodeURIComponent(item))
                             .prependTo($label)
                             .on('click', $.proxy(that.handle_click, that));
                     }
                     
                     var $item_element = that.$container.find(item_query);
                     if (that.model.get('selected_label') == item) {
                         $item_element.prop('checked', true);
                     } else {
                         $item_element.prop('checked', false);
                     }
                     $item_element.prop('disabled', disabled);
                 });
                 
                 // Remove items that no longer exist.
                 this.$container.find('input').each(function(i, obj) {
                     var value = $(obj).val();
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
                     
                     if (!found) {
                         $(obj).parent().remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return RadioButtonsView.__super__.update.apply(this);
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$container.css(name, value);
             }
         },
 
         handle_click: function (e) {
             /**
              * Handle when a value is clicked.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', $(e.target).val(), {updated_view: this});
             this.touch();
         },
     });
     
 
     var ToggleButtonsView = widget.DOMWidgetView.extend({
         initialize: function() {
             this._css_state = {};
             ToggleButtonsView.__super__.initialize.apply(this, arguments);
         },
 
         render: function() {
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-toggle-buttons');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('btn-group')
                 .appendTo(this.$el);
 
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
             this.update();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('_options_labels');
+                var icons = this.model.get('icons');
+                var previous_icons = this.model.previous('icons') || [];
                 var disabled = this.model.get('disabled');
                 var that = this;
                 var item_html;
                 _.each(items, function(item, index) {
-                    if (item.trim().length === 0) {
+                    if (item.trim().length === 0 && (!icons[index] ||
+                        icons[index].trim().length === 0)) {
                         item_html = "&nbsp;";
                     } else {
                         item_html = utils.escape_html(item);
                     }
                     var item_query = '[data-value="' + encodeURIComponent(item) + '"]';
                     var $item_element = that.$buttongroup.find(item_query);
+                    var $icon_element = $item_element.find('.fa');
                     if (!$item_element.length) {
                         $item_element = $('<button/>')
                             .attr('type', 'button')
                             .addClass('btn btn-default')
                             .html(item_html)
                             .appendTo(that.$buttongroup)
                             .attr('data-value', encodeURIComponent(item))
                             .attr('data-toggle', 'tooltip')
                             .attr('value', item)
                             .on('click', $.proxy(that.handle_click, that));
                         that.update_style_traits($item_element);
+                        $icon_element = $('<i class="fa"></i>').prependTo($item_element);
                     }
                     if (that.model.get('selected_label') == item) {
                         $item_element.addClass('active');
                     } else {
                         $item_element.removeClass('active');
                     }
                     $item_element.prop('disabled', disabled);
-                    $item_element.attr('title', that.model.get('tooltips')[index]); 
+                    $item_element.attr('title', that.model.get('tooltips')[index]);
+                    $icon_element
+                        .removeClass(previous_icons[index])
+                        .addClass(icons[index]);
                 });
                 
                 // Remove items that no longer exist.
                 this.$buttongroup.find('button').each(function(i, obj) {
                     var value = $(obj).attr('value');
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
 
                     if (!found) {
                         $(obj).remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text();
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return ToggleButtonsView.__super__.update.apply(this);
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this._css_state[name] = value;
                 this.update_style_traits();
             }
         },
 
         update_style_traits: function(button) {
             for (var name in this._css_state) {
                 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.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', $(e.target).attr('value'), {updated_view: this});
             this.touch();
         },    
     });
     
 
     var SelectView = widget.DOMWidgetView.extend({    
         render : function(){
             /**
              * Called when view is rendered.
              */
             this.$el
                 .addClass('widget-hbox widget-select');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
             this.$listbox = $('<select />')
                 .addClass('widget-listbox form-control')
                 .attr('size', 6)
                 .appendTo(this.$el)
                 .on('change', $.proxy(this.handle_change, this));
             this.update();
         },
         
         update : function(options){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('_options_labels');
                 var that = this;
                 _.each(items, function(item, index) {
                    var item_query = 'option[data-value="' + encodeURIComponent(item) + '"]';
                     if (that.$listbox.find(item_query).length === 0) {
                         $('<option />')
                             .text(item)
                             .attr('data-value', encodeURIComponent(item))
                             .attr('selected_label', item)
                             .on("click", $.proxy(that.handle_click, that))
                             .appendTo(that.$listbox);
                     } 
                 });
 
                 // Select the correct element
                 this.$listbox.val(this.model.get('selected_label'));
                 
                 // Disable listbox if needed
                 var disabled = this.model.get('disabled');
                 this.$listbox.prop('disabled', disabled);
 
                 // Remove items that no longer exist.
                 this.$listbox.find('option').each(function(i, obj) {
                     var value = $(obj).text();
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
                     
                     if (!found) {
                         $(obj).remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.typeset(this.$label, description);
                     this.$label.show();
                 }
             }
             return SelectView.__super__.update.apply(this);
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             if (name == 'padding' || name == 'margin') {
                 this.$el.css(name, value);
             } else {
                 this.$listbox.css(name, value);
             }
         },
 
         handle_click: function (e) {
             /**
              * Handle when a new value is clicked.
              */
             this.$listbox.val($(e.target).val()).change();
         },
 
         handle_change: function (e) {
             /**
              * Handle when a new value is selected.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_label', this.$listbox.val(), {updated_view: this});
             this.touch();
         },
     });
 
 
     var SelectMultipleView = SelectView.extend({
         render: function(){
             /**
              * Called when view is rendered.
              */
             SelectMultipleView.__super__.render.apply(this);
             this.$el.removeClass('widget-select')
               .addClass('widget-select-multiple');
             this.$listbox.attr('multiple', true)
               .on('change', $.proxy(this.handle_change, this));
             return this;
         },
 
         update: function(){
             /**
              * Update the contents of this view
              *
              * Called when the model is changed.  The model may have been 
              * changed by another view or by a state update from the back-end.
              */
             SelectMultipleView.__super__.update.apply(this, arguments);
             this.$listbox.val(this.model.get('selected_labels'));
         },
 
         handle_change: function (e) {
             /**
              * Handle when a new value is selected.
              *
              * Calling model.set will trigger all of the other views of the 
              * model to update.
              */
             this.model.set('selected_labels',
                 (this.$listbox.val() || []).slice(),
                 {updated_view: this});
             this.touch();
         },
     });
     
 
     return {
         'DropdownView': DropdownView,
         'RadioButtonsView': RadioButtonsView,
         'ToggleButtonsView': ToggleButtonsView,
         'SelectView': SelectView,
         'SelectMultipleView': SelectMultipleView,
     };
 });

IPython/html/widgets/widget_selection.py

@@ -1,247 +1,248 b''
 """Selection classes.
 
 Represents an enumeration using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 from collections import OrderedDict
 from threading import Lock
 
 from .widget import DOMWidget, register
 from IPython.utils.traitlets import (
     Unicode, Bool, Any, Dict, TraitError, CaselessStrEnum, Tuple, List
 )
 from IPython.utils.py3compat import unicode_type
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # SelectionWidget
 #-----------------------------------------------------------------------------
 class _Selection(DOMWidget):
     """Base class for Selection widgets
     
     ``options`` can be specified as a list or dict. If given as a list,
     it will be transformed to a dict of the form ``{str(value):value}``.
 
     When programmatically setting the value, a reverse lookup is performed
     among the options to set the value of ``selected_label`` accordingly. The
     reverse lookup uses the equality operator by default, but an other
     predicate may be provided via the ``equals`` argument. For example, when
     dealing with numpy arrays, one may set equals=np.array_equal.
     """
     
     value = Any(help="Selected value")
     selected_label = Unicode(help="The label of the selected value", sync=True)
     options = Any(help="""List of (key, value) tuples or dict of values that the
         user can select.
     
     The keys of this list are the strings that will be displayed in the UI,
     representing the actual Python choices.
     
     The keys of this list are also available as _options_labels.
     """)
     
     _options_dict = Dict()
     _options_labels = Tuple(sync=True)
     _options_values = Tuple()
 
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
         
     def __init__(self, *args, **kwargs):
         self.value_lock = Lock()
         self.options_lock = Lock()
         self.equals = kwargs.pop('equals', lambda x, y: x == y)
         self.on_trait_change(self._options_readonly_changed, ['_options_dict', '_options_labels', '_options_values', '_options'])
         if 'options' in kwargs:
             self.options = kwargs.pop('options')
         DOMWidget.__init__(self, *args, **kwargs)
         self._value_in_options()
     
     def _make_options(self, x):
         # If x is a dict, convert it to list format.
         if isinstance(x, (OrderedDict, dict)):
             return [(k, v) for k, v in x.items()]
         
         # Make sure x is a list or tuple.
         if not isinstance(x, (list, tuple)):
             raise ValueError('x')
         
         # If x is an ordinary list, use the option values as names.
         for y in x:
             if not isinstance(y, (list, tuple)) or len(y) < 2:
                 return [(i, i) for i in x]
         
         # Value is already in the correct format.
         return x
 
     def _options_changed(self, name, old, new):
         """Handles when the options tuple has been changed.
 
         Setting options implies setting option labels from the keys of the dict.
         """
         if self.options_lock.acquire(False):
             try:
                 self.options = new
 
                 options = self._make_options(new)
                 self._options_dict = {i[0]: i[1] for i in options}
                 self._options_labels = [i[0] for i in options]
                 self._options_values = [i[1] for i in options]
                 self._value_in_options()
             finally:
                 self.options_lock.release()
         
     def _value_in_options(self):
         # ensure that the chosen value is one of the choices
     
         if self._options_values:
             if self.value not in self._options_values:
                 self.value = next(iter(self._options_values))
 
     def _options_readonly_changed(self, name, old, new):
         if not self.options_lock.locked():
             raise TraitError("`.%s` is a read-only trait. Use the `.options` tuple instead." % name)
 
     def _value_changed(self, name, old, new):
         """Called when value has been changed"""
         if self.value_lock.acquire(False):
             try:
                 # Reverse dictionary lookup for the value name
                 for k, v in self._options_dict.items():
                     if self.equals(new, v):
                         # set the selected value name
                         self.selected_label = k
                         return
                 # undo the change, and raise KeyError
                 self.value = old
                 raise KeyError(new)
             finally:
                 self.value_lock.release()
 
     def _selected_label_changed(self, name, old, new):
         """Called when the value name has been changed (typically by the frontend)."""
         if self.value_lock.acquire(False):
             try:
                 self.value = self._options_dict[new]
             finally:
                 self.value_lock.release()
 
 
 class _MultipleSelection(_Selection):
     """Base class for MultipleSelection widgets.
 
     As with ``_Selection``, ``options`` can be specified as a list or dict. If
     given as a list, it will be transformed to a dict of the form
     ``{str(value): value}``.
 
     Despite their names, ``value`` (and ``selected_label``) will be tuples, even
     if only a single option is selected.
     """
 
     value = Tuple(help="Selected values")
     selected_labels = Tuple(help="The labels of the selected options",
                             sync=True)
 
     @property
     def selected_label(self):
         raise AttributeError(
             "Does not support selected_label, use selected_labels")
 
     def _value_in_options(self):
         # ensure that the chosen value is one of the choices
         if self.options:
             old_value = self.value or []
             new_value = []
             for value in old_value:
                 if value in self._options_dict.values():
                     new_value.append(value)
             if new_value:
                 self.value = new_value
             else:
                 self.value = [next(iter(self._options_dict.values()))]
 
     def _value_changed(self, name, old, new):
         """Called when value has been changed"""
         if self.value_lock.acquire(False):
             try:
                 self.selected_labels = [
                     self._options_labels[self._options_values.index(v)]
                     for v in new
                 ]
             except:
                 self.value = old
                 raise KeyError(new)
             finally:
                 self.value_lock.release()
 
     def _selected_labels_changed(self, name, old, new):
         """Called when the selected label has been changed (typically by the
         frontend)."""
         if self.value_lock.acquire(False):
             try:
                 self.value = [self._options_dict[name] for name in new]
             finally:
                 self.value_lock.release()
 
 
 @register('IPython.ToggleButtons')
 class ToggleButtons(_Selection):
     """Group of toggle buttons that represent an enumeration.  Only one toggle
     button can be toggled at any point in time.""" 
     _view_name = Unicode('ToggleButtonsView', sync=True)
     tooltips = List(Unicode(), sync=True)
+    icons = List(Unicode(), 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.""")
 
 @register('IPython.Dropdown')
 class Dropdown(_Selection):
     """Allows you to select a single item from a dropdown."""
     _view_name = Unicode('DropdownView', 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.""")
 
 @register('IPython.RadioButtons')
 class RadioButtons(_Selection):
     """Group of radio buttons that represent an enumeration.  Only one radio
     button can be toggled at any point in time.""" 
     _view_name = Unicode('RadioButtonsView', sync=True)
     
 
 
 @register('IPython.Select')
 class Select(_Selection):
     """Listbox that only allows one item to be selected at any given time."""
     _view_name = Unicode('SelectView', sync=True)
 
 
 @register('IPython.SelectMultiple')
 class SelectMultiple(_MultipleSelection):
     """Listbox that allows many items to be selected at any given time.
     Despite their names, inherited from ``_Selection``, the currently chosen
     option values, ``value``, or their labels, ``selected_labels`` must both be
     updated with a list-like object."""
     _view_name = Unicode('SelectMultipleView', sync=True)
 
 
 # Remove in IPython 4.0
 ToggleButtonsWidget = DeprecatedClass(ToggleButtons, 'ToggleButtonsWidget')
 DropdownWidget = DeprecatedClass(Dropdown, 'DropdownWidget')
 RadioButtonsWidget = DeprecatedClass(RadioButtons, 'RadioButtonsWidget')
 SelectWidget = DeprecatedClass(Select, 'SelectWidget')