curvature/README.md

![avatar](https://avatars3.githubusercontent.com/u/640101?s=80&v=4)

# Curvature.js

v.0.0.68

![curvature](https://img.shields.io/npm/v/curvature?color=900&label=seanmorris%2Fcurvature&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAYAAACGVs%2BMAAAHb0lEQVR42pVWa1CU1xk2dSYzHSs4aEsEHZ0VAYEFBBGQAcRba5CxtUJpbeiIN2BdLgLLrizKQkx0ubhDMBCuy3UBuQuIGtAogSQ1pK026bSdtjO10TbRH06bJqPZp%2Bc5zLoyDJX9Zp7Z833f%2Bz7Pe97L%2BXbRPNdLtoVCoXBetWrVYwE4iMf0ncXpyOXm5pYsMLZ69eor%2Fv7%2BTwICAiB%2BFwTaKpXKJ8uXL7%2BydOnSMYHkBUjaI3R1dY3z8PC46%2BXlBW9vb4SGhiIsLMwqgAWA9tbw8HDs3bsX%2B%2FfvR0xMzF1BG7egbLi4uPiuWbPmEXeyZcsWK8U3b968YISEhCAwMJC%2BaGhowOjoqDUnJ4cbeUTu%2BXRtO1eyfhs3boRd2HEEBQXJAKqqqtDe3g6LxQKj0QhRTixZskQ5X%2Br3%2BPn53T9z5gx27txJEoeFufNDhw6hoqICZWVlaGxsRHNzM1paWvjLZ%2BS9v3jx4j2ztJ2cnBKjo6Ons7Ky0NHRgd27d5PMobSz8Tw9PaFWq9Hf389dS9Gmpia0traipqYGmZmZ0nbt2rXTosETn6Vg2bJlEwkJCRgZGbGazWZs376dhAsWZ7r37duHuLg45OfnU5zCNnBTzIqN08rGFgFMPAvA2dl5mN3a3d0NBhAbG4vg4GCSLyjtO3bs4G4pxHTPErdloLS09FlfcbpWrlw5PCsAZqCvr48OsnsTExPh6%2Bv7wmajjSifrHdbW9sccQbFrHAs6cMg7AHYu3%2BYZKxfZ2cnBgYGUFtbi5SUlOeb0XYe2MRlwxUWFsJgMDBzzMIc8cHBQWi1Wvj4%2BNCP%2FnMDcHd3HxaNgcjISOh0Ooni4mIcO3aMJxrTLMX9lP5Y77WBa7nzgoICClBoljADYUb0er1EUlISA54%2FAN7YTjyK2Y5dOnAkd%2B3ahZDNoQgO9EfoRhGQOCcio6JQVFTEjM0R5%2BzX19cjIiKCO7eJ%2F%2F8A%2BNCWXoJBsA9YVxL6Bgbj3PEDuNtWglfc3FFWXk5xe9PZA%2BAUsI94BPNQI5%2FjATADycnJaBdkASFhqNGr8O%2BxRmDKgvdrixETHQV3hSd%2B8csk0TP9FJfCGo2G5whHknxzJokjq%2FBYD2eXFfYAXv6eU%2F9axTq%2BtDWb%2BA1B1NZtSPhZIk4fScDD0Rrgd33AR53AdDeqNIdRfDQe6Un78fOkg1J8aGgIKpWKO2Qp54gT3qIkuyM24fCrUf1S%2FKYxM%2BhA7NbJ6LAQ%2BPj5zzSb2L2Xjy%2BUvj44uCdGCuI3vcAHlhlMtgO%2F7QP%2BcgUT1aexbUsI8vUFePPsWcTHx7Puc74lvCecV7iiIGkv%2FtBgmOzIPRi0qFOXjCfXxQwXZ8JV1JZRe673gMuKH0CVGAd80ounE214cquV4JoB2CDfPxiuhtc6BVxfWSn%2FjIhP%2BbynJjVaizLw9XgDqC0D%2BGLobeDXXRg5r5MEU7VFePqeGVPNpdDm5iAvO0siIz0dVW%2BeAj6%2BKDNhZQDMyFQ7vhypRl56KuIP%2FAq7Xt0Dl%2B%2B7InjTJvYBISfHzd0dVyv0wEdd%2BNelC%2FYAPu9%2FC%2Fj0Eu4N1%2BBHsXGoP3cKQ3XlaBC%2F53VqjDeU4mZTOSZbTLhWW4o642lmQgTdyZ6QgXS%2FfQ5TbZW40%2FMOJpvLYT6lgmLdOmzwVSJAlJSN90MR2P3LddSipj2Afw5eAO4MWL%2B81og3dNk4kpKGo0ePorIgC3%2B2lMwIfdIN3G7HZ0MXUPm6Xgb09Xst%2BEaUZby%2BBHnqVNEmJpEdi%2BDql1nSH0pAUIASCk9vbIvZKrhP4OG7ZqlFTVsA9%2F7eff6bbyda8ehyNcYrTiInMx0XCjLxJ4tRiF6cqfWHXZjqPofe5pNi3YnszAzcaCzDrWYTUlNSMWbSoa4yA7f7S2krxxWfXULuaz9GeEQkCk%2FmSe6HQoNa1KT2InGWf2fwdMr1Hv0R3CzPgfX9dug12bhaZxTp7bA323QvLEY1tGlx4t4Cgy4XqarjSBMoFGs2aJ54Rxva0kcGMdmG4eqz0OdJbqlBLWpSW45iU06Sf606MXK0OFV1y5SHdFWa8Kuw4k7fTKMRH%2Fegy5QBQ%2B4%2BmZX8vFwYTqRJ6LUaOapFmp%2FShrb0kYL4dEDso9KqFpzkpga1qCnF8dw%2F1K748O82Z79WWq5Vf2suOYXf91ZZMX2RPSAEevD55Qpcqy%2FASE0JjFpRgmoDwTWf8R1taCt96EsOcpGT3NSg1nPac29umDSW13NUX5kMOvxjpA5%2Fu1SDvw6%2Bgy%2BumnHbUikylIrL5Vp8NdZAcM1nfEcb2tJH%2BpKDXOScpfWi61p5blWD4QRSj6uhVkuImquRf0KN0TIN%2FnvdDHzYQXDNZ3xHG5u99CUHuRY5enVoDzbdMGnxcLzFyp0Q9wQeiDn%2Bj9i1rckIrvmM72hjs6cvOcjlcAD1xxM3XTdmdf2x5Q3OND9EVn4PCNaYjcjTk%2BCaz2zvaUsf%2BpKDXA5I22t0%2FvBPNoiRmbjXY3r6YOAtcXpVLAi0pQ99yfEcp%2BNBtKoPOIkD47EAHMRj%2Br5I%2FH8NrWvzntWI2gAAAABJRU5ErkJggg%3D%3D&style=rounded)
[![Apache-2.0 Licence Badge](https://img.shields.io/npm/l/cv3-inject?logo=apache&color=770077&style=rounded)](https://github.com/seanmorris/cv3-inject/blob/master/LICENSE)
![Size badge](https://img.shields.io/github/languages/code-size/seanmorris/curvature-2?logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAQAAACFzfR7AAABF0lEQVQoFQXBQWvOAQDA4ef/7o29YWtqKU7ExWE5OIvm4LKcnXwD7aQ0N/kAczO1i1KOO0xJvQojaTm4KbJabnJysLSf5wFAa603CUB322yOAAitVT86BTTQ1+oJDYDQcv+qFRr3vC1ooYPqDkHoYgfVKmnSfhG62t/qBkHn2q8ekjRpryB0v/rZ2eh4r6tpY5pp3Gx7RTONoJfVLnpQfekYtNG0832rRj3tEaT31bOxQ5wc/oATrnnniEMfXfaZDFrAoEk71XajNN9OVVW7HYVeVZ9AF/pd3YPm267qbYs0tF597wygpaquQ7Nt9QLoVlWXCEK3q1oCCF2p6iYBpKGN6kNzATrdr2qVAACa9rgRQKPetAnAf1jX/qSkN8aIAAAAAElFTkSuQmCC&style=rounded)

[![CircleCI](https://seanmorris-badger.herokuapp.com/curvature-2/test?timed=1&label=Build)](https://circleci.com/gh/seanmorris/curvature-2)

Curvature is a lightweight javascript framework with an emphasis on **straightforwardness**.

This document serves only as an overview. For more in-depth, interactive documentation, see http://curvature.seanmorr.is/.

## Getting started

Install with npm:

```sh
$ npm install curvature
```

## Creating Views

Create a view class:

```javascript
import { View } from 'curvature/base/View';

class MyView extends View
{
	constructor()
	{
		super();

		this.template = `<b>Hello, world!</b>`;
	}
}
```
or an anonymous view:

```javascript
import { View } from 'curvature/base/View';

const view = View.from(`<b>Hello, world!</b>`);

```

Render a view directly into an existing tag:

```javascript
import { View } from 'curvature/base/View';

const view = View.from(`<b>Hello, world!</b>`);
const div  = document.querySelector('div.hello');

view.render(div);
```

Render a view to the `<body>` tag as soon as the DOM is ready:

```javascript
import { View } from 'curvature/base/View';

const view = View.from(`<b>Hello, world!</b>`);

document.addEventListener('DOMContentLoaded', () => {
	const body = document.querySelector('body');
	view.render(body.element);
});

```
## Separating Templates

Writing HTML into a javascript string can be annoying.

Use the `rawquire` babel macro to import templates directly from html files, and maintin your syntax highlighting.

```sh
$ npm install rawquire
```

**my-template.html**:
```html
<p>This is my template!</p>
```

**MyView.js**:
```javascript
import { rawquire } from 'rawquire/rawquire.macro';
import { View } from 'curvature/base/View';

class MyView extends View
{
	constructor()
	{
		super();

		this.template = rawquire('./my-template.html');
	}
}
```

## Variable Binding

Use the `cv-bind` attribute, or `[[squarebrackets]]`  to insert variables from the `view.args` property into your templates:

**my-template.html**
```html
<p><span cv-bind = "prefix"></span> [[time]]</p>
```

**MyView.js**
```javascript
import { rawquire } from 'rawquire/rawquire.macro';
import { View } from 'curvature/base/View';

class MyView extends View
{
	constructor()
	{
		super();

		this.args.prefix = 'The time is';

		this.onInterval(1, ()=>{
			this.args.time = Date.now();
		});

		this.template = rawquire('my-template.html');
	}
}
```

## Event Listeners

Use the `cv-on` attribute to listen for events on your view object:

**clickable.html**
```html
<button cv-on = "click:click(event)">click me!</button>
```

**Clickable.js**
```javascript
import { rawquire } from 'rawquire/rawquire.macro';
import { View } from 'curvature/base/View';

class Clickable extends View
{
	constructor()
	{
		super();

		this.template = rawquire('./clickable.html');
	}

	click(event)
	{
		alert('button clicked!');
	}
}
```

Or, for anonymous views:

```javascript
import { View } from 'curvature/base/View';

const view = View.from(`<button cv-on = "click:click(event)">click me!</button>`);

view.click = (event) => {
	alert('button clicked!');
};

```

If the event & method names match, you can just specify it once.

```javascript
import { View } from 'curvature/base/View';

const view = View.from(`<button cv-on = "click(event)">click me!</button>`);

view.click = (event) => {
	alert('button clicked!');
};

```

Multiple listeners may be provided in a ";" separated list:

```javascript
import { View } from 'curvature/base/View';

const view = View.from(`<button cv-on = "click(event);hover(event)">click me!</button>`);

view.click = (event) => {
	alert('button clicked!');
};

view.hover = (event) => {
	console.log('button hovered!');
};

```