Like the standard element.classList but taking a namespace or prefix into account.
- Setup
- Import
- Setting the namespace
- Add classes
- Remove classes
- Check if a class name is set
- Toggle classes
- Replace classes
- Iterate trhough classes
- Query elements using class selectors
- Extend the base class
npm install --save nuffjs;
import {classList} from 'nuffjs';
import {classList} from 'nuffjs';
classList.setNs('js-');
// reading a previously set namespace
console.log(classList.getNs()); // 'js-'
import {classList} from 'nuffjs';
classList.setNs('js-');
const element = document.createElement('div');
classList(element).add('aaa');
// <div class="js-aaa"></div>
classList(element).add('bbb', 'ccc');
// <div class="js-aaa js-bbb js-ccc"></div>
const cl = classList(element, 'acme-');
cl.add('aaa', 'bbb');
// <div class="js-aaa js-bbb js-ccc acme-aaa acme-bbb"></div>
Somewhere in the document:
<div id="test" class="js-aaa js-bbb js-ccc acme-aaa acme-bbb"></div>
import {classList} from 'nuffjs';
classList.setNs('js-');
const element = document.querySelector('#test');
classList(element).remove('aaa');
// <div id="test" class="js-bbb js-ccc acme-aaa acme-bbb"></div>
classList(element).remove('bbb', 'ccc');
// <div id="test" class="acme-aaa acme-bbb"></div>
const cl = classList(element, 'acme-');
cl.remove('aaa', 'bbb');
// <div class=""></div>
Somewhere in the document:
<div id="test" class="js-aaa js-bbb js-ccc acme-ddd acme-eee"></div>
import {classList} from 'nuffjs';
classList.setNs('js-');
const element = document.querySelector('#test');
console.log(classList(element).contains('aaa')); // true
console.log(classList(element).contains('ddd')); // false
console.log(classList(element, '').contains('aaa')); // false
console.log(classList(element, '').contains('js-aaa')); // true
const cl = classList(element, 'acme-');
console.log(cl.contains('ddd')); // true
console.log(cl.contains('eee')); // true
Somewhere in the document:
<div id="test" class="js-aaa js-bbb js-ccc acme-ddd acme-eee"></div>
import {classList} from 'nuffjs';
classList.setNs('js-');
const element = document.querySelector('#test');
classList(element).toggle('aaa');
// <div id="test" class="js-bbb js-ccc acme-ddd acme-eee"></div>
classList(element).toggle('ddd', true);
// <div id="test" class="js-bbb js-ccc acme-ddd acme-eee js-ddd"></div>
classList(element, 'acme-').toggle('eee', false);
// <div id="test" class="js-bbb js-ccc acme-ddd js-ddd"></div>
classList(element).toggle('bbb');
// <div id="test" class="js-ccc acme-ddd js-ddd"></div>
Somewhere in the document:
<div id="test" class="js-aaa js-bbb js-ccc acme-ddd acme-eee"></div>
import {classList} from 'nuffjs';
classList.setNs('js-');
const element = document.querySelector('#test');
classList(element).replace('aaa', 'zzz');
// <div id="test" class="js-bbb js-ccc acme-ddd acme-eee js-zzz"></div>
classList(element, 'acme-').replace('eee', 'fff');
// <div id="test" class="js-bbb js-ccc acme-ddd js-zzz acme-fff"></div>
Somewhere in the document:
<div id="test" class="js-aaa js-bbb js-ccc acme-ddd acme-eee"></div>
import {classList} from 'nuffjs';
classList.setNs('js-');
const element = document.querySelector('#test');
for (const name of classList(element).values()) {
console.log(name);
}
// logs: aaa, bbb
for (const name of classList(element, 'acme-').values()) {
console.log(name);
}
// logs: ddd, eee
console.log(classList(element).length); // 3
console.log(classList(element, 'acme-').length); // 2
console.log(classList(element, 'test-').length); // 0
import {classList} from 'nuffjs';
classList.setNs('js-');
console.log(classList.className('aaa')); // js-aaa
console.log(classList.className('aaa', 'acme')); // acme-aaa
console.log(classList.className('aaa', '')); // aaa
console.log(classList.selector('aaa')); // .js-aaa
console.log(classList.selector('aaa bbb')); // .js-aaa.js-bbb
console.log(classList.selector(['aaa', 'bbb'])); // .js-aaa.js-bbb
import {ClassList} from 'nuffjs';
class MyClassList extends ClassList {}