Partial implementation of styles

IPython/html/static/widgets/js/widget_bool.js

@@ -1,119 +1,124 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jquery",
     "bootstrap",
 ], function(widget, $){
 
     var CheckboxView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .addClass('widget-hlabel')
                 .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
                 .appendTo(this.$el)
                 .click($.proxy(this.handle_click, this));
 
             this.update(); // Set defaults.
         },
 
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            this.$checkbox.css(name, value);
+        },
+
         handle_click: function() {
             // Handles when the checkbox is clicked.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
         
         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.
             this.$checkbox.prop('checked', this.model.get('value'));
 
             if (options === undefined || options.updated_view != this) {
                 var disabled = this.model.get('disabled');
                 this.$checkbox.prop('disabled', disabled);
 
                 var description = this.model.get('description');
                 if (description.trim().length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return CheckboxView.__super__.update.apply(this);
         },
         
     });
 
 
     var ToggleButtonView = widget.DOMWidgetView.extend({
         render : function() {
             // Called when view is rendered.
             var that = this;
             this.setElement($('<button />')
                 .addClass('btn btn-default')
                 .attr('type', 'button')
                 .on('click', function (e) {
                     e.preventDefault();
                     that.handle_click();
                 }));
 
             this.update(); // Set defaults.
         },
         
         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 (this.model.get('value')) {
                 this.$el.addClass('active');
             } else {
                 this.$el.removeClass('active');
             }
 
             if (options === undefined || options.updated_view != this) {
 
                 var disabled = this.model.get('disabled');
                 this.$el.prop('disabled', disabled);
 
                 var description = this.model.get('description');
                 if (description.trim().length === 0) {
                     this.$el.html("&nbsp;"); // Preserve button height
                 } else {
                     this.$el.text(description);
                 }
             }
             return ToggleButtonView.__super__.update.apply(this);
         },
         
         handle_click: function(e) { 
             // Handles and validates user input.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
     });
 
     return {
         'CheckboxView': CheckboxView,
         'ToggleButtonView': ToggleButtonView,
     };
 });

IPython/html/static/widgets/js/widget_int.js

@@ -1,330 +1,366 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jqueryui",
     "bootstrap",
 ], function(widget, $){
     
     var IntSliderView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             
             this.$slider = $('<div />')
                 .slider({})
                 .addClass('slider');
             // Put the slider in a container 
             this.$slider_container = $('<div />')
                 .addClass('widget-hslider')
                 .append(this.$slider);
             this.$el.append(this.$slider_container);
             
             this.$readout = $('<div/>')
                 .appendTo(this.$el)
                 .addClass('widget-hreadout')
                 .hide();
+
+            this.model.on('change:slider_color', function(sender, value) {
+                this.$slider.find('a').css('background', value);
+            }, this);
             
             // Set defaults.
             this.update();
         },
