|
1 YUI.add('slider-base', function (Y, NAME) { |
|
2 |
|
3 /** |
|
4 * Create a sliding value range input visualized as a draggable thumb on a |
|
5 * background element. |
|
6 * |
|
7 * @module slider |
|
8 * @submodule slider-base |
|
9 */ |
|
10 |
|
11 var INVALID_VALUE = Y.Attribute.INVALID_VALUE; |
|
12 |
|
13 /** |
|
14 * Create a slider to represent an input control capable of representing a |
|
15 * series of intermediate states based on the position of the slider's thumb. |
|
16 * These states are typically aligned to a value algorithm whereby the thumb |
|
17 * position corresponds to a given value. Sliders may be oriented vertically or |
|
18 * horizontally, based on the <code>axis</code> configuration. |
|
19 * |
|
20 * @class SliderBase |
|
21 * @extends Widget |
|
22 * @param config {Object} Configuration object |
|
23 * @constructor |
|
24 */ |
|
25 function SliderBase() { |
|
26 SliderBase.superclass.constructor.apply( this, arguments ); |
|
27 } |
|
28 |
|
29 Y.SliderBase = Y.extend( SliderBase, Y.Widget, { |
|
30 |
|
31 // Y.Slider prototype |
|
32 |
|
33 /** |
|
34 * Construction logic executed during Slider instantiation. |
|
35 * |
|
36 * @method initializer |
|
37 * @protected |
|
38 */ |
|
39 initializer : function () { |
|
40 /** |
|
41 * The configured axis, stored for fast lookup since it's a writeOnce |
|
42 * attribute. This is for use by extension classes. For |
|
43 * implementation code, use <code>get( "axis" )</code> for |
|
44 * authoritative source. Never write to this property. |
|
45 * |
|
46 * @property axis |
|
47 * @type {String} |
|
48 * @protected |
|
49 */ |
|
50 this.axis = this.get( 'axis' ); |
|
51 |
|
52 /** |
|
53 * Cached fast access map for DOM properties and attributes that |
|
54 * pertain to accessing dimensional or positioning information |
|
55 * according to the Slider's axis (e.g. "height" vs. |
|
56 * "width"). Extension classes should add to this collection |
|
57 * for axis related strings if necessary. |
|
58 * |
|
59 * @property _key |
|
60 * @type {Object} |
|
61 * @protected |
|
62 */ |
|
63 this._key = { |
|
64 dim : ( this.axis === 'y' ) ? 'height' : 'width', |
|
65 minEdge: ( this.axis === 'y' ) ? 'top' : 'left', |
|
66 maxEdge: ( this.axis === 'y' ) ? 'bottom' : 'right', |
|
67 xyIndex: ( this.axis === 'y' ) ? 1 : 0 |
|
68 }; |
|
69 |
|
70 /** |
|
71 * Signals that the thumb has moved. Payload includes the thumb's |
|
72 * pixel offset from the top/left edge of the rail, and if triggered by |
|
73 * dragging the thumb, the <code>drag:drag</code> event. |
|
74 * |
|
75 * @event thumbMove |
|
76 * @param event {Event} The event object for the thumbMove with the |
|
77 * following extra properties: |
|
78 * <dl> |
|
79 * <dt>offset</dt> |
|
80 * <dd>Pixel offset from top/left of the slider to the new |
|
81 * thumb position</dd> |
|
82 * <dt>ddEvent (deprecated)</dt> |
|
83 * <dd><code>drag:drag</code> event from the thumb</dd> |
|
84 * <dt>originEvent</dt> |
|
85 * <dd><code>drag:drag</code> event from the thumb</dd> |
|
86 * </dl> |
|
87 */ |
|
88 this.publish( 'thumbMove', { |
|
89 defaultFn: this._defThumbMoveFn, |
|
90 queuable : true |
|
91 } ); |
|
92 }, |
|
93 |
|
94 /** |
|
95 * Create the DOM structure for the Slider. |
|
96 * |
|
97 * @method renderUI |
|
98 * @protected |
|
99 */ |
|
100 renderUI : function () { |
|
101 var contentBox = this.get( 'contentBox' ); |
|
102 |
|
103 /** |
|
104 * The Node instance of the Slider's rail element. Do not write to |
|
105 * this property. |
|
106 * |
|
107 * @property rail |
|
108 * @type {Node} |
|
109 */ |
|
110 this.rail = this.renderRail(); |
|
111 |
|
112 this._uiSetRailLength( this.get( 'length' ) ); |
|
113 |
|
114 /** |
|
115 * The Node instance of the Slider's thumb element. Do not write to |
|
116 * this property. |
|
117 * |
|
118 * @property thumb |
|
119 * @type {Node} |
|
120 */ |
|
121 this.thumb = this.renderThumb(); |
|
122 |
|
123 this.rail.appendChild( this.thumb ); |
|
124 // @TODO: insert( contentBox, 'replace' ) or setHTML? |
|
125 contentBox.appendChild( this.rail ); |
|
126 |
|
127 // <span class="yui3-slider-x"> |
|
128 contentBox.addClass( this.getClassName( this.axis ) ); |
|
129 }, |
|
130 |
|
131 /** |
|
132 * Creates the Slider rail DOM subtree for insertion into the Slider's |
|
133 * <code>contentBox</code>. Override this method if you want to provide |
|
134 * the rail element (presumably from existing markup). |
|
135 * |
|
136 * @method renderRail |
|
137 * @return {Node} the rail node subtree |
|
138 */ |
|
139 renderRail: function () { |
|
140 var minCapClass = this.getClassName( 'rail', 'cap', this._key.minEdge ), |
|
141 maxCapClass = this.getClassName( 'rail', 'cap', this._key.maxEdge ); |
|
142 |
|
143 return Y.Node.create( |
|
144 Y.Lang.sub( this.RAIL_TEMPLATE, { |
|
145 railClass : this.getClassName( 'rail' ), |
|
146 railMinCapClass: minCapClass, |
|
147 railMaxCapClass: maxCapClass |
|
148 } ) ); |
|
149 }, |
|
150 |
|
151 /** |
|
152 * Sets the rail length according to the <code>length</code> attribute. |
|
153 * |
|
154 * @method _uiSetRailLength |
|
155 * @param length {String} the length to apply to the rail style |
|
156 * @protected |
|
157 */ |
|
158 _uiSetRailLength: function ( length ) { |
|
159 this.rail.setStyle( this._key.dim, length ); |
|
160 }, |
|
161 |
|
162 /** |
|
163 * Creates the Slider thumb DOM subtree for insertion into the Slider's |
|
164 * rail. Override this method if you want to provide the thumb element |
|
165 * (presumably from existing markup). |
|
166 * |
|
167 * @method renderThumb |
|
168 * @return {Node} the thumb node subtree |
|
169 */ |
|
170 renderThumb: function () { |
|
171 this._initThumbUrl(); |
|
172 |
|
173 var imageUrl = this.get( 'thumbUrl' ); |
|
174 |
|
175 return Y.Node.create( |
|
176 Y.Lang.sub( this.THUMB_TEMPLATE, { |
|
177 thumbClass : this.getClassName( 'thumb' ), |
|
178 thumbShadowClass: this.getClassName( 'thumb', 'shadow' ), |
|
179 thumbImageClass : this.getClassName( 'thumb', 'image' ), |
|
180 thumbShadowUrl : imageUrl, |
|
181 thumbImageUrl : imageUrl, |
|
182 thumbAriaLabelId: this.getClassName( 'label', Y.guid()) // get unique id for specifying a label for ARIA |
|
183 } ) ); |
|
184 }, |
|
185 |
|
186 /** |
|
187 * Gives focus to the thumb enabling keyboard access after clicking thumb |
|
188 * |
|
189 * @method _onThumbClick |
|
190 * @protected |
|
191 */ |
|
192 _onThumbClick : function(e){ |
|
193 this.thumb.focus(); |
|
194 }, |
|
195 |
|
196 |
|
197 /** |
|
198 * Creates the Y.DD.Drag instance used to handle the thumb movement and |
|
199 * binds Slider interaction to the configured value model. |
|
200 * |
|
201 * @method bindUI |
|
202 * @protected |
|
203 */ |
|
204 bindUI : function () { |
|
205 |
|
206 // Begin keyboard listeners /////////////////////////////// |
|
207 var boundingBox = this.get("boundingBox"), //Y.one('body'), |
|
208 // Looking for a key event which will fire continously across browsers while the key is held down. |
|
209 keyEvent = (!Y.UA.opera) ? "down:" : "press:", |
|
210 // 38, 40 = arrow up/down, 33, 34 = page up/down, 35 , 36 = end/home |
|
211 keyEventSpec = keyEvent + "38,40,33,34,35,36", |
|
212 // 37 , 39 = arrow left/right |
|
213 keyLeftRightSpec = keyEvent + "37,39", |
|
214 // 37 , 39 = arrow left/right + meta (command/apple key) for mac |
|
215 keyLeftRightSpecMeta = keyEvent + "37+meta,39+meta"; |
|
216 |
|
217 boundingBox.on("key", this._onDirectionKey, keyEventSpec, this); |
|
218 boundingBox.on("key", this._onLeftRightKey, keyLeftRightSpec, this); |
|
219 boundingBox.on("key", this._onLeftRightKeyMeta, keyLeftRightSpecMeta, this); |
|
220 // End keyboard listeners ////////////////////////////////// |
|
221 |
|
222 this.thumb.on('click', this._onThumbClick, this); |
|
223 |
|
224 this._bindThumbDD(); |
|
225 |
|
226 this._bindValueLogic(); |
|
227 |
|
228 this.after( 'disabledChange', this._afterDisabledChange ); |
|
229 this.after( 'lengthChange', this._afterLengthChange ); |
|
230 |
|
231 }, |
|
232 |
|
233 /** |
|
234 * increments Slider value by a minor increment |
|
235 * |
|
236 * @method _incrMinor |
|
237 * @protected |
|
238 */ |
|
239 _incrMinor : function(){ |
|
240 this.set('value', (this.get('value') + this.get('minorStep'))); |
|
241 }, |
|
242 |
|
243 /** |
|
244 * decrements Slider value by a minor increment |
|
245 * |
|
246 * @method _decrMinor |
|
247 * @protected |
|
248 */ |
|
249 _decrMinor : function(){ |
|
250 this.set('value', (this.get('value') - this.get('minorStep'))); |
|
251 }, |
|
252 |
|
253 /** |
|
254 * increments Slider value by a major increment |
|
255 * |
|
256 * @method _incrMajor |
|
257 * @protected |
|
258 */ |
|
259 _incrMajor : function(){ |
|
260 this.set('value', (this.get('value') + this.get('majorStep'))); |
|
261 }, |
|
262 |
|
263 /** |
|
264 * decrements Slider value by a major increment |
|
265 * |
|
266 * @method _decrMajor |
|
267 * @protected |
|
268 */ |
|
269 _decrMajor : function(){ |
|
270 this.set('value', (this.get('value') - this.get('majorStep'))); |
|
271 }, |
|
272 |
|
273 /** |
|
274 * sets the Slider value to the min value. |
|
275 * |
|
276 * @method _setToMin |
|
277 * @protected |
|
278 */ |
|
279 _setToMin : function(e){ |
|
280 this.set('value', this.get('min')); |
|
281 }, |
|
282 |
|
283 /** |
|
284 * sets the Slider value to the max value. |
|
285 * |
|
286 * @method _setToMax |
|
287 * @protected |
|
288 */ |
|
289 _setToMax : function(e){ |
|
290 this.set('value', this.get('max')); |
|
291 }, |
|
292 |
|
293 /** |
|
294 * sets the Slider's value in response to key events. |
|
295 * Left and right keys are in a separate method |
|
296 * in case an implementation wants to increment values |
|
297 * but needs left and right arrow keys for other purposes. |
|
298 * |
|
299 * @method _onDirectionKey |
|
300 * @param e {Event} the key event |
|
301 * @protected |
|
302 */ |
|
303 _onDirectionKey : function(e) { |
|
304 e.preventDefault(); |
|
305 if(this.get('disabled') === false){ |
|
306 switch (e.charCode) { |
|
307 case 38: // up |
|
308 this._incrMinor(); |
|
309 break; |
|
310 case 40: // down |
|
311 this._decrMinor(); |
|
312 break; |
|
313 case 36: // home |
|
314 this._setToMin(); |
|
315 break; |
|
316 case 35: // end |
|
317 this._setToMax(); |
|
318 break; |
|
319 case 33: // page up |
|
320 this._incrMajor(); |
|
321 break; |
|
322 case 34: // page down |
|
323 this._decrMajor(); |
|
324 break; |
|
325 } |
|
326 } |
|
327 }, |
|
328 |
|
329 /** |
|
330 * sets the Slider's value in response to left or right key events |
|
331 * |
|
332 * @method _onLeftRightKey |
|
333 * @param e {Event} the key event |
|
334 * @protected |
|
335 */ |
|
336 _onLeftRightKey : function(e) { |
|
337 e.preventDefault(); |
|
338 if(this.get('disabled') === false){ |
|
339 switch (e.charCode) { |
|
340 case 37: // left |
|
341 this._decrMinor(); |
|
342 break; |
|
343 case 39: // right |
|
344 this._incrMinor(); |
|
345 break; |
|
346 } |
|
347 } |
|
348 }, |
|
349 |
|
350 /** |
|
351 * sets the Slider's value in response to left or right key events when a meta (mac command/apple) key is also pressed |
|
352 * |
|
353 * @method _onLeftRightKeyMeta |
|
354 * @param e {Event} the key event |
|
355 * @protected |
|
356 */ |
|
357 _onLeftRightKeyMeta : function(e) { |
|
358 e.preventDefault(); |
|
359 if(this.get('disabled') === false){ |
|
360 switch (e.charCode) { |
|
361 case 37: // left + meta |
|
362 this._setToMin(); |
|
363 break; |
|
364 case 39: // right + meta |
|
365 this._setToMax(); |
|
366 break; |
|
367 } |
|
368 } |
|
369 }, |
|
370 |
|
371 |
|
372 |
|
373 |
|
374 |
|
375 /** |
|
376 * Makes the thumb draggable and constrains it to the rail. |
|
377 * |
|
378 * @method _bindThumbDD |
|
379 * @protected |
|
380 */ |
|
381 _bindThumbDD: function () { |
|
382 var config = { constrain: this.rail }; |
|
383 |
|
384 // { constrain: rail, stickX: true } |
|
385 config[ 'stick' + this.axis.toUpperCase() ] = true; |
|
386 |
|
387 /** |
|
388 * The DD.Drag instance linked to the thumb node. |
|
389 * |
|
390 * @property _dd |
|
391 * @type {DD.Drag} |
|
392 * @protected |
|
393 */ |
|
394 this._dd = new Y.DD.Drag( { |
|
395 node : this.thumb, |
|
396 bubble : false, |
|
397 on : { |
|
398 'drag:start': Y.bind( this._onDragStart, this ) |
|
399 }, |
|
400 after : { |
|
401 'drag:drag': Y.bind( this._afterDrag, this ), |
|
402 'drag:end' : Y.bind( this._afterDragEnd, this ) |
|
403 } |
|
404 } ); |
|
405 |
|
406 // Constrain the thumb to the rail |
|
407 this._dd.plug( Y.Plugin.DDConstrained, config ); |
|
408 }, |
|
409 |
|
410 /** |
|
411 * Stub implementation. Override this (presumably in a class extension) to |
|
412 * initialize any value logic that depends on the presence of the Drag |
|
413 * instance. |
|
414 * |
|
415 * @method _bindValueLogic |
|
416 * @protected |
|
417 */ |
|
418 _bindValueLogic: function () {}, |
|
419 |
|
420 /** |
|
421 * Moves the thumb to pixel offset position along the rail. |
|
422 * |
|
423 * @method _uiMoveThumb |
|
424 * @param offset {Number} the pixel offset to set as left or top style |
|
425 * @param [options] {Object} Details to send with the `thumbMove` event |
|
426 * @protected |
|
427 */ |
|
428 _uiMoveThumb: function ( offset, options ) { |
|
429 if ( this.thumb ) { |
|
430 this.thumb.setStyle( this._key.minEdge, offset + 'px' ); |
|
431 |
|
432 Y.log("Setting thumb " + this._key.minEdge + " to " + offset + "px","info","slider"); |
|
433 |
|
434 options || (options = {}); |
|
435 options.offset = offset; |
|
436 |
|
437 this.fire( 'thumbMove', options ); |
|
438 } |
|
439 }, |
|
440 |
|
441 /** |
|
442 * Dispatches the <code>slideStart</code> event. |
|
443 * |
|
444 * @method _onDragStart |
|
445 * @param e {Event} the <code>drag:start</code> event from the thumb |
|
446 * @protected |
|
447 */ |
|
448 _onDragStart: function ( e ) { |
|
449 /** |
|
450 * Signals the beginning of a thumb drag operation. Payload includes |
|
451 * the thumb's drag:start event. |
|
452 * |
|
453 * @event slideStart |
|
454 * @param event {Event} The event object for the slideStart with the |
|
455 * following extra properties: |
|
456 * <dl> |
|
457 * <dt>ddEvent (deprecated)</dt> |
|
458 * <dd><code>drag:start</code> event from the thumb</dd> |
|
459 * <dt>originEvent</dt> |
|
460 * <dd><code>drag:start</code> event from the thumb</dd> |
|
461 * </dl> |
|
462 */ |
|
463 this.fire('slideStart', { |
|
464 ddEvent: e, // for backward compatibility |
|
465 originEvent: e |
|
466 }); |
|
467 }, |
|
468 |
|
469 /** |
|
470 * Dispatches the <code>thumbMove</code> event. |
|
471 * |
|
472 * @method _afterDrag |
|
473 * @param e {Event} the <code>drag:drag</code> event from the thumb |
|
474 * @protected |
|
475 */ |
|
476 _afterDrag: function ( e ) { |
|
477 var thumbXY = e.info.xy[ this._key.xyIndex ], |
|
478 railXY = e.target.con._regionCache[ this._key.minEdge ]; |
|
479 |
|
480 Y.log("Thumb position: " + thumbXY + ", Rail position: " + railXY, "info", "slider"); |
|
481 this.fire( 'thumbMove', { |
|
482 offset : (thumbXY - railXY), |
|
483 ddEvent: e, // for backward compatibility |
|
484 originEvent: e |
|
485 } ); |
|
486 }, |
|
487 |
|
488 /** |
|
489 * Dispatches the <code>slideEnd</code> event. |
|
490 * |
|
491 * @method _onDragEnd |
|
492 * @param e {Event} the <code>drag:end</code> event from the thumb |
|
493 * @protected |
|
494 */ |
|
495 _afterDragEnd: function ( e ) { |
|
496 /** |
|
497 * Signals the end of a thumb drag operation. Payload includes |
|
498 * the thumb's drag:end event. |
|
499 * |
|
500 * @event slideEnd |
|
501 * @param event {Event} The event object for the slideEnd with the |
|
502 * following extra properties: |
|
503 * <dl> |
|
504 * <dt>ddEvent (deprecated)</dt> |
|
505 * <dd><code>drag:end</code> event from the thumb</dd> |
|
506 * <dt>originEvent</dt> |
|
507 * <dd><code>drag:end</code> event from the thumb</dd> |
|
508 * </dl> |
|
509 */ |
|
510 this.fire('slideEnd', { |
|
511 ddEvent: e, |
|
512 originEvent: e |
|
513 }); |
|
514 }, |
|
515 |
|
516 /** |
|
517 * Locks or unlocks the thumb. |
|
518 * |
|
519 * @method _afterDisabledChange |
|
520 * @param e {Event} The disabledChange event object |
|
521 * @protected |
|
522 */ |
|
523 _afterDisabledChange: function ( e ) { |
|
524 this._dd.set( 'lock', e.newVal ); |
|
525 }, |
|
526 |
|
527 /** |
|
528 * Handles changes to the <code>length</code> attribute. By default, it |
|
529 * triggers an update to the UI. |
|
530 * |
|
531 * @method _afterLengthChange |
|
532 * @param e {Event} The lengthChange event object |
|
533 * @protected |
|
534 */ |
|
535 _afterLengthChange: function ( e ) { |
|
536 if ( this.get( 'rendered' ) ) { |
|
537 this._uiSetRailLength( e.newVal ); |
|
538 |
|
539 this.syncUI(); |
|
540 } |
|
541 }, |
|
542 |
|
543 /** |
|
544 * Synchronizes the DOM state with the attribute settings. |
|
545 * |
|
546 * @method syncUI |
|
547 */ |
|
548 syncUI : function () { |
|
549 this._dd.con.resetCache(); |
|
550 |
|
551 this._syncThumbPosition(); |
|
552 |
|
553 // Forces a reflow of the bounding box to address IE8 inline-block |
|
554 // container not expanding correctly. bug 2527905 |
|
555 //this.get('boundingBox').toggleClass(''); |
|
556 this.thumb.set('aria-valuemin', this.get('min')); |
|
557 this.thumb.set('aria-valuemax', this.get('max')); |
|
558 |
|
559 this._dd.set('lock', this.get('disabled')); |
|
560 }, |
|
561 |
|
562 /** |
|
563 * Stub implementation. Override this (presumably in a class extension) to |
|
564 * ensure the thumb is in the correct position according to the value |
|
565 * alogorithm. |
|
566 * instance. |
|
567 * |
|
568 * @method _syncThumbPosition |
|
569 * @protected |
|
570 */ |
|
571 _syncThumbPosition: function () {}, |
|
572 |
|
573 /** |
|
574 * Validates the axis is "x" or "y" (case insensitive). |
|
575 * Converts to lower case for storage. |
|
576 * |
|
577 * @method _setAxis |
|
578 * @param v {String} proposed value for the axis attribute |
|
579 * @return {String} lowercased first character of the input string |
|
580 * @protected |
|
581 */ |
|
582 _setAxis : function (v) { |
|
583 v = ( v + '' ).toLowerCase(); |
|
584 |
|
585 return ( v === 'x' || v === 'y' ) ? v : INVALID_VALUE; |
|
586 }, |
|
587 |
|
588 /** |
|
589 * <p>Ensures the stored length value is a string with a quantity and unit. |
|
590 * Unit will be defaulted to "px" if not included. Rejects |
|
591 * values less than or equal to 0 and those that don't at least start with |
|
592 * a number.</p> |
|
593 * |
|
594 * <p>Currently only pixel lengths are supported.</p> |
|
595 * |
|
596 * @method _setLength |
|
597 * @param v {String} proposed value for the length attribute |
|
598 * @return {String} the sanitized value |
|
599 * @protected |
|
600 */ |
|
601 _setLength: function ( v ) { |
|
602 v = ( v + '' ).toLowerCase(); |
|
603 |
|
604 var length = parseFloat( v, 10 ), |
|
605 units = v.replace( /[\d\.\-]/g, '' ) || this.DEF_UNIT; |
|
606 |
|
607 return length > 0 ? ( length + units ) : INVALID_VALUE; |
|
608 }, |
|
609 |
|
610 /** |
|
611 * <p>Defaults the thumbURL attribute according to the current skin, or |
|
612 * "sam" if none can be determined. Horizontal Sliders will have |
|
613 * their <code>thumbUrl</code> attribute set to</p> |
|
614 * <p><code>"/<em>configured</em>/<em>yu</em>i/<em>builddi</em>r/slider-base/assets/skins/sam/thumb-x.png"</code></p> |
|
615 * <p>And vertical thumbs will get</p> |
|
616 * <p><code>"/<em>configured</em>/<em>yui</em>/<em>builddir</em>/slider-base/assets/skins/sam/thumb-y.png"</code></p> |
|
617 * |
|
618 * @method _initThumbUrl |
|
619 * @protected |
|
620 */ |
|
621 _initThumbUrl: function () { |
|
622 if (!this.get('thumbUrl')) { |
|
623 var skin = this.getSkinName() || 'sam', |
|
624 base = Y.config.base; |
|
625 |
|
626 // Unfortunate hack to avoid requesting image resources from the |
|
627 // combo service. The combo service does not serve images. |
|
628 if (base.indexOf('http://yui.yahooapis.com/combo') === 0) { |
|
629 base = 'http://yui.yahooapis.com/' + Y.version + '/build/'; |
|
630 } |
|
631 |
|
632 // <img src="/path/to/build/slider-base/assets/skins/sam/thumb-x.png"> |
|
633 this.set('thumbUrl', base + 'slider-base/assets/skins/' + |
|
634 skin + '/thumb-' + this.axis + '.png'); |
|
635 |
|
636 } |
|
637 }, |
|
638 |
|
639 /** |
|
640 * Bounding box template that will contain the Slider's DOM subtree. <span>s are used to support inline-block styling. |
|
641 * |
|
642 * @property BOUNDING_TEMPLATE |
|
643 * @type {String} |
|
644 * @default <span></span> |
|
645 */ |
|
646 BOUNDING_TEMPLATE : '<span></span>', |
|
647 |
|
648 /** |
|
649 * Content box template that will contain the Slider's rail and thumb. |
|
650 * |
|
651 * @property CONTENT_TEMPLATE |
|
652 * @type {String} |
|
653 * @default <span></span> |
|
654 */ |
|
655 CONTENT_TEMPLATE : '<span></span>', |
|
656 |
|
657 /** |
|
658 * Rail template that will contain the end caps and the thumb. |
|
659 * {placeholder}s are used for template substitution at render time. |
|
660 * |
|
661 * @property RAIL_TEMPLATE |
|
662 * @type {String} |
|
663 * @default <span class="{railClass}"><span class="{railMinCapClass}"></span><span class="{railMaxCapClass}"></span></span> |
|
664 */ |
|
665 RAIL_TEMPLATE : '<span class="{railClass}">' + |
|
666 '<span class="{railMinCapClass}"></span>' + |
|
667 '<span class="{railMaxCapClass}"></span>' + |
|
668 '</span>', |
|
669 |
|
670 /** |
|
671 * Thumb template that will contain the thumb image and shadow. <img> |
|
672 * tags are used instead of background images to avoid a flicker bug in IE. |
|
673 * {placeholder}s are used for template substitution at render time. |
|
674 * |
|
675 * @property THUMB_TEMPLATE |
|
676 * @type {String} |
|
677 * @default <span class="{thumbClass}" tabindex="-1"><img src="{thumbShadowUrl}" alt="Slider thumb shadow" class="{thumbShadowClass}"><img src="{thumbImageUrl}" alt="Slider thumb" class="{thumbImageClass}"></span> |
|
678 */ |
|
679 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" |
|
680 '<img src="{thumbShadowUrl}" ' + |
|
681 'alt="Slider thumb shadow" ' + |
|
682 'class="{thumbShadowClass}">' + |
|
683 '<img src="{thumbImageUrl}" ' + |
|
684 'alt="Slider thumb" ' + |
|
685 'class="{thumbImageClass}">' + |
|
686 '</span>' |
|
687 |
|
688 }, { |
|
689 |
|
690 // Y.SliderBase static properties |
|
691 |
|
692 /** |
|
693 * The identity of the widget. |
|
694 * |
|
695 * @property NAME |
|
696 * @type String |
|
697 * @default 'sliderBase' |
|
698 * @readOnly |
|
699 * @protected |
|
700 * @static |
|
701 */ |
|
702 NAME : 'sliderBase', |
|
703 |
|
704 /** |
|
705 * Static property used to define the default attribute configuration of |
|
706 * the Widget. |
|
707 * |
|
708 * @property ATTRS |
|
709 * @type {Object} |
|
710 * @protected |
|
711 * @static |
|
712 */ |
|
713 ATTRS : { |
|
714 |
|
715 /** |
|
716 * Axis upon which the Slider's thumb moves. "x" for |
|
717 * horizontal, "y" for vertical. |
|
718 * |
|
719 * @attribute axis |
|
720 * @type {String} |
|
721 * @default "x" |
|
722 * @writeOnce |
|
723 */ |
|
724 axis : { |
|
725 value : 'x', |
|
726 writeOnce : true, |
|
727 setter : '_setAxis', |
|
728 lazyAdd : false |
|
729 }, |
|
730 |
|
731 /** |
|
732 * The length of the rail (exclusive of the end caps if positioned by |
|
733 * CSS). This corresponds to the movable range of the thumb. |
|
734 * |
|
735 * @attribute length |
|
736 * @type {String | Number} e.g. "200px" or 200 |
|
737 * @default 150px |
|
738 */ |
|
739 length: { |
|
740 value: '150px', |
|
741 setter: '_setLength' |
|
742 }, |
|
743 |
|
744 /** |
|
745 * Path to the thumb image. This will be used as both the thumb and |
|
746 * shadow as a sprite. Defaults at render() to thumb-x.png or |
|
747 * thumb-y.png in the skin directory of the current skin. |
|
748 * |
|
749 * @attribute thumbUrl |
|
750 * @type {String} |
|
751 * @default thumb-x.png or thumb-y.png in the sam skin directory of the |
|
752 * current build path for Slider |
|
753 */ |
|
754 thumbUrl: { |
|
755 value: null, |
|
756 validator: Y.Lang.isString |
|
757 } |
|
758 } |
|
759 }); |
|
760 |
|
761 |
|
762 }, '@VERSION@', {"requires": ["widget", "dd-constrain", "event-key"], "skinnable": true}); |