Cantil JS

A tiny framework with the helpers you need to boost your productivity.

Install

npm i cantil

Usage

require('cantil');

Methods

query / queryAll

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');

NodeList / HTMLCollection Array Prototype

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(', ');

index

Position of the element relative to its parent

p.index();

sibling / siblings

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');

onDomReady

Promise for DOM ready

import { onDomReady } from 'cantil';

init: () => {
  console.log("App ready");
};

onDomReady().then(init);

template

Clones a DOM template making it ready to use

import { template } from 'cantil';

let element = template('template#example');

query('section').append(element);

once

Ensures the callable runs only once

import { once } from 'cantil';

let callOnce = once(() => {
  console.log('callOnce');
});
 
callOnce();
callOnce();
callOnce();

License

Copyright © 2020 António Almeida (promatik) and contributors

Licensed under the MIT license, see LICENSE.md for details.