2 Copyright (c) 2010, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.com/yui/license.html
8 YUI.add('slider-base', function(Y) {
11 * Create a sliding value range input visualized as a draggable thumb on a
15 * @submodule slider-base
18 var INVALID_VALUE = Y.Attribute.INVALID_VALUE;
21 * Create a slider to represent an input control capable of representing a
22 * series of intermediate states based on the position of the slider's thumb.
23 * These states are typically aligned to a value algorithm whereby the thumb
24 * position corresponds to a given value. Sliders may be oriented vertically or
25 * horizontally, based on the <code>axis</code> configuration.
29 * @param config {Object} Configuration object
32 function SliderBase() {
33 SliderBase.superclass.constructor.apply( this, arguments );
36 Y.SliderBase = Y.extend( SliderBase, Y.Widget, {
41 * Construction logic executed during Slider instantiation.
46 initializer : function () {
48 * The configured axis, stored for fast lookup since it's a writeOnce
49 * attribute. This is for use by extension classes. For
50 * implementation code, use <code>get( "axis" )</code> for
51 * authoritative source. Never write to this property.
57 this.axis = this.get( 'axis' );
60 * Cached fast access map for DOM properties and attributes that
61 * pertain to accessing dimensional or positioning information
62 * according to the Slider's axis (e.g. "height" vs.
63 * "width"). Extension classes should add to this collection
64 * for axis related strings if necessary.
71 dim : ( this.axis === 'y' ) ? 'height' : 'width',
72 minEdge: ( this.axis === 'y' ) ? 'top' : 'left',
73 maxEdge: ( this.axis === 'y' ) ? 'bottom' : 'right',
74 xyIndex: ( this.axis === 'y' ) ? 1 : 0
78 * Signals that the thumb has moved. Payload includes the thumb's
79 * pixel offset from the top/left edge of the rail, and if triggered by
80 * dragging the thumb, the <code>drag:drag</code> event.
83 * @param event {Event} The event object for the thumbMove with the
84 * following extra properties:
87 * <dd>Pixel offset from top/left of the slider to the new
90 * <dd><code>drag:drag</code> event from the thumb</dd>
93 this.publish( 'thumbMove', {
94 defaultFn: this._defThumbMoveFn,
100 * Create the DOM structure for the Slider.
105 renderUI : function () {
106 var contentBox = this.get( 'contentBox' );
109 * The Node instance of the Slider's rail element. Do not write to
115 this.rail = this.renderRail();
117 this._uiSetRailLength( this.get( 'length' ) );
120 * The Node instance of the Slider's thumb element. Do not write to
126 this.thumb = this.renderThumb();
128 this.rail.appendChild( this.thumb );
129 // @TODO: insert( contentBox, 'replace' ) or setContent?
130 contentBox.appendChild( this.rail );
132 // <span class="yui3-slider-x">
133 contentBox.addClass( this.getClassName( this.axis ) );
137 * Creates the Slider rail DOM subtree for insertion into the Slider's
138 * <code>contentBox</code>. Override this method if you want to provide
139 * the rail element (presumably from existing markup).
142 * @return {Node} the rail node subtree
144 renderRail: function () {
145 var minCapClass = this.getClassName( 'rail', 'cap', this._key.minEdge ),
146 maxCapClass = this.getClassName( 'rail', 'cap', this._key.maxEdge );
148 return Y.Node.create(
149 Y.substitute( this.RAIL_TEMPLATE, {
150 railClass : this.getClassName( 'rail' ),
151 railMinCapClass: minCapClass,
152 railMaxCapClass: maxCapClass
157 * Sets the rail length according to the <code>length</code> attribute.
159 * @method _uiSetRailLength
160 * @param length {String} the length to apply to the rail style
163 _uiSetRailLength: function ( length ) {
164 this.rail.setStyle( this._key.dim, length );
168 * Creates the Slider thumb DOM subtree for insertion into the Slider's
169 * rail. Override this method if you want to provide the thumb element
170 * (presumably from existing markup).
172 * @method renderThumb
173 * @return {Node} the thumb node subtree
175 renderThumb: function () {
176 this._initThumbUrl();
178 var imageUrl = this.get( 'thumbUrl' );
180 return Y.Node.create(
181 Y.substitute( this.THUMB_TEMPLATE, {
182 thumbClass : this.getClassName( 'thumb' ),
183 thumbShadowClass: this.getClassName( 'thumb', 'shadow' ),
184 thumbImageClass : this.getClassName( 'thumb', 'image' ),
185 thumbShadowUrl : imageUrl,
186 thumbImageUrl : imageUrl
191 * Creates the Y.DD.Drag instance used to handle the thumb movement and
192 * binds Slider interaction to the configured value model.
197 bindUI : function () {
200 this._bindValueLogic();
202 this.after( 'disabledChange', this._afterDisabledChange );
203 this.after( 'lengthChange', this._afterLengthChange );
207 * Makes the thumb draggable and constrains it to the rail.
209 * @method _bindThumbDD
212 _bindThumbDD: function () {
213 var config = { constrain: this.rail };
215 // { constrain: rail, stickX: true }
216 config[ 'stick' + this.axis.toUpperCase() ] = true;
219 * The DD.Drag instance linked to the thumb node.
225 this._dd = new Y.DD.Drag( {
229 'drag:start': Y.bind( this._onDragStart, this )
232 'drag:drag': Y.bind( this._afterDrag, this ),
233 'drag:end' : Y.bind( this._afterDragEnd, this )
237 // Constrain the thumb to the rail
238 this._dd.plug( Y.Plugin.DDConstrained, config );
242 * Stub implementation. Override this (presumably in a class extension) to
243 * initialize any value logic that depends on the presence of the Drag
246 * @method _bindValueLogic
249 _bindValueLogic: function () {},
252 * Moves the thumb to pixel offset position along the rail.
254 * @method _uiMoveThumb
255 * @param offset {Number} the pixel offset to set as left or top style
258 _uiMoveThumb: function ( offset ) {
260 this.thumb.setStyle( this._key.minEdge, offset + 'px' );
263 this.fire( 'thumbMove', { offset: offset } );
268 * Dispatches the <code>slideStart</code> event.
270 * @method _onDragStart
271 * @param e {Event} the <code>drag:start</code> event from the thumb
274 _onDragStart: function ( e ) {
276 * Signals the beginning of a thumb drag operation. Payload includes
277 * the thumb's drag:start event.
280 * @param event {Event} The event object for the slideStart with the
281 * following extra properties:
284 * <dd><code>drag:start</code> event from the thumb</dd>
287 this.fire( 'slideStart', { ddEvent: e } );
291 * Dispatches the <code>thumbMove</code> event.
294 * @param e {Event} the <code>drag:drag</code> event from the thumb
297 _afterDrag: function ( e ) {
298 var thumbXY = e.info.xy[ this._key.xyIndex ],
299 railXY = e.target.con._regionCache[ this._key.minEdge ];
301 this.fire( 'thumbMove', {
302 offset : (thumbXY - railXY),
308 * Dispatches the <code>slideEnd</code> event.
311 * @param e {Event} the <code>drag:end</code> event from the thumb
314 _afterDragEnd: function ( e ) {
316 * Signals the end of a thumb drag operation. Payload includes
317 * the thumb's drag:end event.
320 * @param event {Event} The event object for the slideEnd with the
321 * following extra properties:
324 * <dd><code>drag:end</code> event from the thumb</dd>
327 this.fire( 'slideEnd', { ddEvent: e } );
331 * Locks or unlocks the thumb.
333 * @method _afterDisabledChange
334 * @param e {Event} The disabledChange event object
337 _afterDisabledChange: function ( e ) {
338 this._dd.set( 'lock', e.newVal );
342 * Handles changes to the <code>length</code> attribute. By default, it
343 * triggers an update to the UI.
345 * @method _afterLengthChange
346 * @param e {Event} The lengthChange event object
349 _afterLengthChange: function ( e ) {
350 if ( this.get( 'rendered' ) ) {
351 this._uiSetRailLength( e.newVal );
358 * Synchronizes the DOM state with the attribute settings.
362 syncUI : function () {
363 this._dd.con.resetCache();
365 this._syncThumbPosition();
367 // Forces a reflow of the bounding box to address IE8 inline-block
368 // container not expanding correctly. bug 2527905
369 //this.get('boundingBox').toggleClass('');
373 * Stub implementation. Override this (presumably in a class extension) to
374 * ensure the thumb is in the correct position according to the value
378 * @method _syncThumbPosition
381 _syncThumbPosition: function () {},
384 * Validates the axis is "x" or "y" (case insensitive).
385 * Converts to lower case for storage.
388 * @param v {String} proposed value for the axis attribute
389 * @return {String} lowercased first character of the input string
392 _setAxis : function (v) {
393 v = ( v + '' ).toLowerCase();
395 return ( v === 'x' || v === 'y' ) ? v : INVALID_VALUE;
399 * <p>Ensures the stored length value is a string with a quantity and unit.
400 * Unit will be defaulted to "px" if not included. Rejects
401 * values less than or equal to 0 and those that don't at least start with
404 * <p>Currently only pixel lengths are supported.</p>
407 * @param v {String} proposed value for the length attribute
408 * @return {String} the sanitized value
411 _setLength: function ( v ) {
412 v = ( v + '' ).toLowerCase();
414 var length = parseFloat( v, 10 ),
415 units = v.replace( /[\d\.\-]/g, '' ) || this.DEF_UNIT;
417 return length > 0 ? ( length + units ) : INVALID_VALUE;
421 * <p>Defaults the thumbURL attribute according to the current skin, or
422 * "sam" if none can be determined. Horizontal Sliders will have
423 * their <code>thumbUrl</code> attribute set to</p>
424 * <p><code>"/<em>configured</em>/<em>yu</em>i/<em>builddi</em>r/slider/assets/skins/sam/thumb-x.png"</code></p>
425 * <p>And vertical thumbs will get</p>
426 * <p><code>"/<em>configured</em>/<em>yui</em>/<em>builddir</em>/slider/assets/skins/sam/thumb-y.png"</code></p>
428 * @method _initThumbUrl
431 _initThumbUrl: function () {
432 if (!this.get('thumbUrl')) {
433 var skin = this.getSkinName() || 'sam',
434 base = Y.config.base;
436 // Unfortunate hack to avoid requesting image resources from the
437 // combo service. The combo service does not serve images.
438 if (base.indexOf('http://yui.yahooapis.com/combo') === 0) {
439 base = 'http://yui.yahooapis.com/' + Y.version + '/build/';
442 // <img src="/path/to/build/slider/assets/skins/sam/thumb-x.png">
443 this.set('thumbUrl', base + 'slider/assets/skins/' +
444 skin + '/thumb-' + this.axis + '.png');
450 * Bounding box template that will contain the Slider's DOM subtree. <span>s are used to support inline-block styling.
452 * @property BOUNDING_TEMPLATE
454 * @default <span></span>
456 BOUNDING_TEMPLATE : '<span></span>',
459 * Content box template that will contain the Slider's rail and thumb.
461 * @property CONTENT_TEMPLATE
463 * @default <span></span>
465 CONTENT_TEMPLATE : '<span></span>',
468 * Rail template that will contain the end caps and the thumb.
469 * {placeholder}s are used for template substitution at render time.
471 * @property RAIL_TEMPLATE
473 * @default <span class="{railClass}"><span class="{railMinCapClass}"></span><span class="{railMaxCapClass}"></span></span>
475 RAIL_TEMPLATE : '<span class="{railClass}">' +
476 '<span class="{railMinCapClass}"></span>' +
477 '<span class="{railMaxCapClass}"></span>' +
481 * Thumb template that will contain the thumb image and shadow. <img>
482 * tags are used instead of background images to avoid a flicker bug in IE.
483 * {placeholder}s are used for template substitution at render time.
485 * @property THUMB_TEMPLATE
487 * @default <span class="{thumbClass}" tabindex="-1"><img src="{thumbShadowUrl}" alt="Slider thumb shadow" class="{thumbShadowClass}"><img src="{thumbImageUrl}" alt="Slider thumb" class="{thumbImageClass}"></span>
489 THUMB_TEMPLATE : '<span class="{thumbClass}" tabindex="-1">' +
490 '<img src="{thumbShadowUrl}" ' +
491 'alt="Slider thumb shadow" ' +
492 'class="{thumbShadowClass}">' +
493 '<img src="{thumbImageUrl}" ' +
494 'alt="Slider thumb" ' +
495 'class="{thumbImageClass}">' +
500 // Y.SliderBase static properties
503 * The identity of the widget.
505 * @property SliderBase.NAME
507 * @default 'sliderBase'
515 * Static property used to define the default attribute configuration of
518 * @property SliderBase.ATTRS
526 * Axis upon which the Slider's thumb moves. "x" for
527 * horizontal, "y" for vertical.
531 * @default "x"
542 * The length of the rail (exclusive of the end caps if positioned by
543 * CSS). This corresponds to the movable range of the thumb.
546 * @type {String | Number} e.g. "200px" or 200
555 * Path to the thumb image. This will be used as both the thumb and
556 * shadow as a sprite. Defaults at render() to thumb-x.png or
557 * thumb-y.png in the skin directory of the current skin.
559 * @attribute thumbUrl
561 * @default thumb-x.png or thumb-y.png in the sam skin directory of the
562 * current build path for Slider
566 validator: Y.Lang.isString
572 }, '3.3.0' ,{requires:['widget', 'substitute', 'dd-constrain']});
573 YUI.add('slider-value-range', function(Y) {
576 * Adds value support for Slider as a range of integers between a configured
577 * minimum and maximum value. For use with <code>Y.Base.build(..)</code> to
578 * add the plumbing to <code>Y.SliderBase</code>.
581 * @submodule slider-value-range
584 // Constants for compression or performance
592 * One class of value algorithm that can be built onto SliderBase. By default,
593 * values range between 0 and 100, but you can configure these on the
594 * built Slider class by setting the <code>min</code> and <code>max</code>
595 * configurations. Set the initial value (will cause the thumb to move to the
596 * appropriate location on the rail) in configuration as well if appropriate.
598 * @class SliderValueRange
600 function SliderValueRange() {
601 this._initSliderValueRange();
604 Y.SliderValueRange = Y.mix( SliderValueRange, {
606 // Prototype properties and methods that will be added onto host class
610 * Factor used to translate value -> position -> value.
619 * Stub for construction logic. Override if extending this class and
620 * you need to set something up during the initializer phase.
622 * @method _initSliderValueRange
625 _initSliderValueRange: function () {},
628 * Override of stub method in SliderBase that is called at the end of
629 * its bindUI stage of render(). Subscribes to internal events to
630 * trigger UI and related state updates.
632 * @method _bindValueLogic
635 _bindValueLogic: function () {
637 minChange : this._afterMinChange,
638 maxChange : this._afterMaxChange,
639 valueChange: this._afterValueChange
644 * Move the thumb to appropriate position if necessary. Also resets
645 * the cached offsets and recalculates the conversion factor to
646 * translate position to value.
648 * @method _syncThumbPosition
651 _syncThumbPosition: function () {
652 this._calculateFactor();
654 this._setPosition( this.get( VALUE ) );
658 * Calculates and caches
659 * (range between max and min) / (rail length)
660 * for fast runtime calculation of position -> value.
662 * @method _calculateFactor
665 _calculateFactor: function () {
666 var length = this.get( 'length' ),
667 thumbSize = this.thumb.getStyle( this._key.dim ),
668 min = this.get( MIN ),
669 max = this.get( MAX );
671 // The default thumb width is based on Sam skin's thumb dimension.
672 // This attempts to allow for rendering off-DOM, then attaching
673 // without the need to call syncUI(). It is still recommended
674 // to call syncUI() in these cases though, just to be sure.
675 length = parseFloat( length, 10 ) || 150;
676 thumbSize = parseFloat( thumbSize, 10 ) || 15;
678 this._factor = ( max - min ) / ( length - thumbSize );
683 * Dispatch the new position of the thumb into the value setting
686 * @method _defThumbMoveFn
687 * @param e { EventFacade } The host's thumbMove event
690 _defThumbMoveFn: function ( e ) {
691 var previous = this.get( VALUE ),
692 value = this._offsetToValue( e.offset );
694 // This test avoids duplication of this.set(..) if the origin
695 // of this thumbMove is from slider.set('value',x);
696 // slider.set() -> afterValueChange -> uiMoveThumb ->
697 // fire(thumbMove) -> _defThumbMoveFn -> this.set()
698 if ( previous !== value ) {
699 this.set( VALUE, value, { positioned: true } );
704 * <p>Converts a pixel position into a value. Calculates current
705 * thumb offset from the leading edge of the rail multiplied by the
706 * ratio of <code>(max - min) / (constraining dim)</code>.</p>
708 * <p>Override this if you want to use a different value mapping
711 * @method _offsetToValue
712 * @param offset { Number } X or Y pixel offset
713 * @return { mixed } Value corresponding to the provided pixel offset
716 _offsetToValue: function ( offset ) {
718 var value = round( offset * this._factor ) + this.get( MIN );
720 return round( this._nearestValue( value ) );
724 * Converts a value into a pixel offset for use in positioning
725 * the thumb according to the reverse of the
726 * <code>_offsetToValue( xy )</code> operation.
728 * @method _valueToOffset
729 * @param val { Number } The value to map to pixel X or Y position
730 * @return { Number } The pixel offset
733 _valueToOffset: function ( value ) {
734 var offset = round( ( value - this.get( MIN ) ) / this._factor );
740 * Returns the current value. Override this if you want to introduce
741 * output formatting. Otherwise equivalent to slider.get( "value" );
746 getValue: function () {
747 return this.get( VALUE );
751 * Updates the current value. Override this if you want to introduce
752 * input value parsing or preprocessing. Otherwise equivalent to
753 * slider.set( "value", v );
756 * @param val {Number} The new value
760 setValue: function ( val ) {
761 return this.set( VALUE, val );
765 * Update position according to new min value. If the new min results
766 * in the current value being out of range, the value is set to the
767 * closer of min or max.
769 * @method _afterMinChange
770 * @param e { EventFacade } The <code>min</code> attribute change event.
773 _afterMinChange: function ( e ) {
776 this._syncThumbPosition();
780 * Update position according to new max value. If the new max results
781 * in the current value being out of range, the value is set to the
782 * closer of min or max.
784 * @method _afterMaxChange
785 * @param e { EventFacade } The <code>max</code> attribute change event.
788 _afterMaxChange: function ( e ) {
791 this._syncThumbPosition();
795 * Verifies that the current value is within the min - max range. If
796 * not, value is set to either min or max, depending on which is
799 * @method _verifyValue
802 _verifyValue: function () {
803 var value = this.get( VALUE ),
804 nearest = this._nearestValue( value );
806 if ( value !== nearest ) {
807 // @TODO Can/should valueChange, minChange, etc be queued
808 // events? To make dd.set( 'min', n ); execute after minChange
809 // subscribers before on/after valueChange subscribers.
810 this.set( VALUE, nearest );
815 * Propagate change to the thumb position unless the change originated
816 * from the thumbMove event.
818 * @method _afterValueChange
819 * @param e { EventFacade } The <code>valueChange</code> event.
822 _afterValueChange: function ( e ) {
823 if ( !e.positioned ) {
824 this._setPosition( e.newVal );
829 * Positions the thumb in accordance with the translated value.
831 * @method _setPosition
834 _setPosition: function ( value ) {
835 this._uiMoveThumb( this._valueToOffset( value ) );
839 * Validates new values assigned to <code>min</code> attribute. Numbers
840 * are acceptable. Override this to enforce different rules.
842 * @method _validateNewMin
843 * @param value { mixed } Value assigned to <code>min</code> attribute.
844 * @return { Boolean } True for numbers. False otherwise.
847 _validateNewMin: function ( value ) {
848 return Y.Lang.isNumber( value );
852 * Validates new values assigned to <code>max</code> attribute. Numbers
853 * are acceptable. Override this to enforce different rules.
855 * @method _validateNewMax
856 * @param value { mixed } Value assigned to <code>max</code> attribute.
857 * @return { Boolean } True for numbers. False otherwise.
860 _validateNewMax: function ( value ) {
861 return Y.Lang.isNumber( value );
865 * Restricts new values assigned to <code>value</code> attribute to be
866 * between the configured <code>min</code> and <code>max</code>.
867 * Rounds to nearest integer value.
869 * @method _setNewValue
870 * @param value { Number } Value assigned to <code>value</code> attribute
871 * @return { Number } Normalized and constrained value
874 _setNewValue: function ( value ) {
875 return round( this._nearestValue( value ) );
879 * Returns the nearest valid value to the value input. If the provided
880 * value is outside the min - max range, accounting for min > max
881 * scenarios, the nearest of either min or max is returned. Otherwise,
882 * the provided value is returned.
884 * @method _nearestValue
885 * @param value { mixed } Value to test against current min - max range
886 * @return { Number } Current min, max, or value if within range
889 _nearestValue: function ( value ) {
890 var min = this.get( MIN ),
891 max = this.get( MAX ),
894 // Account for reverse value range (min > max)
895 tmp = ( max > min ) ? max : min;
896 min = ( max > min ) ? min : max;
899 return ( value < min ) ?
909 * Attributes that will be added onto host class.
918 * The value associated with the farthest top, left position of the
919 * rail. Can be greater than the configured <code>max</code> if you
920 * want values to increase from right-to-left or bottom-to-top.
928 validator: '_validateNewMin'
932 * The value associated with the farthest bottom, right position of
933 * the rail. Can be less than the configured <code>min</code> if
934 * you want values to increase from right-to-left or bottom-to-top.
942 validator: '_validateNewMax'
946 * The value associated with the thumb's current position on the
947 * rail. Defaults to the value inferred from the thumb's current
948 * position. Specifying value in the constructor will move the
949 * thumb to the position that corresponds to the supplied value.
953 * @default (inferred from current thumb position)
957 setter: '_setNewValue'
963 }, '3.3.0' ,{requires:['slider-base']});
964 YUI.add('clickable-rail', function(Y) {
967 * Adds support for mouse interaction with the Slider rail triggering thumb
971 * @submodule clickable-rail
975 * Slider extension that allows clicking on the Slider's rail element,
976 * triggering the thumb to align with the location of the click.
978 * @class ClickableRail
980 function ClickableRail() {
981 this._initClickableRail();
984 Y.ClickableRail = Y.mix(ClickableRail, {
986 // Prototype methods added to host class
990 * Initializes the internal state and sets up events.
992 * @method _initClickableRail
995 _initClickableRail: function () {
996 this._evtGuid = this._evtGuid || (Y.guid() + '|');
999 * Broadcasts when the rail has received a mousedown event and
1000 * triggers the thumb positioning. Use
1001 * <code>e.preventDefault()</code> or
1002 * <code>set("clickableRail", false)</code> to prevent
1003 * the thumb positioning.
1005 * @event railMouseDown
1006 * @preventable _defRailMouseDownFn
1008 this.publish('railMouseDown', {
1009 defaultFn: this._defRailMouseDownFn
1012 this.after('render', this._bindClickableRail);
1013 this.on('destroy', this._unbindClickableRail);
1017 * Attaches DOM event subscribers to support rail interaction.
1019 * @method _bindClickableRail
1022 _bindClickableRail: function () {
1023 this._dd.addHandle(this.rail);
1025 this.rail.on(this._evtGuid + Y.DD.Drag.START_EVENT,
1026 Y.bind(this._onRailMouseDown, this));
1030 * Detaches DOM event subscribers for cleanup/destruction cycle.
1032 * @method _unbindClickableRail
1035 _unbindClickableRail: function () {
1036 if (this.get('rendered')) {
1037 var contentBox = this.get('contentBox'),
1038 rail = contentBox.one('.' + this.getClassName('rail'));
1040 rail.detach(this.evtGuid + '*');
1045 * Dispatches the railMouseDown event.
1047 * @method _onRailMouseDown
1048 * @param e {DOMEvent} the mousedown event object
1051 _onRailMouseDown: function (e) {
1052 if (this.get('clickableRail') && !this.get('disabled')) {
1053 this.fire('railMouseDown', { ev: e });
1058 * Default behavior for the railMouseDown event. Centers the thumb at
1059 * the click location and passes control to the DDM to behave as though
1060 * the thumb itself were clicked in preparation for a drag operation.
1062 * @method _defRailMouseDownFn
1063 * @param e {Event} the EventFacade for the railMouseDown custom event
1066 _defRailMouseDownFn: function (e) {
1069 // Logic that determines which thumb should be used is abstracted
1070 // to someday support multi-thumb sliders
1071 var dd = this._resolveThumb(e),
1072 i = this._key.xyIndex,
1073 length = parseFloat(this.get('length'), 10),
1079 thumb = dd.get('dragNode');
1080 thumbSize = parseFloat(thumb.getStyle(this._key.dim), 10);
1082 // Step 1. Allow for aligning to thumb center or edge, etc
1083 xy = this._getThumbDestination(e, thumb);
1085 // Step 2. Remove page offsets to give just top/left style val
1086 xy = xy[ i ] - this.rail.getXY()[i];
1088 // Step 3. Constrain within the rail in case of attempt to
1089 // center the thumb when clicking on the end of the rail
1092 (length - thumbSize));
1094 this._uiMoveThumb(xy);
1096 // Set e.target for DD's IE9 patch which calls
1097 // e.target._node.setCapture() to allow imgs to be dragged.
1098 // Without this, setCapture is called from the rail and rail
1099 // clicks on other Sliders may have their thumb movements
1100 // overridden by a different Slider (the thumb on the wrong
1102 e.target = this.thumb.one('img') || this.thumb;
1104 // Delegate to DD's natural behavior
1105 dd._handleMouseDownEvent(e);
1107 // TODO: this won't trigger a slideEnd if the rail is clicked
1108 // check if dd._move(e); dd._dragThreshMet = true; dd.start();
1109 // will do the trick. Is that even a good idea?
1114 * Resolves which thumb to actuate if any. Override this if you want to
1115 * support multiple thumbs. By default, returns the Drag instance for
1116 * the thumb stored by the Slider.
1118 * @method _resolveThumb
1119 * @param e {DOMEvent} the mousedown event object
1120 * @return {Y.DD.Drag} the Drag instance that should be moved
1123 _resolveThumb: function (e) {
1124 /* Temporary workaround
1125 var primaryOnly = this._dd.get('primaryButtonOnly'),
1126 validClick = !primaryOnly || e.button <= 1;
1128 return (validClick) ? this._dd : null;
1134 * Calculates the top left position the thumb should be moved to to
1135 * align the click XY with the center of the specified node.
1137 * @method _getThumbDestination
1138 * @param e {DOMEvent} The mousedown event object
1139 * @param node {Node} The node to position
1140 * @return {Array} the [top, left] pixel position of the destination
1143 _getThumbDestination: function (e, node) {
1144 var offsetWidth = node.get('offsetWidth'),
1145 offsetHeight = node.get('offsetHeight');
1149 (e.pageX - Math.round((offsetWidth / 2))),
1150 (e.pageY - Math.round((offsetHeight / 2)))
1156 // Static properties added onto host class
1159 * Enable or disable clickable rail support.
1161 * @attribute clickableRail
1167 validator: Y.Lang.isBoolean
1174 }, '3.3.0' ,{requires:['slider-base']});
1175 YUI.add('range-slider', function(Y) {
1178 * Create a sliding value range input visualized as a draggable thumb on a
1179 * background rail element.
1182 * @submodule range-slider
1186 * Create a slider to represent an integer value between a given minimum and
1187 * maximum. Sliders may be aligned vertically or horizontally, based on the
1188 * <code>axis</code> configuration.
1192 * @extends SliderBase
1193 * @uses SliderValueRange
1194 * @uses ClickableRail
1195 * @param config {Object} Configuration object
1197 Y.Slider = Y.Base.build( 'slider', Y.SliderBase,
1198 [ Y.SliderValueRange, Y.ClickableRail ] );
1201 }, '3.3.0' ,{requires:['slider-base', 'clickable-rail', 'slider-value-range']});
1204 YUI.add('slider', function(Y){}, '3.3.0' ,{use:['slider-base', 'slider-value-range', 'clickable-rail', 'range-slider']});