Happy states
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.
Solution
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:
Open main navInstall
Directly
Include happystates(.min).js somewhere in your document, before the rest of your JavaScript where you initiate this script.
Via npm
npm install --save happy-statesUsage
In your JavaScript:
// When using an npm based build process, import the module:; // Create an instance of HappyStatesconst 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 = 'is-' 'data-toggle-state'; HappyStates; // Toggles class `is-menuOpened` on documentHappyStates; // Returns trueHappyStates; // Removes class `is-menuOpened` from documentHappyStates; // Returns falseHappyStates; // Sets class `is-menuOpened` on documentHappyStates; // Toggles class `is-menuOpened` on documentHappyStates; // Returns falseParameters
| 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 |
Browser support
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:
Element.classList
