jquery-focus-flyout

jQuery plugin that creates the basic interactivity for a flyout that opens on focus of trigger element

``js
$(selector).focusFlyout();
`

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

`js
npm install jquery-focus-flyout
`

Example

Markup before plugin:

`html


`js
$('.flyout').focusFlyout();
`

Markup after plugin:

`html


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

Params

* options.overlaySelector - selector for overlay element (default: '.flyout__overlay')
* options.triggerSelector - selector for trigger element (default: '.flyout__trigger')
* options.expandedClass - if present, uses this class instead of aria-expanded (default: null)

Events

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

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/makeup-jquery/jquery-focus-flyout

Code Coverage

https://coveralls.io/github/makeup-jquery/jquery-focus-flyout?branch=master