LUX TOGGLE
Demo: https://jesschampion.github.io/lux-toggle/
A utility for creating toggleable dom elements with JavaScript. Inspired by bootstrap's toggle utility but without the overhead. Implemented in vanillaJS in a functional style. The utility has baked in animation and accessibility support/
Set the toggle button by adding the attribute data-lux-toggle, with the value being the ID of the element to be toggled.
The following classes will be added to the target to indicate current state.
- open:
toggle--open, - opening:
toggle--opening, - closing:
toggle--closing
CSS will need to be coded to define the display state, as the script only modifies the elements classes.
Any clicks outside the toggle button or target will cause the target to close automatically.
Four other optional attributes can be added to the toggle element to customise its behaviour.
-
data-lux-toggle-groupcan be set with a string representing the group name. Whenever a toggle in a group is opened it will check if there are other siblings open in the group, and delay the opening animation for the current toggle to allow the closing animation for the sibling. -
data-lux-toggle-closeset the value to the ID of any element inside the toggle target. The element will function as a close button. -
data-lux-toggle-modeconfigure the closing behaviour of the toggle section. Options:- manual: close only when clicking toggle, by keyboard or close area. (DEFAULT)
- group: close siblings when another in the same group is opened.
- outside: always close on click outside
-
data-lux-toggle-menusettrue, (defaults to false) to indicate that the toggle expands a menu. This adds the extra aria tagaria-haspopupwhich indicates a popup menu to screen readers. This should only be used where the target is a menu, it may cause accessibility issues
Accessibility support includes: - Keyboard navigation - Automatic applications of tabindex=0 to toggles and close button if not manually specified. - Automatic application of aria-expanded and aria-controls tags to target and toggles. - Supports menu mode to set aria-haspopup on menus
Installation & Usage
Installation
lux-toggle can be installed from NPM yarn add lux-toggle
Usage
Import into your main javascript package
import luxToggle from 'lux-toggle';
luxToggle();
Define toggles and targets in html using the given data attributes
<span data-lux-toggle="myTarget"
data-lux-toggle-close="closeButton"
data-lux-toggle-mode="outside">
Toggle button
</span>
<div id="myTarget">
<span id="closeButton"></span>
<div>toggleable contents</div>
</div>
Development
Scripts
-
install dependencies:
yarn -
development build:
yarn buildoryarn watch -
run linters:
yarn lint -
push dist/demo sub folder to github pages branch:
yarn deploy:demo
Build TODO - update
Running locally
- Build by running
yarn buildoryarn watch - Open
lux-toggle/dist/demo/index.htmlin a browser
Demo build
- Build
yarn build - Commit changes
git commit -am"V X.Y.Z" - Push to gh-pages branch
yarn deploy-demo - Update version number in
package.jsonand push to master
Production build
- Build
yarn build - Update version number in
package.json - Commit changes
git commit -am"V X.Y.Z" - Deploy to npm
npm publish
Code Style
There are linters set up to enforce code style, run with yarn lint.
Tests
JavaScript unit tests are implemented with Jest The specs are located in /test and can be run with yarn test Test coverage can be reported by running yarn test:coverage
Enhancement Backlog
- Make config actually configurable
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
4 Oct 14, 2022
4 Nov 21, 2022
210 Jan 4, 2023
14 Apr 22, 2022
14 Sep 9, 2022
107 Dec 26, 2022
4 Mar 17, 2022
2 Jul 5, 2022
3 Oct 16, 2021
14 Jul 27, 2021
18 Aug 15, 2022
24 Dec 11, 2022
12 Jan 2, 2023
2 Jun 21, 2022
277 Nov 25, 2022
4 Jun 11, 2022