storm-toggler v1.3.4
Storm Toggler
Class and ARIA toggle UI state manipulation
Example
https://mjbp.github.io/storm-toggler
Usage
Installation
npm i -S storm-toggler
Global toggle
For document-level state changes such as off-canvas menus
HTML
<a href="#nav" class="js-toggle"></a>
<div id="nav" class="nav"></div>
JS either using es6 import
import Toggler from 'storm-toggler';
Toggler.init('.js-toggle');
or aynchronous browser loading (use the .standalone version in the /dist folder)
import Load from 'storm-load';
Load('/content/js/async/storm-toggler.standalone.js')
.then(() => {
StormToggler.init('.js-toggler');
});
CSS
.nav {
position:fixed;
transform:translateX(100%);
transition: transform 160ms ease;
}
.on--nav .nav {
transform:translateX(0);
}
Local toggle
To encapsulate a toggle state within part of the document
HTML
<div class="parent">
<a href="#child-target" class="js-toggle__local"></a>
<div id="child-target" class="child"></div>
</div>
JS either using es6 import
import Toggler from 'storm-toggler';
Toggler.init('.js-toggle__local', {
local: true
});
or aynchronous browser loading (use the .standalone version in the /dist folder)
import Load from 'storm-load';
Load('/content/js/async/storm-toggler.standalone.js')
.then(() => {
StormToggler.init('.js-toggle__local', {
local: true
});
});
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, //intial 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: true, //focus on first focusable child node of the target element
trapTab: false //trap tab in the target element
}
e.g.
Toggler.init('.js-toggler', {
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 unpon Object.assign, element.classList, and Promises 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
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago