From 1d1cff078e26e6a4e41838de58c5606f1707c9b7 Mon Sep 17 00:00:00 2001 From: Alexander Marinov Date: Tue, 30 Dec 2014 13:44:15 +0200 Subject: [PATCH 1/2] Slider: extract distance calculation logic into dedicated methods Fixes #10737 ~ Extracted the code responsible for translation of values into slider handle's distances into _calculateDistance() (was in _calculateDistance()) ~ Extracted the code responsible for translation of slider handle's distance into numeric values into _calculateValue() (was in _normValueFromMouse()) ~ Added two new callback options and modified the constructor to set the new methods as default values (if not already set) ~ cleaned up all variables that became unused due to the re-factoring ~ updated the common test case to reflect the change in options --- tests/unit/slider/slider_common.js | 5 ++- ui/slider.js | 58 ++++++++++++++++++++++-------- 2 files changed, 48 insertions(+), 15 deletions(-) diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js index 6d7278de6a2..34d3840dc05 100644 --- a/tests/unit/slider/slider_common.js +++ b/tests/unit/slider/slider_common.js @@ -18,6 +18,9 @@ TestHelpers.commonWidgetTests( "slider", { change: null, slide: null, start: null, - stop: null + stop: null, + + calculateDistance: null, + calculateValue: null } }); diff --git a/ui/slider.js b/ui/slider.js index db905ba5ea6..8cccd30cb54 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -49,7 +49,10 @@ return $.widget( "ui.slider", $.ui.mouse, { change: null, slide: null, start: null, - stop: null + stop: null, + + calculateDistance: null, + calculateValue: null }, // number of pages in a slider @@ -64,6 +67,14 @@ return $.widget( "ui.slider", $.ui.mouse, { this._detectOrientation(); this._mouseInit(); this._calculateNewMax(); + + if ( !$.isFunction(this.options.calculateDistance) ) { + this.options.calculateDistance = this._calculateDistance; + } + + if ( !$.isFunction(this.options.callculateValue) ) { + this.options.calculateValue = this._calculateValue; + } this.element .addClass( "ui-slider" + @@ -272,8 +283,7 @@ return $.widget( "ui.slider", $.ui.mouse, { var pixelTotal, pixelMouse, percentMouse, - valueTotal, - valueMouse; + value; if ( this.orientation === "horizontal" ) { pixelTotal = this.elementSize.width; @@ -294,10 +304,9 @@ return $.widget( "ui.slider", $.ui.mouse, { percentMouse = 1 - percentMouse; } - valueTotal = this._valueMax() - this._valueMin(); - valueMouse = this._valueMin() + percentMouse * valueTotal; + value = this.options.calculateValue(this._valueMin(), this._valueMax(), percentMouse * 100); - return this._trimAlignValue( valueMouse ); + return this._trimAlignValue( value ); }, _start: function( event, index ) { @@ -565,7 +574,7 @@ return $.widget( "ui.slider", $.ui.mouse, { }, _refreshValue: function() { - var lastValPercent, valPercent, value, valueMin, valueMax, + var lastValPercent, valPercent, oRange = this.options.range, o = this.options, that = this, @@ -574,7 +583,7 @@ return $.widget( "ui.slider", $.ui.mouse, { if ( this.options.values && this.options.values.length ) { this.handles.each(function( i ) { - valPercent = ( that.values(i) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100; + valPercent = that.options.calculateDistance(that._valueMin(), that._valueMax(), that.values(i)); _set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate ); if ( that.options.range === true ) { @@ -597,12 +606,7 @@ return $.widget( "ui.slider", $.ui.mouse, { lastValPercent = valPercent; }); } else { - value = this.value(); - valueMin = this._valueMin(); - valueMax = this._valueMax(); - valPercent = ( valueMax !== valueMin ) ? - ( value - valueMin ) / ( valueMax - valueMin ) * 100 : - 0; + valPercent = that.options.calculateDistance(this._valueMin(), this._valueMax(), this.value()); _set[ this.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate ); @@ -698,6 +702,32 @@ return $.widget( "ui.slider", $.ui.mouse, { $( event.target ).removeClass( "ui-state-active" ); } } + }, + + /** + * Calculates the distance (as percentage) of the handle based on provided value and boundaries + * + * @param {Number} min Minimum value boundary + * @param {Number} max Maximum value boundary + * @param {Number} value Slider's value + * + * @returns {Number} + */ + _calculateDistance: function( min, max, value ) { + return max !== min ? ( value - min ) / ( max - min ) * 100 : 0; + }, + + /** + * Calculates the value based on provided boundaries and distance + * + * @param {Number} min Minimum value boundary + * @param {Number} max Maximum value boundary + * @param {Number} distance Distance as percentage + * + * @returns {Number} + */ + _calculateValue: function( min, max, distance ) { + return min + ( distance / 100 ) * ( max - min ); } }); From e591eff3e8333cb5714879f49942ddf4c92064fe Mon Sep 17 00:00:00 2001 From: Alexander Marinov Date: Tue, 30 Dec 2014 13:55:32 +0200 Subject: [PATCH 2/2] Slider: extract distance calculation logic into dedicated methods Fixes #10737 fixed trailing space issues to make Travis happy --- ui/slider.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui/slider.js b/ui/slider.js index 8cccd30cb54..d99d3c5a69c 100644 --- a/ui/slider.js +++ b/ui/slider.js @@ -50,7 +50,7 @@ return $.widget( "ui.slider", $.ui.mouse, { slide: null, start: null, stop: null, - + calculateDistance: null, calculateValue: null }, @@ -67,11 +67,11 @@ return $.widget( "ui.slider", $.ui.mouse, { this._detectOrientation(); this._mouseInit(); this._calculateNewMax(); - + if ( !$.isFunction(this.options.calculateDistance) ) { this.options.calculateDistance = this._calculateDistance; } - + if ( !$.isFunction(this.options.callculateValue) ) { this.options.calculateValue = this._calculateValue; } @@ -703,27 +703,27 @@ return $.widget( "ui.slider", $.ui.mouse, { } } }, - + /** * Calculates the distance (as percentage) of the handle based on provided value and boundaries - * + * * @param {Number} min Minimum value boundary * @param {Number} max Maximum value boundary * @param {Number} value Slider's value - * + * * @returns {Number} */ _calculateDistance: function( min, max, value ) { return max !== min ? ( value - min ) / ( max - min ) * 100 : 0; }, - + /** * Calculates the value based on provided boundaries and distance - * + * * @param {Number} min Minimum value boundary * @param {Number} max Maximum value boundary * @param {Number} distance Distance as percentage - * + * * @returns {Number} */ _calculateValue: function( min, max, distance ) {