Jquery-click-flyout NPM

jquery-click-flyout

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

$(selector).clickFlyout(options);

Experimental

This plugin is still in an experimental state, until it reaches v1.0.0 you must consider all minor releases as breaking changes. Patch releases may introduce new features, but will be backwards compatible.

Install

npm install jquery-click-flyout

Example

Markup before plugin:

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

Execute plugin:

$('.flyout').clickFlyout();

Markup after plugin:

<div class="flyout" id="flyout-0">
    <button class="flyout__trigger" 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__trigger[aria-expanded=true] ~ .flyout__live-region > .flyout__overlay {
    display: block;
}

Options

autoCollapse - auto collapse flyout when focus leaves the widget (default: true)
closeOnEsc - collapse the flyout when ESCAPE key is pressed (default: false)
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')
triggerSelector - selector for button element (default: '.flyout__trigger')

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.