classico

classico

A tiny (253B) shim for when Element.classList cannot be used~!

This module exposes three module definitions:

• ES Module: dist/classico.mjs
• CommonJS: dist/classico.js
• UMD: dist/classico.min.js

Install

$ npm install --save classico

Usage

import { remove, toggle } from 'classico';

const $ = document.querySelector.bind(document);

const isOpen = 'menu__open';

$('.menu-nav').onclick = () => {
  toggle(document.body, isOpen);
};

$('.menu-overlay').onclick = () => {
  remove(document.body, isOpen);
};

API

toRegex(str)

Returns: RegExp

Converts the given String into a RegExp – used within classico.has and classico.replace.

has(node, str)

Returns: RegExp

Checks if the Element's className contains the class value – akin to Element.classList.contains().

add(node, ...str)

Add the class value(s) to the Element's className – akin to Element.classList.add().

Note: Classico will not append a className if the Element already contains it.

let elem = document.body;

// add one class
classico.add(elem, 'foo');

// add multiple classes
classico.add(elem, 'foo', 'bar', 'baz');
//=> Only 'bar' & 'baz' were added this time!

remove(node, ...str)

Remove the class value(s) to the Element's className – akin to Element.classList.remove().

let elem = document.body;

// remove one class
classico.remove(elem, 'foo');

// remove multiple classes
classico.remove(elem, 'bar', 'baz');

replace(node, oldClass, newClass)

Replaces an existing class with a new class – akin to Element.classList.replace().

Important: If newClass is not defined then oldClass will be removed entirely!

toggle(node, str, force)

Toggles the existence of a class for an Element – akin to Element.classList.toggle().

When force is not defined, the str value will be added if not already and removed if it existed.

If force is defined and truthy, the str value will be added.
If force is defined and falsey, the str value will be removed.

License

MIT © Luke Edwards