+
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            if (name == 'color') {
+                this.$readout.css(name, value);
+            } else if (name.substring(0, 4) == 'font') {
+                this.$readout.css(name, value);
+            } else if (name.substring(0, 6) == 'border') {
+                this.$slider.find('a').css(name, value);
+                this.$slider_container.css(name, value);
+            } else if (name == 'width' || name == 'height' || name == 'background') {
+                this.$slider_container.css(name, value);
+            } else {
+                this.$slider.css(name, value);
+            }
+        },
         
         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) {
                 // JQuery slider option keys.  These keys happen to have a
                 // one-to-one mapping with the corrosponding keys of the model.
                 var jquery_slider_keys = ['step', 'max', 'min', 'disabled'];
                 var that = this;
                 that.$slider.slider({});
                 _.each(jquery_slider_keys, function(key, i) {
                     var model_value = that.model.get(key);
                     if (model_value !== undefined) {
                         that.$slider.slider("option", key, model_value);
                     }
                 });
                 var range_value = this.model.get("_range");
                 if (range_value !== undefined) {
                     this.$slider.slider("option", "range", range_value);
                 }
 
                 // WORKAROUND FOR JQUERY SLIDER BUG.
                 // The horizontal position of the slider handle
                 // depends on the value of the slider at the time
                 // of orientation change.  Before applying the new
                 // workaround, we set the value to the minimum to
                 // make sure that the horizontal placement of the
                 // handle in the vertical slider is always 
                 // consistent.
                 var orientation = this.model.get('orientation');
                 var min = this.model.get('min');
                 var max = this.model.get('max');
                 if (this.model.get('_range')) {
                     this.$slider.slider('option', 'values', [min, min]);
                 } else {
                     this.$slider.slider('option', 'value', min);
                 }
                 this.$slider.slider('option', 'orientation', orientation);
                 var value = this.model.get('value');
                 if (this.model.get('_range')) {
                     // values for the range case are validated python-side in
                     // _Bounded{Int,Float}RangeWidget._validate
                     this.$slider.slider('option', 'values', value);
                     this.$readout.text(value.join("-"));
                 } else {
                     if(value > max) { 
                         value = max; 
                     }
                     else if(value < min){ 
                         value = min; 
                     }
                     this.$slider.slider('option', 'value', value);
                     this.$readout.text(value);
                 }
 
                 if(this.model.get('value')!=value) {
                     this.model.set('value', value, {updated_view: this});
                     this.touch();
                 }
 
                 // Use the right CSS classes for vertical & horizontal sliders
                 if (orientation=='vertical') {
                     this.$slider_container
                         .removeClass('widget-hslider')
                         .addClass('widget-vslider');
                     this.$el
                         .removeClass('widget-hbox-single')
                         .addClass('widget-vbox-single');
                     this.$label
                         .removeClass('widget-hlabel')
                         .addClass('widget-vlabel');
                     this.$readout
                         .removeClass('widget-hreadout')
                         .addClass('widget-vreadout');
 
                 } else {
                     this.$slider_container
                         .removeClass('widget-vslider')
                         .addClass('widget-hslider');
                     this.$el
                         .removeClass('widget-vbox-single')
                         .addClass('widget-hbox-single');
                     this.$label
                         .removeClass('widget-vlabel')
                         .addClass('widget-hlabel');
                     this.$readout
                         .removeClass('widget-vreadout')
                         .addClass('widget-hreadout');
                 }
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
                 
                 var readout = this.model.get('readout');
                 if (readout) {
                     this.$readout.show();
                 } else {
                     this.$readout.hide();
                 }
             }
             return IntSliderView.__super__.update.apply(this);
         },
         
         events: {
             // Dictionary of events and their handlers.
             "slide" : "handleSliderChange"
         }, 
 
         handleSliderChange: function(e, ui) { 
             // Called when the slider value is changed.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             if (this.model.get("_range")) {
                 var actual_value = ui.values.map(this._validate_slide_value);
                 this.$readout.text(actual_value.join("-"));
             } else {
                 var actual_value = this._validate_slide_value(ui.value);
                 this.$readout.text(actual_value);
             }
             this.model.set('value', actual_value, {updated_view: this});
             this.touch();
         },
 
         _validate_slide_value: function(x) {
             // Validate the value of the slider before sending it to the back-end
             // and applying it to the other views on the page.
 
             // Double bit-wise not truncates the decimel (int cast).
             return ~~x;
         },
     });
 
 
     var IntTextView = widget.DOMWidgetView.extend({    
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('form-control')
                 .addClass('widget-numeric-text')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },
         
         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 value = this.model.get('value');
                 if (this._parse_value(this.$textbox.val()) != value) {
                     this.$textbox.val(value);
                 }
                 
                 if (this.model.get('disabled')) {
                     this.$textbox.attr('disabled','disabled');
                 } else {
                     this.$textbox.removeAttr('disabled');
                 }
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return IntTextView.__super__.update.apply(this);
         },
 
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            this.$textbox.css(name, value);
+        },
+
         events: {
             // Dictionary of events and their handlers.
             "keyup input"  : "handleChanging",
             "paste input"  : "handleChanging",
             "cut input"    : "handleChanging",
 
             // Fires only when control is validated or looses focus.
             "change input" : "handleChanged"
         }, 
         
         handleChanging: function(e) { 
             // Handles and validates user input.
             
             // Try to parse value as a int.
             var numericalValue = 0;
             if (e.target.value !== '') {
                 var trimmed = e.target.value.trim();
                 if (!(['-', '-.', '.', '+.', '+'].indexOf(trimmed) >= 0)) {
                     numericalValue = this._parse_value(e.target.value);    
                 }                
             }
             
             // If parse failed, reset value to value stored in model.
             if (isNaN(numericalValue)) {
                 e.target.value = this.model.get('value');
             } else if (!isNaN(numericalValue)) {
                 if (this.model.get('max') !== undefined) {
                     numericalValue = Math.min(this.model.get('max'), numericalValue);
                 }
                 if (this.model.get('min') !== undefined) {
                     numericalValue = Math.max(this.model.get('min'), numericalValue);
                 }
                 
                 // Apply the value if it has changed.
                 if (numericalValue != this.model.get('value')) {
             
                     // Calling model.set will trigger all of the other views of the 
                     // model to update.
                     this.model.set('value', numericalValue, {updated_view: this});
                     this.touch();
                 }
             }
         },
         
         handleChanged: function(e) {
             // Applies validated input.
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         },
 
         _parse_value: function(value) {
             // Parse the value stored in a string.
             return  parseInt(value);
         },
     });
 
 
     var ProgressView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$progress = $('<div />')
                 .addClass('progress')
                 .addClass('widget-progress')
                 .appendTo(this.$el);
             this.$bar = $('<div />')
                 .addClass('progress-bar')
                 .css('width', '50%')
                 .appendTo(this.$progress);
             this.update(); // Set defaults.
         },
         
         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.
             var value = this.model.get('value');
             var max = this.model.get('max');
             var min = this.model.get('min');
             var percent = 100.0 * (value - min) / (max - min);
             this.$bar.css('width', percent + '%');
             
             var description = this.model.get('description');
             if (description.length === 0) {
                 this.$label.hide();
             } else {
                 this.$label.text(description);
                 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                 this.$label.show();
             }
             return ProgressView.__super__.update.apply(this);
         }, 
