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('clickable-rail', function(Y) {
11 * Adds support for mouse interaction with the Slider rail triggering thumb
15 * @submodule clickable-rail
19 * Slider extension that allows clicking on the Slider's rail element,
20 * triggering the thumb to align with the location of the click.
22 * @class ClickableRail
24 function ClickableRail() {
25 this._initClickableRail();
28 Y.ClickableRail = Y.mix(ClickableRail, {
30 // Prototype methods added to host class
34 * Initializes the internal state and sets up events.
36 * @method _initClickableRail
39 _initClickableRail: function () {
40 this._evtGuid = this._evtGuid || (Y.guid() + '|');
43 * Broadcasts when the rail has received a mousedown event and
44 * triggers the thumb positioning. Use
45 * <code>e.preventDefault()</code> or
46 * <code>set("clickableRail", false)</code> to prevent
47 * the thumb positioning.
49 * @event railMouseDown
50 * @preventable _defRailMouseDownFn
52 this.publish('railMouseDown', {
53 defaultFn: this._defRailMouseDownFn
56 this.after('render', this._bindClickableRail);
57 this.on('destroy', this._unbindClickableRail);
61 * Attaches DOM event subscribers to support rail interaction.
63 * @method _bindClickableRail
66 _bindClickableRail: function () {
67 this._dd.addHandle(this.rail);
69 this.rail.on(this._evtGuid + Y.DD.Drag.START_EVENT,
70 Y.bind(this._onRailMouseDown, this));
74 * Detaches DOM event subscribers for cleanup/destruction cycle.
76 * @method _unbindClickableRail
79 _unbindClickableRail: function () {
80 if (this.get('rendered')) {
81 var contentBox = this.get('contentBox'),
82 rail = contentBox.one('.' + this.getClassName('rail'));
84 rail.detach(this.evtGuid + '*');
89 * Dispatches the railMouseDown event.
91 * @method _onRailMouseDown
92 * @param e {DOMEvent} the mousedown event object
95 _onRailMouseDown: function (e) {
96 if (this.get('clickableRail') && !this.get('disabled')) {
97 this.fire('railMouseDown', { ev: e });
102 * Default behavior for the railMouseDown event. Centers the thumb at
103 * the click location and passes control to the DDM to behave as though
104 * the thumb itself were clicked in preparation for a drag operation.
106 * @method _defRailMouseDownFn
107 * @param e {Event} the EventFacade for the railMouseDown custom event
110 _defRailMouseDownFn: function (e) {
113 // Logic that determines which thumb should be used is abstracted
114 // to someday support multi-thumb sliders
115 var dd = this._resolveThumb(e),
116 i = this._key.xyIndex,
117 length = parseFloat(this.get('length'), 10),
123 thumb = dd.get('dragNode');
124 thumbSize = parseFloat(thumb.getStyle(this._key.dim), 10);
126 // Step 1. Allow for aligning to thumb center or edge, etc
127 xy = this._getThumbDestination(e, thumb);
129 // Step 2. Remove page offsets to give just top/left style val
130 xy = xy[ i ] - this.rail.getXY()[i];
132 // Step 3. Constrain within the rail in case of attempt to
133 // center the thumb when clicking on the end of the rail
136 (length - thumbSize));
138 this._uiMoveThumb(xy);
140 // Set e.target for DD's IE9 patch which calls
141 // e.target._node.setCapture() to allow imgs to be dragged.
142 // Without this, setCapture is called from the rail and rail
143 // clicks on other Sliders may have their thumb movements
144 // overridden by a different Slider (the thumb on the wrong
146 e.target = this.thumb.one('img') || this.thumb;
148 // Delegate to DD's natural behavior
149 dd._handleMouseDownEvent(e);
151 // TODO: this won't trigger a slideEnd if the rail is clicked
152 // check if dd._move(e); dd._dragThreshMet = true; dd.start();
153 // will do the trick. Is that even a good idea?
158 * Resolves which thumb to actuate if any. Override this if you want to
159 * support multiple thumbs. By default, returns the Drag instance for
160 * the thumb stored by the Slider.
162 * @method _resolveThumb
163 * @param e {DOMEvent} the mousedown event object
164 * @return {Y.DD.Drag} the Drag instance that should be moved
167 _resolveThumb: function (e) {
168 /* Temporary workaround
169 var primaryOnly = this._dd.get('primaryButtonOnly'),
170 validClick = !primaryOnly || e.button <= 1;
172 return (validClick) ? this._dd : null;
178 * Calculates the top left position the thumb should be moved to to
179 * align the click XY with the center of the specified node.
181 * @method _getThumbDestination
182 * @param e {DOMEvent} The mousedown event object
183 * @param node {Node} The node to position
184 * @return {Array} the [top, left] pixel position of the destination
187 _getThumbDestination: function (e, node) {
188 var offsetWidth = node.get('offsetWidth'),
189 offsetHeight = node.get('offsetHeight');
193 (e.pageX - Math.round((offsetWidth / 2))),
194 (e.pageY - Math.round((offsetHeight / 2)))
200 // Static properties added onto host class
203 * Enable or disable clickable rail support.
205 * @attribute clickableRail
211 validator: Y.Lang.isBoolean
218 }, '3.3.0' ,{requires:['slider-base']});