Skip to content
Permalink
Browse files

Progressbar: Add classes option

Ref #7053
Ref gh-1411
  • Loading branch information...
arschmitz committed Dec 3, 2014
1 parent 2ebef69 commit ea35ded6ed12747d88bf163c3b7fa15506ef521a
@@ -9,6 +9,7 @@
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "progressbar" ],
@@ -1,6 +1,10 @@
TestHelpers.commonWidgetTests( "progressbar", {
defaults: {
classes: {},
classes: {
"ui-progressbar": "ui-corner-all",
"ui-progressbar-value": "ui-corner-left",
"ui-progressbar-complete": "ui-corner-right"
},
disabled: false,
max: 100,
value: 0,
@@ -2,29 +2,33 @@

module( "progressbar: core" );

test( "markup structure", function() {
expect( 5 );
var element = $( "#progressbar" ).progressbar();
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
ok( !element.hasClass( "ui-progressbar-indeterminate" ),
"main element is not .ui-progressbar-indeterminate" );
equal( element.children().length, 1, "main element contains one child" );
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
"child is .ui-progressbar-value" );
test( "markup structure", function( assert ) {
expect( 7 );
var element = $( "#progressbar" ).progressbar(),
value = element.children().eq( 0 );

assert.hasClasses( element, "ui-progressbar ui-widget ui-widget-content" );
assert.hasClasses( value, "ui-progressbar-value ui-widget-header" );
assert.lacksClasses( value, "ui-progressbar-complete" );
assert.lacksClasses( element, "ui-progressbar-indeterminate" );
equal( element.children().length, 1, "Main element contains one child" );

element.progressbar( "option", "value", 100 );
assert.hasClasses( value, "ui-progressbar-complete ui-widget-header ui-progressbar-value" );
equal( element.children().children().length, 0, "no overlay div" );
});

test( "markup structure - indeterminate", function() {
test( "markup structure - indeterminate", function( assert ) {
expect( 5 );
var element = $( "#progressbar" ).progressbar({ value: false });
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
ok( element.hasClass( "ui-progressbar-indeterminate" ),
"main element is .ui-progressbar-indeterminate" );
equal( element.children().length, 1, "main element contains one child" );
ok( element.children().eq( 0 ).hasClass( "ui-progressbar-value" ),
"child is .ui-progressbar-value" );
equal( element.children().children( ".ui-progressbar-overlay" ).length, 1,
".ui-progressbar-value has .ui-progressbar-overlay" );
var element = $( "#progressbar" ).progressbar({ value: false }),
children = element.children();

assert.hasClasses( element, "ui-progressbar ui-progressbar-indeterminate ui-widget ui-widget-content" );
assert.hasClasses( children[ 0 ], "ui-progressbar-value ui-widget-header" );
equal( children.length, 1, "Main element contains one child" );
assert.hasClasses( children[ 0 ], "ui-progressbar-value" );
equal( children.children( ".ui-progressbar-overlay" ).length, 1,
"Value has class ui-progressbar-overlay" );
});

test( "accessibility", function() {
@@ -35,6 +35,11 @@
return $.widget( "ui.progressbar", {
version: "@VERSION",
options: {
classes: {
"ui-progressbar": "ui-corner-all",
"ui-progressbar-value": "ui-corner-left",
"ui-progressbar-complete": "ui-corner-right"
},
max: 100,
value: 0,

@@ -45,27 +50,26 @@ return $.widget( "ui.progressbar", {
min: 0,

_create: function() {

// Constrain initial value
this.oldValue = this.options.value = this._constrainedValue();

this.element
.addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
.attr({
// Only set static values, aria-valuenow and aria-valuemax are
// set inside _refreshValue()
role: "progressbar",
"aria-valuemin": this.min
});
this.element.attr({

this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
.appendTo( this.element );
// Only set static values; aria-valuenow and aria-valuemax are
// set inside _refreshValue()
role: "progressbar",
"aria-valuemin": this.min
});
this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );

this.valueDiv = $( "<div>" ).appendTo( this.element );
this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" );
this._refreshValue();
},

_destroy: function() {
this.element
.removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
.removeAttr( "role" )
.removeAttr( "aria-valuemin" )
.removeAttr( "aria-valuemax" )
@@ -116,9 +120,8 @@ return $.widget( "ui.progressbar", {
value = Math.max( this.min, value );
}
if ( key === "disabled" ) {
this.element
.toggleClass( "ui-state-disabled", !!value )
.attr( "aria-disabled", value );
this.element.attr( "aria-disabled", value );
this._toggleClass( null, "ui-state-disabled", !!value );
}
this._super( key, value );
},
@@ -133,15 +136,18 @@ return $.widget( "ui.progressbar", {

this.valueDiv
.toggle( this.indeterminate || value > this.min )
.toggleClass( "ui-corner-right", value === this.options.max )
.width( percentage.toFixed(0) + "%" );

this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
this
._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
value === this.options.max )
._toggleClass( "ui-progressbar-indeterminate", null, this.indeterminate );

if ( this.indeterminate ) {
this.element.removeAttr( "aria-valuenow" );
if ( !this.overlayDiv ) {
this.overlayDiv = $( "<div class='ui-progressbar-overlay'></div>" ).appendTo( this.valueDiv );
this.overlayDiv = $( "<div>" ).appendTo( this.valueDiv );
this._addClass( this.overlayDiv, "ui-progressbar-overlay" );
}
} else {
this.element.attr({

0 comments on commit ea35ded

Please sign in to comment.
You can’t perform that action at this time.