+
+        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') {
+                this.$progress.css(name, value);
+            } else if (name == 'color') {                
+                this.$bar.css('background', value);
+            } else {
+                this.$bar.css(name, value);
+            }
+        },
     });
 
     return {
         'IntSliderView': IntSliderView, 
         'IntTextView': IntTextView,
         'ProgressView': ProgressView,
     };
 });

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

@@ -1,376 +1,401 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "base/js/utils",
     "jquery",
     "bootstrap",
 ], function(widget, utils, $){
 
     var DropdownView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .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);
             
             // 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('value_name');
                 if (selected_item_text.trim().length === 0) {
                     this.$droplabel.html("&nbsp;");
                 } else {
                     this.$droplabel.text(selected_item_text);
                 }
                 
                 var items = this.model.get('value_names');
                 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.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return DropdownView.__super__.update.apply(this);
         },
 
+        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);
+            } if (name.substring(0, 4) == 'font') {
+                this.$droplabel.css(name, value);
+                this.$droplist.css(name, value);
+            } else if (name == 'width') {
+                this.$buttongroup.width(value);
+                var width = value - this.$dropbutton.width();
+                this.$droplist.css(name, width);
+                this.$droplabel.css(name, width);
+            } else if (name == 'height') {
+                this.$droplist.css(name, value);
+                this.$dropbutton.css(name, value);
+            } else {
+                this.$droplabel.css(name, value);
+                this.$droplist.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('value_name', $(e.target).text(), {updated_view: this});
             this.touch();
         },
         
     });
 
 
     var RadioButtonsView = widget.DOMWidgetView.extend({    
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .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('value_names');
                 var disabled = this.model.get('disabled');
                 var that = this;
                 _.each(items, function(item, index) {
                     var item_query = ' :input[value="' + 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)
                             .prependTo($label)
                             .on('click', $.proxy(that.handle_click, that));
                     }
                     
                     var $item_element = that.$container.find(item_query);
                     if (that.model.get('value_name') == 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);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return RadioButtonsView.__super__.update.apply(this);
         },
 
         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('value_name', $(e.target).val(), {updated_view: this});
             this.touch();
         },
     });
     
 
     var ToggleButtonsView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('btn-group')
                 .attr('data-toggle', 'buttons-radio')
                 .appendTo(this.$el);
             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('value_names');
                 var disabled = this.model.get('disabled');
                 var that = this;
                 var item_html;
                 _.each(items, function(item, index) {
                     if (item.trim().length == 0) {
                         item_html = "&nbsp;";
                     } else {
                         item_html = utils.escape_html(item);
                     }
                     var item_query = '[data-value="' + item + '"]';
                     var $item_element = that.$buttongroup.find(item_query);
                     if (!$item_element.length) {
                         $item_element = $('<button/>')
                             .attr('type', 'button')
                             .addClass('btn btn-default')
                             .html(item_html)
                             .appendTo(that.$buttongroup)
                             .attr('data-value', item)
                             .on('click', $.proxy(that.handle_click, that));
                     }
                     if (that.model.get('value_name') == item) {
                         $item_element.addClass('active');
                     } else {
                         $item_element.removeClass('active');
                     }
                     $item_element.prop('disabled', disabled); 
                 });
                 
                 // Remove items that no longer exist.
                 this.$buttongroup.find('button').each(function(i, obj) {
                     var value = $(obj).data('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(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return ToggleButtonsView.__super__.update.apply(this);
         },
 
         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('value_name', $(e.target).data('value'), {updated_view: this});
             this.touch();
         },    
     });
     
 
     var SelectView = widget.DOMWidgetView.extend({    
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$listbox = $('<select />')
                 .addClass('widget-listbox form-control')
                 .attr('size', 6)
                 .appendTo(this.$el);
             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('value_names');
                 var that = this;
                 _.each(items, function(item, index) {
                    var item_query = ' :contains("' + item + '")';
                     if (that.$listbox.find(item_query).length === 0) {
                         $('<option />')
                             .text(item)
                             .attr('value_name', item)
                             .appendTo(that.$listbox)
                             .on('click', $.proxy(that.handle_click, that));
                     } 
                 });
 
                 // Select the correct element
                 this.$listbox.val(this.model.get('value_name'));
                 
                 // 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.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return SelectView.__super__.update.apply(this);
         },
 
         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('value_name', $(e.target).text(), {updated_view: this});
             this.touch();
         },    
     });
     
     return {
         'DropdownView': DropdownView,
         'RadioButtonsView': RadioButtonsView,
         'ToggleButtonsView': ToggleButtonsView,
         'SelectView': SelectView,
     };
 });

