Bruut

# Bruut Toggle JS

This plugin adds the functionality to toggle classes to elements, as well as remembering the current state in the LocalStorage.

# Installation

Init or install the plugin:

TIP

Since version 2.0.0, the default export is changed. Read about legacy imports below.

By default, the package exports a function that attaches the Toggle instance.

npm install --save bruut-toggle@latest

# Usage

Import Toggle into your project and run Toggle.

import Toggle from 'bruut-toggle';
Toggle;

# Legacy import (1.x)

import Toggle from 'bruut-toggle';

new Toggle({
	attribute 			: 'data-toggle',
	storageKeyPrefix 	: 'data-toggle__',
	defaultToggleClass 	: 'is-active',
	elementKey 			: 'who',
	classKey 			: 'class',
	storageKey 			: 'save',
	callbackKey			: 'callback',
});

# Barebones example

a(href = "#" data-toggle) Click me

When used like this, the plugin will:

  • Toggle the class, set in the configuration options object under defaultToggleClass to the element with the data attribute. The default class is is-active.

# All options in the data attributes

a(href = "#" data-toggle = '{"who" : "", "class" : "", "save" : "", "callback" : "myFunc"}') Click me

Please note: If you use this expanded version of data-toggle, that you must provice a valid jSON parseable string.

Key Default Explaination
who Optional (default: this) The ‘who’ property can take many different selectors:
  • this - Select the <a> element with data-toggle on it
  • parent - Select the parentNode
  • parent .selector / parent #selector - Select the first parent element that matches this query
  • parent li / parent div - Select the first parent element that matches this html element query
  • .selector - Select all selectors that match this query
class Optional (default: is-active) The class property takes a string as class name that will be toggled
save Optional (default: none) The save property takes a string that will be saved in the browser’s LocalStorage. It will be removed from LocalStorage if the toggle is back to it’s default state.
callback Optional (default: none) The callback property takes a string that will be called as a function on click on the element. Make sure this function exists by adding it in the window (window['myFunc'] = (instance) => {}.

# Examples

a(href = "#" data-toggle = '{"who" : "parent .gridComponent"}') Click me

This will find a parent with the class .gridComponent element with the default class (is-active).

a(href = "#" data-toggle = '{"class" : "myNewClass"}') Click me

This will toggle the class myNewClass of the <a> element

a(href = "#" data-toggle = '{"save" : "isElementClicked"}') Click me

This will save the current state of the toggled element on each click in the LocalStorage with the key isElementClicked. The value is the value of the data-attribute, for easy reference to the plugin.

a(href = "#" data-toggle = '{"who" : ".mySelector", "class" : "myNewClass", "save" : "areSelectorsClicked, "callback" : "myFunc"}') Click me

This will toggle the class myNewClass on all elements with the class mySelector. It also saves the state in the LocalStorage with key areSelectorsClicked. When there's a function myFunc present in Window, it will be called after each click.

← Bruut Toolkit →