Toglit!

A pure javascript utility to easily toggle classes on elements targeted by data attributes

Usage

import Toglit from 'toglit'
const toglit = new Toglit();

window.addEventListener('toglitchange', (e) => {
    const { change, class } = e.detail;
    const { currentTarget } = e;
    console.log(`${change}ed ".${class}" "${from}" to "#${currentTarget.id}!"`);
    // Added ".in" to "#toggleMe!"
});

<style>
    #toggleme {
        display:none;
    }   
    #toggleme.in {
        display:block;
    }
</style>

<button type="button" data-toglit="#toggleme">Toglit!</button>
<div id="toggleme">Lookit me!</div>

Data attributes

These should be set on the firing element (e.g. a button) and will be activated on click. Note that their keys can be changed using the options object (see below) toglit string|element required The target element

toglit-class string The class(es) to be toggled on the target element

toglit-triggers string The trigger(s) to be toggled on the target element

Arguments

selector string|element The container for toglit to work within. default: body

options object Options object (see below)

Options

enabled boolean If false the will disable all Toglit functionality. default: true

defaultToggleClass string The class(es) to be toggled on the target element if no data-togglit-class is provided. default: in

defaultTriggers string The trigger(s) to be toggled on the target element if no data-toglit-triggers is provided. default: in

dataToggleKey string The data attribute on the firing element that holds the query selector. default: toglit

dataClassKey string The data attribute on the firing element that holds the classes to toggle. default: toglit-class

dataTriggersKey string The data attribute on the firing element that holds the triggers on which to toggle. default: toglit-triggers

Methods

enable () Toglit Enables the toglit

disable () Toglit Disables the toglit

enabled () boolean returns true if the toglit is enabled

Events

toglitchange Fires when the class is added or removed from the target element. event.detail carries an object containing change (either add or remove) and class, the class which was changed.

toglitadd Fires when the class is added to the target element. event.detail carries an object containing class, the class which was added.

toglitadd Fires when the class is removed from the target element. event.detail carries an object containing class, the class which was removed.

NB: If using jQuery you may need to look at event.originalEvent.detail

Notes

• The data-toggle attribute can be any valid CSS selector. Internally Toglit uses querySelectorAll to find and iterate through targets. If more than one target is found, the class will be toggled on each item individually.
• data-class and defaultToggleClass can contain mutiple, space separated classes. Each will be toggled individually.
• Specifiying an element in the constructor of Toglit will limit all behaviour to elements within that element.
• This package is designed to be used with webpack and babel. The main entry in package json points to the ES6 module in /src. If this causes problems with your build process you can find the transpiled and bundled code in the /dist folder.