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

	clickable-rail-debug.js revision a79d36e65c99c6422a9eb88d1fc3be127e92b391
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam MooreYUI.add('clickable-rail', function(Y) {
b39897a381c2203466da5568bfd2862a54a81311Adam Moore
b39897a381c2203466da5568bfd2862a54a81311Adam Moore/**
b39897a381c2203466da5568bfd2862a54a81311Adam Moore * Adds support for mouse interaction with the Slider rail triggering thumb
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore * movement.
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore *
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore * @module slider
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore * @submodule clickable-rail
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore */
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore/**
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore * Slider extension that allows clicking on the Slider's rail element,
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore * triggering the thumb to align with the location of the click.
b39897a381c2203466da5568bfd2862a54a81311Adam Moore *
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore * @class ClickableRail
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore */
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moorefunction ClickableRail() {
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore    this._initClickableRail();
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore}
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam MooreY.ClickableRail = Y.mix(ClickableRail, {
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore    // Prototype methods added to host class
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore    prototype: {
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore        /**
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         * Initializes the internal state and sets up events.
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         *
b39897a381c2203466da5568bfd2862a54a81311Adam Moore         * @method _initClickableRail
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         * @protected
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         */
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore        _initClickableRail: function () {
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            this._evtGuid = this._evtGuid || (Y.guid() + '|');
b39897a381c2203466da5568bfd2862a54a81311Adam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            /**
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore             * Broadcasts when the rail has received a mousedown event and
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore             * triggers the thumb positioning.  Use
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore             * <code>e.preventDefault()</code> or
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore             * <code>set(&quot;clickableRail&quot;, false)</code> to prevent
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore             * the thumb positioning.
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore             *
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore             * @event railMouseDown
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore             * @preventable _defRailMouseDownFn
b39897a381c2203466da5568bfd2862a54a81311Adam Moore             */
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            this.publish('railMouseDown', {
b39897a381c2203466da5568bfd2862a54a81311Adam Moore                defaultFn: this._defRailMouseDownFn
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            });
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            this.after('render', this._bindClickableRail);
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore            this.on('destroy', this._unbindClickableRail);
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore        },
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore        /**
b39897a381c2203466da5568bfd2862a54a81311Adam Moore         * Attaches DOM event subscribers to support rail interaction.
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore         *
b39897a381c2203466da5568bfd2862a54a81311Adam Moore         * @method _bindClickableRail
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore         * @protected
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore         */
d2c45453b4a46a4be78ac4b2bae5f9a53b0bb125Adam Moore        _bindClickableRail: function () {
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            this._dd.addHandle(this.rail);
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            this.rail.on(this._evtGuid + Y.DD.Drag.START_EVENT,
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore                Y.bind(this._onRailMouseDown, this));
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore        },
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore        /**
02babda6bdf56de48b7c5145d766de910bdfbc04Adam Moore         * Detaches DOM event subscribers for cleanup/destruction cycle.
e2d8e89fec079809672db8d61193846193868fa4Luke Smith         *
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         * @method _unbindClickableRail
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         * @protected
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         */
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore        _unbindClickableRail: function () {
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            if (this.get('rendered')) {
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore                var contentBox = this.get('contentBox'),
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore                    rail = contentBox.one('.' + this.getClassName('rail'));
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore
0bc189b2acbd7c4b5af63eded0c4289e224676b7Adam Moore                rail.detach(this.evtGuid + '*');
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore            }
b39897a381c2203466da5568bfd2862a54a81311Adam Moore        },
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore        /**
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         * Dispatches the railMouseDown event.
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         *
2c5ce90c334a2d0f18474e85c93b424b6ec9daaaAdam Moore         * @method _onRailMouseDown
736ba5f7cc5cf8d479f8fc621ff3c0777e434c8aAdam Moore         * @param e {DOMEvent} the mousedown event object
736ba5f7cc5cf8d479f8fc621ff3c0777e434c8aAdam Moore         * @protected
02babda6bdf56de48b7c5145d766de910bdfbc04Adam Moore         */
        _onRailMouseDown: function (e) {
            if (this.get('clickableRail') && !this.get('disabled')) {
                this.fire('railMouseDown', { ev: e });
            }
        },

        /**
         * Default behavior for the railMouseDown event.  Centers the thumb at
         * the click location and passes control to the DDM to behave as though
         * the thumb itself were clicked in preparation for a drag operation.
         *
         * @method _defRailMouseDownFn
         * @param e {Event} the EventFacade for the railMouseDown custom event
         * @protected
         */
        _defRailMouseDownFn: function (e) {
            e = e.ev;

            // Logic that determines which thumb should be used is abstracted
            // to someday support multi-thumb sliders
            var dd     = this._resolveThumb(e),
                i      = this._key.xyIndex,
                length = parseFloat(this.get('length'), 10),
                thumb,
                thumbSize,
                xy;

            if (dd) {
                thumb = dd.get('dragNode');
                thumbSize = parseFloat(thumb.getStyle(this._key.dim), 10);

                // Step 1. Allow for aligning to thumb center or edge, etc
                xy = this._getThumbDestination(e, thumb);

                // Step 2. Remove page offsets to give just top/left style val
                xy = xy[ i ] - this.rail.getXY()[i];

                // Step 3. Constrain within the rail in case of attempt to
                // center the thumb when clicking on the end of the rail
                xy = Math.min(
                        Math.max(xy, 0),
                        (length - thumbSize));

                this._uiMoveThumb(xy);

                // Set e.target for DD's IE9 patch which calls
                // e.target._node.setCapture() to allow imgs to be dragged.
                // Without this, setCapture is called from the rail and rail
                // clicks on other Sliders may have their thumb movements
                // overridden by a different Slider (the thumb on the wrong
                // Slider moves).
                e.target = this.thumb.one('img') || this.thumb;

                // Delegate to DD's natural behavior
                dd._handleMouseDownEvent(e);

                // TODO: this won't trigger a slideEnd if the rail is clicked
                // check if dd._move(e); dd._dragThreshMet = true; dd.start();
                // will do the trick.  Is that even a good idea?
            }
        },

        /**
         * Resolves which thumb to actuate if any.  Override this if you want to
         * support multiple thumbs.  By default, returns the Drag instance for
         * the thumb stored by the Slider.
         *
         * @method _resolveThumb
         * @param e {DOMEvent} the mousedown event object
         * @return {DD.Drag} the Drag instance that should be moved
         * @protected
         */
        _resolveThumb: function (e) {
            /* Temporary workaround
            var primaryOnly = this._dd.get('primaryButtonOnly'),
                validClick  = !primaryOnly || e.button <= 1;

            return (validClick) ? this._dd : null;
             */
            return this._dd;
        },

        /**
         * Calculates the top left position the thumb should be moved to to
         * align the click XY with the center of the specified node.
         *
         * @method _getThumbDestination
         * @param e {DOMEvent} The mousedown event object
         * @param node {Node} The node to position
         * @return {Array} the [top, left] pixel position of the destination
         * @protected
         */
        _getThumbDestination: function (e, node) {
            var offsetWidth  = node.get('offsetWidth'),
                offsetHeight = node.get('offsetHeight');

            // center
            return [
                (e.pageX - Math.round((offsetWidth  / 2))),
                (e.pageY - Math.round((offsetHeight / 2)))
            ];
        }

    },

    // Static properties added onto host class
    ATTRS: {
        /**
         * Enable or disable clickable rail support.
         *
         * @attribute clickableRail
         * @type {Boolean}
         * @default true
         */
        clickableRail: {
            value: true,
            validator: Y.Lang.isBoolean
        }
    }

}, true);


}, '@VERSION@' ,{requires:['slider-base']});