cantil
Cantil JS is a tiny framework with the helpers you need to boost your productivity.
A tiny framework with the helpers you need to boost your productivity.
npm i cantilrequire('cantil');Shortcut for document.querySelector and document.querySelectorAll
// query the first <p> element
let p = query('p');
// query all <p> elements
queryAll('p');
// query all <a> inside p
p.queryAll('a'); // or queryAll('p:first-child a');By default NodeList and HTMLCollection don't have Array metods like map, filter or reduce (among others).
Cantil JS enables these methods 🎉
queryAll('p')
.filter(p => p.classList.contains('active'))
.map(p => p.innerText)
.join(', ');Position of the element relative to its parent
p.index();Query the siblings of the element
// query the first <h1> sibling of <p>
p.sibling('h1');
// query all <h1> siblings of <p>
p.siblings('h1');Promise for DOM ready
import { onDomReady } from 'cantil';
init: () => {
console.log("App ready");
};
onDomReady().then(init);Clones a DOM template making it ready to use
import { template } from 'cantil';
let element = template('template#example');
query('section').append(element);Ensures the callable runs only once
import { once } from 'cantil';
let callOnce = once(() => {
console.log('callOnce');
});
callOnce();
callOnce();
callOnce();Copyright © 2020 António Almeida (promatik) and contributors
Licensed under the MIT license, see LICENSE.md for details.