Rangeslider: Implement Classes Option

build/tasks/options/jscs.js

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

js/index.php

@@ -70,6 +70,7 @@
 	'widgets/forms/slider.js',
 	'widgets/forms/slider.tooltip.js',
 	'widgets/forms/rangeslider.js',
+	'widgets/forms/rangeslider.backcompat.js',
 	'widgets/forms/textinput.js',
 	'widgets/forms/clearButton.js',
 	'widgets/forms/autogrow.js',

js/jquery.mobile.js

@@ -45,6 +45,7 @@
 			"./widgets/forms/slider.tooltip",
 			"./widgets/forms/flipswitch",
 			"./widgets/forms/rangeslider",
+			"./widgets/forms/rangeslider.backcompat",
 			"./widgets/forms/textinput",
 			"./widgets/forms/clearButton",
 			"./widgets/forms/autogrow",

js/widgets/forms/rangeslider.backcompat.js

@@ -0,0 +1,54 @@
+/*!
+ * jQuery Mobile Rangeslider Backcompat @VERSION
+ * http://jquerymobile.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Rangeslider
+//>>group: Forms
+//>>description: Deprecated rangeslider features
+
+( function( factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define( [
+			"jquery",
+			"../widget.backcompat",
+			"./rangeslider" ], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery );
+	}
+} )( function( $ ) {
+
+if ( $.mobileBackcompat !== false ) {
+
+	$.widget( "mobile.rangeslider", $.mobile.rangeslider, {
+		options: {
+			corners: true,
+			mini: false,
+			highlight: true
+		},
+		classProp: "ui-rangeslider",
+
+		_create: function() {
+			this._super();
+
+			if ( this.options.mini !== undefined ) {
+				this._toggleClass( "ui-mini", null, !!this.options.mini );
+			}
+		}
+	} );
+
+	$.widget( "mobile.rangeslider", $.mobile.rangeslider, $.mobile.widget.backcompat );
+
+}
+
+return $.mobile.rangeslider;
+
+} );

js/widgets/forms/rangeslider.js

@@ -32,41 +32,38 @@
 		// Browser globals
 		factory( jQuery );
 	}
-})( function( $ ) {
+} )( function( $ ) {
 
 	return $.widget( "mobile.rangeslider", $.extend( {
 		version: "@VERSION",
 
 		options: {
 			theme: null,
-			trackTheme: null,
-			corners: true,
-			mini: false,
-			highlight: true
+			trackTheme: null
 		},
 
 		_create: function() {
-			var $el = this.element,
-			elClass = this.options.mini ? "ui-rangeslider ui-mini" : "ui-rangeslider",
-			_inputFirst = $el.find( "input" ).first(),
-			_inputLast = $el.find( "input" ).last(),
-			_label = $el.find( "label" ).first(),
+			var _inputFirst = this.element.find( "input" ).first(),
+			_inputLast = this.element.find( "input" ).last(),
+			_label = this.element.find( "label" ).first(),
 			_sliderWidgetFirst = $.data( _inputFirst.get( 0 ), "mobile-slider" ) ||
 				$.data( _inputFirst.slider().get( 0 ), "mobile-slider" ),
-			_sliderWidgetLast = $.data( _inputLast.get(0), "mobile-slider" ) ||
+			_sliderWidgetLast = $.data( _inputLast.get( 0 ), "mobile-slider" ) ||
 				$.data( _inputLast.slider().get( 0 ), "mobile-slider" ),
 			_sliderFirst = _sliderWidgetFirst.slider,
 			_sliderLast = _sliderWidgetLast.slider,
 			firstHandle = _sliderWidgetFirst.handle,
-			_sliders = $( "<div class='ui-rangeslider-sliders' />" ).appendTo( $el );
+			_sliders = $( "<div>" );
+			this._addClass( _sliders, "ui-rangeslider-sliders" );
+			_sliders.appendTo( this.element );
 
-			_inputFirst.addClass( "ui-rangeslider-first" );
-			_inputLast.addClass( "ui-rangeslider-last" );
-			$el.addClass( elClass );
+			this._addClass( _inputFirst, "ui-rangeslider-first" );
+			this._addClass( _inputLast, "ui-rangeslider-last" );
+			this._addClass( "ui-rangeslider" );
 
 			_sliderFirst.appendTo( _sliders );
 			_sliderLast.appendTo( _sliders );
-			_label.insertBefore( $el );
+			_label.insertBefore( this.element );
 			firstHandle.prependTo( _sliderLast );
 
 			$.extend( this, {
@@ -79,7 +76,7 @@
 				_sliderTarget: false,
 				_sliders: _sliders,
 				_proxy: false
-			});
+			} );
 
 			this.refresh();
 			this._on( this.element.find( "input.ui-slider-input" ), {
@@ -89,30 +86,33 @@
 				"slidebeforechange": "_change",
 				"blur": "_change",
 				"keyup": "_change"
-			});
-			this._on({
+			} );
+			this._on( {
 				"mousedown":"_change"
-			});
+			} );
 			this._on( this.element.closest( "form" ), {
 				"reset":"_handleReset"
-			});
+			} );
 			this._on( firstHandle, {
 				"vmousedown": "_dragFirstHandle"
-			});
+			} );
 		},
 		_handleReset: function() {
 			var self = this;
-			//we must wait for the stack to unwind before updateing other wise sliders will not have updated yet
+
+			// We must wait for the stack to unwind before updating
+			// otherwise sliders will not have updated yet
 			setTimeout( function() {
 				self._updateHighlight();
-			},0);
+			}, 0 );
 		},
 
 		_dragFirstHandle: function( event ) {
-			//if the first handle is dragged send the event to the first slider
-			$.data( this._inputFirst.get(0), "mobile-slider" ).dragging = true;
-			$.data( this._inputFirst.get(0), "mobile-slider" ).refresh( event );
-			$.data( this._inputFirst.get(0), "mobile-slider" )._trigger( "start" );
+
+			// If the first handle is dragged send the event to the first slider
+			$.data( this._inputFirst.get( 0 ), "mobile-slider" ).dragging = true;
+			$.data( this._inputFirst.get( 0 ), "mobile-slider" ).refresh( event );
+			$.data( this._inputFirst.get( 0 ), "mobile-slider" )._trigger( "start" );
 			return false;
 		},
 
@@ -121,11 +121,12 @@
 				otherSlider = ( first ) ? this._inputLast : this._inputFirst;
 
 			this._sliderTarget = false;
-			//if the drag was initiated on an extreme and the other handle is focused send the events to
-			//the closest handle
+
+			// If the drag was initiated on an extreme and the other handle is
+			// focused send the events to the closest handle
 			if ( ( this._proxy === "first" && first ) || ( this._proxy === "last" && !first ) ) {
-				$.data( otherSlider.get(0), "mobile-slider" ).dragging = true;
-				$.data( otherSlider.get(0), "mobile-slider" ).refresh( event );
+				$.data( otherSlider.get( 0 ), "mobile-slider" ).dragging = true;
+				$.data( otherSlider.get( 0 ), "mobile-slider" ).refresh( event );
 				return false;
 			}
 		},
@@ -134,15 +135,17 @@
 			var first = $( event.target ).is( this._inputFirst );
 
 			this._proxy = false;
-			//this stops dragging of the handle and brings the active track to the front
-			//this makes clicks on the track go the the last handle used
+
+			// This stops dragging of the handle and brings the active track to the front
+			// this makes clicks on the track go the the last handle used
 			this.element.find( "input" ).trigger( "vmouseup" );
 			this._sliderFirst.css( "z-index", first ? 1 : "" );
 		},
 
 		_slidebeforestart: function( event ) {
 			this._sliderTarget = false;
-			//if the track is the target remember this and the original value
+
+			// If the track is the target remember this and the original value
 			if ( $( event.originalEvent.target ).hasClass( "ui-slider-track" ) ) {
 				this._sliderTarget = true;
 				this._targetVal = $( event.target ).val();
@@ -158,14 +161,6 @@
 				this._setTrackTheme( options.trackTheme );
 			}
 
-			if ( options.mini !== undefined ) {
-				this._setMini( options.mini );
-			}
-
-			if ( options.highlight !== undefined ) {
-				this._setHighlight( options.highlight );
-			}
-
 			if ( options.disabled !== undefined ) {
 				this._setDisabled( options.disabled );
 			}
@@ -182,14 +177,14 @@
 				this.options.disabled = true;
 			}
 
-			$el.find( "input" ).slider({
+			$el.find( "input" ).slider( {
 				theme: o.theme,
 				trackTheme: o.trackTheme,
 				disabled: o.disabled,
 				corners: o.corners,
 				mini: o.mini,
 				highlight: o.highlight
-			}).slider( "refresh" );
+			} ).slider( "refresh" );
 			this._updateHighlight();
 		},
 
@@ -206,35 +201,40 @@
 				thisSlider = first ? this._inputFirst : this._inputLast,
 				otherSlider = first ? this._inputLast : this._inputFirst;
 
-			if ( ( this._inputFirst.val() > this._inputLast.val() && event.type === "mousedown" && !$(event.target).hasClass("ui-slider-handle")) ) {
+			if ( ( this._inputFirst.val() > this._inputLast.val() && event.type === "mousedown" &&
+				!$( event.target ).hasClass( "ui-slider-handle" ) ) ) {
 				thisSlider.blur();
 			} else if ( event.type === "mousedown" ) {
 				return;
 			}
 			if ( min > max && !this._sliderTarget ) {
-				//this prevents min from being greater then max
-				thisSlider.val( first ? max: min ).slider( "refresh" );
+
+				// This prevents min from being greater then max
+				thisSlider.val( first ? max : min ).slider( "refresh" );
 				this._trigger( "normalize" );
 			} else if ( min > max ) {
-				//this makes it so clicks on the target on either extreme go to the closest handle
+
+				// This makes it so clicks on the target on either extreme go to the closest handle
 				thisSlider.val( this._targetVal ).slider( "refresh" );
 
-				//You must wait for the stack to unwind so first slider is updated before updating second
+				// You must wait for the stack to unwind so
+				// first slider is updated before updating second
 				setTimeout( function() {
-					otherSlider.val( first ? min: max ).slider( "refresh" );
-					$.data( otherSlider.get(0), "mobile-slider" ).handle.focus();
+					otherSlider.val( first ? min : max ).slider( "refresh" );
+					$.data( otherSlider.get( 0 ), "mobile-slider" ).handle.focus();
 					self._sliderFirst.css( "z-index", first ? "" : 1 );
 					self._trigger( "normalize" );
 				}, 0 );
 				this._proxy = ( first ) ? "first" : "last";
 			}
-			//fixes issue where when both _sliders are at min they cannot be adjusted
+
+			// Fixes issue where when both _sliders are at min they cannot be adjusted
 			if ( min === max ) {
-				$.data( thisSlider.get(0), "mobile-slider" ).handle.css( "z-index", 1 );
-				$.data( otherSlider.get(0), "mobile-slider" ).handle.css( "z-index", 0 );
+				$.data( thisSlider.get( 0 ), "mobile-slider" ).handle.css( "z-index", 1 );
+				$.data( otherSlider.get( 0 ), "mobile-slider" ).handle.css( "z-index", 0 );
 			} else {
-				$.data( otherSlider.get(0), "mobile-slider" ).handle.css( "z-index", "" );
-				$.data( thisSlider.get(0), "mobile-slider" ).handle.css( "z-index", "" );
+				$.data( otherSlider.get( 0 ), "mobile-slider" ).handle.css( "z-index", "" );
+				$.data( thisSlider.get( 0 ), "mobile-slider" ).handle.css( "z-index", "" );
 			}
 
 			this._updateHighlight();
@@ -245,14 +245,16 @@
 		},
 
 		_updateHighlight: function() {
-			var min = parseInt( $.data( this._inputFirst.get(0), "mobile-slider" ).handle.get(0).style.left, 10 ),
-				max = parseInt( $.data( this._inputLast.get(0), "mobile-slider" ).handle.get(0).style.left, 10 ),
-				width = (max - min);
+			var min = parseInt( $.data( this._inputFirst.get( 0 ), "mobile-slider" )
+									.handle.get( 0 ).style.left, 10 ),
+				max = parseInt( $.data( this._inputLast.get( 0 ), "mobile-slider" )
+									.handle.get( 0 ).style.left, 10 ),
+				width = ( max - min );
 
-			this.element.find( ".ui-slider-bg" ).css({
+			this.element.find( ".ui-slider-bg" ).css( {
 				"margin-left": min + "%",
 				"width": width + "%"
-			});
+			} );
 		},
 
 		_setTheme: function( value ) {
@@ -265,31 +267,19 @@
 			this._inputLast.slider( "option", "trackTheme", value );
 		},
 
-		_setMini: function( value ) {
-			this._inputFirst.slider( "option", "mini", value );
-			this._inputLast.slider( "option", "mini", value );
-			this.element.toggleClass( "ui-mini", !!value );
-		},
-
-		_setHighlight: function( value ) {
-			this._inputFirst.slider( "option", "highlight", value );
-			this._inputLast.slider( "option", "highlight", value );
-		},
-
 		_setDisabled: function( value ) {
 			this._inputFirst.prop( "disabled", value );
 			this._inputLast.prop( "disabled", value );
 		},
 
 		_destroy: function() {
 			this._label.prependTo( this.element );
-			this.element.removeClass( "ui-rangeslider ui-mini" );
 			this._inputFirst.after( this._sliderFirst );
 			this._inputLast.after( this._sliderLast );
 			this._sliders.remove();
-			this.element.find( "input" ).removeClass( "ui-rangeslider-first ui-rangeslider-last" ).slider( "destroy" );
+			this.element.find( "input" ).slider( "destroy" );
 		}
 
 	}, $.mobile.behaviors.formReset ) );
 
-});
+} );