cnclasslist v1.0.0
Abstract classList
implementation for any environment
In this project realized two classes:
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.CNClassList
– is the inheritor of previous class. The main goal of this class is synchronize classes list withclassName
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'
8 years ago