Jquery-link-flyout NPM

jquery-link-flyout

jQuery plugin that creates the basic interactivity for a link that expands and collapses a flyout

$(selector).linkFlyout(options);

Deprecated

This plugin is deprecated.

Please use any of the following plugins instead:

jquery-click-flyout
jquery-hover-flyout
jquery-focus-flyout

Install

npm install jquery-link-flyout

Example

Markup before plugin:

<span class="flyout">
    <a class="flyout__anchor" href="http://www.ebay.com">Notifications</a>
    <div class="flyout__live-region" aria-live="off">
        <div class="flyout__overlay">
            <h2>Flyout Title</h2>
            <p>Flyout Content</p>
        </div>
    </div>
</span>

Execute plugin:

$('.flyout').linkFlyout();

Markup after plugin:

<span class="flyout" id="linkflyout-0">
    <a class="flyout__anchor" href="http://www.ebay.com">Notifications</a>
    <button class="flyout__button" type="button" aria-controls="linkflyout-0-overlay" aria-expanded="false">Notifications</button>
    <div class="flyout__live-region" aria-live="off">
        <div id="linkflyout-0-overlay">
            <h2>Flyout Title</h2>
            <p>Flyout Content</p>
        </div>
    </div>
</span>

'Click' event on stealth button will now toggle aria-expanded state of button. CSS can use this state to hide/show overlay. For example:

.flyout__overlay {
    display: none;
    position: absolute;
    z-index: 1;
}
.flyout__button[aria-expanded=true] ~ .flyout__live-region > .flyout__overlay {
    display: block;
}

Options

autoCollapse - whether overlay collapses when focus leaves the widget
anchorSelector - selector for anchor element (default: '.flyout__anchor, > a')
debug - print debug statements to console (defualt: false)
focusManagement - set focus to 'none, 'overlay', 'first' or an ID (default: 'none')
overlaySelector - selector for overlay element (default: '.flyout__overlay')

Dependencies

Development

Useful NPM task runners:

npm start for local browser-sync development.
npm test runs tests & generates reports (see reports section below)
npm run tdd test driven development: watches code and re-tests after any change
npm run build cleans, lints, tests and minifies

Execute npm run to view all available CLI scripts.