classList update
I’ve just updated the npm module https://www.npmjs.com/package/classlist-helper to 1.1. It now has full unit testing.
Introduction
A Element.classList method helper function that can be curried for functional programing.
Example
Task: Add the class active to all list elements.
<ul> <li class="item">item</li> <li class="item">item</li> <li class="item">item</li> <li class="item">item</li> </ul>
Setup:
// import various libs
import { map, curry } from 'lodash';
let classListHelper = require('classlist-helper');
// Get the list of elements that you want to change
let nodeList = document.querySelectorAll('.item'); // 4 html elements
Usage:
// Create Active method with classListHelper.
let setActive = curry(classlistHelper)('active')('add');
// Set all elements to Active.
map(nodeList, setActive);
After running this, the html will look like:
<ul> <li class="item active">item</li> <li class="item active">item</li> <li class="item active">item</li> <li class="item active">item</li> </ul>
Other example methods
// Remove a Class
let setInActive = curry(classlistHelper)('active')('remove');
// Add a Class
let setActive = curry(classlistHelper)('active')('add');
// Toggle a class
let toggleActive = curry(classlistHelper)('active')('toggle');
// Add multiple classes / Pass an Array
let setMultiple = curry(classlistHelper)(['active','updated'])('add');
// Test all elements in an Array for a class
let anyActive = curry(classlistHelper)('active')('contains');
// Replace a class with another.
let setInactive = curry(classlistHelper)(['active', 'inactive'])('replace');
Note: For more examples please check the unit tests.