From 6111b17710ab4e14bb119e735de9cfa9285badab Mon Sep 17 00:00:00 2001 From: Ablay Keldibek Date: Thu, 12 Mar 2015 14:30:06 +0600 Subject: [PATCH] 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 --- tests/unit/slider/slider_events.js | 37 ++++++++++ ui/slider.js | 110 ++++++++++++----------------- 2 files changed, 84 insertions(+), 63 deletions(-) diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index ec93a0565..d020d8ac6 100644 --- 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 7d8619d43..094f0135d 100644 --- 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(); -- 2.39.5