https://github.com/promatik/cantil-js

A tiny javascript framework with the helpers you need to boost your productivity
https://github.com/promatik/cantil-js

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/promatik/cantil-js
• Owner: promatik
• License: mit
• Created: 2020-12-28T22:46:31.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-06T04:05:31.000Z (7 months ago)
• Last Synced: 2024-05-06T21:02:54.719Z (6 months ago)
• Language: JavaScript
• Size: 481 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        




  

  

  

  


  

  



# Cantil JS

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

### Install

```js

npm i cantil

```

### Usage

```js

require('cantil');

```

### Methods

---

#### `query` / `queryAll`

_Shortcut for `document.querySelector` and `document.querySelectorAll`_

```js

// query the first 
 element

let p = query('p');

// query all 
 elements

queryAll('p');

// query all  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 🎉_

```js

queryAll('p')

  .filter(p => p.classList.contains('active'))

  .map(p => p.innerText)

  .join(', ');

```

---

#### `index`

_Position of the element relative to its parent_

```js

p.index();

```

---

#### `sibling` / `siblings`

_Query the siblings of the element_

```js

// query the first 
 sibling of 



p.sibling('h1');

// query all 

 siblings of 



p.siblings('h1');

```

---

### `onDomReady`

_Promise for DOM ready_

```js

import { onDomReady } from 'cantil';

init: () => {

  console.log("App ready");

};

onDomReady().then(init);

```

---

### `template`

_Clones a DOM template making it ready to use_

```js

import { template } from 'cantil';

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

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

```

---

### `once`

_Ensures the callable runs only once_

```js

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](LICENSE.md) for details.