Progressbar: Refactor to better handle option changes and sanitize values. Fixes...

diff --git a/tests/unit/progressbar/progressbar_options.js b/tests/unit/progressbar/progressbar_options.js
index fd5988ebdeb2818fcee4cbf587f85c8935f7b8b5..e4d9b7ab8e33f417df99c71a0c740082c6a81819 100644 (file)
--- a/tests/unit/progressbar/progressbar_options.js
+++ b/tests/unit/progressbar/progressbar_options.js
@@ -60,3 +60,21 @@ test( "{ max : 5, value : 10 }", function() {
        });
        deepEqual( 5, $( "#progressbar" ).progressbar( "value" ) );
 });
+
+test( "{ value : 10, max : 5 }", function() {
+       expect( 1 );
+       $("#progressbar").progressbar({
+               max: 5,
+               value: 10
+       });
+       deepEqual( 5, $( "#progressbar" ).progressbar( "value" ) );
+});
+
+test( "{ max : 5 }", function() {
+       expect( 1 );
+       $("#progressbar").progressbar({
+               max: 10,
+               value: 10
+       }).progressbar( "option", "max", 5 );
+       deepEqual( 5, $( "#progressbar" ).progressbar( "value" ) );
+});

diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js
index cb561ebc6b32d210974df12f1f4453b66cba01bb..5a7fd87d37e93dd1c7da9bff5291f392930ab6fa 100644 (file)
--- a/ui/jquery.ui.progressbar.js
+++ b/ui/jquery.ui.progressbar.js
@@ -24,19 +24,22 @@ $.widget( "ui.progressbar", {
        min: 0,
 
        _create: function() {
+               // Constrain initial value
+               this.options.value = this._constrainedValue();
+
                this.element
                        .addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
                        .attr({
                                role: "progressbar",
                                "aria-valuemin": this.min,
                                "aria-valuemax": this.options.max,
-                               "aria-valuenow": this._value()
+                               "aria-valuenow": this.options.value
                        });
 
                this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
                        .appendTo( this.element );
 
-               this.oldValue = this._value();
+               this.oldValue = this.options.value;
                this._refreshValue();
        },
 
@@ -53,52 +56,82 @@ $.widget( "ui.progressbar", {
 
        value: function( newValue ) {
                if ( newValue === undefined ) {
-                       return this._value();
+                       return this.options.value;
                }
 
-               this._setOption( "value", newValue );
+               this._setOption( "value", this._constrainedValue( newValue ) );
                return this;
        },
 
-       _setOption: function( key, value ) {
-               if ( key === "value" ) {
-                       this.options.value = value;
-                       this._refreshValue();
-                       if ( this._value() === this.options.max ) {
-                               this._trigger( "complete" );
-                       }
+       _constrainedValue: function( newValue ) {
+               var val;
+               if ( newValue === undefined ) {
+                       val = this.options.value;
+               } else {
+                       val = newValue;
                }
 
-               this._super( key, value );
-       },
-
-       _value: function() {
-               var val = this.options.value;
-               // normalize invalid value
+               // sanitize value
                if ( typeof val !== "number" ) {
                        val = 0;
                }
                return Math.min( this.options.max, Math.max( this.min, val ) );
        },
 
+       _setOptions: function( options ) {
+               var key, val;
+
+               for ( key in options ) {
+                       if ( key === "value" ) {
+                               // Store value to update last in case max is being updated at the same time
+                               val = options[ key ];
+                       } else {
+                               this._setOption( key, options[ key ] );
+                       }
+               }
+
+               if ( val !== undefined ) {
+                       this._setOption( "value", val );
+               }
+       },
+
+       _setOption: function( key, value ) {
+               if ( key === "max" ) {
+                       // Don't allow a max less than min
+                       this.options.max = Math.max( this.min, value );
+                       this.options.value = this._constrainedValue();
+               }
+               if ( key === "value" ) {
+                       this.options.value = this._constrainedValue( value );
+               }
+               else {
+                       this._super( key, value );
+               }
+
+               this._refreshValue();
+       },
+
        _percentage: function() {
-               return 100 * this._value() / this.options.max;
+               return 100 * this.options.value / this.options.max;
        },
 
        _refreshValue: function() {
-               var value = this.value(),
-                       percentage = this._percentage();
+               var percentage = this._percentage();
 
-               if ( this.oldValue !== value ) {
-                       this.oldValue = value;
+               if ( this.oldValue !== this.options.value ) {
+                       this.oldValue = this.options.value;
                        this._trigger( "change" );
                }
+               if ( this.options.value === this.options.max ) {
+                       this._trigger( "complete" );
+               }
 
                this.valueDiv
-                       .toggle( value > this.min )
-                       .toggleClass( "ui-corner-right", value === this.options.max )
+                       .toggle( this.options.value > this.min )
+                       .toggleClass( "ui-corner-right", this.options.value === this.options.max )
                        .width( percentage.toFixed(0) + "%" );
-               this.element.attr( "aria-valuenow", value );
+               this.element.attr( "aria-valuemax", this.options.max );
+               this.element.attr( "aria-valuenow", this.options.value );
        }
 });