Slider: when handles overlap, clicking and dragging will now pick the last... #820

Closed
wants to merge 1 commit into
from
@@ -104,4 +104,55 @@ test( "programmatic event triggers", function() {
});
+test( "mouse based interaction part two: when handles overlap", function() {
+ expect(4);
+
+ var el = $( "#slider1" )
+ .slider({
+ values: [ 0, 0, 0 ],
+ start: function( event, ui ) {
+ equal(handles.index(ui.handle), 2, "rightmost handle activated when overlapping at minimum (#3736)");
+ }
+ }),
+ handles = el.find( ".ui-slider-handle" );
+ handles.eq(0).simulate( "drag", { dx: 10 } );
+
+ QUnit.reset();
+ el = $( "#slider1" )
+ .slider({
+ values: [ 10, 10, 10 ],
+ max: 10,
+ start: function( event, ui ) {
+ equal(handles.index(ui.handle), 0, "leftmost handle activated when overlapping at maximum");
+ }
+ }),
+ handles = el.find( ".ui-slider-handle" );
+ handles.eq(0).simulate( "drag", { dx: -10 } );
+
+ QUnit.reset();
+ el = $( "#slider1" )
+ .slider({
+ values: [ 19, 20 ]
+ }),
+ handles = el.find( ".ui-slider-handle" );
+ handles.eq(0).simulate( "drag", { dx: 10 } );
+ el.on("slidestart", function(event, ui) {
+ equal(handles.index(ui.handle), 0, "left handle activated if left was moved last");
+ });
+ handles.eq(0).simulate( "drag", { dx: 10 } );
+
+ QUnit.reset();
+ el = $( "#slider1" )
+ .slider({
+ values: [ 19, 20 ]
+ }),
+ handles = el.find( ".ui-slider-handle" );
+ handles.eq(1).simulate( "drag", { dx: -10 } );
+ el.on("slidestart", function(event, ui) {
+ equal(handles.index(ui.handle), 1, "right handle activated if right was moved last (#3467)");
+ });
+ handles.eq(0).simulate( "drag", { dx: 10 } );
+
+});
+
}( jQuery ) );
View
@@ -233,21 +233,15 @@ $.widget( "ui.slider", $.ui.mouse, {
distance = this._valueMax() - this._valueMin() + 1;
this.handles.each(function( i ) {
var thisDistance = Math.abs( normValue - that.values(i) );
- if ( distance > thisDistance ) {
+ if (( distance > thisDistance ) ||
+ ( distance === thisDistance &&
+ (i === that._lastChangedValue || that.values(i) === o.min ))) {
distance = thisDistance;
closestHandle = $( this );
index = i;
}
});
- // workaround for bug #3736 (if both handles of a range are at 0,
- // the first is always used as the one with least distance,
- // and moving it is obviously prevented by preventing negative ranges)
- if( o.range === true && this.values(1) === o.min ) {
- index += 1;
- closestHandle = $( this.handles[index] );
- }
-
allowed = this._start( event, index );
if ( allowed === false ) {
return false;
@@ -419,6 +413,9 @@ $.widget( "ui.slider", $.ui.mouse, {
uiHash.values = this.values();
}
+ //store the last changed value index for reference when handles overlap
+ this._lastChangedValue = index;
+
this._trigger( "change", event, uiHash );
}
},