Merge pull request #6943 from jdfreder/numtextfix

Allow empty text box *while typing* for numeric widgets

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

@@ -1,455 +1,457 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jqueryui",
     "base/js/keyboard",
     "bootstrap"
 ], function(widget, $, keyboard){
     
     var IntSliderView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox widget-slider');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .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-readout')
                 .attr('contentEditable', true)
                 .hide();
 
             this.model.on('change:slider_color', function(sender, value) {
                 this.$slider.find('a').css('background', value);
             }, this);
             this.$slider.find('a').css('background', this.model.get('slider_color'));
             
             // 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', '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 max = this.model.get('max');
                 var min = this.model.get('min');
                 if (min <= max) {
                     if (max !== undefined) this.$slider.slider('option', 'max', max);
                     if (min !== undefined) this.$slider.slider('option', 'min', min);
                 }
 
                 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')
                         .addClass('widget-vbox');
 
                 } else {
                     this.$slider_container
                         .removeClass('widget-vslider')
                         .addClass('widget-hslider');
                     this.$el
                         .removeClass('widget-vbox')
                         .addClass('widget-hbox');
                 }
 
                 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",
             "blur [contentEditable=true]": "handleTextChange",
             "keydown [contentEditable=true]": "handleKeyDown"
         }, 
 
         handleKeyDown: function(e) {
             if (e.keyCode == keyboard.keycodes.enter) {
                 e.preventDefault();
                 this.handleTextChange();
             }
         },
 
         handleTextChange: function() {
             // this handles the entry of text into the contentEditable label
             // first, the value is checked if it contains a parseable number
             //      (or pair of numbers, for the _range case)
             // then it is clamped within the min-max range of the slider
             // finally, the model is updated if the value is to be changed
             //
             // if any of these conditions are not met, the text is reset
             //
             // the step size is not enforced
 
             var text = this.$readout.text();
             var vmin = this.model.get('min');
             var vmax = this.model.get('max');
             if (this.model.get("_range")) {
                 // range case
                 // ranges can be expressed either "val-val" or "val:val" (+spaces)
                 var match = this._range_regex.exec(text);
                 if (match) {
                     var values = [this._parse_value(match[1]),
                                   this._parse_value(match[2])];
                     // reject input where NaN or lower > upper
                     if (isNaN(values[0]) ||
                         isNaN(values[1]) ||
                         (values[0] > values[1])) {
                         this.$readout.text(this.model.get('value').join('-'));
                     } else {
                         // clamp to range
                         values = [Math.max(Math.min(values[0], vmax), vmin),
                                   Math.max(Math.min(values[1], vmax), vmin)];
 
                         if ((values[0] != this.model.get('value')[0]) ||
                             (values[1] != this.model.get('value')[1])) {
                             this.$readout.text(values.join('-'));
                             this.model.set('value', values, {updated_view: this});
                             this.touch();
                         } else {
                             this.$readout.text(this.model.get('value').join('-'));
                         }
                     }
                 } else {
                     this.$readout.text(this.model.get('value').join('-'));
                 }
             } else {
                 // single value case
                 var value = this._parse_value(text);
                 if (isNaN(value)) {
                     this.$readout.text(this.model.get('value'));
                 } else {
                     value = Math.max(Math.min(value, vmax), vmin);
 
                     if (value != this.model.get('value')) {
                         this.$readout.text(value);
                         this.model.set('value', value, {updated_view: this});
                         this.touch();
                     } else {
                         this.$readout.text(this.model.get('value'));
                     }
                 }
             }
         },
 
         _parse_value: parseInt,
 
         _range_regex: /^\s*([+-]?\d+)\s*[-:]\s*([+-]?\d+)/,
 
         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 widget-text');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .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();
+            var trimmed = e.target.value.trim();
+            if (trimmed === '') {
+                return;
+            } else {
                 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) {
+            if (e.target.value.trim() === '' || e.target.value !== this.model.get('value')) {
                 e.target.value = this.model.get('value');
             }
         },
 
         _parse_value: parseInt
     });
 
 
     var ProgressView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox widget-progress');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .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.
 
             this.model.on('change:bar_style', function(model, value) {
                 this.update_bar_style();
             }, this);
             this.update_bar_style('');
         },
         
         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_bar_style: function(previous_trait_value) {
             var class_map = {
                 success: ['progress-bar-success'],
                 info: ['progress-bar-info'],
                 warning: ['progress-bar-warning'],
                 danger: ['progress-bar-danger']
             };
             this.update_mapped_classes(class_map, 'bar_style', previous_trait_value, this.$bar);
         },
 
         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' || name == 'margin' || 
                 name == 'padding') {
                 
                 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,
     };
 });