Jarvus UI JS (beta)

Toggle

Toggles a state class and the proper ARIA roles on a toggle container element with a toggle control and toggle body child elements.

Note: Works well in conjunction with JUI collapse and press-downs CSS objects.

juiToggle();

Use the destroy function to remove all aria roles and unbind events.

juiToggleDestroy();

Settings

Accepts an object of settings for:

container:

Selector string of the toggle container element. Defaults to '.js-toggle'.

control:

Selector string of the toggle control element. Defaults to '.js-toggle__control'.

body:

Selector string of the element to be toggled. Defaults to '.js-toggle__body'.

activeClass:

Class name applied to toggle element when the collapse is not collapsed. Defaults to 'is-active'.

closeOutside:

Boolean value to close the toggle when clicking outside the toggle. Defaults to false.

closeEsc:

Boolean value to close the toggle when clicking the esc key. Defaults to false.

namespace:

Namespace string added to toggle events. Defaults to 'toggle'. Useful managing the events that get added to $(document) when using closeOustside and closeEscape.

Example

HTML

<div class="o-collapse js-toggle">
    <button type="button" class="js-toggle__control">Toggle Content</button>
    <div class="o-collapse__body js-toggle__body">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
</div>

JS

CSS

.o-collapse__body {
    display: none;
}

.is-open > .o-collapse__body,
.no-js .o-collapse__body {
    display: block;
}

Demo

Tabs

Toggles a state class, adds keyboard navigation, and sets the proper ARIA roles on a tab container element with tab navigation and tab panel child elements.

Requires the tab navigation anchors properly anchor-linked to tab panels.

juiTabs()

Use the destroy function to remove all aria roles and unbind events.

juiTabsDestroy();

Settings

Accepts an object of settings for:

container:

Selector string of the tabs container element. Defaults to '.js-tabs'.

nav:

Selector string of the tabs nav element. Defaults to '.js-tabs__nav'.

panel:

Selector string of tabs panel elements. Defaults to '.js-tabs__panel'.

activeClass:

Class name applied to active tabs nav child and tabs panel. Defaults to 'is-active'.

Example

HTML

<div class="o-tabs js-tabs">
    <ul class="o-tabs__nav js-tabs__nav">
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1" class="o-tabs__panel js-tabs__panel">
        <p>1. Pellentesque habitant morbi tristique senectus et <a href="#">netus et malesuada</a> fames ac turpis egestas.</p>
    </div>
    <div id="tab-2" class="o-tabs__panel js-tabs__panel">
        <p>2. Pellentesque habitant morbi tristique senectus et <a href="#">netus et malesuada</a> fames ac turpis egestas.</p>
    </div>
    <div id="tab-3" class="o-tabs__panel js-tabs__panel">
        <p>3. Pellentesque habitant morbi tristique senectus et <a href="#">netus et malesuada</a> fames ac turpis egestas.</p>
    </div>
</div>

JS

juiTabs();

CSS

.o-tabs__nav {
    list-style: none;
    margin-left: 0;
}

    .o-tabs__nav > li,
    .o-tabs__nav a {
        display: inline-block;
    }

    .o-tabs__nav a {
        padding: 0.5em;
    }

    .o-tabs__nav .is-active {
        border: 1px solid #ddd;
        border-bottom: 0; 
    }

.js .o-tabs__panel {
    display: none;
}

.o-tabs__panel.is-active {
    display: block;
}

Demo

Modal

Toggles the proper ARIA roles and manages focus for a modal div. Only supports one modal open at a time.

Suggested use: Store modal elements just before the closing </body> tag.

juiModal();

Settings

Accepts an object of settings for:

modalId (required):

ID of modal to display.

controlOpen:

Selector string of element(s) that open the modal. Defaults to '.js-modal-control-open'.

controlClose:

Selector string of element(s) that closes the modal and returns focus to last focused element. Defaults to '.js-modal-control-close'.

targetOpenName

Class name applied to modal element when the modal is open. Defaults to 'is-active'.

documentOpenName

Class name applied to document body when the modal is open. Defaults to 'is-modal-active'.

pageElements

Selector string of elements to hide when the modal is open.

focusableElements

Selector string of elements capable of receiving focus. Used to trap focus in modal.

Example

HTML

<body>
    <main>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <a href="#js-modal-example" class="js-modal-control-open">Open modal</a>
    </main>
    <div id="js-modal-example" class="o-modal js-modal">
        <div class="o-modal__body">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <button type="button" class="js-modal__control-close">Close modal</a>
        </div>
    </div>
</body>

JS

juiModal({
    modalId: '#js-modal-example'
});

CSS

.js .o-modal {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.25);
    bottom: 0;
    display: none;
    left: 0;
    overflow: auto;
    padding: 2em;
    position: fixed;
    right: 0;
    top: 0;
}

    .o-modal__body {
        background-color: white;
        border: 1px solid black;
        margin: auto;
        padding: 2em;
    }

.js .is-active .o-modal {
    display: flex;
}

.is-modal-active {
    overflow: hidden;
}

Demo