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 withclassNameproperty of the same object. Intended for using with NativeScript and TypeScript if you wish.
npm install cnclasslistYou 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';This class implementing full API of standard classList from browser.
You can pass list of classes when creating instance of ClassList.
new(...classNames: Array<string>): ClassList;Example:
let cl = new ClassList('first', 'second');Returns string representation of classes list.
toString(): string;Example:
let cl = new ClassList('first', 'second');
cl.toString(); // → 'first second'Adds classes.
add(...classNames: Array<string>): void;Example:
let cl = new ClassList();
cl.add('first', 'second');
cl.toString(); // → 'first second'Removes classes.
remove(...classNames: Array<string>): void;Example:
let cl = new ClassList('first', 'second', 'third');
cl.remove('first', 'third');
cl.toString(); // → 'second'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'); // → falseAdds 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(); // → ''Returns class name for given index.
item(index: number): string;Example:
let cl = new ClassList('first', 'second');
cl.item(1); // → 'second'
cl.item(2); // → nullNumber of classes.
length: number;Example:
let cl = new ClassList('first', 'second');
cl.length; // → 2API of this class exactly as ClassList, but as addition he do synchronizing list of classes with property className of the same object.
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);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'
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent