Nasal Pathway Melodrama

    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

    0.8.1 • Public • Published

    jquery-button-flyout

    Build Status Coverage Status Dependency status devDependency status

    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:

    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

    Install

    npm i jquery-button-flyout

    DownloadsWeekly Downloads

    4

    Version

    0.8.1

    License

    ISC

    Last publish

    Collaborators

    • ianmcburnie