IPython/html/widgets/widget.py

@@ -1,425 +1,425 b''
 """Base Widget class.  Allows user to create widgets in the back-end that render
 in the IPython notebook front-end.
 """
 #-----------------------------------------------------------------------------
 # 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 contextlib import contextmanager
 import collections
 
 from IPython.core.getipython import get_ipython
 from IPython.kernel.comm import Comm
 from IPython.config import LoggingConfigurable
-from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, 
-    CaselessStrEnum, Tuple, CTuple, CUnicode, Int, Set
+from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, \
+    CaselessStrEnum, Tuple, CUnicode, Int, Set
 from IPython.utils.py3compat import string_types
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class CallbackDispatcher(LoggingConfigurable):
     """A structure for registering and running callbacks"""
     callbacks = List()
     
     def __call__(self, *args, **kwargs):
         """Call all of the registered callbacks."""
         value = None
         for callback in self.callbacks:
             try:
                 local_value = callback(*args, **kwargs)
             except Exception as e:
                 ip = get_ipython()
                 if ip is None:
                     self.log.warn("Exception in callback %s: %s", callback, e, exc_info=True)
                 else:
                     ip.showtraceback()
             else:
                 value = local_value if local_value is not None else value
         return value
 
     def register_callback(self, callback, remove=False):
         """(Un)Register a callback
 
         Parameters
         ----------
         callback: method handle
             Method to be registered or unregistered.
         remove=False: bool
             Whether to unregister the callback."""
         
         # (Un)Register the callback.
         if remove and callback in self.callbacks:
             self.callbacks.remove(callback)
         elif not remove and callback not in self.callbacks:
             self.callbacks.append(callback)
 
 def _show_traceback(method):
     """decorator for showing tracebacks in IPython"""
     def m(self, *args, **kwargs):
         try:
             return(method(self, *args, **kwargs))
         except Exception as e:
             ip = get_ipython()
             if ip is None:
                 self.log.warn("Exception in widget method %s: %s", method, e, exc_info=True)
             else:
                 ip.showtraceback()
     return m
 
 class Widget(LoggingConfigurable):
     #-------------------------------------------------------------------------
     # Class attributes
     #-------------------------------------------------------------------------
     _widget_construction_callback = None
     widgets = {}
 
     @staticmethod
     def on_widget_constructed(callback):
         """Registers a callback to be called when a widget is constructed.
 
         The callback must have the following signature:
         callback(widget)"""
         Widget._widget_construction_callback = callback
 
     @staticmethod
     def _call_widget_constructed(widget):
         """Static method, called when a widget is constructed."""
         if Widget._widget_construction_callback is not None and callable(Widget._widget_construction_callback):
             Widget._widget_construction_callback(widget)
 
     #-------------------------------------------------------------------------
     # Traits
     #-------------------------------------------------------------------------
     _model_name = Unicode('WidgetModel', help="""Name of the backbone model 
         registered in the front-end to create and sync this widget with.""")
     _view_name = Unicode('WidgetView', help="""Default view registered in the front-end
         to use to represent the widget.""", sync=True)
     comm = Instance('IPython.kernel.comm.Comm')
     
     msg_throttle = Int(3, sync=True, help="""Maximum number of msgs the 
         front-end can send before receiving an idle msg from the back-end.""")
     
     keys = List()
     def _keys_default(self):
         return [name for name in self.traits(sync=True)]
     
     _property_lock = Tuple((None, None))
     _send_state_lock = Int(0)
     _states_to_send = Set(allow_none=False)
     _display_callbacks = Instance(CallbackDispatcher, ())
     _msg_callbacks = Instance(CallbackDispatcher, ())
     
     #-------------------------------------------------------------------------
     # (Con/de)structor
     #-------------------------------------------------------------------------
     def __init__(self, **kwargs):
         """Public constructor"""
         self._model_id = kwargs.pop('model_id', None)
         super(Widget, self).__init__(**kwargs)
 
         self.on_trait_change(self._handle_property_changed, self.keys)
         Widget._call_widget_constructed(self)
         self.open()
 
     def __del__(self):
         """Object disposal"""
         self.close()
 
     #-------------------------------------------------------------------------
     # Properties
     #-------------------------------------------------------------------------
 
     def open(self):
         """Open a comm to the frontend if one isn't already open."""
         if self.comm is None:
             if self._model_id is None:
                 self.comm = Comm(target_name=self._model_name)
                 self._model_id = self.model_id
             else:
                 self.comm = Comm(target_name=self._model_name, comm_id=self._model_id)
             self.comm.on_msg(self._handle_msg)
             Widget.widgets[self.model_id] = self
 
             # first update
             self.send_state()
 
     @property
     def model_id(self):
         """Gets the model id of this widget.
 
         If a Comm doesn't exist yet, a Comm will be created automagically."""
         return self.comm.comm_id
 
     #-------------------------------------------------------------------------
     # Methods
     #-------------------------------------------------------------------------
 
     def close(self):
         """Close method.
 
         Closes the underlying comm.
         When the comm is closed, all of the widget views are automatically
         removed from the front-end."""
         if self.comm is not None:
             Widget.widgets.pop(self.model_id, None)
             self.comm.close()
             self.comm = None
     
     def send_state(self, key=None):
         """Sends the widget state, or a piece of it, to the front-end.
 
         Parameters
         ----------
         key : unicode, or iterable (optional)
             A single property's name or iterable of property names to sync with the front-end.
         """
         self._send({
             "method" : "update",
             "state"  : self.get_state(key=key)
         })
 
     def get_state(self, key=None):
         """Gets the widget state, or a piece of it.
 
         Parameters
         ----------
         key : unicode or iterable (optional)
             A single property's name or iterable of property names to get.
         """
         if key is None:
             keys = self.keys
         elif isinstance(key, string_types):
             keys = [key]
         elif isinstance(key, collections.Iterable):
             keys = key
         else:
             raise ValueError("key must be a string, an iterable of keys, or None")
         state = {}
         for k in keys:
             f = self.trait_metadata(k, 'to_json', self._trait_to_json)
             value = getattr(self, k)
             state[k] = f(value)
         return state
     
     def send(self, content):
         """Sends a custom msg to the widget model in the front-end.
 
         Parameters
         ----------
         content : dict
             Content of the message to send.
         """
         self._send({"method": "custom", "content": content})
 
     def on_msg(self, callback, remove=False):
         """(Un)Register a custom msg receive callback.
 
         Parameters
         ----------
         callback: callable
             callback will be passed two arguments when a message arrives::
             
                 callback(widget, content)
             
         remove: bool
             True if the callback should be unregistered."""
         self._msg_callbacks.register_callback(callback, remove=remove)
 
     def on_displayed(self, callback, remove=False):
         """(Un)Register a widget displayed callback.
 
         Parameters
         ----------
         callback: method handler
             Must have a signature of::
             
                 callback(widget, **kwargs)
             
             kwargs from display are passed through without modification.
         remove: bool
             True if the callback should be unregistered."""
         self._display_callbacks.register_callback(callback, remove=remove)
 
     #-------------------------------------------------------------------------
     # Support methods
     #-------------------------------------------------------------------------
     @contextmanager
     def _lock_property(self, key, value):
         """Lock a property-value pair.
 
         The value should be the JSON state of the property.
 
         NOTE: This, in addition to the single lock for all state changes, is 
         flawed.  In the future we may want to look into buffering state changes 
         back to the front-end."""
         self._property_lock = (key, value)
         try:
             yield
         finally:
             self._property_lock = (None, None)
 
     @contextmanager
     def hold_sync(self):
         """Hold syncing any state until the context manager is released"""
         # We increment a value so that this can be nested.  Syncing will happen when
         # all levels have been released.
         self._send_state_lock += 1
         try:
             yield
         finally:
             self._send_state_lock -=1
             if self._send_state_lock == 0:
                 self.send_state(self._states_to_send)
                 self._states_to_send.clear()
 
     def _should_send_property(self, key, value):
         """Check the property lock (property_lock)"""
         to_json = self.trait_metadata(key, 'to_json', self._trait_to_json)
         if (key == self._property_lock[0]
             and to_json(value) == self._property_lock[1]):
             return False
         elif self._send_state_lock > 0:
             self._states_to_send.add(key)
             return False
         else:
             return True
     
     # Event handlers
     @_show_traceback
     def _handle_msg(self, msg):
         """Called when a msg is received from the front-end"""
         data = msg['content']['data']
         method = data['method']
         if not method in ['backbone', 'custom']:
             self.log.error('Unknown front-end to back-end widget msg with method "%s"' % method)
 
         # Handle backbone sync methods CREATE, PATCH, and UPDATE all in one.
         if method == 'backbone' and 'sync_data' in data:
             sync_data = data['sync_data']
             self._handle_receive_state(sync_data) # handles all methods
 
         # Handle a custom msg from the front-end
         elif method == 'custom':
             if 'content' in data:
                 self._handle_custom_msg(data['content'])
 
     def _handle_receive_state(self, sync_data):
         """Called when a state is received from the front-end."""
         for name in self.keys:
             if name in sync_data:
                 json_value = sync_data[name]
                 from_json = self.trait_metadata(name, 'from_json', self._trait_from_json)
                 with self._lock_property(name, json_value):
                     setattr(self, name, from_json(json_value))
 
     def _handle_custom_msg(self, content):
         """Called when a custom msg is received."""
         self._msg_callbacks(self, content)
 
     def _handle_property_changed(self, name, old, new):
         """Called when a property has been changed."""
         # Make sure this isn't information that the front-end just sent us.
         if self._should_send_property(name, new):
             # Send new state to front-end
             self.send_state(key=name)
 
     def _handle_displayed(self, **kwargs):
         """Called when a view has been displayed for this widget instance"""
         self._display_callbacks(self, **kwargs)
 
     def _trait_to_json(self, x):
         """Convert a trait value to json
 
         Traverse lists/tuples and dicts and serialize their values as well.
         Replace any widgets with their model_id
         """
         if isinstance(x, dict):
             return {k: self._trait_to_json(v) for k, v in x.items()}
         elif isinstance(x, (list, tuple)):
             return [self._trait_to_json(v) for v in x]
         elif isinstance(x, Widget):
             return "IPY_MODEL_" + x.model_id
         else:
             return x # Value must be JSON-able
 
     def _trait_from_json(self, x):
         """Convert json values to objects
 
         Replace any strings representing valid model id values to Widget references.
         """
         if isinstance(x, dict):
             return {k: self._trait_from_json(v) for k, v in x.items()}
         elif isinstance(x, (list, tuple)):
             return [self._trait_from_json(v) for v in x]
         elif isinstance(x, string_types) and x.startswith('IPY_MODEL_') and x[10:] in Widget.widgets:
             # we want to support having child widgets at any level in a hierarchy
             # trusting that a widget UUID will not appear out in the wild
             return Widget.widgets[x]
         else:
             return x
 
     def _ipython_display_(self, **kwargs):
         """Called when `IPython.display.display` is called on the widget."""
         # Show view.  By sending a display message, the comm is opened and the
         # initial state is sent.
         self._send({"method": "display"})
         self._handle_displayed(**kwargs)
 
     def _send(self, msg):
         """Sends a message to the model in the front-end."""
         self.comm.send(msg)
 
 
 class DOMWidget(Widget):
     visible = Bool(True, help="Whether the widget is visible.", sync=True)
