Jquery-button-flyout NPM

jquery-button-flyout

jQuery plugin that creates the basic interactivity for a button that expands and collapse a flyout.

$(selector).buttonFlyout(options);

Deprecated

This plugin is deprecated and no longer maintained!.

Please use any of the following plugins instead:

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

Install

npm install jquery-button-flyout

Example

Markup before plugin:

<div class="flyout">
    <button type="button">Notifications</button>
    <span class="flyout__live-region" aria-live="off">
        <div class="flyout__overlay">
            <!-- flyout content -->
        </div>
    </span>
</div>

Execute plugin:

$('.flyout').buttonFlyout();

Markup after plugin:

<div class="flyout" id="flyout-0">
    <button type="button" aria-controls="flyout-0-overlay" aria-expanded="false">Notifications</button>
    <span class="flyout__live-region" aria-live="off">
        <div class="flyout__overlay" id="flyout-0-overlay">
            <!-- flyout content -->
        </div>
    </span>
</div>

'Click' event on 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 - auto collapse flyout when focus leaves the widget (default: true)
buttonSelector - selector for button element (default: '.flyout__button, > button, > arole=button')
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')

Events

flyoutCollapse - the flyout has collapsed
flyoutExpand - the flyout has expanded

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.