11904N/AYUI.add('slider-value-range', function(Y) {
11904N/A
16011N/A/**
16011N/A * Adds value support for Slider as a range of integers between a configured
11904N/A * minimum and maximum value. For use with <code>Y.Base.build(..)</code> to
11904N/A * add the plumbing to <code>Y.SliderBase</code>.
11904N/A *
11904N/A * @module slider
11904N/A * @submodule slider-value-range
11904N/A */
11904N/A
11904N/A// Constants for compression or performance
11904N/Avar MIN = 'min',
15985N/A MAX = 'max',
11904N/A VALUE = 'value',
11904N/A// MINORSTEP = 'minorStep',
11904N/A// MAJORSTEP = 'majorStep',
11904N/A
11904N/A round = Math.round;
11904N/A
15985N/A/**
11904N/A * One class of value algorithm that can be built onto SliderBase. By default,
11904N/A * values range between 0 and 100, but you can configure these on the
17593N/A * built Slider class by setting the <code>min</code> and <code>max</code>
17593N/A * configurations. Set the initial value (will cause the thumb to move to the
17593N/A * appropriate location on the rail) in configuration as well if appropriate.
17593N/A *
17593N/A * @class SliderValueRange
17593N/A */
17593N/Afunction SliderValueRange() {
11904N/A this._initSliderValueRange();
11904N/A}
11904N/A
11904N/AY.SliderValueRange = Y.mix( SliderValueRange, {
11913N/A
11904N/A // Prototype properties and methods that will be added onto host class
15981N/A prototype: {
11904N/A
11904N/A /**
11904N/A * Factor used to translate value -&gt; position -&gt; value.
17593N/A *
11904N/A * @property _factor
11904N/A * @type {Number}
15981N/A * @protected
11904N/A */
11904N/A _factor: 1,
11904N/A
11904N/A /**
17593N/A * Stub for construction logic. Override if extending this class and
11904N/A * you need to set something up during the initializer phase.
11904N/A *
11904N/A * @method _initSliderValueRange
11904N/A * @protected
11904N/A */
11904N/A _initSliderValueRange: function () {},
11904N/A
17593N/A /**
17593N/A * Override of stub method in SliderBase that is called at the end of
11904N/A * its bindUI stage of render(). Subscribes to internal events to
11904N/A * trigger UI and related state updates.
11904N/A *
17593N/A * @method _bindValueLogic
17593N/A * @protected
11904N/A */
11904N/A _bindValueLogic: function () {
11904N/A this.after( {
11904N/A minChange : this._afterMinChange,
17593N/A maxChange : this._afterMaxChange,
11904N/A valueChange: this._afterValueChange
11904N/A } );
11904N/A },
11904N/A
17593N/A /**
11904N/A * Move the thumb to appropriate position if necessary. Also resets
11904N/A * the cached offsets and recalculates the conversion factor to
11904N/A * translate position to value.
17593N/A *
17593N/A * @method _syncThumbPosition
15981N/A * @protected
15981N/A */
15981N/A _syncThumbPosition: function () {
15981N/A this._calculateFactor();
17593N/A
17593N/A this._setPosition( this.get( VALUE ) );
17593N/A },
17593N/A
11904N/A /**
17593N/A * Calculates and caches
17593N/A * (range between max and min) / (rail length)
17593N/A * for fast runtime calculation of position -&gt; value.
17593N/A *
17593N/A * @method _calculateFactor
17593N/A * @protected
11904N/A */
11904N/A _calculateFactor: function () {
11904N/A var length = this.get( 'length' ),
11904N/A thumbSize = this.thumb.getStyle( this._key.dim ),
15981N/A min = this.get( MIN ),
15995N/A max = this.get( MAX );
17593N/A
17593N/A // The default thumb width is based on Sam skin's thumb dimension.
15995N/A // This attempts to allow for rendering off-DOM, then attaching
11904N/A // without the need to call syncUI(). It is still recommended
11904N/A // to call syncUI() in these cases though, just to be sure.
11904N/A length = parseFloat( length ) || 150;
11904N/A thumbSize = parseFloat( thumbSize ) || 15;
11904N/A
15981N/A this._factor = ( max - min ) / ( length - thumbSize );
15981N/A
11904N/A Y.log("Calculating factor(~" + this._factor.toFixed(3) + " = (max(" + max + ") - min(" + min + ")) / (length(" + length + ") - thumb size(" + thumbSize + "))","info","slider");
11904N/A },
11904N/A
17593N/A /**
15995N/A * Dispatch the new position of the thumb into the value setting
17593N/A * operations.
17593N/A *
17593N/A * @method _defThumbMoveFn
17593N/A * @param e { EventFacade } The host's thumbMove event
15995N/A * @protected
17593N/A */
17593N/A _defThumbMoveFn: function ( e ) {
17593N/A // To prevent set('value', x) from looping back around
15995N/A if (e.source !== 'set') {
15995N/A this.set(VALUE, this._offsetToValue(e.offset));
15995N/A }
17593N/A },
11904N/A
17593N/A /**
17593N/A * <p>Converts a pixel position into a value. Calculates current
17593N/A * thumb offset from the leading edge of the rail multiplied by the
17593N/A * ratio of <code>(max - min) / (constraining dim)</code>.</p>
17593N/A *
17593N/A * <p>Override this if you want to use a different value mapping
11904N/A * algorithm.</p>
17593N/A *
17593N/A * @method _offsetToValue
11904N/A * @param offset { Number } X or Y pixel offset
11904N/A * @return { mixed } Value corresponding to the provided pixel offset
17593N/A * @protected
17593N/A */
17593N/A _offsetToValue: function ( offset ) {
11904N/A
11904N/A var value = round( offset * this._factor ) + this.get( MIN );
17593N/A
17593N/A Y.log("Offset: " + offset + " => Value: " + value, "info", "slider");
18745N/A return round( this._nearestValue( value ) );
17593N/A },
17593N/A
17593N/A /**
17593N/A * Converts a value into a pixel offset for use in positioning
17593N/A * the thumb according to the reverse of the
11904N/A * <code>_offsetToValue( xy )</code> operation.
11904N/A *
11904N/A * @method _valueToOffset
11904N/A * @param val { Number } The value to map to pixel X or Y position
17593N/A * @return { Number } The pixel offset
11904N/A * @protected
11904N/A */
11904N/A _valueToOffset: function ( value ) {
11904N/A var offset = round( ( value - this.get( MIN ) ) / this._factor );
11904N/A
11904N/A Y.log("Value: " + value + " => Offset: " + offset, "info", "slider");
11904N/A return offset;
15981N/A },
15981N/A
11904N/A /**
15981N/A * Returns the current value. Override this if you want to introduce
11904N/A * output formatting. Otherwise equivalent to slider.get( "value" );
11904N/A *
17593N/A * @method getValue
11904N/A * @return {Number}
17593N/A */
17593N/A getValue: function () {
17593N/A return this.get( VALUE );
17593N/A },
11904N/A
11904N/A /**
* Updates the current value. Override this if you want to introduce
* input value parsing or preprocessing. Otherwise equivalent to
* slider.set( "value", v );
*
* @method setValue
* @param val {Number} The new value
* @return {Slider}
* @chainable
*/
setValue: function ( val ) {
return this.set( VALUE, val );
},
/**
* Update position according to new min value. If the new min results
* in the current value being out of range, the value is set to the
* closer of min or max.
*
* @method _afterMinChange
* @param e { EventFacade } The <code>min</code> attribute change event.
* @protected
*/
_afterMinChange: function ( e ) {
this._verifyValue();
this._syncThumbPosition();
},
/**
* Update position according to new max value. If the new max results
* in the current value being out of range, the value is set to the
* closer of min or max.
*
* @method _afterMaxChange
* @param e { EventFacade } The <code>max</code> attribute change event.
* @protected
*/
_afterMaxChange: function ( e ) {
this._verifyValue();
this._syncThumbPosition();
},
/**
* Verifies that the current value is within the min - max range. If
* not, value is set to either min or max, depending on which is
* closer.
*
* @method _verifyValue
* @protected
*/
_verifyValue: function () {
var value = this.get( VALUE ),
nearest = this._nearestValue( value );
if ( value !== nearest ) {
// @TODO Can/should valueChange, minChange, etc be queued
// events? To make dd.set( 'min', n ); execute after minChange
// subscribers before on/after valueChange subscribers.
this.set( VALUE, nearest );
}
},
/**
* Propagate change to the thumb position unless the change originated
* from the thumbMove event.
*
* @method _afterValueChange
* @param e { EventFacade } The <code>valueChange</code> event.
* @protected
*/
_afterValueChange: function ( e ) {
var val = e.newVal;
Y.log("Positioning thumb after set('value',x)","info","slider");
this._setPosition( val, { source: 'set' } );
this.thumb.set('aria-valuenow', val);
this.thumb.set('aria-valuetext', val);
},
/**
* Positions the thumb in accordance with the translated value.
*
* @method _setPosition
* @param value {Number} Value to translate to a pixel position
* @param [options] {Object} Details object to pass to `_uiMoveThumb`
* @protected
*/
_setPosition: function ( value, options ) {
this._uiMoveThumb( this._valueToOffset( value ), options );
},
/**
* Validates new values assigned to <code>min</code> attribute. Numbers
* are acceptable. Override this to enforce different rules.
*
* @method _validateNewMin
* @param value {Any} Value assigned to <code>min</code> attribute.
* @return {Boolean} True for numbers. False otherwise.
* @protected
*/
_validateNewMin: function ( value ) {
return Y.Lang.isNumber( value );
},
/**
* Validates new values assigned to <code>max</code> attribute. Numbers
* are acceptable. Override this to enforce different rules.
*
* @method _validateNewMax
* @param value { mixed } Value assigned to <code>max</code> attribute.
* @return { Boolean } True for numbers. False otherwise.
* @protected
*/
_validateNewMax: function ( value ) {
return Y.Lang.isNumber( value );
},
/**
* Restricts new values assigned to <code>value</code> attribute to be
* between the configured <code>min</code> and <code>max</code>.
* Rounds to nearest integer value.
*
* @method _setNewValue
* @param value { Number } Value assigned to <code>value</code> attribute
* @return { Number } Normalized and constrained value
* @protected
*/
_setNewValue: function ( value ) {
return round( this._nearestValue( value ) );
},
/**
* Returns the nearest valid value to the value input. If the provided
* value is outside the min - max range, accounting for min > max
* scenarios, the nearest of either min or max is returned. Otherwise,
* the provided value is returned.
*
* @method _nearestValue
* @param value { mixed } Value to test against current min - max range
* @return { Number } Current min, max, or value if within range
* @protected
*/
_nearestValue: function ( value ) {
var min = this.get( MIN ),
max = this.get( MAX ),
tmp;
// Account for reverse value range (min > max)
tmp = ( max > min ) ? max : min;
min = ( max > min ) ? min : max;
max = tmp;
return ( value < min ) ?
min :
( value > max ) ?
max :
value;
}
},
/**
* Attributes that will be added onto host class.
*
* @property ATTRS
* @type {Object}
* @static
* @protected
*/
ATTRS: {
/**
* The value associated with the farthest top, left position of the
* rail. Can be greater than the configured <code>max</code> if you
* want values to increase from right-to-left or bottom-to-top.
*
* @attribute min
* @type { Number }
* @default 0
*/
min: {
value : 0,
validator: '_validateNewMin'
},
/**
* The value associated with the farthest bottom, right position of
* the rail. Can be less than the configured <code>min</code> if
* you want values to increase from right-to-left or bottom-to-top.
*
* @attribute max
* @type { Number }
* @default 100
*/
max: {
value : 100,
validator: '_validateNewMax'
},
/**
* amount to increment/decrement the Slider value
* when the arrow up/down/left/right keys are pressed
*
* @attribute minorStep
* @type {Number}
* @default 1
*/
minorStep : {
value: 1
},
/**
* amount to increment/decrement the Slider value
* when the page up/down keys are pressed
*
* @attribute majorStep
* @type {Number}
* @default 10
*/
majorStep : {
value: 10
},
/**
* The value associated with the thumb's current position on the
* rail. Defaults to the value inferred from the thumb's current
* position. Specifying value in the constructor will move the
* thumb to the position that corresponds to the supplied value.
*
* @attribute value
* @type { Number }
* @default (inferred from current thumb position)
*/
value: {
value : 0,
setter: '_setNewValue'
}
}
}, true );
}, '@VERSION@' ,{requires:['slider-base']});