Skip to content

Commit 6111b17

Browse files
atomiomiscottgonzalez
atomiomi
authored and
scottgonzalez
committed
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
1 parent 21831f5 commit 6111b17

File tree

2 files changed

+84
-63
lines changed

2 files changed

+84
-63
lines changed

‎tests/unit/slider/slider_events.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,4 +149,41 @@ test( "mouse based interaction part two: when handles overlap", function() {
149149

150150
});
151151

152+
test( "event data", function() {
153+
expect( 4 );
154+
155+
var slideHandleIndex = 3,
156+
values = [ 8, 9, 7, 4 ],
157+
newValues = [ 8, 9, 7, 5 ],
158+
element = $( "#slider1" )
159+
.slider({
160+
values: values,
161+
start: function( event, ui ) {
162+
deepEqual( ui, expectedUiHash, "passing ui to start event" );
163+
},
164+
slide: function( event, ui ) {
165+
deepEqual( ui, expectedChangedUiHash, "passing ui to slide event" );
166+
},
167+
stop: function( event, ui ) {
168+
deepEqual( ui, expectedChangedUiHash, "passing ui to stop event" );
169+
},
170+
change: function( event, ui ) {
171+
deepEqual( ui, expectedChangedUiHash, "passing ui to change event" );
172+
}
173+
}),
174+
handles = element.find( ".ui-slider-handle" ),
175+
expectedUiHash = {
176+
handle: handles.eq( slideHandleIndex )[ 0 ],
177+
handleIndex: slideHandleIndex,
178+
values: values,
179+
value: values[ slideHandleIndex ]
180+
},
181+
expectedChangedUiHash = $.extend( {}, expectedUiHash, {
182+
values: newValues,
183+
value: newValues[ slideHandleIndex ]
184+
});
185+
186+
handles.eq( slideHandleIndex ).simulate( "drag", { dx: 10 } );
187+
});
188+
152189
})( jQuery );

‎ui/slider.js

Lines changed: 47 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -297,88 +297,72 @@ return $.widget( "ui.slider", $.ui.mouse, {
297297
return this._trimAlignValue( valueMouse );
298298
},
299299

300-
_start: function( event, index ) {
300+
_uiHash: function( index, value, values ) {
301301
var uiHash = {
302302
handle: this.handles[ index ],
303-
value: this.value()
303+
handleIndex: index,
304+
value: value || this.value()
304305
};
305-
if ( this.options.values && this.options.values.length ) {
306-
uiHash.value = this.values( index );
307-
uiHash.values = this.values();
306+
307+
if ( this._hasMultipleValues() ) {
308+
uiHash.value = value || this.values( index );
309+
uiHash.values = values || this.values();
308310
}
309-
return this._trigger( "start", event, uiHash );
311+
312+
return uiHash;
313+
},
314+
315+
_hasMultipleValues: function() {
316+
return this.options.values && this.options.values.length;
317+
},
318+
319+
_start: function( event, index ) {
320+
return this._trigger( "start", event, this._uiHash( index ) );
310321
},
311322

312323
_slide: function( event, index, newVal ) {
313-
var otherVal,
314-
newValues,
315-
allowed;
324+
var allowed, otherVal,
325+
currentValue = this.value(),
326+
newValues = this.values();
316327

317-
if ( this.options.values && this.options.values.length ) {
328+
if ( this._hasMultipleValues() ) {
318329
otherVal = this.values( index ? 0 : 1 );
330+
currentValue = this.values( index );
319331

320-
if ( ( this.options.values.length === 2 && this.options.range === true ) &&
321-
( ( index === 0 && newVal > otherVal) || ( index === 1 && newVal < otherVal ) )
322-
) {
323-
newVal = otherVal;
332+
if ( this.options.values.length === 2 && this.options.range === true ) {
333+
newVal = index === 0 ? Math.min( otherVal, newVal ) : Math.max( otherVal, newVal );
324334
}
325335

326-
if ( newVal !== this.values( index ) ) {
327-
newValues = this.values();
328-
newValues[ index ] = newVal;
329-
// A slide can be canceled by returning false from the slide callback
330-
allowed = this._trigger( "slide", event, {
331-
handle: this.handles[ index ],
332-
value: newVal,
333-
values: newValues
334-
} );
335-
otherVal = this.values( index ? 0 : 1 );
336-
if ( allowed !== false ) {
337-
this.values( index, newVal );
338-
}
339-
}
336+
newValues[ index ] = newVal;
337+
}
338+
339+
if ( newVal === currentValue ) {
340+
return;
341+
}
342+
343+
allowed = this._trigger( "slide", event, this._uiHash( index, newVal, newValues ) );
344+
345+
// A slide can be canceled by returning false from the slide callback
346+
if ( allowed === false ) {
347+
return;
348+
}
349+
350+
if ( this._hasMultipleValues() ) {
351+
this.values( index, newVal );
340352
} else {
341-
if ( newVal !== this.value() ) {
342-
// A slide can be canceled by returning false from the slide callback
343-
allowed = this._trigger( "slide", event, {
344-
handle: this.handles[ index ],
345-
value: newVal
346-
} );
347-
if ( allowed !== false ) {
348-
this.value( newVal );
349-
}
350-
}
353+
this.value( newVal );
351354
}
352355
},
353356

354357
_stop: function( event, index ) {
355-
var uiHash = {
356-
handle: this.handles[ index ],
357-
value: this.value()
358-
};
359-
if ( this.options.values && this.options.values.length ) {
360-
uiHash.value = this.values( index );
361-
uiHash.values = this.values();
362-
}
363-
364-
this._trigger( "stop", event, uiHash );
358+
this._trigger( "stop", event, this._uiHash( index ) );
365359
},
366360

367361
_change: function( event, index ) {
368362
if ( !this._keySliding && !this._mouseSliding ) {
369-
var uiHash = {
370-
handle: this.handles[ index ],
371-
value: this.value()
372-
};
373-
if ( this.options.values && this.options.values.length ) {
374-
uiHash.value = this.values( index );
375-
uiHash.values = this.values();
376-
}
377-
378363
//store the last changed value index for reference when handles overlap
379364
this._lastChangedValue = index;
380-
381-
this._trigger( "change", event, uiHash );
365+
this._trigger( "change", event, this._uiHash( index ) );
382366
}
383367
},
384368

@@ -415,7 +399,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
415399
}
416400
this._refreshValue();
417401
} else {
418-
if ( this.options.values && this.options.values.length ) {
402+
if ( this._hasMultipleValues() ) {
419403
return this._values( index );
420404
} else {
421405
return this.value();
@@ -512,7 +496,7 @@ return $.widget( "ui.slider", $.ui.mouse, {
512496
val = this._trimAlignValue( val );
513497

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

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

664648
step = this.options.step;
665-
if ( this.options.values && this.options.values.length ) {
649+
if ( this._hasMultipleValues() ) {
666650
curVal = newVal = this.values( index );
667651
} else {
668652
curVal = newVal = this.value();

0 commit comments

Comments
 (0)