Skip to content

Commit fa02040

Browse files
arschmitzarschmitz
committed
Spinner: Add classes option
1 parent 026e2d8 commit fa02040

File tree

3 files changed

+61
-18
lines changed

3 files changed

+61
-18
lines changed

‎tests/unit/spinner/spinner_common.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
TestHelpers.commonWidgetTests( "spinner", {
22
defaults: {
3+
classes: {
4+
"ui-spinner": "ui-corner-all",
5+
"ui-spinner-up": "ui-corner-tr",
6+
"ui-spinner-down": "ui-corner-br"
7+
},
38
culture: null,
49
disabled: false,
510
icons: {

‎tests/unit/spinner/spinner_core.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,27 @@ var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp;
44

55
module( "spinner: core" );
66

7+
test( "markup structure", function() {
8+
expect( 9 );
9+
var element = $( "#spin" ).spinner(),
10+
spinner = element.spinner( "widget" ),
11+
up = spinner.find( ".ui-spinner-up" ),
12+
down = spinner.find( ".ui-spinner-down" );
13+
14+
ok( element.hasClass( "ui-spinner-input" ), "input is .ui-spinner-input" );
15+
16+
ok( spinner.hasClass( "ui-spinner" ), "main element is .ui-spinner" );
17+
ok( spinner.hasClass( "ui-widget" ), "main element is .ui-widget" );
18+
ok( spinner.hasClass( "ui-widget-content" ), "main element is .ui-widget-content" );
19+
ok( spinner.hasClass( "ui-corner-all" ), "main element is .ui-corner-all" );
20+
21+
ok( up.hasClass( "ui-spinner-button" ), "up button is .ui-spinner-button" );
22+
ok( up.hasClass( "ui-corner-tr" ), "up button is .ui-corner-tr" );
23+
24+
ok( down.hasClass( "ui-spinner-button" ), "down button is .ui-spinner-button" );
25+
ok( down.hasClass( "ui-corner-br" ), "down button is .ui-corner-br" );
26+
});
27+
728
test( "keydown UP on input, increases value not greater than max", function() {
829
expect( 5 );
930
var element = $( "#spin" ).val( 70 ).spinner({

‎ui/spinner.js

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ return $.widget( "ui.spinner", {
4141
defaultElement: "<input>",
4242
widgetEventPrefix: "spin",
4343
options: {
44+
classes: {
45+
"ui-spinner": "ui-corner-all",
46+
"ui-spinner-up": "ui-corner-tr",
47+
"ui-spinner-down": "ui-corner-br"
48+
},
4449
culture: null,
4550
icons: {
4651
down: "ui-icon-triangle-1-s",
@@ -203,20 +208,31 @@ return $.widget( "ui.spinner", {
203208

204209
_draw: function() {
205210
var uiSpinner = this.uiSpinner = this.element
206-
.addClass( "ui-spinner-input" )
207211
.attr( "autocomplete", "off" )
208212
.wrap( this._uiSpinnerHtml() )
209213
.parent()
210214
// add buttons
211215
.append( this._buttonHtml() );
212216

217+
this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
218+
this._addClass( "ui-spinner-input" );
219+
213220
this.element.attr( "role", "spinbutton" );
214221

215222
// button bindings
216-
this.buttons = uiSpinner.find( ".ui-spinner-button" )
223+
this.buttons = uiSpinner.find( "a" )
217224
.attr( "tabIndex", -1 )
218-
.button()
219-
.removeClass( "ui-corner-all" );
225+
.button();
226+
227+
// Right now button does not support classes once it does adjust this with classes
228+
this._removeClass( this.buttons, "ui-corner-all" );
229+
230+
this._addClass( this.buttons.eq( 0 ), "ui-spinner-button ui-spinner-up" );
231+
this._addClass( this.buttons.eq( 1 ), "ui-spinner-button ui-spinner-down" );
232+
this._addClass( this.buttons.first().find( "span span" ), null,
233+
"ui-icon " + this.options.icons.up );
234+
this._addClass( this.buttons.last().find( "span span" ), null,
235+
"ui-icon " + this.options.icons.down );
220236

221237
// IE 6 doesn't understand height: 50% for the buttons
222238
// unless the wrapper has an explicit height
@@ -254,16 +270,16 @@ return $.widget( "ui.spinner", {
254270
},
255271

256272
_uiSpinnerHtml: function() {
257-
return "<span class='ui-spinner ui-widget ui-widget-content ui-corner-all'></span>";
273+
return "<span></span>";
258274
},
259275

260276
_buttonHtml: function() {
261277
return "" +
262-
"<a class='ui-spinner-button ui-spinner-up ui-corner-tr'>" +
263-
"<span class='ui-icon " + this.options.icons.up + "'>&#9650;</span>" +
278+
"<a>" +
279+
"<span>&#9650;</span>" +
264280
"</a>" +
265-
"<a class='ui-spinner-button ui-spinner-down ui-corner-br'>" +
266-
"<span class='ui-icon " + this.options.icons.down + "'>&#9660;</span>" +
281+
"<a>" +
282+
"<span>&#9660;</span>" +
267283
"</a>";
268284
},
269285

@@ -371,8 +387,9 @@ return $.widget( "ui.spinner", {
371387
},
372388

373389
_setOption: function( key, value ) {
390+
var prevValue, first, last;
374391
if ( key === "culture" || key === "numberFormat" ) {
375-
var prevValue = this._parse( this.element.val() );
392+
prevValue = this._parse( this.element.val() );
376393
this.options[ key ] = value;
377394
this.element.val( this._format( prevValue ) );
378395
return;
@@ -384,18 +401,18 @@ return $.widget( "ui.spinner", {
384401
}
385402
}
386403
if ( key === "icons" ) {
387-
this.buttons.first().find( ".ui-icon" )
388-
.removeClass( this.options.icons.up )
389-
.addClass( value.up );
390-
this.buttons.last().find( ".ui-icon" )
391-
.removeClass( this.options.icons.down )
392-
.addClass( value.down );
404+
first = this.buttons.first().find( ".ui-icon" );
405+
this._removeClass( first, null, this.options.icons.up );
406+
this._addClass( first, null, value.up );
407+
last = this.buttons.last().find( ".ui-icon" );
408+
this._removeClass( last, null, this.options.icons.down );
409+
this._addClass( last, null, value.down );
393410
}
394411

395412
this._super( key, value );
396413

397414
if ( key === "disabled" ) {
398-
this.widget().toggleClass( "ui-state-disabled", !!value );
415+
this._toggleClass( this.widget(), null, "ui-state-disabled", !!value );
399416
this.element.prop( "disabled", !!value );
400417
this.buttons.button( value ? "disable" : "enable" );
401418
}
@@ -461,13 +478,13 @@ return $.widget( "ui.spinner", {
461478

462479
_destroy: function() {
463480
this.element
464-
.removeClass( "ui-spinner-input" )
465481
.prop( "disabled", false )
466482
.removeAttr( "autocomplete" )
467483
.removeAttr( "role" )
468484
.removeAttr( "aria-valuemin" )
469485
.removeAttr( "aria-valuemax" )
470486
.removeAttr( "aria-valuenow" );
487+
471488
this.uiSpinner.replaceWith( this.element );
472489
},
473490

0 commit comments

Comments
 (0)