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

diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js
index ec93a056536fec453ae3ed28dac644e310563c55..d020d8ac616885b3c0295434e2beae5ea2f42cd1 100644 (file)
--- a/tests/unit/slider/slider_events.js
+++ b/tests/unit/slider/slider_events.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 );

diff --git a/ui/slider.js b/ui/slider.js
index 7d8619d43fbf24a1a8549dfd6c6520d940664d2b..094f0135d47a7a4e92c5fb7fd4eb9b6f910889e7 100644 (file)
--- a/ui/slider.js
+++ b/ui/slider.js
@@ -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();