API Docs for:
Show:

File: js\scrollspy.js

/**
A plugin for updating the active element of a list based on the scroll position
of a certain node. Plug it into a scrollable node (usually the body) and set the
`target` attribute to the list.

@class Plugin.ScrollSpy
@constructor
@extends Plugin.ScrollInfo
@param {Object} [config] Object literal containing configuration options
**/
function ScrollSpy() {
    ScrollSpy.superclass.constructor.apply(this, arguments);
}
Y.extend(ScrollSpy, Y.Plugin.ScrollInfo, {
    initializer: function () {
        this.on('scroll', this.refresh, this);
        this.refresh();
    },
    /**
    Recalculates the current active node in the list and resets the active
    CSS class names.

    @method refresh
    **/
    refresh: function () {
        var links = this.get('target').all('a'),
            candidates = links.getAttribute('href'),
            ids = [], i = 0, length = candidates.length,
            topNode,
            activeClass = this.get('activeClass');

        for (; i < length; i++) {
            if (candidates[i].charAt(0) === '#') {
                ids.push(candidates[i]);
            }
        }

        topNode = this.getOnscreenNodes(ids.join(',')).shift();

        if (topNode) {
            topNode = '#' + topNode.get('id');
            links.batch(function (link) {
                var node = link.get('parentNode');
                node.toggleClass(activeClass, link.getAttribute('href') === topNode);
            });
        }
    }
}, {
    /**
    Plugin namespace.

    @property NS
    @type String
    @default 'scrollspy'
    @static
    **/
    NS: 'scrollspy',
    ATTRS: {
        /**
        Number of milliseconds by which ScrollSpy throttles the scroll event.
        Alternatively, provide a `data-delay` attribute in your plugged node.

        @attribute {Number} scrollDelay
        @default 15
        @initOnly
        **/
        scrollDelay: {
            valueFn: function () {
                return parseInt(this.get('host').getData('delay'), 10) || 15;
            },
            initOnly: true
        },
        /**
        The class to apply to the active item in the list.

        @attribute {String} activeClass
        @default 'yui3-menu-active'
        **/
        activeClass: {
            value: Y.ClassNameManager.getClassName('menu', 'active')
        },
        /**
        The target list. Usually a list with a `yui3-menu` class.
        Alternatively, provide a `data-target` attribute in your plugged node.

        @attribute {String|Node} target
        @initOnly
        **/
        target: {
            setter: Y.one,
            valueFn: function () {
                return this.get('host').getData('target');
            },
            initOnly: true
        }
    }
});

Y.Plugin.ScrollSpy = ScrollSpy;