Slider: Implement Classes Option

Fixes gh-7716
Closes gh-8153

Author: cgack

build/tasks/options/jscs.js

@@ -26,6 +26,9 @@ module.exports = {
 			"js/widgets/forms/rangeslider.js",
 			"js/widgets/forms/rangeslider.backcompat.js",
 			"js/tests/unit/rangeslider/*.js",
+			"js/widgets/forms/slider.js",
+			"js/widgets/forms/slider.backcompat.js",
+			"js/tests/unit/slider/*.js",
 			"js/widgets/controlgroup.js",
 			"js/widgets/controlgroup.backcompat.js",
 			"js/widgets/tabs.ajax.js",

demos/jqm-contents.php

@@ -215,7 +215,6 @@
 	<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
 		<ul>
 			<li data-filtertext="form slider widget range input single sliders"><a href="../slider/" data-ajax="false">Slider</a></li>
-			<li data-filtertext="form slider widget flipswitch slider binary select flip toggle switch"><a href="../slider-flipswitch/" data-ajax="false">Slider flip toggle switch</a></li>
 			<li data-filtertext="form slider tooltip handle value input range sliders"><a href="../slider-tooltip/" data-ajax="false">Slider tooltip</a></li>
 		</ul>
 	</div>

demos/slider/index.php

@@ -43,7 +43,7 @@
 
 		<h1>Slider <a href="http://api.jquerymobile.com/slider/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>
 
-		<p>Sliders are used to enter numeric values along a continuum and can also be dual handle <a href="../rangeslider/">range sliders</a> or <a href="../slider-flipswitch/">flip switches</a>.
+		<p>Sliders are used to enter numeric values along a continuum and can also be dual handle <a href="../rangeslider/">range sliders</a>.
 			</p>
 
                 <h2>Basic slider</h2>

js/index.php

@@ -71,6 +71,7 @@
 	'widgets/forms/flipswitch.js',
 	'widgets/forms/flipswitch.backcompat.js',
 	'widgets/forms/slider.js',
+	'widgets/forms/slider.backcompat.js',
 	'widgets/forms/slider.tooltip.js',
 	'widgets/forms/rangeslider.js',
 	'widgets/forms/rangeslider.backcompat.js',

js/jquery.mobile.js

@@ -40,6 +40,7 @@
 			"./widgets/forms/checkboxradio",
 			"./widgets/forms/checkboxradio.backcompat",
 			"./widgets/forms/slider",
+			"./widgets/forms/slider.backcompat",
 			"./widgets/forms/slider.tooltip",
 			"./widgets/forms/flipswitch",
 			"./widgets/forms/flipswitch.backcompat",

js/widgets/forms/slider.backcompat.js

@@ -0,0 +1,84 @@
+/*!
+ * jQuery Mobile Slider Backcompat @VERSION
+ * http://jquerymobile.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Slider
+//>>group: Forms
+//>>description: Deprecated Slider features
+
+( function( factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define( [
+			"jquery",
+			"../widget.backcompat",
+			"./slider" ], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery );
+	}
+} )( function( $ ) {
+
+if ( $.mobileBackcompat !== false ) {
+
+	$.widget( "mobile.slider", $.mobile.slider, {
+		options: {
+			corners: true,
+			mini: false,
+			highlight: false
+		},
+		classProp: "ui-slider",
+		_create: function() {
+			this._super();
+
+			if ( this.options.mini ) {
+				this._addClass( this.slider, "ui-mini", null );
+			}
+
+			if ( this.options.highlight && this.slider.find( ".ui-slider-bg" ).length === 0 ) {
+				this.valuebg = ( function( slider ) {
+					var bg = document.createElement( "div" );
+					bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;
+					return $( bg ).prependTo( slider );
+				} )( this.slider );
+			}
+
+			if ( this.options.highlight ) {
+				this._setHighlight( this.options.highlight );
+			}
+
+			if ( this.options.corners !== undefined ) {
+				this._setCorners( this.options.corners );
+			}
+		},
+
+		_setHighlight: function( value ) {
+			if ( value ) {
+				this.options.highlight = !!value;
+				this.refresh();
+			} else if ( this.valuebg ) {
+				this.valuebg.remove();
+				this.valuebg = false;
+			}
+		},
+
+		_setCorners: function( value ) {
+			this._toggleClass( this.slider, null, "ui-corner-all", value );
+			this._toggleClass( this.element, null, "ui-corner-all", value );
+		}
+	} );
+
+	$.widget( "mobile.slider", $.mobile.slider, $.mobile.widget.backcompat );
+
+}
+
+return $.mobile.slider;
+
+} );