Skip to content
Permalink
Browse files

Slider: Pass handle index to events

Added a `handleIndex` property to the event data which indicates the index of
the handle being changed.

Fixes #7630
Closes gh-1486
  • Loading branch information...
atomiomi authored and scottgonzalez committed Mar 12, 2015
1 parent 21831f5 commit 6111b17710ab4e14bb119e735de9cfa9285badab
Showing with 84 additions and 63 deletions.
  1. +37 −0 tests/unit/slider/slider_events.js
  2. +47 −63 ui/slider.js
@@ -149,4 +149,41 @@ test( "mouse based interaction part two: when handles overlap", function() {

});

test( "event data", function() {
expect( 4 );

var slideHandleIndex = 3,
values = [ 8, 9, 7, 4 ],
newValues = [ 8, 9, 7, 5 ],
element = $( "#slider1" )
.slider({
values: values,
start: function( event, ui ) {
deepEqual( ui, expectedUiHash, "passing ui to start event" );
},
slide: function( event, ui ) {
deepEqual( ui, expectedChangedUiHash, "passing ui to slide event" );
},
stop: function( event, ui ) {
deepEqual( ui, expectedChangedUiHash, "passing ui to stop event" );
},
change: function( event, ui ) {
deepEqual( ui, expectedChangedUiHash, "passing ui to change event" );
}
}),
handles = element.find( ".ui-slider-handle" ),
expectedUiHash = {
handle: handles.eq( slideHandleIndex )[ 0 ],
handleIndex: slideHandleIndex,
values: values,
value: values[ slideHandleIndex ]
},
expectedChangedUiHash = $.extend( {}, expectedUiHash, {
values: newValues,
value: newValues[ slideHandleIndex ]
});

handles.eq( slideHandleIndex ).simulate( "drag", { dx: 10 } );
});

})( jQuery );
@@ -297,88 +297,72 @@ return $.widget( "ui.slider", $.ui.mouse, {
return this._trimAlignValue( valueMouse );
},

_start: function( event, index ) {
_uiHash: function( index, value, values ) {
var uiHash = {
handle: this.handles[ index ],
value: this.value()
handleIndex: index,
value: value || this.value()
};
if ( this.options.values && this.options.values.length ) {
uiHash.value = this.values( index );
uiHash.values = this.values();

if ( this._hasMultipleValues() ) {
uiHash.value = value || this.values( index );
uiHash.values = values || this.values();
}
return this._trigger( "start", event, uiHash );

return uiHash;
},

_hasMultipleValues: function() {
return this.options.values && this.options.values.length;
},

_start: function( event, index ) {
return this._trigger( "start", event, this._uiHash( index ) );
},

_slide: function( event, index, newVal ) {
var otherVal,
newValues,
allowed;
var allowed, otherVal,
currentValue = this.value(),
newValues = this.values();

if ( this.options.values && this.options.values.length ) {
if ( this._hasMultipleValues() ) {
otherVal = this.values( index ? 0 : 1 );
currentValue = this.values( index );

if ( ( this.options.values.length === 2 && this.options.range === true ) &&
( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
) {
newVal = otherVal;
if ( this.options.values.length === 2 && this.options.range === true ) {
newVal = index === 0 ? Math.min( otherVal, newVal ) : Math.max( otherVal, newVal );
}

if ( newVal !== this.values( index ) ) {
newValues = this.values();
newValues[ index ] = newVal;
// A slide can be canceled by returning false from the slide callback
allowed = this._trigger( "slide", event, {
handle: this.handles[ index ],
value: newVal,
values: newValues
} );
otherVal = this.values( index ? 0 : 1 );
if ( allowed !== false ) {
this.values( index, newVal );
}
}
newValues[ index ] = newVal;
}

if ( newVal === currentValue ) {
return;
}

allowed = this._trigger( "slide", event, this._uiHash( index, newVal, newValues ) );

// A slide can be canceled by returning false from the slide callback
if ( allowed === false ) {
return;
}

if ( this._hasMultipleValues() ) {
this.values( index, newVal );
} else {
if ( newVal !== this.value() ) {
// A slide can be canceled by returning false from the slide callback
allowed = this._trigger( "slide", event, {
handle: this.handles[ index ],
value: newVal
} );
if ( allowed !== false ) {
this.value( newVal );
}
}
this.value( newVal );
}
},

_stop: function( event, index ) {
var uiHash = {
handle: this.handles[ index ],
value: this.value()
};
if ( this.options.values && this.options.values.length ) {
uiHash.value = this.values( index );
uiHash.values = this.values();
}

this._trigger( "stop", event, uiHash );
this._trigger( "stop", event, this._uiHash( index ) );
},

_change: function( event, index ) {
if ( !this._keySliding && !this._mouseSliding ) {
var uiHash = {
handle: this.handles[ index ],
value: this.value()
};
if ( this.options.values && this.options.values.length ) {
uiHash.value = this.values( index );
uiHash.values = this.values();
}

//store the last changed value index for reference when handles overlap
this._lastChangedValue = index;

this._trigger( "change", event, uiHash );
this._trigger( "change", event, this._uiHash( index ) );
}
},

@@ -415,7 +399,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
}
this._refreshValue();
} else {
if ( this.options.values && this.options.values.length ) {
if ( this._hasMultipleValues() ) {
return this._values( index );
} else {
return this.value();
@@ -512,7 +496,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
val = this._trimAlignValue( val );

return val;
} else if ( this.options.values && this.options.values.length ) {
} else if ( this._hasMultipleValues() ) {
// .slice() creates a copy of the array
// this copy gets trimmed by min and max and then returned
vals = this.options.values.slice();
@@ -586,7 +570,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
animate = ( !this._animateOff ) ? o.animate : false,
_set = {};

if ( this.options.values && this.options.values.length ) {
if ( this._hasMultipleValues() ) {
this.handles.each(function( i ) {
valPercent = ( that.values(i) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100;
_set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
@@ -662,7 +646,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
}

step = this.options.step;
if ( this.options.values && this.options.values.length ) {
if ( this._hasMultipleValues() ) {
curVal = newVal = this.values( index );
} else {
curVal = newVal = this.value();

0 comments on commit 6111b17

Please sign in to comment.
You can’t perform that action at this time.