From a47754a6ebda020f2012359f14f972275fc87c8c Mon Sep 17 00:00:00 2001 From: atomiomi Date: Sat, 7 Mar 2015 14:31:57 +0600 Subject: [PATCH 1/3] Slider: Passing handle index to events Added new field handleIndex to uiHash that equals to the index of handle on which the user clicks Fixes #7630 --- tests/unit/slider/slider_events.js | 24 +++++++ ui/slider.js | 101 +++++++++++++---------------- 2 files changed, 70 insertions(+), 55 deletions(-) diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index ec93a056536..2d64cb44f08 100644 --- a/tests/unit/slider/slider_events.js +++ b/tests/unit/slider/slider_events.js @@ -149,4 +149,28 @@ test( "mouse based interaction part two: when handles overlap", function() { }); +test( "passing arguments to events", function() { + expect(4); + + var element = $( "#slider1" ) + .slider({ + values: [ 8, 9, 7, 4 ], + start: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to start event (#7630)" ); + }, + slide: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to slide event (#7630)" ); + }, + stop: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to stop event (#7630)" ); + }, + change: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to change event (#7630)" ); + } + }), + handles = element.find( ".ui-slider-handle" ); + + handles.eq( 3 ).simulate( "drag", { dx: 10 } ); +}); + })( jQuery ); diff --git a/ui/slider.js b/ui/slider.js index fceb367f31c..211f1480847 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -303,83 +303,74 @@ return $.widget( "ui.slider", $.ui.mouse, { return this._trimAlignValue( valueMouse ); }, - _start: function( event, index ) { + _createUiHash: 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 uiHash; + }, + + _hasMultipleValues: function () { + return this.options.values && this.options.values.length; + }, + + _start: function( event, index ) { + var uiHash = this._createUiHash(index); return this._trigger( "start", event, uiHash ); }, _slide: function( event, index, newVal ) { var otherVal, - newValues, + currentValue = this.value(), + newValues = this.values(), allowed; - 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._createUiHash(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(); - } + var uiHash = this._createUiHash(index); this._trigger( "stop", event, uiHash ); }, _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(); - } + var uiHash = this._createUiHash(index); //store the last changed value index for reference when handles overlap this._lastChangedValue = index; @@ -421,7 +412,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(); @@ -519,7 +510,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(); @@ -593,7 +584,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 + "%"; @@ -669,7 +660,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(); From e2bc272d83985b60ee232074006a9f630a7da9df Mon Sep 17 00:00:00 2001 From: atomiomi Date: Sat, 7 Mar 2015 15:10:03 +0600 Subject: [PATCH 2/3] Slider: Fixed code style errors --- tests/unit/slider/slider_events.js | 32 +++++++++++++++--------------- ui/slider.js | 4 ++-- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index 2d64cb44f08..89eb43d963e 100644 --- a/tests/unit/slider/slider_events.js +++ b/tests/unit/slider/slider_events.js @@ -153,22 +153,22 @@ test( "passing arguments to events", function() { expect(4); var element = $( "#slider1" ) - .slider({ - values: [ 8, 9, 7, 4 ], - start: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to start event (#7630)" ); - }, - slide: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to slide event (#7630)" ); - }, - stop: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to stop event (#7630)" ); - }, - change: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to change event (#7630)" ); - } - }), - handles = element.find( ".ui-slider-handle" ); + .slider({ + values: [ 8, 9, 7, 4 ], + start: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to start event (#7630)" ); + }, + slide: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to slide event (#7630)" ); + }, + stop: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to stop event (#7630)" ); + }, + change: function( event, ui ) { + equal( ui.handleIndex, 3, "passing handle index to change event (#7630)" ); + } + }), + handles = element.find( ".ui-slider-handle" ); handles.eq( 3 ).simulate( "drag", { dx: 10 } ); }); diff --git a/ui/slider.js b/ui/slider.js index 211f1480847..c8b4d31fa53 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -303,7 +303,7 @@ return $.widget( "ui.slider", $.ui.mouse, { return this._trimAlignValue( valueMouse ); }, - _createUiHash: function ( index, value, values ) { + _createUiHash: function( index, value, values ) { var uiHash = { handle: this.handles[ index ], handleIndex: index, @@ -318,7 +318,7 @@ return $.widget( "ui.slider", $.ui.mouse, { return uiHash; }, - _hasMultipleValues: function () { + _hasMultipleValues: function() { return this.options.values && this.options.values.length; }, From b2b8b875a64086b0a12a91df8682eb5eaa558f90 Mon Sep 17 00:00:00 2001 From: atomiomi Date: Tue, 10 Mar 2015 10:45:31 +0600 Subject: [PATCH 3/3] Slider: Fixed code style errors --- tests/unit/slider/slider_events.js | 33 +++++++++++++++++++++--------- ui/slider.js | 25 ++++++++-------------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/tests/unit/slider/slider_events.js b/tests/unit/slider/slider_events.js index 89eb43d963e..73741efedfb 100644 --- a/tests/unit/slider/slider_events.js +++ b/tests/unit/slider/slider_events.js @@ -149,28 +149,41 @@ test( "mouse based interaction part two: when handles overlap", function() { }); -test( "passing arguments to events", function() { - expect(4); +test( "event data", function() { + expect( 4 ); - var element = $( "#slider1" ) + var slideHandleIndex = 3, + values = [ 8, 9, 7, 4 ], + newValues = [ 8, 9, 7, 5 ], + element = $( "#slider1" ) .slider({ - values: [ 8, 9, 7, 4 ], + values: values, start: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to start event (#7630)" ); + deepEqual( ui, expectedUiHash, "passing ui to start event" ); }, slide: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to slide event (#7630)" ); + deepEqual( ui, expectedChangedUiHash, "passing ui to slide event" ); }, stop: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to stop event (#7630)" ); + deepEqual( ui, expectedChangedUiHash, "passing ui to stop event" ); }, change: function( event, ui ) { - equal( ui.handleIndex, 3, "passing handle index to change event (#7630)" ); + deepEqual( ui, expectedChangedUiHash, "passing ui to change event" ); } }), - handles = element.find( ".ui-slider-handle" ); + 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( 3 ).simulate( "drag", { dx: 10 } ); + handles.eq( slideHandleIndex ).simulate( "drag", { dx: 10 } ); }); })( jQuery ); diff --git a/ui/slider.js b/ui/slider.js index c8b4d31fa53..37e17ae4305 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -303,7 +303,7 @@ return $.widget( "ui.slider", $.ui.mouse, { return this._trimAlignValue( valueMouse ); }, - _createUiHash: function( index, value, values ) { + _uiHash: function( index, value, values ) { var uiHash = { handle: this.handles[ index ], handleIndex: index, @@ -323,22 +323,20 @@ return $.widget( "ui.slider", $.ui.mouse, { }, _start: function( event, index ) { - var uiHash = this._createUiHash(index); - return this._trigger( "start", event, uiHash ); + return this._trigger( "start", event, this._uiHash( index ) ); }, _slide: function( event, index, newVal ) { - var otherVal, + var allowed, otherVal, currentValue = this.value(), - newValues = this.values(), - allowed; + newValues = this.values(); if ( this._hasMultipleValues() ) { otherVal = this.values( index ? 0 : 1 ); currentValue = this.values( index ); if ( this.options.values.length === 2 && this.options.range === true ) { - newVal = index === 0 ? Math.min(otherVal, newVal) : Math.max(otherVal, newVal); + newVal = index === 0 ? Math.min( otherVal, newVal ) : Math.max( otherVal, newVal ); } newValues[ index ] = newVal; @@ -348,10 +346,10 @@ return $.widget( "ui.slider", $.ui.mouse, { return; } - allowed = this._trigger( "slide", event, this._createUiHash(index, newVal, newValues) ); + 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) { + if ( allowed === false ) { return; } @@ -363,19 +361,14 @@ return $.widget( "ui.slider", $.ui.mouse, { }, _stop: function( event, index ) { - var uiHash = this._createUiHash(index); - - this._trigger( "stop", event, uiHash ); + this._trigger( "stop", event, this._uiHash( index ) ); }, _change: function( event, index ) { if ( !this._keySliding && !this._mouseSliding ) { - var uiHash = this._createUiHash(index); - //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 ) ); } },