Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/KoalasHut/koala-html
Html entities helper
https://github.com/KoalasHut/koala-html
Last synced: 13 days ago
JSON representation
Html entities helper
- Host: GitHub
- URL: https://github.com/KoalasHut/koala-html
- Owner: KoalasHut
- License: mit
- Created: 2012-11-17T14:06:41.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-12-02T12:58:34.000Z (almost 9 years ago)
- Last Synced: 2024-10-10T17:52:01.156Z (about 1 month ago)
- Language: JavaScript
- Size: 99.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Koala HTML
==========
Just some HTML entities to help you build a HTML response like.
I made that inspired on web2py HTML helper, you can manipulate the elements however you like and call *.xml()* to compile it to xml.
Install
-------
`bower install koala-html --save`
Contribute
----------
`npm install`
Then you have the grunt commands:
* `grunt dist` run both commands below in sequence
* `grunt build` compile coffee file to JS
* `grunt min` uglify generated .JS and create map file
CDN
---
Now available on [jsDeliver](http://www.jsdelivr.com/#!koala.html)
Update
-------------------------------------------------------
Now all tags inside 'K' domain so it won\`t conflict with Q promise library
for example
This:
```javascript
DIV().xml(); // =>
DIV(A()).xml(); // =>
```
Will become this:
```javascript
K.DIV().xml(); // =>
K.DIV(K.A()).xml(); // =>
```
The rest is the same, all the functions and functionalities
TAGs are simple functions
-------------------------------------------------------
```javascript
DIV().xml(); // =>
DIV(A()).xml(); // =>
```
Append and Remove Elements
-------------------------------------------------------
```javascript
var el = DIV('H');
el.append(DIV('e')); // Insert a div inside el
el.append(DIV('ll')); // Insert another div in the end
el.div[2].append(DIV('0')); // Insert a div inside 'll'
console.log(el.xml());
```
```html
H
e
ll
0
```
Remove is the same all you must do is pass the index and how many elements you want to remove
```javascript
el.remove(1); // Remove element at Index 1 [div('e')]
// To remove both would be el.remove(1,2)
console.log(el.xml());
```
```html
H
ll
0
```
For more details on how to use append and remove pay close attention to [Splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) js function
Append list of Elements
-----------------------
Remove is the same all you must do is pass the index and how many elements you want to remove
```javascript
el.div.div.append(A('W'));
el.div.div.append([B('o'), B('r'), B('l') ,B('d')]);
console.log(el.xml());
```
```html
```
List of TAGs
------------
There is a json file used to generate the code for the tags, it can be updated and generated at anytime
Tags with */* at the end, means self-close
* a
* abbr
* acronym
* address
* applet
* area/
* article
* aside
* audio
* b
* base/
* basefont
* bdi
* bdo
* bgsound
* big
* blink
* blockquote
* body
* br/
* button
* canvas
* caption
* center
* cite
* code
* col/
* colgroup
* content
* data
* datalist
* dd
* decorator
* del
* details
* dfn
* dir
* div
* dl
* dt
* element
* em
* embed/
* fieldset
* figcaption
* figure
* font
* footer
* form
* frame
* frameset
* h1
* h2
* h3
* h4
* h5
* h6
* head
* header
* hgroup
* hr/
* html
* i
* iframe
* img/
* input/
* ins
* isindex
* kbd
* keygen/
* label
* legend
* li
* link/
* listing
* main
* map
* mark
* marquee
* menu
* menuitem
* meta/
* meter
* nav
* nobr
* noframes
* noscript
* object
* ol
* optgroup
* option
* output
* p
* param/
* plaintext
* pre
* progress
* q
* rp
* rt
* ruby
* s
* samp
* script
* section
* select
* shadow
* small
* source/
* spacer
* span
* strike
* strong
* style
* sub
* summary
* sup
* table
* tbody
* td
* template
* textarea
* tfoot
* th
* thead
* time
* title
* tr
* track/
* tt
* u
* ul
* var
* video
* wbr/
* xmp
If you want to change the tags, edit the tags.json file and use the generator script.
Everything is inside *tools/tag-generator*
Also delete everything in the coffee file below the comment:
`# GENERATED TAGS`
And run:
`python generate.py`
Verbosity that helps
--------------------
When creating list of elements they are mapped by the tagname so you can pick by the tagname[index]
Let's pick the structure bellow:
```html
![]()
```
Imagine populating it whith JSON data received from somewhere, would be painfull without some classes
and identifiers to pick the exact element, that's the why we mapped them
```javascript
// Create
var structure =
DIV({class: 'row'},
DIV({class: 'col'},
IMG({src: '', width: 30, alt: ''})
),
DIV({class: 'col'},
B(),
P()
),
DIV({class: 'col'},
H3(),
SMALL()
)
);
// Edit
// First Column
structure.div[0].img.src(data.image);
structure.div[0].img.alt(data.title);
// Second Column
structure.div[1].b.text(data.title);
structure.div[1].p.text(data.description);
// Third Column
structure.div[2].h3.text(data.header);
structure.div[2].small.text(data.smallText);
```
Much easier isn't?
I thougth so
The Future
==========
- Change render form: from string nodes to DOM
Considerations
==============
Wife and coffee
Thanks for reading