Spinner: Add classes option

Ref #7053
Ref gh-1411

diff --git a/tests/unit/spinner/spinner.html b/tests/unit/spinner/spinner.html
index 58988d742350a9245096b3e79d35e397056f0570..c427f5de55c92dd1f059ea1baef2c7265bfb11fc 100644 (file)
--- a/tests/unit/spinner/spinner.html
+++ b/tests/unit/spinner/spinner.html
@@ -11,6 +11,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", "button", "spinner" ],

diff --git a/tests/unit/spinner/spinner_common.js b/tests/unit/spinner/spinner_common.js
index 871af7db447d159e5a6160f81c54dc69ad564811..3eee4f9f07643f6ecdbfa1b8b3b2b5cd0545331c 100644 (file)
--- a/tests/unit/spinner/spinner_common.js
+++ b/tests/unit/spinner/spinner_common.js
@@ -1,6 +1,10 @@
 TestHelpers.commonWidgetTests( "spinner", {
        defaults: {
-               classes: {},
+               classes: {
+                       "ui-spinner": "ui-corner-all",
+                       "ui-spinner-up": "ui-corner-tr",
+                       "ui-spinner-down": "ui-corner-br"
+               },
                culture: null,
                disabled: false,
                icons: {

diff --git a/tests/unit/spinner/spinner_core.js b/tests/unit/spinner/spinner_core.js
index 03088fecdcaf6445a170e92fde094cdb6c2b86f3..b3e1e6d235757e291d0f31eebcedd0828d9de254 100644 (file)
--- a/tests/unit/spinner/spinner_core.js
+++ b/tests/unit/spinner/spinner_core.js
@@ -4,6 +4,21 @@ var simulateKeyDownUp = TestHelpers.spinner.simulateKeyDownUp;
 
 module( "spinner: core" );
 
+test( "markup structure", function( assert ) {
+       expect( 6 );
+       var element = $( "#spin" ).spinner(),
+               spinner = element.spinner( "widget" ),
+               up = spinner.find( ".ui-spinner-up" ),
+               down = spinner.find( ".ui-spinner-down" );
+
+       assert.hasClasses( element, "ui-spinner-input" );
+       assert.hasClasses( spinner, "ui-spinner ui-widget ui-widget-content" );
+       assert.hasClasses( up, "ui-spinner-button ui-spinner-up ui-widget" );
+       equal( up.length, 1, "Spinner contains exactly one up button" );
+       assert.hasClasses( down, "ui-spinner-button ui-spinner-down ui-widget" );
+       equal( down.length, 1, "Spinner contains exactly one down button" );
+});
+
 test( "keydown UP on input, increases value not greater than max", function() {
        expect( 5 );
        var element = $( "#spin" ).val( 70 ).spinner({

diff --git a/ui/spinner.js b/ui/spinner.js
index 1d3212add3c53157911bf422659a8f6fcdfcf5d3..05869496070ad4fdc9e1d502e0deb9fdba41d12c 100644 (file)
--- a/ui/spinner.js
+++ b/ui/spinner.js
@@ -49,6 +49,11 @@ return $.widget( "ui.spinner", {
        defaultElement: "<input>",
        widgetEventPrefix: "spin",
        options: {
+               classes: {
+                       "ui-spinner": "ui-corner-all",
+                       "ui-spinner-down": "ui-corner-br",
+                       "ui-spinner-up": "ui-corner-tr"
+               },
                culture: null,
                icons: {
                        down: "ui-icon-triangle-1-s",
@@ -211,20 +216,31 @@ return $.widget( "ui.spinner", {
 
        _draw: function() {
                var uiSpinner = this.uiSpinner = this.element
-                       .addClass( "ui-spinner-input" )
                        .attr( "autocomplete", "off" )
                        .wrap( this._uiSpinnerHtml() )
                        .parent()
                                // add buttons
                                .append( this._buttonHtml() );
 
+               this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
+               this._addClass( "ui-spinner-input" );
+
                this.element.attr( "role", "spinbutton" );
 
                // button bindings
-               this.buttons = uiSpinner.find( ".ui-spinner-button" )
+               this.buttons = uiSpinner.children( "a" )
                        .attr( "tabIndex", -1 )
-                       .button()
-                       .removeClass( "ui-corner-all" );
+                       .button();
+
+               // TODO: Right now button does not support classes this is already updated in button PR
+               this._removeClass( this.buttons, "ui-corner-all" );
+
+               this._addClass( this.buttons.first(), "ui-spinner-button ui-spinner-up" );
+               this._addClass( this.buttons.last(), "ui-spinner-button ui-spinner-down" );
+               this._addClass( this.buttons.first().find( ".ui-button-text span" ), null,
+                       "ui-icon " + this.options.icons.up );
+               this._addClass( this.buttons.last().find( ".ui-button-text span" ), null,
+                       "ui-icon " + this.options.icons.down );
 
                // IE 6 doesn't understand height: 50% for the buttons
                // unless the wrapper has an explicit height
@@ -262,16 +278,16 @@ return $.widget( "ui.spinner", {
        },
 
        _uiSpinnerHtml: function() {
-               return "<span class='ui-spinner ui-widget ui-widget-content ui-corner-all'></span>";
+               return "<span>";
        },
 
        _buttonHtml: function() {
                return "" +
-                       "<a class='ui-spinner-button ui-spinner-up ui-corner-tr'>" +
-                               "<span class='ui-icon " + this.options.icons.up + "'>&#9650;</span>" +
+                       "<a>" +
+                               "<span>&#9650;</span>" +
                        "</a>" +
-                       "<a class='ui-spinner-button ui-spinner-down ui-corner-br'>" +
-                               "<span class='ui-icon " + this.options.icons.down + "'>&#9660;</span>" +
+                       "<a>" +
+                               "<span>&#9660;</span>" +
                        "</a>";
        },
 
@@ -379,8 +395,10 @@ return $.widget( "ui.spinner", {
        },
 
        _setOption: function( key, value ) {
+               var prevValue, first, last;
+
                if ( key === "culture" || key === "numberFormat" ) {
-                       var prevValue = this._parse( this.element.val() );
+                       prevValue = this._parse( this.element.val() );
                        this.options[ key ] = value;
                        this.element.val( this._format( prevValue ) );
                        return;
@@ -392,18 +410,18 @@ return $.widget( "ui.spinner", {
                        }
                }
                if ( key === "icons" ) {
-                       this.buttons.first().find( ".ui-icon" )
-                               .removeClass( this.options.icons.up )
-                               .addClass( value.up );
-                       this.buttons.last().find( ".ui-icon" )
-                               .removeClass( this.options.icons.down )
-                               .addClass( value.down );
+                       first = this.buttons.first().find( ".ui-icon" );
+                       this._removeClass( first, null, this.options.icons.up );
+                       this._addClass( first, null, value.up );
+                       last = this.buttons.last().find( ".ui-icon" );
+                       this._removeClass( last, null, this.options.icons.down );
+                       this._addClass( last, null, value.down );
                }
 
                this._super( key, value );
 
                if ( key === "disabled" ) {
-                       this.widget().toggleClass( "ui-state-disabled", !!value );
+                       this._toggleClass( this.uiSpinner, null, "ui-state-disabled", !!value );
                        this.element.prop( "disabled", !!value );
                        this.buttons.button( value ? "disable" : "enable" );
                }
@@ -469,13 +487,13 @@ return $.widget( "ui.spinner", {
 
        _destroy: function() {
                this.element
-                       .removeClass( "ui-spinner-input" )
                        .prop( "disabled", false )
                        .removeAttr( "autocomplete" )
                        .removeAttr( "role" )
                        .removeAttr( "aria-valuemin" )
                        .removeAttr( "aria-valuemax" )
                        .removeAttr( "aria-valuenow" );
+
                this.uiSpinner.replaceWith( this.element );
        },