github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-04-20 03:02:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Slider: Pass handle index to events

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

Fixes #7630
Closes gh-1486
This commit is contained in:
Ablay Keldibek
2015-03-12 14:30:06 +06:00
committed by Scott González
parent 21831f5036
commit 6111b17710
2 changed files with 84 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
tests/unit/slider/slider_events.js
View File

@@ -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 );

110
ui/slider.js
View File

@@ -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();