Skip to content

Commit

Permalink
Slider: allow range option to be changed. Fixed #5602 - Slider Does N…
Browse files Browse the repository at this point in the history 
…ot Exhibit Proper Behavior When Switching Range
  • Loading branch information
@petersendidit
petersendidit committed Feb 5, 2013
1 parent b440979 commit df077ab
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 61 deletions.
103 changes: 103 additions & 0 deletions tests/unit/slider/slider_options.js
View file
Expand Up @@ -203,4 +203,107 @@ test("values", function() {
); );
}); });


test( "range", function() {
expect( 27 );
var element, range;

// min
element = $("<div></div>").slider({
range: "min",
min: 1,
max: 10,
step: 1
});

equal( element.find( ".ui-slider-handle" ).length, 1, "range min, one handle");
equal( element.find( ".ui-slider-range-min" ).length, 1, "range min" );
element.slider( "destroy" );

// max
element = $("<div></div>").slider({
range: "max",
min: 1,
max: 10,
step: 1
});

equal( element.find( ".ui-slider-handle" ).length, 1, "range max, one handle");
equal( element.find( ".ui-slider-range-max" ).length, 1, "range max" );
element.slider( "destroy" );

// true
element = $("<div></div>").slider({
range: true,
min: 1,
max: 10,
step: 1
});

range = element.find( ".ui-slider-range" );
equal( element.find( ".ui-slider-handle" ).length, 2, "range true, two handles");
ok( !range.is( ".ui-slider-range-min"), "range true" );
ok( !range.is( ".ui-slider-range-max"), "range true" );
element.slider( "destroy" );

// Change range from min to max
element = $("<div></div>").slider({
range: "min",
min: 1,
max: 10,
step: 1
}).slider( "option", "range", "max" );

equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from min to max, one handle");
equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from min to max" );
equal( element.find( ".ui-slider-range-max" ).length, 1, "range switch from min to max" );
element.slider( "destroy" );

// Change range from max to min
element = $("<div></div>").slider({
range: "max",
min: 1,
max: 10,
step: 1
}).slider( "option", "range", "min" );

equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from max to min, one handle");
equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to min" );
equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from max to min" );
element.slider( "destroy" );

// Change range from max to true
element = $("<div></div>").slider({
range: "max",
min: 1,
max: 10,
step: 1
}).slider( "option", "range", true );

equal( element.find( ".ui-slider-handle" ).length, 2, "range switch from max to true, two handles");
equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to true" );
equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from max to true" );
equal( element.slider( "option", "value" ), 0 , "option value" );
equal( element.slider( "value" ), 1 , "value" );
deepEqual( element.slider( "option", "values" ), [1, 1], "option values" );
deepEqual( element.slider( "values" ), [1, 1], "values" );
element.slider( "destroy" );

// Change range from true to min
element = $("<div></div>").slider({
range: true,
min: 1,
max: 10,
step: 1
}).slider( "option", "range", "min" );

equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from true to min, one handle");
equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from true to min" );
equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from true to min" );
equal( element.slider( "option", "value" ), 1, "value" );
equal( element.slider( "value" ), 1 , "value" );
equal( element.slider( "option", "values" ), null, "values" );
deepEqual( element.slider( "values" ), [] , "values" );
element.slider( "destroy" );
});

})(jQuery); })(jQuery);
148 changes: 87 additions & 61 deletions ui/jquery.ui.slider.js
View file
Expand Up @@ -42,12 +42,6 @@ $.widget( "ui.slider", $.ui.mouse, {
}, },


