build/clickable-rail/clickable-rail-debug.js

	clickable-rail-debug.js revision 76ca635d61eb3f9fb7c9d788a44fa8b1690aa138
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassYUI.add('clickable-rail', function(Y) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass/**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Adds support for mouse interaction with the Slider rail triggering thumb
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * movement.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @module slider
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @submodule clickable-rail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass/**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * Slider extension that allows clicking on the Slider's rail element,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * triggering the thumb to align with the location of the click.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass * @class ClickableRail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glassfunction ClickableRail() {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass    this._initClickableRail();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.ClickableRail = Y.mix(ClickableRail, {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass    // Prototype methods added to host class
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass    prototype: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Initializes the internal state and sets up events.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @method _initClickableRail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        _initClickableRail: function () {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            this._evtGuid = this._evtGuid || (Y.guid() + '|');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             * Broadcasts when the rail has received a mousedown event and
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             * triggers the thumb positioning.  Use
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             * <code>e.preventDefault()</code> or
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             * <code>set(&quot;clickableRail&quot;, false)</code> to prevent
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             * the thumb positioning.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             * @event railMouseDown
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             * @preventable _defRailMouseDownFn
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            this.publish('railMouseDown', {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                defaultFn: this._defRailMouseDownFn
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            this.after('render', this._bindClickableRail);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            this.on('destroy', this._unbindClickableRail);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Attaches DOM event subscribers to support rail interaction.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @method _bindClickableRail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        _bindClickableRail: function () {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            this._dd.addHandle(this.rail);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            this.rail.on(this._evtGuid + Y.DD.Drag.START_EVENT,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                Y.bind(this._onRailMouseDown, this));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Detaches DOM event subscribers for cleanup/destruction cycle.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @method _unbindClickableRail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        _unbindClickableRail: function () {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            if (this.get('rendered')) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                var contentBox = this.get('contentBox'),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                    rail = contentBox.one('.' + this.getClassName('rail'));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                rail.detach(this.evtGuid + '*');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Dispatches the railMouseDown event.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @method _onRailMouseDown
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @param e {DOMEvent} the mousedown event object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        _onRailMouseDown: function (e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            if (this.get('clickableRail') && !this.get('disabled')) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                this.fire('railMouseDown', { ev: e });
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Default behavior for the railMouseDown event.  Centers the thumb at
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * the click location and passes control to the DDM to behave as though
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * the thumb itself were clicked in preparation for a drag operation.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @method _defRailMouseDownFn
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @param e {Event} the EventFacade for the railMouseDown custom event
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        _defRailMouseDownFn: function (e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            e = e.ev;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            // Logic that determines which thumb should be used is abstracted
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            // to someday support multi-thumb sliders
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            var dd     = this._resolveThumb(e),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                i      = this._key.xyIndex,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                length = parseFloat(this.get('length'), 10),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                thumb,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                thumbSize,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                xy;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            if (dd) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                thumb = dd.get('dragNode');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                thumbSize = parseFloat(thumb.getStyle(this._key.dim), 10);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // Step 1. Allow for aligning to thumb center or edge, etc
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                xy = this._getThumbDestination(e, thumb);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // Step 2. Remove page offsets to give just top/left style val
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                xy = xy[ i ] - this.rail.getXY()[i];
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // Step 3. Constrain within the rail in case of attempt to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // center the thumb when clicking on the end of the rail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                xy = Math.min(
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                        Math.max(xy, 0),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                        (length - thumbSize));
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                this._uiMoveThumb(xy);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // Set e.target for DD's IE9 patch which calls
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // e.target._node.setCapture() to allow imgs to be dragged.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // Without this, setCapture is called from the rail and rail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // clicks on other Sliders may have their thumb movements
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // overridden by a different Slider (the thumb on the wrong
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // Slider moves).
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                e.target = this.thumb.one('img') || this.thumb;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // Delegate to DD's natural behavior
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                dd._handleMouseDownEvent(e);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // TODO: this won't trigger a slideEnd if the rail is clicked
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // check if dd._move(e); dd._dragThreshMet = true; dd.start();
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                // will do the trick.  Is that even a good idea?
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Resolves which thumb to actuate if any.  Override this if you want to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * support multiple thumbs.  By default, returns the Drag instance for
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * the thumb stored by the Slider.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @method _resolveThumb
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @param e {DOMEvent} the mousedown event object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @return {Y.DD.Drag} the Drag instance that should be moved
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        _resolveThumb: function (e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            /* Temporary workaround
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            var primaryOnly = this._dd.get('primaryButtonOnly'),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                validClick  = !primaryOnly || e.button <= 1;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            return (validClick) ? this._dd : null;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass             */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            return this._dd;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Calculates the top left position the thumb should be moved to to
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * align the click XY with the center of the specified node.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @method _getThumbDestination
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @param e {DOMEvent} The mousedown event object
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @param node {Node} The node to position
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @return {Array} the [top, left] pixel position of the destination
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @protected
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        _getThumbDestination: function (e, node) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            var offsetWidth  = node.get('offsetWidth'),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                offsetHeight = node.get('offsetHeight');
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            // center
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            return [
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                (e.pageX - Math.round((offsetWidth  / 2))),
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass                (e.pageY - Math.round((offsetHeight / 2)))
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            ];
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass    },
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass    // Static properties added onto host class
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass    ATTRS: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        /**
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * Enable or disable clickable rail support.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         *
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @attribute clickableRail
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @type {Boolean}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         * @default true
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass         */
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        clickableRail: {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            value: true,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass            validator: Y.Lang.isBoolean
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass        }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass    }
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}, true);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}, '@VERSION@' ,{requires:['slider-base']});