slider-base.js revision 54829895a9800bacf395ef6884af743d57817dc0
* Create a slider to represent an input control capable of representing a * series of intermediate states based on the position of the slider's thumb. * These states are typically aligned to a value algorithm whereby the thumb * position corresponds to a given value. Sliders may be oriented vertically or * horizontally, based on the <code>axis</code> configuration. * @param config {Object} Configuration object * Construction logic executed during Slider instantiation. * The configured axis, stored for fast lookup since it's a writeOnce * attribute. This is for use by extension classes. For * implementation code, use <code>get( "axis" )</code> for * authoritative source. Never write to this property. * Cached fast access map for DOM properties and attributes that * pertain to accessing dimensional or positioning information * according to the Slider's axis (e.g. "height" vs. * "width"). Extension classes should add to this collection * for axis related strings if necessary. dim : (
this.
axis ===
'y' ) ?
'height' :
'width',
* Signals that the thumb has moved. Payload includes the thumb's * pixel offset from the top/left edge of the rail, and if triggered by * dragging the thumb, the <code>drag:drag</code> event. * @param event {Event} The event object for the thumbMove with the * following extra properties: * <dd>Pixel offset from top/left of the slider to the new * <dt>ddEvent (deprecated)</dt> * <dd><code>drag:drag</code> event from the thumb</dd> * <dd><code>drag:drag</code> event from the thumb</dd> * Create the DOM structure for the Slider. * The Node instance of the Slider's rail element. Do not write to * The Node instance of the Slider's thumb element. Do not write to // @TODO: insert( contentBox, 'replace' ) or setContent? // <span class="yui3-slider-x"> * Creates the Slider rail DOM subtree for insertion into the Slider's * <code>contentBox</code>. Override this method if you want to provide * the rail element (presumably from existing markup). * @return {Node} the rail node subtree * Sets the rail length according to the <code>length</code> attribute. * @method _uiSetRailLength * @param length {String} the length to apply to the rail style * 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). * @return {Node} the thumb node subtree * Gives focus to the thumb enabling keyboard access after clicking thumb * Creates the Y.DD.Drag instance used to handle the thumb movement and * binds Slider interaction to the configured value model. // Begin keyboard listeners /////////////////////////////// // Looking for a key event which will fire continously across browsers while the key is held down. // End keyboard listeners ////////////////////////////////// * increments Slider value by a minor increment this.
set(
'value', (
this.
get(
'value') +
this.
get(
'minorStep')));
* decrements Slider value by a minor increment this.
set(
'value', (
this.
get(
'value') -
this.
get(
'minorStep')));
* increments Slider value by a major increment this.
set(
'value', (
this.
get(
'value') +
this.
get(
'majorStep')));
* decrements Slider value by a major increment this.
set(
'value', (
this.
get(
'value') -
this.
get(
'majorStep')));
* sets the Slider value to the min value. this.
set(
'value',
this.
get(
'min'));
* sets the Slider value to the max value. 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 if(
this.
get(
'disabled') ===
false){
* sets the Slider's value in response to left or right key events * @method _onLeftRightKey * @param e {Event} the key event if(
this.
get(
'disabled') ===
false){
* 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 if(
this.
get(
'disabled') ===
false){
* Makes the thumb draggable and constrains it to the rail. // { constrain: rail, stickX: true } * The DD.Drag instance linked to the thumb node. // Constrain the thumb to the rail * Stub implementation. Override this (presumably in a class extension) to * initialize any value logic that depends on the presence of the Drag * @method _bindValueLogic * Moves the thumb to pixel offset position along the rail. * @param offset {Number} the pixel offset to set as left or top style * @param [options] {Object} Details to send with the `thumbMove` event * Dispatches the <code>slideStart</code> event. * @param e {Event} the <code>drag:start</code> event from the thumb * Signals the beginning of a thumb drag operation. Payload includes * the thumb's drag:start event. * @param event {Event} The event object for the slideStart with the * following extra properties: * <dt>ddEvent (deprecated)</dt> * <dd><code>drag:start</code> event from the thumb</dd> * <dd><code>drag:start</code> event from the thumb</dd> this.
fire(
'slideStart', {
ddEvent: e,
// for backward compatibility * Dispatches the <code>thumbMove</code> event. * @param e {Event} the <code>drag:drag</code> event from the thumb Y.
log(
"Thumb position: " +
thumbXY +
", Rail position: " +
railXY,
"info",
"slider");
this.
fire(
'thumbMove', {
ddEvent: e,
// for backward compatibility * Dispatches the <code>slideEnd</code> event. * @param e {Event} the <code>drag:end</code> event from the thumb * Signals the end of a thumb drag operation. Payload includes * the thumb's drag:end event. * @param event {Event} The event object for the slideEnd with the * following extra properties: * <dt>ddEvent (deprecated)</dt> * <dd><code>drag:end</code> event from the thumb</dd> * <dd><code>drag:end</code> event from the thumb</dd> * Locks or unlocks the thumb. * @method _afterDisabledChange * @param e {Event} The disabledChange event object * Handles changes to the <code>length</code> attribute. By default, it * triggers an update to the UI. * @method _afterLengthChange * @param e {Event} The lengthChange event object if (
this.
get(
'rendered' ) ) {
* Synchronizes the DOM state with the attribute settings. // Forces a reflow of the bounding box to address IE8 inline-block // container not expanding correctly. bug 2527905 //this.get('boundingBox').toggleClass(''); * Stub implementation. Override this (presumably in a class extension) to * ensure the thumb is in the correct position according to the value * @method _syncThumbPosition * Validates the axis is "x" or "y" (case insensitive). * Converts to lower case for storage. * @param v {String} proposed value for the axis attribute * @return {String} lowercased first character of the input string * <p>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 * <p>Currently only pixel lengths are supported.</p> * @param v {String} proposed value for the length attribute * @return {String} the sanitized value * <p>Defaults the thumbURL attribute according to the current skin, or * "sam" if none can be determined. Horizontal Sliders will have * their <code>thumbUrl</code> attribute set to</p> * <p>And vertical thumbs will get</p> if (!
this.
get(
'thumbUrl')) {
// Unfortunate hack to avoid requesting image resources from the // combo service. The combo service does not serve images. * Bounding box template that will contain the Slider's DOM subtree. <span>s are used to support inline-block styling. * @property BOUNDING_TEMPLATE * @default <span></span> * Content box template that will contain the Slider's rail and thumb. * @property CONTENT_TEMPLATE * @default <span></span> * Rail template that will contain the end caps and the thumb. * {placeholder}s are used for template substitution at render time. * @property RAIL_TEMPLATE * @default <span class="{railClass}"><span class="{railMinCapClass}"></span><span class="{railMaxCapClass}"></span></span> '<span class="{railMinCapClass}"></span>' +
'<span class="{railMaxCapClass}"></span>' +
* 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 * @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 :
'<span class="{thumbClass}" aria-labelledby="{thumbAriaLabelId}" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0">' +
// keyboard access jeff tabindex="-1" '<img src="{thumbShadowUrl}" ' +
'alt="Slider thumb shadow" ' +
'class="{thumbShadowClass}">' +
'<img src="{thumbImageUrl}" ' +
'class="{thumbImageClass}">' +
// Y.SliderBase static properties * The identity of the widget. * Static property used to define the default attribute configuration of * Axis upon which the Slider's thumb moves. "x" for * horizontal, "y" for vertical. * The length of the rail (exclusive of the end caps if positioned by * CSS). This corresponds to the movable range of the thumb. * @type {String | Number} e.g. "200px" or 200 * Path to the thumb image. This will be used as both the thumb and * shadow as a sprite. Defaults at render() to thumb-x.png or * thumb-y.png in the skin directory of the current skin. * @default thumb-x.png or thumb-y.png in the sam skin directory of the * current build path for Slider