https://github.com/co2-git/cinco
HTML5 as es6 objects
https://github.com/co2-git/cinco
Last synced: about 1 year ago
JSON representation
HTML5 as es6 objects
- Host: GitHub
- URL: https://github.com/co2-git/cinco
- Owner: co2-git
- Created: 2015-05-16T15:38:34.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-02-12T19:01:00.000Z (over 10 years ago)
- Last Synced: 2025-02-01T16:23:29.713Z (over 1 year ago)
- Language: JavaScript
- Size: 34.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
cinco
===
HTML5 as ES6 objects - easy to manipulate and render. Handy for rapid prototyping. Is isomorphic.
# Overview
Example on how to create a HTML5 document and then render it to string
```js
import { Document, Element } from cinco;
// Create a new HTML5 document
let document = new Document()
.add(
new Element('title').text('Good morning')
);
// Update DOM
if ( new Date().getHours > 12 ) {
document.find('title').get(0).text('Good evening');
}
// Render to string
document.render(); // see results below
```
```html
Good morning
```
# ES5 support
```js
var cinco = require('cinco/dist'),
Element = cinco.Element,
Document = cinco.Document;
```
# Element
new Element(
{ String | Function } selector,
{ Object | Function }? attributes,
{ [Element] | Elements | Function | [Function] }? children
)
```js
// Create a h1 element
let myElement = new Element('h1');
// Get HTML source as string
myElement.render() //
```
You can declare attributes in the selector as well:
```js
new Element('h1#foo.bar.barz'); //
```
# Attributes
Attributes are passed as an object:
```js
new Element('a', { 'href': '/' }); //
// You can also use the `attr` method
new Element('a').attr('href', '/'); //
// Pass a function
```
You can also pass functions:
```js
var props = {
signedIn: true,
user: {
id: 123
}
}
new Element('a', { href: () => '/' }); //
new Element('a', { href: async() => await async() }); // You can use async functions
```
# Manipulate text
```js
let p = new Element('p');
// Setter
p.text('Hello world!') //
Hello world!
// Gettter
p.text(); // Hello world!
```
# Conditional rendering
The conditions, if one evaluated to false, will skip the rendering of the element.
```js
new Element('p').condition(true); //
new Element('p').condition(false); //
// You can use functions
let element = new Element('p').condition(async() => await async());
// Whether or not all conditions return to true
element.satisfies(); // true|false
```
# Append children
```js
new Element('foo').add(new Element('bar')); //
```
# Clearing all children
```js
new Element('foo').add(new Element('bar')).empty(); //
```
# Remove a child
```js
let form = new Element('form');
let fieldset = new Element('fieldset');
form.add(fieldset);
form.render(); //
// Act like an array filter() => true gets removed
form.remove(child => child.is('fieldset'));
form.render(); //
```
# Find
Utility to find and manipulate elements. Returns `Elements`
```js
let form = new Element('form').add(
new Element('fieldset').add(
new Element('legend').text('Legend'),
new Element('section.form-group').add(
new Element('button')
)
)
);
// Find button and add text to it
form.find('button').each(button => button.text('Click me!'));
// Find an element by text
form.findByText('Click me!');
// Find an element by text using a regex
form.findByText(/click/i);
```
# Classes
```js
let elem = new Element('.c1', { className: 'c2 c3' }); //
let elem = new Element('.c1', { className: ['c2', 'c3'] }); //
let elem = new Element('.c1').addClass('c2', 'c3'); //
elem.removeClass('c3'); //
elem.hasClass('c3'); // false
```