" );
+ 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,17 +267,6 @@
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 );
@@ -283,13 +274,12 @@
_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 ) );
-});
+} );
diff --git a/tests/unit/rangeslider/backcompat-tests.html b/tests/unit/rangeslider/backcompat-tests.html
new file mode 100644
index 00000000000..7fc7f925fdb
--- /dev/null
+++ b/tests/unit/rangeslider/backcompat-tests.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
jQuery Mobile Rangeslider Test Suite
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/unit/rangeslider/index.html b/tests/unit/rangeslider/index.html
index 7668d1e8b31..668a2dfeb09 100644
--- a/tests/unit/rangeslider/index.html
+++ b/tests/unit/rangeslider/index.html
@@ -11,7 +11,10 @@
+
diff --git a/tests/unit/rangeslider/rangeslider_backcompat.js b/tests/unit/rangeslider/rangeslider_backcompat.js
new file mode 100644
index 00000000000..db7ecfe07a1
--- /dev/null
+++ b/tests/unit/rangeslider/rangeslider_backcompat.js
@@ -0,0 +1,49 @@
+/*
+ * mobile slider unit tests
+ */
+( function( $ ) {
+ module( "jquery.mobile.rangeslider.js core" );
+
+ test( "Highlight has correct margin and width", function() {
+ expect( 2 );
+ var rangeslider = $( "#rangeslider-highlight" ),
+ rangeFirst = $( "#rangeslider-highlight-first" ),
+ rangeLast = $( "#rangeslider-highlight-last" ),
+ bg = rangeslider.find( ".ui-slider-bg" ),
+ width = rangeslider.find( ".ui-slider-track" ).first().width(),
+ range = rangeFirst.attr( "max" ) - rangeFirst.attr( "min" ),
+ cssMarginLeft, cssWidth, intWidth, bgMarginLeft, bgWidth;
+
+ // Increase first input val with 20
+ rangeFirst.val( parseInt( rangeFirst.val(), 10 ) + 20 ).slider( "refresh" );
+
+ cssMarginLeft = bg.css( "margin-left" );
+
+ // Check if browser returns a pixel or percentage value
+ if ( cssMarginLeft.indexOf( "%" ) > -1 ) {
+ bgMarginLeft = ( rangeFirst.val() / range * 100 ) + "%";
+
+ deepEqual( cssMarginLeft, bgMarginLeft, "Highlight has correct left margin" );
+ } else {
+ var intMarginLeft = parseFloat( cssMarginLeft.replace( "px", "" ) );
+
+ bgMarginLeft = Math.round( rangeFirst.val() / range * width );
+
+ // Take a rounding difference of max 2px into account
+ ok( -2 >= ( intMarginLeft - bgMarginLeft ) <= 2, "Highlight has correct left margin" );
+ }
+
+ cssWidth = bg.css( "width" );
+ intWidth = parseFloat( cssWidth.replace( "px", "" ) );
+ bgWidth = Math.round( ( rangeLast.val() - rangeFirst.val() ) / range * width );
+
+ // Take a rounding difference of max 2px into account
+ ok( -2 >= ( intWidth - bgWidth ) <= 2, "Highlight has correct width" );
+ } );
+
+ test( "Rangeslider backcompat tests", function( assert ) {
+ assert.hasClasses( $( "#mini-rangeslider" ), "ui-mini" );
+ assert.lacksClasses( $( "#nocorners-rangeslider" ), "ui-corner-all" );
+ } );
+
+} )( jQuery );
diff --git a/tests/unit/rangeslider/rangeslider_core.js b/tests/unit/rangeslider/rangeslider_core.js
index 2f7d231ea57..1260266e620 100644
--- a/tests/unit/rangeslider/rangeslider_core.js
+++ b/tests/unit/rangeslider/rangeslider_core.js
@@ -1,62 +1,28 @@
/*
* mobile slider unit tests
*/
-(function($){
+( function( $ ) {
module( "jquery.mobile.rangeslider.js core" );
- test( "Hightlight has correct margin and width", function() {
- expect( 2 );
- var rangeslider = $( "#rangeslider-highlight" ),
- rangeFirst = $( "#rangeslider-highlight-first" ),
- rangeLast = $( "#rangeslider-highlight-last" ),
- bg = rangeslider.find( ".ui-slider-bg" ),
- width = rangeslider.find( ".ui-slider-track" ).first().width(),
- range = rangeFirst.attr( "max" ) - rangeFirst.attr( "min" ),
- cssMarginLeft, cssWidth, intWidth, bgMarginLeft, bgWidth;
-
- // Increase first input val with 20
- rangeFirst.val( parseInt(rangeFirst.val(), 10) + 20 ).slider( "refresh" );
-
- cssMarginLeft = bg.css( "margin-left" );
-
- // Check if browser returns a pixel or percentage value
- if ( cssMarginLeft.indexOf( "%" ) > -1 ) {
- bgMarginLeft = ( rangeFirst.val() / range * 100 ) + "%";
-
- deepEqual( cssMarginLeft, bgMarginLeft, "Highlight has correct left margin" );
- } else {
- var intMarginLeft = parseFloat( cssMarginLeft.replace("px", "") );
-
- bgMarginLeft = Math.round( rangeFirst.val() / range * width );
- // Take a rounding difference of max 2px into account
- ok( -2 >= ( intMarginLeft - bgMarginLeft ) <= 2, "Highlight has correct left margin" );
- }
-
- cssWidth = bg.css( "width" );
- intWidth = parseFloat( cssWidth.replace("px", "") );
- bgWidth = Math.round( (rangeLast.val() - rangeFirst.val()) / range * width );
- // Take a rounding difference of max 2px into account
- ok( -2 >= ( intWidth - bgWidth ) <= 2, "Highlight has correct width" );
- });
-
test( "First input value is always lower than last input value and vice versa", function() {
expect( 2 );
- var rangeslider = $( "#rangeslider-minmax" ),
- rangeFirst = $( "#rangeslider-minmax-first" ),
+ var rangeFirst = $( "#rangeslider-minmax-first" ),
rangeLast = $( "#rangeslider-minmax-last" );
// Try to set first input val (30) higher than last input val (70)
- rangeFirst.val( parseInt(rangeFirst.val(), 10) + 60 ).slider( "refresh" );
-
- equal( rangeFirst.val(), rangeLast.val(), "First input value is equal to last input value" );
-
+ rangeFirst.val( parseInt( rangeFirst.val(), 10 ) + 60 ).slider( "refresh" );
+ equal( rangeFirst.val(), rangeLast.val(),
+ "First input value is equal to last input value" );
+
// Set first input value back to 30
rangeFirst.val( 30 ).slider( "refresh" );
+
// Try to set last input val (70) lower than first input val (30)
- rangeLast.val( parseInt(rangeLast.val(), 10) - 60 ).slider( "refresh" );
-
- equal( rangeLast.val(), rangeFirst.val(), "Last input value is equal to first input value" );
- });
+ rangeLast.val( parseInt( rangeLast.val(), 10 ) - 60 ).slider( "refresh" );
+
+ equal( rangeLast.val(), rangeFirst.val(),
+ "Last input value is equal to first input value" );
+ } );
var createEvent = function( name, target, x, y ) {
var event = $.Event( name );
@@ -74,26 +40,37 @@
track = rangeslider.find( ".ui-slider-track" ).first(),
trackOffset = track.offset(),
trackWidth = track.width();
-
- // Fake a click at the beginning of the track
- track.trigger( createEvent( "mousedown", track[0], trackOffset.left + 15, trackOffset.top + 7 ) ).trigger( "mouseup" );
+
+ // Fake a click at the beginning of the track
+ track.trigger( createEvent(
+ "mousedown",
+ track[0],
+ trackOffset.left + 15,
+ trackOffset.top + 7 ) ).trigger( "mouseup" );
+
// Check if first input value (45) has decreased
ok(
$( rangeFirst ).on( "change", function() {
rangeLast.val() < 45;
- }),
+ } ),
"Clicking at the beginning of the track updates the first input"
);
- // Fake a click at the end of the track
- track.trigger( createEvent( "mousedown", track[0], ( trackOffset.left + trackWidth ) - 15, trackOffset.top + 7 ) ).trigger( "mouseup" );
+
+ // Fake a click at the end of the track
+ track.trigger( createEvent(
+ "mousedown",
+ track[0],
+ ( trackOffset.left + trackWidth ) - 15,
+ trackOffset.top + 7 ) ).trigger( "mouseup" );
+
// Check if last input value (55) has increased
ok(
$( rangeLast ).on( "change", function() {
rangeLast.val() > 55;
- }),
+ } ),
"Clicking at the end of the track updates the last input"
);
- });
+ } );
asyncTest( "fire slidestart and slidestop on both handles", function() {
var rangeslider = $( "#rangeslider-startstop" ),
@@ -102,34 +79,34 @@
handleFirst = sliders.find( ".ui-slider-handle" ).first(),
handleLast = sliders.find( ".ui-slider-handle" ).last();
- $.testHelper.eventCascade([
+ $.testHelper.eventCascade( [
function() {
handleFirst.mousedown();
},
- "slidestart", function(timeout) {
+ "slidestart", function( timeout ) {
ok( !timeout, "slidestart on first handle fired" );
handleFirst.mouseup();
},
- "slidestop", function(timeout) {
+ "slidestop", function( timeout ) {
ok( !timeout, "slidestop on first handle fired" );
handleLast.mousedown();
},
- "slidestart", function(timeout) {
+ "slidestart", function( timeout ) {
ok( !timeout, "slidestart on last handle fired" );
handleLast.mouseup();
},
- "slidestop", function(timeout) {
+ "slidestop", function( timeout ) {
ok( !timeout, "slidestop on last handle fired" );
start();
}
- ], 50)
- });
- test( " Rangeslider is enabled/disabled correctly ", function() {
+ ], 50 );
+ } );
+ test( " Rangeslider is enabled/disabled correctly ", function( assert ) {
var rangeslider = $( "#disable-rangeslider" ),
inputFirst = $( "#range-disabled-first" ),
inputLast = $( "#range-disabled-last" ),
@@ -139,30 +116,26 @@
rangeslider.rangeslider( { disabled: true } );
ok( !!inputFirst.attr( "disabled" ), "first input is disabled" );
- ok( inputFirst.hasClass( "mobile-slider-disabled"),
- "first input gets mobile-slider-disabled" );
+ assert.hasClasses( inputFirst, "mobile-slider-disabled" );
ok( !!sliderFirst.attr( "aria-disabled" ), "first slider is aria-disabled" );
- ok( sliderFirst.hasClass( "ui-state-disabled"), "first slider has ui-state-disabled" );
+ assert.hasClasses( sliderFirst, "ui-state-disabled" );
ok( !!inputLast.attr( "disabled" ), "last input is disabled" );
- ok( inputLast.hasClass( "mobile-slider-disabled"),
- "last input gets mobile-slider-disabled" );
+ assert.hasClasses( inputLast, "mobile-slider-disabled" );
ok( !!sliderLast.attr( "aria-disabled" ), "last slider is aria-disabled" );
- ok( sliderLast.hasClass( "ui-state-disabled"), "last slider has ui-state-disabled" );
+ assert.hasClasses( sliderLast, "ui-state-disabled" );
- rangeslider.rangeslider( {disabled: false } );
+ rangeslider.rangeslider( { disabled: false } );
- deepEqual( !!inputFirst.attr( "disabled" ), false, "first input is enabled" );
- ok( !inputFirst.hasClass( "mobile-slider-disabled"),
- "first input gets mobile-slider-disabled" );
- deepEqual( sliderFirst.attr( "aria-disabled" ), "false",
+ equal( !!inputFirst.attr( "disabled" ), false, "first input is enabled" );
+ assert.lacksClasses( inputFirst, "mobile-slider-disabled" );
+ equal( sliderFirst.attr( "aria-disabled" ), "false",
"first slider aria-disabled is false" );
- ok( !sliderFirst.hasClass( "ui-state-disabled"), "first slider ui-state-disabled removed" );
- deepEqual( !!inputLast.attr( "disabled" ), false, "last input is enabled" );
- ok( !inputLast.hasClass( "mobile-slider-disabled"),
- "last input gets mobile-slider-disabled" );
- deepEqual( sliderLast.attr( "aria-disabled" ), "false",
+ assert.lacksClasses( sliderFirst, "ui-state-disabled" );
+ equal( !!inputLast.attr( "disabled" ), false, "last input is enabled" );
+ assert.lacksClasses( inputLast, "mobile-slider-disabled" );
+ equal( sliderLast.attr( "aria-disabled" ), "false",
"last slider aria-disabled is false" );
- ok( !sliderLast.hasClass( "ui-state-disabled"), "last slider ui-state-disabled removed" );
- });
+ assert.lacksClasses( sliderLast, "ui-state-disabled" );
+ } );
-})( jQuery );
+} )( jQuery );