-    _css = CTuple(sync=True, help="CSS property list: (selector, key, value)")
-    _dom_classes = CTuple(sync=True, help="DOM classes applied to widget.$el.")
+    _css = Tuple(sync=True, help="CSS property list: (selector, key, value)")
+    _dom_classes = Tuple(sync=True, help="DOM classes applied to widget.$el.")
     
     width = CUnicode(sync=True)
     height = CUnicode(sync=True)
 
     fore_color = Unicode(sync=True)
     back_color = Unicode(sync=True)
     border_color = Unicode(sync=True)
 
     border_width = CUnicode(sync=True)
     border_style = CaselessStrEnum(values=[ # http://www.w3schools.com/cssref/pr_border-style.asp
         'none', 
         'hidden', 
         'dotted', 
         'dashed', 
         'solid', 
         'double', 
         'groove', 
         'ridge', 
         'inset', 
         'outset', 
         'initial', 
         'inherit', ''],
         default_value='', sync=True)
 
     font_style = CaselessStrEnum(values=[ # http://www.w3schools.com/cssref/pr_font_font-style.asp
         'normal', 
         'italic', 
         'oblique', 
         'initial', 
         'inherit', ''], 
         default_value='', sync=True)
     font_weight = CaselessStrEnum(values=[ # http://www.w3schools.com/cssref/pr_font_weight.asp
         'normal', 
         'bold', 
         'bolder', 
         'lighter',
         'initial', 
         'inherit', ''] + [str(100 * (i+1)) for i in range(9)], 
         default_value='', sync=True)
     font_size = CUnicode(sync=True)
     font_family = Unicode(sync=True)

