From 8976bc7e3d1f03254f914297b1be1b730690d2b8 Mon Sep 17 00:00:00 2001 From: Kris Borchers Date: Thu, 8 Nov 2012 12:02:25 -0600 Subject: [PATCH] Progressbar: Refactor to better handle option changes and sanitize values. Fixes #8785 - Progressbar: Remove _value() and always sanitize value option --- tests/unit/progressbar/progressbar_options.js | 18 ++++ ui/jquery.ui.progressbar.js | 83 +++++++++++++------ 2 files changed, 76 insertions(+), 25 deletions(-) diff --git a/tests/unit/progressbar/progressbar_options.js b/tests/unit/progressbar/progressbar_options.js index fd5988ebdeb..e4d9b7ab8e3 100644 --- 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 cb561ebc6b3..5a7fd87d37e 100644 --- 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 = $( "
" ) .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 ); } });