Makes simple state management possible via
classListon the<html>element
Situation: you want to have a simple method of styling your page based on the current global state. Like mainMenuOpened, filterToggled, footerNavActive, and so on.
Happy states! 😎
A small script that manages your pages state via document.documentElement.classlist.
GitHub | NPM | @jelmerdemaat
Try here: jelmerdemaat.github.io/happy-states. Really the only thing this script does is:
- Give methods
toggle,set,unset, andisfor handling your page's state via JavaScript. - Add a click handler to catch state toggling on elements with a given attribute (default:
data-state). - Give a possibility to add a callback to a state change.
Which means you can control a state like main-nav-open via HappyStates.set('main-nav-open') in your JavaScript, as well as via a click on an element like this:
<button data-state="main-nav-open">Open main nav</button>Include happystates(.min).js somewhere in your document, before the rest of your JavaScript where you initiate this script.
npm install --save happy-statesIn your JavaScript:
// When using an npm based build process, import the module:
import HappyStates from 'happy-states';
// Create an instance of HappyStates
const happystates = new HappyStates();
// Optionally, pass a prefix that you would like the classes to have,
// and a custom attribute to act upon when an element is clicked (both optional).
const customhappystates = new HappyStates(
'is-',
'data-toggle-state'
);
HappyStates.toggle('menuOpened'); // Toggles class `is-menuOpened` on document
HappyStates.is('menuOpened'); // Returns true
HappyStates.unset('menuOpened'); // Removes class `is-menuOpened` from document
HappyStates.is('menuOpened'); // Returns false
HappyStates.set('menuOpened'); // Sets class `is-menuOpened` on document
HappyStates.toggle('menuOpened'); // Toggles class `is-menuOpened` on document
HappyStates.is('menuOpened'); // Returns false| Order | Thing | Explanation |
|---|---|---|
| First | prefix |
What to prefix the classes with. Default: state- |
| Second | attribute |
What attribute to check for state toggling. Default: data-state |
This little script (692B minified, 356B gzipped) is supported in all browsers that support Element.classList which is basically every browser. caniuse.com/#feat=classlist
Can I Use screenshot:
