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