2
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.net/yui/license.txt
7
YUI.add('slider', function(Y) {
10
* Create a sliding value range input visualized as a draggable thumb on a
16
var SLIDER = 'slider',
22
THUMB_IMAGE = 'thumbImage',
23
RAIL_SIZE = 'railSize',
24
CONTENT_BOX = 'contentBox',
26
SLIDE_START = 'slideStart',
27
SLIDE_END = 'slideEnd',
29
THUMB_DRAG = 'thumbDrag',
31
VALUE_SET = 'valueSet',
32
RENDERED = 'rendered',
33
DISABLED = 'disabled',
34
DISABLED_CHANGE = 'disabledChange',
40
COMPLETE = 'complete',
44
isBoolean= L.isBoolean,
45
isString = L.isString,
46
isNumber = L.isNumber,
48
getCN = Y.ClassNameManager.getClassName,
51
C_RAIL = getCN(SLIDER,RAIL),
52
C_THUMB = getCN(SLIDER,THUMB),
53
C_THUMB_IMAGE = getCN(SLIDER,THUMB,IMAGE),
54
C_IMAGE_ERROR = getCN(SLIDER,IMAGE,'error'),
64
* Create a slider to represent an integer value between a given minimum and
69
* @param config {Object} Configuration object
73
Slider.superclass.constructor.apply(this,arguments);
79
* The identity of the widget.
81
* @property Slider.NAME
88
* Object property names used for respective X and Y axis Sliders (e.g.
89
* "left" vs. "top" for placing the thumb according to
90
* its representative value).
92
* @property Slider.AXIS_KEYS
101
eventPageAxis : 'pageX',
109
eventPageAxis : 'pageY',
116
* Static Object hash used to capture existing markup for progressive
117
* enhancement. Keys correspond to config attribute names and values
118
* are selectors used to inspect the contentBox for an existing node
121
* @property Slider.HTML_PARSER
127
thumb : DOT + C_THUMB,
128
thumbImage : DOT + C_THUMB_IMAGE
132
* Static property used to define the default attribute configuration of
135
* @property Slider.ATTRS
142
* Axis upon which the Slider's thumb moves. "x" for
143
* horizontal, "y" for vertical.
147
* @default "x"
153
validator : function (v) {
154
return this._validateNewAxis(v);
157
return this._setAxisFn(v);
162
* Integer value associated with the left or top terminus of the
163
* Slider's rail, depending on the configured axis.
171
validator : function (v) {
172
return this._validateNewMin(v);
177
* Integer value associated with the right or bottom terminus of the
178
* Slider's rail, depending on the configured axis.
186
validator : function (v) {
187
return this._validateNewMax(v);
192
* The current value of the Slider. This value is interpretted into a
193
* position for the thumb along the Slider's rail.
201
validator : function (v) {
202
return this._validateNewValue(v);
205
return this._setValueFn(v);
210
* The Node representing the Slider's rail, usually visualized as a
211
* bar of some sort using a background image, along which the thumb
212
* moves. This Node contains the thumb Node.
220
validator : function (v) {
221
return this._validateNewRail(v);
224
return this._setRailFn(v);
229
* The Node representing the Slider's thumb, usually visualized as a
230
* pointer using a contained image Node (see thumbImage). The current
231
* value of the Slider is calculated from the centerpoint of this
232
* Node in relation to the rail Node. If provided, the thumbImage
233
* Node is contained within this Node.
235
* If no thumbImage is provided and the Node passed as the thumb is an
236
* <code>img</code> element, the assigned Node will be allocated to the
237
* thumbImage and the thumb container defaulted.
245
validator : function (v) {
246
return this._validateNewThumb(v);
249
return this._setThumbFn(v);
254
* The Node representing the image element to use for the Slider's
257
* Alternately, an image URL can be passed and an <code>img</code>
258
* Node will be generated accordingly.
260
* If no thumbImage is provided and the Node passed as the thumb is an
261
* <code>img</code> element, the assigned Node will be allocated to the
262
* thumbImage and the thumb container defaulted.
264
* If thumbImage is provided but its URL resolves to a 404, a default
265
* style will be applied to maintain basic functionality.
267
* @attribute thumbImage
273
validator : function (v) {
274
return this._validateNewThumbImage(v);
277
return this._setThumbImageFn(v);
282
* The width or height of the rail element representing the physical
283
* space along which the thumb can move. CSS size values (e.g. '30em')
284
* accepted but converted to pixels during render.
286
* Alternately, but not recommended, this attribute can be left
287
* unassigned in favor of specifying height or width.
289
* @attribute railSize
295
validator : function (v) {
296
return this._validateNewRailSize(v);
301
* Boolean indicating whether clicking and dragging on the rail will
302
* trigger thumb movement.
304
* @attribute railEnabled
310
validator : isBoolean
315
Y.extend(Slider, Y.Widget, {
318
* Collection of object property names from the appropriate hash set in
328
* Factor used to translate positional coordinates (e.g. left or top) to
329
* the Slider's value.
338
* Pixel dimension of the rail Node's width for X axis Sliders or height
339
* for Y axis Sliders. Used with _factor to calculate positional
340
* coordinates for the thumb.
342
* @property _railSize
349
* Pixel dimension of the thumb Node's width for X axis Sliders or height
350
* for Y axis Sliders. Used with _factor to calculate positional
351
* coordinates for the thumb.
353
* @property _thumbSize
360
* Pixel offset of the point in the thumb element from its top/left edge
361
* to where the value calculation should take place. By default, this is
362
* calculated to half the width of the thumb, causing the value to be
363
* marked from the center of the thumb.
365
* @property _thumbOffset
372
* Object returned from temporary subscription to disabledChange event to
373
* defer setting the disabled state while Slider is loading the thumb
383
* Deferred value for the disabled attribute when stalled (see _stall
386
* @property _disabled
393
* Construction logic executed durint Slider instantiation. Subscribe to
394
* after events for min, max, and railSize. Publish custom events
395
* including slideStart and slideEnd.
397
* @method initializer
400
initializer : function () {
401
this._key = Slider.AXIS_KEYS[this.get('axis')];
403
this.after('minChange', this._afterMinChange);
404
this.after('maxChange', this._afterMaxChange);
406
this.after('railSizeChange', this._afterRailSizeChange);
409
* Signals the beginning of a thumb drag operation. Payload includes
410
* the DD.Drag instance's drag:start event under key ddEvent.
413
* @param event {Event.Facade} An Event Facade object with the following attribute specific properties added:
416
* <dd><code>drag:start</code> event from the managed DD.Drag instance</dd>
419
this.publish(SLIDE_START);
422
* Signals the end of a thumb drag operation. Payload includes
423
* the DD.Drag instance's drag:end event under key ddEvent.
426
* @param event {Event.Facade} An Event Facade object with the following attribute specific properties added:
429
* <dd><code>drag:end</code> event from the managed DD.Drag instance</dd>
432
this.publish(SLIDE_END);
435
* Communicates a request to synchronize the Slider UI with the
436
* attribute state. Links the sync request with the default sync
437
* logic in the default function _defSyncUI.
440
* @param event {Event.Facade} Event Facade object
441
* @preventable _defSyncUI
443
this.publish(SYNC, {defaultFn: this._defSyncUI});
446
* Signals a value change via API, requiring the thumb position to be
447
* updated. Triggers the thumb placement logic in the default function
448
* _defSetThumbPosition.
451
* @param event {Event.Facade} An Event Facade object with the following attribute specific properties added:
454
* <dd><code>valueChange</code> event fired in response to the change in the value attribute</dd>
456
* @preventable _defSetThumbPosition
458
this.publish(VALUE_SET, {defaultFn: this._defSetThumbPosition});
462
* Create the DOM structure for the Slider. Calls _initRail and _initThumb.
467
renderUI : function () {
473
* Creates the rail element if not provided or discovered via HTML_PARSER.
478
_initRail : function () {
479
var cb = this.get(CONTENT_BOX),
480
rail = this.get(RAIL);
482
// Create rail if necessary. Make sure it's in the contentBox
484
rail = cb.appendChild(
485
Y.Node.create('<div class="'+C_RAIL+'"></div>'));
488
} else if (!cb.contains(rail)) {
489
cb.appendChild(rail);
492
rail.addClass(C_RAIL);
493
rail.addClass(this.getClassName(RAIL,this.get('axis')));
497
* Creates the thumb element (not image) if not provided or discovered via
498
* HTML_PARSER. If thumb is present and an <code>img</code> element
499
* <em>and</em> no thumbImage provided, reassigns the thumb element to the
500
* thumbImage and defaults the thumb element as a div.
502
* Makes sure the thumb is a child of the rail element and calls
503
* _initThumbImage if thumbImage is provided.
508
_initThumb : function () {
509
var rail = this.get(RAIL),
510
thumb = this.get(THUMB);
512
// Passed an img element as the thumb
513
if (thumb && !this.get(THUMB_IMAGE) &&
514
thumb.get('nodeName').toLowerCase() === 'img') {
515
this.set(THUMB_IMAGE, thumb);
516
this.set(THUMB,null);
521
thumb = Y.Node.create(
522
'<div class="'+C_THUMB+'"></div>');
524
this.set(THUMB,thumb);
527
thumb.addClass(C_THUMB);
529
if (!rail.contains(thumb)) {
530
rail.appendChild(thumb);
533
if (this.get(THUMB_IMAGE)) {
534
this._initThumbImage();
539
* Ensures the thumbImage is a child of the thumb element.
541
* @method _initThumbImage
544
_initThumbImage : function () {
545
var thumb = this.get(THUMB),
546
img = this.get(THUMB_IMAGE);
549
img.replaceClass(C_THUMB,C_THUMB_IMAGE);
551
if (!thumb.contains(img)) {
552
thumb.appendChild(img);
558
* Calls _bindThumbDD to create the Y.DD instance used to handle the thumb
559
* movement and binds Slider interaction to the configured value model.
564
bindUI : function () {
566
* Communicates user interaction with the thumb. Triggers the logic
567
* to update the value via the default function _defUpdateValueFromDD.
570
* @param event {Event.Facade} An Event Facade object with the following attribute specific properties added:
573
* <dd><code>drag:drag</code> event from the managed DD.Drag instance</dd>
575
* @preventable _defUpdateValueFromDD
577
this.publish(THUMB_DRAG, {defaultFn: this._defUpdateValueFromDD});
581
this.after('valueChange', this._afterValueChange);
582
this.after('thumbImageChange', this._afterThumbImageChange);
583
this.after(DISABLED_CHANGE, this._afterDisabledChange);
587
* Creates the Y.DD instance used to handle the thumb interaction.
589
* @method _bindThumbDD
592
_bindThumbDD : function () {
594
node : this.get(THUMB),
595
constrain2node : this.get(RAIL)
599
ddConf[this._key.ddStick] = true;
601
this._dd = dd = new Y.DD.Drag(ddConf);
602
dd.on('drag:start', Y.bind(this._onDDStartDrag, this));
603
dd.on('drag:drag', Y.bind(this._onDDDrag, this));
604
dd.on('drag:end', Y.bind(this._onDDEndDrag, this));
610
* Subscribes to the rail Node's mousedown event to actuate the thumb when
611
* backgroundEnabled is true.
613
* @method _initRailDD
616
_initRailDD : function () {
617
this.get(RAIL).on('mousedown',Y.bind(this._handleRailMouseDown,this));
621
* Moves the thumb to the mousedown position and hands control over to DD
622
* if the Slider is not disabled and railEnabled is true.
624
* @method _handleRailMouseDown
625
* @param e {Event} Mousedown event facade
628
_handleRailMouseDown : function (e) {
629
if (this.get('railEnabled') && !this.get(DISABLED)) {
631
xyIndex = this._key.xyIndex,
634
if (dd.get('primaryButtonOnly') && e.button > 1) {
638
dd._dragThreshMet = true;
640
dd._fixIEMouseDown();
643
Y.DD.DDM.activeDrag = dd;
645
// Adjust registered starting position by half the thumb's x/y
646
xy = dd.get('dragNode').getXY();
647
xy[xyIndex] += this._thumbOffset;
649
dd._setStartPosition(xy);
652
dd._moveNode([e.pageX,e.pageY]);
657
* Synchronizes the DOM state with the attribute settings (most notably
658
* railSize and value). If thumbImage is provided and is still loading,
659
* sync is delayed until it is complete, since the image's dimensions are
660
* taken into consideration for calculations.
664
syncUI : function () {
665
var img = this.get(THUMB_IMAGE);
667
if (this._isImageLoading(img)) {
668
// Schedule the sync for when the image loads/errors
669
this._scheduleSync();
671
this._ready(img,!this._isImageLoaded(img));
676
* Binds to the load and error event on the thumbImage to sync the DOM
677
* state with the attribute settings when the image resource is resolved.
678
* The Slider is disabled while it waits.
680
* @method _scheduleSync
683
_scheduleSync : function () {
687
// disable the control until the image is loaded
688
this._disabled = this.get(DISABLED);
689
this.set(DISABLED,true);
690
this._stall = this.on(DISABLED_CHANGE,this._stallDisabledChange);
692
img = this.get(THUMB_IMAGE);
693
handler = Y.bind(this._imageLoaded,this,img);
694
img.on('load', handler);
695
img.on('error',handler);
700
* Method subscribed to the disabledChange event when thumbImage is being
701
* loaded. Prevents manually enabling the Slider until the thumbImage
702
* resource is resolved. Intended value is stored during load and set upon
705
* @method _stallDisabledChange
706
* @param e {Event} Change event for the disabled attribute
709
_stallDisabledChange : function (e) {
710
this._disabled = e.newVal;
715
* Event handler assigned to the thumbImage's load and error event if it
716
* was not loaded prior to instantiation. Calls _ready method and restores
717
* the Slider's disabled attribute.
719
* @method _imageLoaded
720
* @param e {Event} load or error event fired by the thumbImage
721
* @param img {Node} The thumbImage Node
724
_imageLoaded : function (e,img) {
725
var error = (e.type.toLowerCase().indexOf('error') > -1);
728
this._stall.detach();
734
this._ready(img,error);
736
this.set(DISABLED,this._disabled);
740
* Fires the internal sync event, which barring preventDefault should
741
* execute _defSyncUI.
744
* @param img {Node} the thumbImage Node
745
* @param error {Boolean} Indicates an error while loading the thumbImage
748
_ready : function (img,error) {
749
var method = error ? 'addClass' : 'removeClass';
751
// If the thumb image url results in 404, assign a class to provide
752
// default thumb dimensions/UI
753
this.get(CONTENT_BOX)[method](C_IMAGE_ERROR);
759
* The default synchronization behavior, updating the Slider's DOM state to
760
* match the current attribute values.
763
* @param e {Event} Internal sync event
766
_defSyncUI : function (e) {
767
this._uiSetThumbSize();
769
this._setThumbOffset();
771
this._uiSetRailSize();
773
this._setRailOffsetXY();
780
this.set(VALUE,this.get(VALUE));
784
* Captures the thumbs pixel height or width, depending on the Slider's
785
* axis, for use in positioning calculations.
787
* @method _uiSetThumbSize
790
_uiSetThumbSize : function () {
791
var thumb = this.get(THUMB),
793
img = this.get(THUMB_IMAGE),
796
// offsetWidth fails in hidden containers
797
size = parseInt(thumb.getComputedStyle(dim),10);
800
if (img && this._isImageLoaded(img)) {
805
this._thumbSize = size;
809
* Sets the _thumbOffset property for use in establishing the point in the
810
* thumb that should align to the rail position representing the calculated
813
* @method _setThumbOffset
816
_setThumbOffset : function () {
817
this._thumbOffset = floor(this._thumbSize / 2);
821
* Stores the rail Node's pixel height or width, depending on the Slider's
822
* axis, for use in calculating thumb position from the value.
824
* @method _uiSetRailSize
827
_uiSetRailSize : function () {
828
var rail = this.get(RAIL),
829
thumb = this.get(THUMB),
830
img = this.get(THUMB_IMAGE),
832
size = this.get(RAIL_SIZE),
835
if (parseInt(size,10)) {
838
rail.setStyle(dim,size);
839
size = parseInt(rail.getComputedStyle(dim),10);
842
// Default from height or width (axis respective), or dims assigned
843
// via css to the rail or thumb, whichever is largest.
844
// Dear implementers, please use railSize, not height/width to
846
size = this.get(dim);
847
if (parseInt(size,10)) {
849
rail.setStyle(dim,size);
850
size = parseInt(rail.getComputedStyle(dim),10);
854
parseInt(thumb.getComputedStyle(dim),10),
855
parseInt(rail.getComputedStyle(dim),10));
858
if (img && this._isImageLoaded(img)) {
860
size = max(img.get(dim),size);
864
rail.setStyle(dim, size + PX);
866
this._railSize = size;
868
// handle the (not recommended) fallback case of setting rail size via
869
// widget height/width params. This is the only case that sets the
870
// off-axis rail dim in the code.
872
dim = this._key.offAxisDim;
873
size = this.get(dim);
881
* Store the current XY position of the rail Node on the page. For use in calculating thumb position from value.
883
* @method _setRailOffsetXY
886
_setRailOffsetXY : function () {
887
this._offsetXY = this.get(RAIL).getXY()[this._key.xyIndex] -
892
* Assigns the gutter attribute to the DD instance to allow the thumb to
893
* overshoot the edges of the rail element up to the _thumbOffset. By
894
* default, this allows the thumb's center point to align with the far left
895
* or top edge of the rail element to represent the min value and the far
896
* right or bottom edge for the max.
898
* @method _setDDGutter
901
_setDDGutter : function () {
902
var gutter = [0,0,0,0],
903
i = this._key.xyIndex,
904
dim = this._thumbOffset,
906
end = -1 * (this._thumbSize - dim);
917
this._dd.set('gutter', gutter.join(' '));
921
* Calculates the multiplier used to translate the value into a thumb
927
_setFactor : function () {
928
this._factor = this._railSize ?
929
(this.get(MAX) - this.get(MIN)) / this._railSize :
934
* Convenience method for accessing the current value of the Slider.
935
* Equivalent to <code>slider.get("value")</code>.
938
* @return {Number} the value
940
getValue : function () {
941
return this.get(VALUE);
945
* Convenience method for updating the current value of the Slider.
946
* Equivalent to <code>slider.set("value",val)</code>.
949
* @param val {Number} the new value
951
setValue : function (val) {
956
* Validator applied to new values for the axis attribute. Only
957
* "x" and "y" are permitted.
959
* @method _validateNewAxis
960
* @param v {String} proposed value for the axis attribute
964
_validateNewAxis : function (v) {
965
return isString(v) &&
966
v.length === 1 && 'xy'.indexOf(v.toLowerCase()) > -1;
970
* Validator applied to the min attribute. Only numbers are allowed.
972
* @method _validateNewMin
973
* @param v {String} proposed value for the min attribute
977
_validateNewMin : function (v) {
982
* Validator applied to the max attribute. Only numbers are allowed.
984
* @method _validateNewMax
985
* @param v {String} proposed value for the max attribute
989
_validateNewMax : function (v) {
994
* Validator applied to the value attribute. Only numbers between the min
995
* and max are allowed.
997
* @method _validateNewValue
998
* @param v {String} proposed value for the value attribute
1002
_validateNewValue : function (v) {
1003
var min = this.get(MIN),
1004
max = this.get(MAX);
1006
return isNumber(v) &&
1007
(min < max ? (v >= min && v <= max) : (v >= max && v <= min));
1011
* Validator applied to the rail attribute. Only allows values through
1012
* before the Slider is rendered.
1014
* @method _validateNewRail
1015
* @param v {String} proposed value for the rail attribute
1019
_validateNewRail : function (v) {
1020
return !this.get(RENDERED) || v;
1024
* Validator applied to the thumb attribute. Only allows values through
1025
* before the Slider is rendered.
1027
* @method _validateNewThumb
1028
* @param v {String} proposed value for the thumb attribute
1032
_validateNewThumb : function (v) {
1033
return !this.get(RENDERED) || v;
1037
* Validator applied to the thumbImage attribute. Only allows values through
1038
* before the Slider is rendered.
1040
* @method _validateNewThumbImage
1041
* @param v {String} proposed value for the thumbImage attribute
1045
_validateNewThumbImage : function (v) {
1046
return !this.get(RENDERED) || v;
1050
* Validator applied to the railSize attribute. Only css size values (e.g.
1051
* '200px' are allowed.
1053
* @method _validateNewRailSize
1054
* @param v {String} proposed value for the railSize attribute
1058
_validateNewRailSize : function (v) {
1059
return isString(v) &&
1060
(v === '0' || /^\d+(?:p[xtc]|%|e[mx]|in|[mc]m)$/.test(v));
1064
* Setter applied to the input when updating the railSize attribute.
1066
* @method _setAxisFn
1067
* @param v {String} proposed value for the axis attribute
1068
* @return {String} lowercased first character of the input string
1071
_setAxisFn : function (v) {
1072
return isString(v) ? v.toLowerCase().charAt(0) : null;
1076
* Setter applied to the input when updating the value attribute.
1078
* @method _setValueFn
1079
* @param v {Number} proposed new value for the Slider
1080
* @return {Number} rounded value or configured min if non-number input
1083
_setValueFn : function (v) {
1092
* Setter applied to the input when updating the rail attribute. Input can
1093
* be a Node, raw HTMLElement, or a selector string to locate it.
1095
* @method _setRailFn
1096
* @param v {Node|String|HTMLElement} The rail element Node or selector
1097
* @return {Node} The Node if found. Otherwise null.
1100
_setRailFn : function (v) {
1101
return v ? Y.get(v) : null;
1105
* Setter applied to the input when updating the thumb attribute. Input can
1106
* be a Node, raw HTMLElement, or a selector string to locate it.
1108
* @method _setThumbFn
1109
* @param v {Node|String|HTMLElement} The thumb element Node or selector
1110
* @return {Node} The Node if found. Otherwise null.
1113
_setThumbFn : function (v) {
1114
return v ? Y.get(v) : null;
1118
* Setter applied to the input when updating the thumbImage attribute.
1119
* Input can be a Node, raw HTMLElement, selector string to locate it, or
1120
* the URL for an image resource.
1122
* String input will be treated as a selector. If no element is found using
1123
* the selector, an <code>img</code> Node will be created with the string
1124
* used as the <code>src</code> attribute.
1126
* @method _setThumbImageFn
1127
* @param v {Node|String|HTMLElement} The thumbImage element Node, selector,
1129
* @return {Node} The Node if found or created. Otherwise null.
1132
_setThumbImageFn : function (v) {
1133
return v ? Y.get(v) ||
1134
Y.Node.create('<img src="'+v+'" alt="Slider thumb">') :
1142
* Caches the current page position of the rail element and fires the
1143
* slideStart event in response to the DD's drag:start.
1145
* @method _onDDStartDrag
1146
* @param e {Event} the DD instance's drag:start custom event
1149
_onDDStartDrag : function (e) {
1150
this._setRailOffsetXY();
1151
this.fire(SLIDE_START,{ ddEvent: e });
1155
* Fires the thumbDrag event to queue Slider value update.
1158
* @param e {Event} the DD instance's drag:drag custom event
1161
_onDDDrag : function (e) {
1162
this.fire(THUMB_DRAG, { ddEvent: e });
1166
* The default value update behavior in response to Slider thumb
1167
* interaction. Calculates the value using stored offsets, the _factor
1168
* multiplier and the min value.
1170
* @method _defUpdateValueFromDD
1171
* @param e {Event} the internal thumbDrag event
1174
_defUpdateValueFromDD : function (e) {
1175
var before = this.get(VALUE),
1176
val = e.ddEvent[this._key.eventPageAxis] - this._offsetXY;
1179
val = round(this.get(MIN) + (val * this._factor));
1181
if (before !== val) {
1182
this.set(VALUE, val, { ddEvent: e.ddEvent });
1187
* Fires the slideEnd event.
1189
* @method _onDDEndDrag
1190
* @param e {Event} the DD instance's drag:end custom event
1193
_onDDEndDrag : function (e) {
1194
this.fire(SLIDE_END,{ ddEvent: e });
1201
* The default behavior for calculating the placement of the thumb in
1202
* response to a value attribute update. This is performed in response
1203
* to firing the internal valueSet event.
1205
* @method _defSetThumbPosition
1206
* @param e {Event} the valueSet custom event
1209
_defSetThumbPosition : function (e) {
1210
var min = this.get(MIN),
1211
max = this.get(MAX),
1212
v = e.changeEv.newVal;
1215
v = round(((v - min) / (max - min)) * this._railSize);
1217
this._uiPositionThumb(v);
1221
* Places the thumb at a particular X or Y location based on the configured
1224
* @method _uiPositionThumb
1225
* @param xy {Number} the desired left or top pixel position of the thumb
1226
* in relation to the rail Node.
1229
_uiPositionThumb : function (xy) {
1232
xy += this._offsetXY;
1234
dd._setStartPosition(dd.get('dragNode').getXY());
1236
// stickX/stickY config on DD instance will negate off-axis move
1237
dd._moveNode([xy,xy],true);
1243
* Fires the internal valueSet event in response to a change in the value
1246
* @method _afterValueChange
1247
* @param e {Event} valueChange custom event
1250
_afterValueChange : function (e) {
1253
this.fire(VALUE_SET,{ changeEv: e });
1258
* Replaces the thumb Node in response to a change in the thumb attribute.
1259
* This only has effect before the Slider is rendered.
1261
* @method _afterThumbChange
1262
* @param e {Event} thumbChange custom event
1265
_afterThumbChange : function (e) {
1268
if (this.get(RENDERED)) {
1270
e.prevValue.get('parentNode').removeChild(e.prevValue);
1275
thumb = this.get(THUMB);
1276
this._dd.set('node',thumb);
1277
this._dd.set('dragNode',thumb);
1284
* Sets or replaces the thumb's contained <code>img</code> Node with the
1285
* new Node in response to a change in the thumbImage attribute. This only
1286
* has effect before the Slider is rendered.
1288
* @method _afterThumbImageChange
1289
* @param e {Event} thumbImageChange custom event
1292
_afterThumbImageChange : function (e) {
1293
if (this.get(RENDERED)) {
1295
e.prevValue.get('parentNode').removeChild(e.prevValue);
1298
this._initThumbImage();
1305
* Calls syncUI to update the Slider UI in response to change in the min
1308
* @method _afterMinChange
1309
* @param e {Event} minChange custom event
1312
_afterMinChange : function (e) {
1317
* Calls syncUI to update the Slider UI in response to change in the max
1320
* @method _afterMaxChange
1321
* @param e {Event} maxChange custom event
1324
_afterMaxChange : function (e) {
1329
* Calls syncUI to update the Slider UI in response to change in the
1330
* railSize attribute.
1332
* @method _afterRailSizeChange
1333
* @param e {Event} railSizeChange custom event
1336
_afterRailSizeChange : function (e) {
1341
* Locks or unlocks the DD instance in response to a change in the disabled
1344
* @method _afterDisabledChange
1345
* @param e {Event} disabledChange custom event
1348
_afterDisabledChange : function (e) {
1350
this._dd.set('lock',e.newVal);
1355
* Common handler to call syncUI in response to change events that occurred
1356
* after the Slider is rendered.
1359
* @param e {Event} An attribute change event
1362
_refresh : function (e) {
1363
if (e.newVal !== e.prevVal && this.get(RENDERED)) {
1369
* Used to determine if there is a current or pending request for the
1370
* thumbImage resource.
1372
* @method _isImageLoading
1373
* @param img {Node} <code>img</code> Node
1377
_isImageLoading : function (img) {
1378
return img && !img.get(COMPLETE);
1382
* Used to determine if the image resource loaded successfully or there was
1387
* <li>img load error fired xbrowser for image resources not yet resolved</li>
1388
* <li>img.complete reports false in IE for images not yet loaded as well as images that failed to load</li>
1389
* <li>img.complete true && img.naturalWidth == 0 in FF and Safari indicate image failed to load</li>
1390
* <li>img.complete && img.width == 0 in Opera indicates image failed to load</li>
1393
* @method _isImageLoaded
1394
* @param img {Node} <code>img</code> Node
1398
_isImageLoaded : function (img) {
1400
var w = img.get('naturalWidth');
1401
return img.get(COMPLETE) && (!isNumber(w) ? img.get(WIDTH) : w);
1412
}, '3.0.0pr2' ,{requires:['widget','dd-constrain']});
added
removed
loggerhead/static/javascript/yui/build/slider/slider.js