_create: function() { _create: function() {
var i, handleCount,
o = this.options,
existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",
handles = [];

this._keySliding = false; this._keySliding = false;
this._mouseSliding = false; this._mouseSliding = false;
this._animateOff = true; this._animateOff = true;
Expand All @@ -62,29 +56,32 @@ $.widget( "ui.slider", $.ui.mouse, {
" ui-widget-content" + " ui-widget-content" +
" ui-corner-all"); " ui-corner-all");


this.range = $([]); this._refresh();
this._setOption( "disabled", this.options.disabled );


if ( o.range ) { this._animateOff = false;
if ( o.range === true ) { },
if ( !o.values ) {
o.values = [ this._valueMin(), this._valueMin() ];
} else if ( o.values.length && o.values.length !== 2 ) {
o.values = [ o.values[0], o.values[0] ];
} else if ( $.isArray( o.values ) ) {
o.values = o.values.slice(0);
}
}


this.range = $( "<div></div>" ) _refresh: function() {
.appendTo( this.element ) this._createRange();
.addClass( "ui-slider-range" + this._createHandles();
// note: this isn't the most fittingly semantic framework class for this element, this._setupEvents();
// but worked best visually with a variety of themes this._refreshValue();
" ui-widget-header ui-corner-all" + },
( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );
} _createHandles: function() {
var i, handleCount,
options = this.options,
existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",
handles = [];


handleCount = ( o.values && o.values.length ) || 1; handleCount = ( options.values && options.values.length ) || 1;

if ( existingHandles.length > handleCount ) {
existingHandles.slice( handleCount ).remove();
existingHandles = existingHandles.slice( 0, handleCount );
}


for ( i = existingHandles.length; i < handleCount; i++ ) { for ( i = existingHandles.length; i < handleCount; i++ ) {
handles.push( handle ); handles.push( handle );
Expand All @@ -94,41 +91,56 @@ $.widget( "ui.slider", $.ui.mouse, {


this.handle = this.handles.eq( 0 ); this.handle = this.handles.eq( 0 );


this.handles.add( this.range ).filter( "a" )
.click(function( event ) {
event.preventDefault();
})
.mouseenter(function() {
if ( !o.disabled ) {
$( this ).addClass( "ui-state-hover" );
}
})
.mouseleave(function() {
$( this ).removeClass( "ui-state-hover" );
})
.focus(function() {
if ( !o.disabled ) {
$( ".ui-slider .ui-state-focus" ).removeClass( "ui-state-focus" );
$( this ).addClass( "ui-state-focus" );
} else {
$( this ).blur();
}
})
.blur(function() {
$( this ).removeClass( "ui-state-focus" );
});

this.handles.each(function( i ) { this.handles.each(function( i ) {
$( this ).data( "ui-slider-handle-index", i ); $( this ).data( "ui-slider-handle-index", i );
}); });
},


this._setOption( "disabled", o.disabled ); _createRange: function() {
var options = this.options,
classes = "";

if ( options.range ) {
if ( options.range === true ) {
if ( !options.values ) {
options.values = [ this._valueMin(), this._valueMin() ];
} else if ( options.values.length && options.values.length !== 2 ) {
options.values = [ options.values[0], options.values[0] ];
} else if ( $.isArray( options.values ) ) {
options.values = options.values.slice(0);
}
}


this._on( this.handles, this._handleEvents ); if ( !this.range || !this.range.length ) {
this.range = $( "<div></div>" )
.appendTo( this.element );


this._refreshValue(); 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";
} else {
this.range.removeClass( "ui-slider-range-min ui-slider-range-max" )
// Handle range switching from true to min/max
.css({
"left": "",
"bottom": ""
});
}


this._animateOff = false; this.range.addClass( classes +
( ( options.range === "min" || options.range === "max" ) ? " ui-slider-range-" + options.range : "" ) );
} else {
this.range = $([]);
}
},

_setupEvents: function() {
var elements = this.handles.add( this.range ).filter( "a" );
this._off( elements );
this._on( elements, this._handleEvents );
this._hoverable( elements );
this._focusable( elements );
}, },


_destroy: function() { _destroy: function() {
Expand Down Expand Up @@ -401,19 +413,23 @@ $.widget( "ui.slider", $.ui.mouse, {
var i, var i,
valsLength = 0; valsLength = 0;


if ( key === "range" && this.options.range === true ) {
if ( value === "min" ) {
this.options.value = this._values( 0 );
this.options.values = null;
} else if ( value === "max" ) {
this.options.value = this._values( this.options.values.length-1 );
this.options.values = null;
}
}

if ( $.isArray( this.options.values ) ) { if ( $.isArray( this.options.values ) ) {
valsLength = this.options.values.length; valsLength = this.options.values.length;
} }


$.Widget.prototype._setOption.apply( this, arguments ); $.Widget.prototype._setOption.apply( this, arguments );


switch ( key ) { switch ( key ) {
case "disabled":
if ( value ) {
this.handles.filter( ".ui-state-focus" ).blur();
this.handles.removeClass( "ui-state-hover" );
}
break;
case "orientation": case "orientation":
this._detectOrientation(); this._detectOrientation();
this.element this.element
Expand Down Expand Up @@ -441,6 +457,11 @@ $.widget( "ui.slider", $.ui.mouse, {
this._refreshValue(); this._refreshValue();
this._animateOff = false; this._animateOff = false;
break; break;
case "range":
this._animateOff = true;
this._refresh();
this._animateOff = false;
break;
} }
}, },


Expand All @@ -466,7 +487,7 @@ $.widget( "ui.slider", $.ui.mouse, {
val = this._trimAlignValue( val ); val = this._trimAlignValue( val );


return val; return val;
} else { } else if ( this.options.values && this.options.values.length ) {
// .slice() creates a copy of the array // .slice() creates a copy of the array
// this copy gets trimmed by min and max and then returned // this copy gets trimmed by min and max and then returned
vals = this.options.values.slice(); vals = this.options.values.slice();
Expand All @@ -475,6 +496,8 @@ $.widget( "ui.slider", $.ui.mouse, {
} }


return vals; return vals;
} else {
return [];
} }
}, },


Expand Down Expand Up @@ -629,6 +652,9 @@ $.widget( "ui.slider", $.ui.mouse, {


this._slide( event, index, newVal ); this._slide( event, index, newVal );
}, },
click: function( event ) {
event.preventDefault();
},
keyup: function( event ) { keyup: function( event ) {
var index = $( event.target ).data( "ui-slider-handle-index" ); var index = $( event.target ).data( "ui-slider-handle-index" );


Expand Down

0 comments on commit df077ab

Please sign in to comment.