contentBox. Override this method if you want to provide
+ * the rail element (presumably from existing markup).
+ *
+ * @method renderRail
+ * @return {Node} the rail node subtree
+ */
+ renderRail: function () {
+ var minCapClass = this.getClassName( 'rail', 'cap', this._key.minEdge ),
+ maxCapClass = this.getClassName( 'rail', 'cap', this._key.maxEdge );
+
+ return Y.Node.create(
+ Y.Lang.sub( this.RAIL_TEMPLATE, {
+ railClass : this.getClassName( 'rail' ),
+ railMinCapClass: minCapClass,
+ railMaxCapClass: maxCapClass
+ } ) );
+ },
+
+ /**
+ * Sets the rail length according to the length attribute.
+ *
+ * @method _uiSetRailLength
+ * @param length {String} the length to apply to the rail style
+ * @protected
+ */
+ _uiSetRailLength: function ( length ) {
+ this.rail.setStyle( this._key.dim, length );
+ },
+
+ /**
+ * Creates the Slider thumb DOM subtree for insertion into the Slider's
+ * rail. Override this method if you want to provide the thumb element
+ * (presumably from existing markup).
+ *
+ * @method renderThumb
+ * @return {Node} the thumb node subtree
+ */
+ renderThumb: function () {
+ this._initThumbUrl();
+
+ var imageUrl = this.get( 'thumbUrl' );
+
+ return Y.Node.create(
+ Y.Lang.sub( this.THUMB_TEMPLATE, {
+ thumbClass : this.getClassName( 'thumb' ),
+ thumbShadowClass: this.getClassName( 'thumb', 'shadow' ),
+ thumbImageClass : this.getClassName( 'thumb', 'image' ),
+ thumbShadowUrl : imageUrl,
+ thumbImageUrl : imageUrl,
+ thumbAriaLabelId: this.getClassName( 'label', Y.guid()) // get unique id for specifying a label for ARIA
+ } ) );
+ },
+
+ /**
+ * Gives focus to the thumb enabling keyboard access after clicking thumb
+ *
+ * @method _onThumbClick
+ * @protected
+ */
+ _onThumbClick : function(e){
+ this.thumb.focus();
+ },
+
+
+ /**
+ * Creates the Y.DD.Drag instance used to handle the thumb movement and
+ * binds Slider interaction to the configured value model.
+ *
+ * @method bindUI
+ * @protected
+ */
+ bindUI : function () {
+
+ // Begin keyboard listeners ///////////////////////////////
+ var boundingBox = this.get("boundingBox"), //Y.one('body'),
+ // Looking for a key event which will fire continously across browsers while the key is held down.
+ keyEvent = (!Y.UA.opera) ? "down:" : "press:",
+ // 38, 40 = arrow up/down, 33, 34 = page up/down, 35 , 36 = end/home
+ keyEventSpec = keyEvent + "38,40,33,34,35,36",
+ // 37 , 39 = arrow left/right
+ keyLeftRightSpec = keyEvent + "37,39",
+ // 37 , 39 = arrow left/right + meta (command/apple key) for mac
+ keyLeftRightSpecMeta = keyEvent + "37+meta,39+meta";
+
+ boundingBox.on("key", this._onDirectionKey, keyEventSpec, this);
+ boundingBox.on("key", this._onLeftRightKey, keyLeftRightSpec, this);
+ boundingBox.on("key", this._onLeftRightKeyMeta, keyLeftRightSpecMeta, this);
+ // End keyboard listeners //////////////////////////////////
+
+ this.thumb.on('click', this._onThumbClick, this);
+
+ this._bindThumbDD();
+
+ this._bindValueLogic();
+
+ this.after( 'disabledChange', this._afterDisabledChange );
+ this.after( 'lengthChange', this._afterLengthChange );
+
+ },
+
+ /**
+ * increments Slider value by a minor increment
+ *
+ * @method _incrMinor
+ * @protected
+ */
+ _incrMinor : function(){
+ this.set('value', (this.get('value') + this.get('minorStep')));
+ },
+
+ /**
+ * decrements Slider value by a minor increment
+ *
+ * @method _decrMinor
+ * @protected
+ */
+ _decrMinor : function(){
+ this.set('value', (this.get('value') - this.get('minorStep')));
+ },
+
+ /**
+ * increments Slider value by a major increment
+ *
+ * @method _incrMajor
+ * @protected
+ */
+ _incrMajor : function(){
+ this.set('value', (this.get('value') + this.get('majorStep')));
+ },
+
+ /**
+ * decrements Slider value by a major increment
+ *
+ * @method _decrMajor
+ * @protected
+ */
+ _decrMajor : function(){
+ this.set('value', (this.get('value') - this.get('majorStep')));
+ },
+
+ /**
+ * sets the Slider value to the min value.
+ *
+ * @method _setToMin
+ * @protected
+ */
+ _setToMin : function(e){
+ this.set('value', this.get('min'));
+ },
+
+ /**
+ * sets the Slider value to the max value.
+ *
+ * @method _setToMax
+ * @protected
+ */
+ _setToMax : function(e){
+ this.set('value', this.get('max'));
+ },
+
+ /**
+ * sets the Slider's value in response to key events.
+ * Left and right keys are in a separate method
+ * in case an implementation wants to increment values
+ * but needs left and right arrow keys for other purposes.
+ *
+ * @method _onDirectionKey
+ * @param e {Event} the key event
+ * @protected
+ */
+ _onDirectionKey : function(e) {
+ e.preventDefault();
+ if(this.get('disabled') === false){
+ switch (e.charCode) {
+ case 38: // up
+ this._incrMinor();
+ break;
+ case 40: // down
+ this._decrMinor();
+ break;
+ case 36: // home
+ this._setToMin();
+ break;
+ case 35: // end
+ this._setToMax();
+ break;
+ case 33: // page up
+ this._incrMajor();
+ break;
+ case 34: // page down
+ this._decrMajor();
+ break;
+ }
+ }
+ },
+
+ /**
+ * sets the Slider's value in response to left or right key events
+ *
+ * @method _onLeftRightKey
+ * @param e {Event} the key event
+ * @protected
+ */
+ _onLeftRightKey : function(e) {
+ e.preventDefault();
+ if(this.get('disabled') === false){
+ switch (e.charCode) {
+ case 37: // left
+ this._decrMinor();
+ break;
+ case 39: // right
+ this._incrMinor();
+ break;
+ }
+ }
+ },
+
+ /**
+ * sets the Slider's value in response to left or right key events when a meta (mac command/apple) key is also pressed
+ *
+ * @method _onLeftRightKeyMeta
+ * @param e {Event} the key event
+ * @protected
+ */
+ _onLeftRightKeyMeta : function(e) {
+ e.preventDefault();
+ if(this.get('disabled') === false){
+ switch (e.charCode) {
+ case 37: // left + meta
+ this._setToMin();
+ break;
+ case 39: // right + meta
+ this._setToMax();
+ break;
+ }
+ }
+ },
+
+
+
+
+
+ /**
+ * Makes the thumb draggable and constrains it to the rail.
+ *
+ * @method _bindThumbDD
+ * @protected
+ */
+ _bindThumbDD: function () {
+ var config = { constrain: this.rail };
+
+ // { constrain: rail, stickX: true }
+ config[ 'stick' + this.axis.toUpperCase() ] = true;
+
+ /**
+ * The DD.Drag instance linked to the thumb node.
+ *
+ * @property _dd
+ * @type {DD.Drag}
+ * @protected
+ */
+ this._dd = new Y.DD.Drag( {
+ node : this.thumb,
+ bubble : false,
+ on : {
+ 'drag:start': Y.bind( this._onDragStart, this )
+ },
+ after : {
+ 'drag:drag': Y.bind( this._afterDrag, this ),
+ 'drag:end' : Y.bind( this._afterDragEnd, this )
+ }
+ } );
+
+ // Constrain the thumb to the rail
+ this._dd.plug( Y.Plugin.DDConstrained, config );
+ },
+
+ /**
+ * Stub implementation. Override this (presumably in a class extension) to
+ * initialize any value logic that depends on the presence of the Drag
+ * instance.
+ *
+ * @method _bindValueLogic
+ * @protected
+ */
+ _bindValueLogic: function () {},
+
+ /**
+ * Moves the thumb to pixel offset position along the rail.
+ *
+ * @method _uiMoveThumb
+ * @param offset {Number} the pixel offset to set as left or top style
+ * @param [options] {Object} Details to send with the `thumbMove` event
+ * @protected
+ */
+ _uiMoveThumb: function ( offset, options ) {
+ if ( this.thumb ) {
+ this.thumb.setStyle( this._key.minEdge, offset + 'px' );
+
+ Y.log("Setting thumb " + this._key.minEdge + " to " + offset + "px","info","slider");
+
+ options || (options = {});
+ options.offset = offset;
+
+ this.fire( 'thumbMove', options );
+ }
+ },
+
+ /**
+ * Dispatches the slideStart event.
+ *
+ * @method _onDragStart
+ * @param e {Event} the drag:start event from the thumb
+ * @protected
+ */
+ _onDragStart: function ( e ) {
+ /**
+ * Signals the beginning of a thumb drag operation. Payload includes
+ * the thumb's drag:start event.
+ *
+ * @event slideStart
+ * @param event {Event} The event object for the slideStart with the
+ * following extra properties:
+ * -
+ *
- ddEvent (deprecated) + *
drag:startevent from the thumb
+ * - originEvent + *
drag:startevent from the thumb
+ *
thumbMove event.
+ *
+ * @method _afterDrag
+ * @param e {Event} the drag:drag event from the thumb
+ * @protected
+ */
+ _afterDrag: function ( e ) {
+ var thumbXY = e.info.xy[ this._key.xyIndex ],
+ railXY = e.target.con._regionCache[ this._key.minEdge ];
+
+ Y.log("Thumb position: " + thumbXY + ", Rail position: " + railXY, "info", "slider");
+ this.fire( 'thumbMove', {
+ offset : (thumbXY - railXY),
+ ddEvent: e, // for backward compatibility
+ originEvent: e
+ } );
+ },
+
+ /**
+ * Dispatches the slideEnd event.
+ *
+ * @method _onDragEnd
+ * @param e {Event} the drag:end event from the thumb
+ * @protected
+ */
+ _afterDragEnd: function ( e ) {
+ /**
+ * Signals the end of a thumb drag operation. Payload includes
+ * the thumb's drag:end event.
+ *
+ * @event slideEnd
+ * @param event {Event} The event object for the slideEnd with the
+ * following extra properties:
+ * -
+ *
- ddEvent (deprecated) + *
drag:endevent from the thumb
+ * - originEvent + *
drag:endevent from the thumb
+ *
length attribute. By default, it
+ * triggers an update to the UI.
+ *
+ * @method _afterLengthChange
+ * @param e {Event} The lengthChange event object
+ * @protected
+ */
+ _afterLengthChange: function ( e ) {
+ if ( this.get( 'rendered' ) ) {
+ this._uiSetRailLength( e.newVal );
+
+ this.syncUI();
+ }
+ },
+
+ /**
+ * Synchronizes the DOM state with the attribute settings.
+ *
+ * @method syncUI
+ */
+ syncUI : function () {
+ this._dd.con.resetCache();
+
+ this._syncThumbPosition();
+
+ // Forces a reflow of the bounding box to address IE8 inline-block
+ // container not expanding correctly. bug 2527905
+ //this.get('boundingBox').toggleClass('');
+ this.thumb.set('aria-valuemin', this.get('min'));
+ this.thumb.set('aria-valuemax', this.get('max'));
+
+ this._dd.set('lock', this.get('disabled'));
+ },
+
+ /**
+ * Stub implementation. Override this (presumably in a class extension) to
+ * ensure the thumb is in the correct position according to the value
+ * alogorithm.
+ * instance.
+ *
+ * @method _syncThumbPosition
+ * @protected
+ */
+ _syncThumbPosition: function () {},
+
+ /**
+ * Validates the axis is "x" or "y" (case insensitive).
+ * Converts to lower case for storage.
+ *
+ * @method _setAxis
+ * @param v {String} proposed value for the axis attribute
+ * @return {String} lowercased first character of the input string
+ * @protected
+ */
+ _setAxis : function (v) {
+ v = ( v + '' ).toLowerCase();
+
+ return ( v === 'x' || v === 'y' ) ? v : INVALID_VALUE;
+ },
+
+ /**
+ * Ensures the stored length value is a string with a quantity and unit. + * Unit will be defaulted to "px" if not included. Rejects + * values less than or equal to 0 and those that don't at least start with + * a number.
+ * + *Currently only pixel lengths are supported.
+ * + * @method _setLength + * @param v {String} proposed value for the length attribute + * @return {String} the sanitized value + * @protected + */ + _setLength: function ( v ) { + v = ( v + '' ).toLowerCase(); + + var length = parseFloat( v, 10 ), + units = v.replace( /[\d\.\-]/g, '' ) || this.DEF_UNIT; + + return length > 0 ? ( length + units ) : INVALID_VALUE; + }, + + /** + *Defaults the thumbURL attribute according to the current skin, or
+ * "sam" if none can be determined. Horizontal Sliders will have
+ * their thumbUrl attribute set to
"/configured/yui/builddir/slider-base/assets/skins/sam/thumb-x.png"
And vertical thumbs will get
+ *"/configured/yui/builddir/slider-base/assets/skins/sam/thumb-y.png"
+ this.set('thumbUrl', base + 'slider-base/assets/skins/' +
+ skin + '/thumb-' + this.axis + '.png');
+
+ }
+ },
+
+ /**
+ * Bounding box template that will contain the Slider's DOM subtree. <span>s are used to support inline-block styling.
+ *
+ * @property BOUNDING_TEMPLATE
+ * @type {String}
+ * @default <span></span>
+ */
+ BOUNDING_TEMPLATE : '',
+
+ /**
+ * Content box template that will contain the Slider's rail and thumb.
+ *
+ * @property CONTENT_TEMPLATE
+ * @type {String}
+ * @default <span></span>
+ */
+ CONTENT_TEMPLATE : '',
+
+ /**
+ * Rail template that will contain the end caps and the thumb.
+ * {placeholder}s are used for template substitution at render time.
+ *
+ * @property RAIL_TEMPLATE
+ * @type {String}
+ * @default <span class="{railClass}"><span class="{railMinCapClass}"></span><span class="{railMaxCapClass}"></span></span>
+ */
+ RAIL_TEMPLATE : '' +
+ '' +
+ '' +
+ '',
+
+ /**
+ * Thumb template that will contain the thumb image and shadow. <img>
+ * tags are used instead of background images to avoid a flicker bug in IE.
+ * {placeholder}s are used for template substitution at render time.
+ *
+ * @property THUMB_TEMPLATE
+ * @type {String}
+ * @default <span class="{thumbClass}" tabindex="-1"><img src="{thumbShadowUrl}" alt="Slider thumb shadow" class="{thumbShadowClass}"><img src="{thumbImageUrl}" alt="Slider thumb" class="{thumbImageClass}"></span>
+ */
+ THUMB_TEMPLATE : '' + // keyboard access jeff tabindex="-1"
+ '