Slider: Add classes option

Ref #7053
Ref gh-1411

diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html
index 0142b5e6bdd9f375a00894008de6abf799c01085..38520c0730a0bb2b6055acb119639b738665350f 100644 (file)
--- a/tests/unit/slider/slider.html
+++ b/tests/unit/slider/slider.html
@@ -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", "slider" ],

diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js
index a72071f793dfaafa6d998b6475c1fe49e5cf0ea2..d43869bf0c66afe3e3eb25c7a20af3180153768e 100644 (file)
--- a/tests/unit/slider/slider_common.js
+++ b/tests/unit/slider/slider_common.js
@@ -2,7 +2,11 @@ TestHelpers.commonWidgetTests( "slider", {
        defaults: {
                animate: false,
                cancel: "input,textarea,button,select,option",
-               classes: {},
+               classes: {
+                       "ui-slider": "ui-corner-all",
+                       "ui-slider-handle": "ui-corner-all",
+                       "ui-slider-range": "ui-corner-all ui-widget-header"
+               },
                delay: 0,
                disabled: false,
                distance: 0,

diff --git a/tests/unit/slider/slider_core.js b/tests/unit/slider/slider_core.js
index 3649bded03862f70c4a22b777319be38516495cc..fa86b2df46125ee325883d35a838cf4d7aa59b39 100644 (file)
--- a/tests/unit/slider/slider_core.js
+++ b/tests/unit/slider/slider_core.js
@@ -12,6 +12,18 @@ function handle() {
 // Slider Tests
 module( "slider: core" );
 
+test( "markup structure", function( assert ) {
+       expect( 4 );
+       var element = $( "<div>" ).slider({ range: true }),
+               handle = element.find( "span" ),
+               range = element.find( "div" );
+
+       assert.hasClasses( element, "ui-slider ui-slider-horizontal ui-widget ui-widget-content" );
+       assert.hasClasses( range, "ui-slider-range ui-widget-header" );
+       assert.hasClasses( handle[ 0 ], "ui-slider-handle" );
+       assert.hasClasses( handle[ 1 ], "ui-slider-handle" );
+});
+
 test( "keydown HOME on handle sets value to min", function() {
        expect( 2 );
        element = $( "<div></div>" );

diff --git a/ui/slider.js b/ui/slider.js
index fceb367f31c8ec714b4c25b6c333ab80872b1874..7d8619d43fbf24a1a8549dfd6c6520d940664d2b 100644 (file)
--- a/ui/slider.js
+++ b/ui/slider.js
@@ -39,6 +39,14 @@ return $.widget( "ui.slider", $.ui.mouse, {
 
        options: {
                animate: false,
+               classes: {
+                       "ui-slider": "ui-corner-all",
+                       "ui-slider-handle": "ui-corner-all",
+
+                       // Note: ui-widget-header isn't the most fittingly semantic framework class for this
+                       // element, but worked best visually with a variety of themes
+                       "ui-slider-range": "ui-corner-all ui-widget-header"
+               },
                distance: 0,
                max: 100,
                min: 0,
@@ -68,12 +76,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
                this._mouseInit();
                this._calculateNewMax();
 
-               this.element
-                       .addClass( "ui-slider" +
-                               " ui-slider-" + this.orientation +
-                               " ui-widget" +
-                               " ui-widget-content" +
-                               " ui-corner-all");
+               this._addClass( "ui-slider ui-slider-" + this.orientation,
+                       "ui-widget ui-widget-content" );
 
                this._refresh();
                this._setOption( "disabled", this.options.disabled );
@@ -91,8 +95,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
        _createHandles: function() {
                var i, handleCount,
                        options = this.options,
-                       existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
-                       handle = "<span class='ui-slider-handle ui-state-default ui-corner-all' tabindex='0'></span>",
+                       existingHandles = this.element.find( ".ui-slider-handle" ),
+                       handle = "<span tabindex='0'></span>",
                        handles = [];
 
                handleCount = ( options.values && options.values.length ) || 1;
@@ -108,6 +112,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
 
                this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) );
 
+               this._addClass( this.handles, "ui-slider-handle", "ui-state-default" );
+
                this.handle = this.handles.eq( 0 );
 
                this.handles.each(function( i ) {
@@ -116,8 +122,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
        },
 
        _createRange: function() {
-               var options = this.options,
-                       classes = "";
+               var options = this.options;
 
                if ( options.range ) {
                        if ( options.range === true ) {
@@ -131,24 +136,22 @@ return $.widget( "ui.slider", $.ui.mouse, {
                        }
 
                        if ( !this.range || !this.range.length ) {
-                               this.range = $( "<div></div>" )
+                               this.range = $( "<div>" )
                                        .appendTo( this.element );
 
-                               classes = "ui-slider-range" +
-                               // note: this isn't the most fittingly semantic framework class for this element,
-                               // but worked best visually with a variety of themes
-                               " ui-widget-header ui-corner-all";
+                               this._addClass( this.range, "ui-slider-range" );
                        } else {
-                               this.range.removeClass( "ui-slider-range-min ui-slider-range-max" )
-                                       // Handle range switching from true to min/max
-                                       .css({
-                                               "left": "",
-                                               "bottom": ""
-                                       });
-                       }
+                               this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" );
 
-                       this.range.addClass( classes +
-                               ( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) );
+                               // Handle range switching from true to min/max
+                               this.range.css({
+                                       "left": "",
+                                       "bottom": ""
+                               });
+                       }
+                       if ( options.range === "min" || options.range === "max" ) {
+                               this._addClass( this.range, "ui-slider-range-" + options.range );
+                       }
                } else {
                        if ( this.range ) {
                                this.range.remove();
@@ -170,14 +173,6 @@ return $.widget( "ui.slider", $.ui.mouse, {
                        this.range.remove();
                }
 
-               this.element
-                       .removeClass( "ui-slider" +
-                               " ui-slider-horizontal" +
-                               " ui-slider-vertical" +
-                               " ui-widget" +
-                               " ui-widget-content" +
-                               " ui-corner-all" );
-
                this._mouseDestroy();
        },
 
@@ -218,9 +213,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
 
                this._handleIndex = index;
 
-               closestHandle
-                       .addClass( "ui-state-active" )
-                       .focus();
+               this._addClass( closestHandle, null, "ui-state-active" );
+               closestHandle.focus();
 
                offset = closestHandle.offset();
                mouseOverHandle = !$( event.target ).parents().addBack().is( ".ui-slider-handle" );
@@ -254,7 +248,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
        },
 
        _mouseStop: function( event ) {
-               this.handles.removeClass( "ui-state-active" );
+               this._removeClass( this.handles, null, "ui-state-active" );
                this._mouseSliding = false;
 
                this._stop( event, this._handleIndex );
@@ -451,7 +445,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
                }
 
                if ( key === "disabled" ) {
-                       this.element.toggleClass( "ui-state-disabled", !!value );
+                       this._toggleClass( null, "ui-state-disabled", !!value );
                }
 
                this._super( key, value );
@@ -459,9 +453,8 @@ return $.widget( "ui.slider", $.ui.mouse, {
                switch ( key ) {
                        case "orientation":
                                this._detectOrientation();
-                               this.element
-                                       .removeClass( "ui-slider-horizontal ui-slider-vertical" )
-                                       .addClass( "ui-slider-" + this.orientation );
+                               this._removeClass( "ui-slider-horizontal ui-slider-vertical" )
+                                       ._addClass( "ui-slider-" + this.orientation );
                                this._refreshValue();
 
                                // Reset positioning from previous orientation
@@ -659,7 +652,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
                                        event.preventDefault();
                                        if ( !this._keySliding ) {
                                                this._keySliding = true;
-                                               $( event.target ).addClass( "ui-state-active" );
+                                               this._addClass( $( event.target ), null, "ui-state-active" );
                                                allowed = this._start( event, index );
                                                if ( allowed === false ) {
                                                        return;
@@ -716,7 +709,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
                                this._keySliding = false;
                                this._stop( event, index );
                                this._change( event, index );
-                               $( event.target ).removeClass( "ui-state-active" );
+                               this._removeClass( $( event.target ), null, "ui-state-active" );
                        }
                }
        }