This package has been deprecated

Author message:

THIS PACKAGE IS DEPRECATED AND NO LONGER MAINTAINED! Use any combination of jquery-click-flyout, jquery-hover-flyout and jquery-focus-flyout instead.

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, > a[role=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.

Reports

Each test run will generate the following reports:

• /test_reports/coverage contains Istanbul code coverage report
• /test_reports/html contains HTML test report
• /test_reports/junit contains JUnit test report

CI Build

https://travis-ci.org/ianmcburnie/jquery-button-flyout

Code Coverage

https://coveralls.io/github/ianmcburnie/jquery-button-flyout?branch=master