IPython/html/widgets/widget_float.py

@@ -1,170 +1,171 b''
 """Float class.  
 
 Represents an unbounded float 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 .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, CFloat, Bool, Enum, Tuple
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class _Float(DOMWidget):
     value = CFloat(0.0, help="Float value", sync=True) 
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
 
 
 class _BoundedFloat(_Float):
     max = CFloat(100.0, help="Max value", sync=True)
     min = CFloat(0.0, help="Min value", sync=True)
     step = CFloat(0.1, help="Minimum step that the value can take (ignored by some views)", sync=True)
 
     def __init__(self, *pargs, **kwargs):
         """Constructor"""
         DOMWidget.__init__(self, *pargs, **kwargs)
         self._validate('value', None, self.value)
         self.on_trait_change(self._validate, ['value', 'min', 'max'])
 
     def _validate(self, name, old, new):
         """Validate value, max, min."""
         if self.min > new or new > self.max:
             self.value = min(max(new, self.min), self.max)
 
 
 class FloatText(_Float):
     _view_name = Unicode('FloatTextView', sync=True)
 
 
 class BoundedFloatText(_BoundedFloat):
     _view_name = Unicode('FloatTextView', sync=True)
 
 
 class FloatSlider(_BoundedFloat):
     _view_name = Unicode('FloatSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
     _range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
+    slider_color = Unicode(sync=True)
 
 
 class FloatProgress(_BoundedFloat):
     _view_name = Unicode('ProgressView', sync=True)
 
 class _FloatRange(_Float):
     value = Tuple(CFloat, CFloat, default_value=(0.0, 1.0), help="Tuple of (lower, upper) bounds", sync=True)
     lower = CFloat(0.0, help="Lower bound", sync=False)
     upper = CFloat(1.0, help="Upper bound", sync=False)
     
     def __init__(self, *pargs, **kwargs):
         value_given = 'value' in kwargs
         lower_given = 'lower' in kwargs
         upper_given = 'upper' in kwargs
         if value_given and (lower_given or upper_given):
             raise ValueError("Cannot specify both 'value' and 'lower'/'upper' for range widget")
         if lower_given != upper_given:
             raise ValueError("Must specify both 'lower' and 'upper' for range widget")
         
         DOMWidget.__init__(self, *pargs, **kwargs)
         
         # ensure the traits match, preferring whichever (if any) was given in kwargs
         if value_given:
             self.lower, self.upper = self.value
         else:
             self.value = (self.lower, self.upper)
         
         self.on_trait_change(self._validate, ['value', 'upper', 'lower'])
     
     def _validate(self, name, old, new):
         if name == 'value':
             self.lower, self.upper = min(new), max(new)
         elif name == 'lower':
             self.value = (new, self.value[1])
         elif name == 'upper':
             self.value = (self.value[0], new)
 
 class _BoundedFloatRange(_FloatRange):
     step = CFloat(1.0, help="Minimum step that the value can take (ignored by some views)", sync=True)
     max = CFloat(100.0, help="Max value", sync=True)
     min = CFloat(0.0, help="Min value", sync=True)
     
     def __init__(self, *pargs, **kwargs):
         any_value_given = 'value' in kwargs or 'upper' in kwargs or 'lower' in kwargs
         _FloatRange.__init__(self, *pargs, **kwargs)
         
         # ensure a minimal amount of sanity
         if self.min > self.max:
             raise ValueError("min must be <= max")
         
         if any_value_given:
             # if a value was given, clamp it within (min, max)
             self._validate("value", None, self.value)
         else:
             # otherwise, set it to 25-75% to avoid the handles overlapping
             self.value = (0.75*self.min + 0.25*self.max,
                           0.25*self.min + 0.75*self.max)
         # callback already set for 'value', 'lower', 'upper'
         self.on_trait_change(self._validate, ['min', 'max'])
 
 
     def _validate(self, name, old, new):
         if name == "min":
             if new > self.max:
                 raise ValueError("setting min > max")
             self.min = new
         elif name == "max":
             if new < self.min:
                 raise ValueError("setting max < min")
             self.max = new
         
         low, high = self.value
         if name == "value":
             low, high = min(new), max(new)
         elif name == "upper":
             if new < self.lower:
                 raise ValueError("setting upper < lower")
             high = new
         elif name == "lower":
             if new > self.upper:
                 raise ValueError("setting lower > upper")
             low = new
         
         low = max(self.min, min(low, self.max))
         high = min(self.max, max(high, self.min))
         
         # determine the order in which we should update the
         # lower, upper traits to avoid a temporary inverted overlap
         lower_first = high < self.lower
         
         self.value = (low, high)
         if lower_first:
             self.lower = low
             self.upper = high
         else:
             self.upper = high
             self.lower = low
 
 
 class FloatRangeSlider(_BoundedFloatRange):
     _view_name = Unicode('FloatSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal',
         help="Vertical or horizontal.", sync=True)
     _range = Bool(True, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
 
 # Remove in IPython 4.0
 FloatTextWidget = DeprecatedClass(FloatText, 'FloatTextWidget')
 BoundedFloatTextWidget = DeprecatedClass(BoundedFloatText, 'BoundedFloatTextWidget')
 FloatSliderWidget = DeprecatedClass(FloatSlider, 'FloatSliderWidget')
 FloatProgressWidget = DeprecatedClass(FloatProgress, 'FloatProgressWidget')

IPython/html/widgets/widget_int.py

@@ -1,174 +1,175 b''
 """Int class.  
 
 Represents an unbounded int 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 .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, CInt, Bool, Enum, Tuple
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class _Int(DOMWidget):
     """Base class used to create widgets that represent an int."""
     value = CInt(0, help="Int value", sync=True) 
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
 
 
 class _BoundedInt(_Int):
     """Base class used to create widgets that represent a int that is bounded
     by a minium and maximum."""
     step = CInt(1, help="Minimum step that the value can take (ignored by some views)", sync=True)
     max = CInt(100, help="Max value", sync=True)
     min = CInt(0, help="Min value", sync=True)
 
     def __init__(self, *pargs, **kwargs):
         """Constructor"""
         DOMWidget.__init__(self, *pargs, **kwargs)
         self.on_trait_change(self._validate, ['value', 'min', 'max'])
 
     def _validate(self, name, old, new):
         """Validate value, max, min."""
         if self.min > new or new > self.max:
             self.value = min(max(new, self.min), self.max)
 
 
 class IntText(_Int):
     """Textbox widget that represents a int."""
     _view_name = Unicode('IntTextView', sync=True)
 
 
 class BoundedIntText(_BoundedInt):
     """Textbox widget that represents a int bounded by a minimum and maximum value."""
     _view_name = Unicode('IntTextView', sync=True)
 
 
 class IntSlider(_BoundedInt):
     """Slider widget that represents a int bounded by a minimum and maximum value."""
     _view_name = Unicode('IntSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
     _range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
+    slider_color = Unicode(sync=True)
 
 
 class IntProgress(_BoundedInt):
     """Progress bar that represents a int bounded by a minimum and maximum value."""
     _view_name = Unicode('ProgressView', sync=True)
 
 class _IntRange(_Int):
     value = Tuple(CInt, CInt, default_value=(0, 1), help="Tuple of (lower, upper) bounds", sync=True)
     lower = CInt(0, help="Lower bound", sync=False)
     upper = CInt(1, help="Upper bound", sync=False)
     
     def __init__(self, *pargs, **kwargs):
         value_given = 'value' in kwargs
         lower_given = 'lower' in kwargs
         upper_given = 'upper' in kwargs
         if value_given and (lower_given or upper_given):
             raise ValueError("Cannot specify both 'value' and 'lower'/'upper' for range widget")
         if lower_given != upper_given:
             raise ValueError("Must specify both 'lower' and 'upper' for range widget")
         
         DOMWidget.__init__(self, *pargs, **kwargs)
         
         # ensure the traits match, preferring whichever (if any) was given in kwargs
         if value_given:
             self.lower, self.upper = self.value
         else:
             self.value = (self.lower, self.upper)
 
         self.on_trait_change(self._validate, ['value', 'upper', 'lower'])
     
     def _validate(self, name, old, new):
         if name == 'value':
             self.lower, self.upper = min(new), max(new)
         elif name == 'lower':
             self.value = (new, self.value[1])
         elif name == 'upper':
             self.value = (self.value[0], new)
 
 class _BoundedIntRange(_IntRange):
     step = CInt(1, help="Minimum step that the value can take (ignored by some views)", sync=True)
     max = CInt(100, help="Max value", sync=True)
     min = CInt(0, help="Min value", sync=True)
 
     def __init__(self, *pargs, **kwargs):
         any_value_given = 'value' in kwargs or 'upper' in kwargs or 'lower' in kwargs
         _IntRange.__init__(self, *pargs, **kwargs)
         
         # ensure a minimal amount of sanity
         if self.min > self.max:
             raise ValueError("min must be <= max")
         
         if any_value_given:
             # if a value was given, clamp it within (min, max)
             self._validate("value", None, self.value)
         else:
             # otherwise, set it to 25-75% to avoid the handles overlapping
             self.value = (0.75*self.min + 0.25*self.max,
                           0.25*self.min + 0.75*self.max)
         # callback already set for 'value', 'lower', 'upper'
         self.on_trait_change(self._validate, ['min', 'max'])
 
     def _validate(self, name, old, new):
         if name == "min":
             if new > self.max:
                 raise ValueError("setting min > max")
             self.min = new
         elif name == "max":
             if new < self.min:
                 raise ValueError("setting max < min")
             self.max = new
         
         low, high = self.value
         if name == "value":
             low, high = min(new), max(new)
         elif name == "upper":
             if new < self.lower:
                 raise ValueError("setting upper < lower")
             high = new
         elif name == "lower":
             if new > self.upper:
                 raise ValueError("setting lower > upper")
             low = new
         
         low = max(self.min, min(low, self.max))
         high = min(self.max, max(high, self.min))
         
         # determine the order in which we should update the
         # lower, upper traits to avoid a temporary inverted overlap
         lower_first = high < self.lower
         
         self.value = (low, high)
         if lower_first:
             self.lower = low
             self.upper = high
         else:
             self.upper = high
             self.lower = low
 
 class IntRangeSlider(_BoundedIntRange):
     _view_name = Unicode('IntSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal',
         help="Vertical or horizontal.", sync=True)
     _range = Bool(True, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
 
 # Remove in IPython 4.0
 IntTextWidget = DeprecatedClass(IntText, 'IntTextWidget')
 BoundedIntTextWidget = DeprecatedClass(BoundedIntText, 'BoundedIntTextWidget')
 IntSliderWidget = DeprecatedClass(IntSlider, 'IntSliderWidget')
 IntProgressWidget = DeprecatedClass(IntProgress, 'IntProgressWidget')