Neapolitan Pizza Margherita

    storm-toggle

    1.3.1 • Public • Published

    Storm Toggle

    npm version

    Accessible DOM state toggling for off-canvas and show/hide UI patterns.

    Usage

    HTML

    <button class="js-toggle-btn">Menu</button>
    <nav class="js-toggle" data-toggle="js-toggle-btn">...</nav>
    

    JS

    npm i -S storm-toggle
    

    either using es6 import

    import Toggle from 'storm-toggle';
    
    Toggle.init('.js-toggle');
    

    aynchronous browser loading (use the .standalone version in the /dist folder)

    import Load from 'storm-load';
    
    Load('/content/js/async/storm-toggle.standalone.js')
        .then(() => {
            StormToggle.init('.js-toggle');
        });
    

    Local toggle

    To encapsulate a toggle state within part of the document

    HTML

    <div class="parent">
        <button class="js-toggle__btn"></a>
        <div class="js-toggle__local" data-toggle="js-toggle__btn"></div>
    </div>
    

    CSS

    .child {
        max-height:0;
        overflow:hidden;
        transition: max-width 160ms ease;
    }
    .parent.active .child {
        max-height:1000px;
    }
    

    Options

    {
        delay: 0, //duration of animating out of toggled state
        startOpen: false,  //initial toggle state
        local: false, // encapsulate in small part of document
        prehook: false, //function to fire before each toggle
        callback: false, //function to fire after each toggle
        focus: false, //focus on first focusable child node of the target element
        trapTab: false //trap tab in the target element
        closeOnBlur: false //close the target node on losing focus from the target node and any of the toggles
    }
    

    e.g.

    Toggle.init('.js-toggle', {
        startOpen: true
    });
    

    Tests

    npm run test
    

    Browser support

    This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

    The es5 version depends upon Object.assign so all evergreen browsers are supported out of the box, ie9+ is supported with polyfills. ie8+ will work with even more polyfils for Array functions and eventListeners.

    Dependencies

    None

    License

    MIT

    Install

    npm i storm-toggle

    DownloadsWeekly Downloads

    62

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    19.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • sarah-storm
    • mjbp
    • stormid-admin
    • lynchjames