Skip to content

Code Review for the classes changes #790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
petersendidit wants to merge 12 commits into from
Closed

Code Review for the classes changes #790

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cd43b3d
Widget: add the _classes method.
petersendidit Oct 19, 2012
11528ff
Tabs: use the _classes method.
petersendidit Oct 19, 2012
66a1347
Dialog: use the _classes method.
petersendidit Apr 23, 2013
d1cc07b
Accordion: use the _classes method.
petersendidit Apr 23, 2013
b4e2f81
Autocomplete: use the _classes method.
petersendidit Apr 24, 2013
8746e4d
Slider: use the _classes method.
petersendidit Apr 24, 2013
bb7f6e9
Spinner: use the _classes method.
petersendidit Apr 24, 2013
6fca6fe
Progressbar: use the _classes method.
petersendidit Apr 24, 2013
05fba95
Menu: use the _classes method.
petersendidit Apr 25, 2013
c3b8a80
Button: use the _classes method.
petersendidit Apr 25, 2013
171e6a2
Tooltip: use the _classes method.
petersendidit Apr 25, 2013
051c9c1
Selectmenu: use the _classes method.
petersendidit Aug 23, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Progressbar: use the _classes method. 
Fixes #7053
  • Loading branch information
@petersendidit
petersendidit committed Aug 24, 2014
commit 6fca6feec36858273c9123d98cada57be658cdeb
7 changes: 7 additions & 0 deletions tests/unit/progressbar/progressbar_common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
TestHelpers.commonWidgetTests( "progressbar", {
defaults: {
classes: {
"ui-progressbar": "ui-corner-all",
"ui-progressbar-value": "ui-corner-left",
"ui-progressbar-overlay": null,
"ui-progressbar-indeterminate": null,
"ui-progressbar-complete": "ui-corner-right"
},
disabled: false,
max: 100,
value: 0,
Expand Down
14 changes: 12 additions & 2 deletions tests/unit/progressbar/progressbar_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
module( "progressbar: core" );

test( "markup structure", function() {
expect( 5 );
var element = $( "#progressbar" ).progressbar();
expect( 12 );
var element = $( "#progressbar" ).progressbar(),
value = element.children().eq( 0 );
ok( element.hasClass( "ui-progressbar" ), "main element is .ui-progressbar" );
ok( element.hasClass( "ui-widget" ), "main element is .ui-widget" );
ok( element.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" );
ok( element.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" );
ok( !value.hasClass( "ui-progressbar-complete" ), "value is not .ui-progressbar-complete" );
ok( !value.hasClass( "ui-corner-right" ), "value is not .ui-corner-right" );
element.progressbar( "option", "value", 100 );
ok( value.hasClass( "ui-progressbar-complete" ), "value is .ui-progressbar-complete" );
ok( value.hasClass( "ui-corner-right" ), "value is .ui-corner-right" );

ok( !element.hasClass( "ui-progressbar-indeterminate" ),
"main element is not .ui-progressbar-indeterminate" );
equal( element.children().length, 1, "main element contains one child" );
Expand Down
22 changes: 16 additions & 6 deletions ui/progressbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,13 @@
return $.widget( "ui.progressbar", {
version: "@VERSION",
options: {
classes: {
"ui-progressbar": "ui-corner-all",
"ui-progressbar-value": "ui-corner-left",
"ui-progressbar-overlay": null,
"ui-progressbar-indeterminate": null,
"ui-progressbar-complete": "ui-corner-right"
},
max: 100,
value: 0,

Expand All @@ -41,23 +48,24 @@ return $.widget( "ui.progressbar", {
this.oldValue = this.options.value = this._constrainedValue();

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

this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" )
this.valueDiv = $( "<div>" )
.addClass( this._classes( "ui-progressbar-value" ) + " ui-widget-header" )
.appendTo( this.element );

this._refreshValue();
},

_destroy: function() {
this.element
.removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" )
.removeClass( this._classes( "ui-progressbar" ) + " ui-widget ui-widget-content" )
.removeAttr( "role" )
.removeAttr( "aria-valuemin" )
.removeAttr( "aria-valuemax" )
Expand Down Expand Up @@ -125,15 +133,17 @@ return $.widget( "ui.progressbar", {

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

this.element.toggleClass( "ui-progressbar-indeterminate", this.indeterminate );
this.element.toggleClass( this._classes( "ui-progressbar-indeterminate" ), 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>" )
.addClass( this._classes( "ui-progressbar-overlay" ) )
.appendTo( this.valueDiv );
}
} else {
this.element.attr({
Expand Down