Abstract classList implementation for any environment

In this project realized two classes:

1. ClassList – it's full implementation methods of browser classList property, except that this class is abstract and not tied to DOM. You can just add and remove classes in list, then get result string.

2. CNClassList – is the inheritor of previous class. The main goal of this class is synchronize classes list with className property of the same object. Intended for using with NativeScript and TypeScript if you wish.

Installation

npm install cnclasslist

Include

You can use ClassList and CNClassList both in browser and in Node.js as CommonJS-module:

const ClassList = require('cnclasslist').ClassList;
const CNClassList = require('cnclasslist').CNClassList;

Or in ES2015 format:

import { ClassList, CNClassList } from 'cnclasslist';

ClassList

This class implementing full API of standard classList from browser.

Constructor

You can pass list of classes when creating instance of ClassList.

new(...classNames: Array<string>): ClassList;

Example:

let cl = new ClassList('first', 'second');

Method toString

Returns string representation of classes list.

toString(): string;

Example:

let cl = new ClassList('first', 'second');
cl.toString(); // → 'first second'

Method add

Adds classes.

add(...classNames: Array<string>): void;

Example:

let cl = new ClassList();
cl.add('first', 'second');
cl.toString(); // → 'first second'

Method remove

Removes classes.

remove(...classNames: Array<string>): void;

Example:

let cl = new ClassList('first', 'second', 'third');
cl.remove('first', 'third');
cl.toString(); // → 'second'

Method contains

Checks that in the list contains class with given name.

contains(className: string): boolean;

Example:

let cl = new ClassList('first', 'second');
cl.contains('first'); // → true
cl.contains('third'); // → false

Method toggle

Adds class if his was not and removes if him it is. With parameter force class may be only added or only removed accordingly his value.

toggle(className: string, force?: boolean): boolean;

Example:

let cl = new ClassList('first');
cl.toggle('second');
cl.toString(); // → 'first second'
cl.toggle('second');
cl.toString(); // → 'first'

cl.toggle('first', true);
cl.toString(); // → 'first'
cl.toggle('first', false);
cl.toString(); // → ''

Method item

Returns class name for given index.

item(index: number): string;

Example:

let cl = new ClassList('first', 'second');
cl.item(1); // → 'second'
cl.item(2); // → null

Property length

Number of classes.

length: number;

Example:

let cl = new ClassList('first', 'second');
cl.length; // → 2

CNClassList

API of this class exactly as ClassList, but as addition he do synchronizing list of classes with property className of the same object.

Constructor

You should pass object when creating instance of CNClassList.

interface NodeInterface {
    className?: string;
}
new(node: NodeInterface): CNClassList;

Example:

let node = { className: '' };
let cl = new CNClassList(node);

Example of synchronization

let node = { className: 'first second' };
let cl = new CNClassList(node);
cl.toString(); // → 'first second'
cl.add('third');
node.className; // → 'first second third'
node.className = 'fourth';
cl.toString(); // → 'fourth'