Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neooblaster/html
HTML is a JavaScript class which simplify HTMLElement construction with JSON Structure
https://github.com/neooblaster/html
Last synced: 6 days ago
JSON representation
HTML is a JavaScript class which simplify HTMLElement construction with JSON Structure
- Host: GitHub
- URL: https://github.com/neooblaster/html
- Owner: neooblaster
- License: gpl-3.0
- Created: 2017-03-20T21:09:26.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-14T08:10:59.000Z (over 6 years ago)
- Last Synced: 2024-04-24T16:24:26.405Z (9 months ago)
- Language: JavaScript
- Size: 1.45 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML
## Summary
## Introduction
HTML is a JavaScript "class" which simplify HTMLElement construction with a JSON Structure
Below, an example of HTML code generation from a simple JSON structure :
````js
new HTML().compose({
name: "div",
classList: ["cl1", "cl2"],
attributes:{
style: "background-color: red;",
"data-attr": "attr-value"
},
properties: {
innerHTML: "Text with HTML balise"
}
});
````
Will result :
````html
Text with HTML balise
````
## HTML Methods
### ``compose``
The ``compose`` method will generate the corresponding HTMLElements and return.
````js
var structure = {};
new HTML().compose(structure);
````
### ``composeTemplate``
## Structure declaration
## Declaration
Below, the algorithmic declaration :
````
STRUCTURE strListJSON
name: typeof String
value: typeof Mixed
END STRUCTURE
STRUCTURE strListFunction
function: typeof function (callable)
args: typeof Array
END STRUCTURE
STRUCTURE strBuildHTML -- All attributes are optionnal
name: typeof String -- Stand for resulting tag name
element: typeof HTMLElement -- to pass an existing HTMLElement
(priority on name)
classList: typeof Array of String -- List of CSS classes to append
attributes: typeof Object using strListJSON -- List of HTML attribute to append
properties: typeof Object using strListJSON -- List of HTML properties to append
children: typeof Array of strBuildHTML -- Childs element to build and to append
functions: typeof Array of strListFunction -- List of function to execute before
returning generated HTMLElement
END STRUCTURE
````
## ``name``
The attribute ``name`` of the structure `strBuildHTML` define the HTML tag to build.
If the attribute ``name`` is missing, the default tag is `div`.
````js
new HTML().compose({name: 'section'});
````
Will result :
````html
````
## ``element``
The attribute ``element`` of the structure ``strBuildHTML`` allows to bind an existing
HTMLElement to manipulate with the class ``HTML``.
````html
Title
Paragraph
````
````js
var element = document.querySelector('#article');
new HTML().compose({
element: element,
classList: ['font-size', 'text-decoration']
});
````
Will result :
````html
Title
Paragraph
````
## ``classList``
The attribute ``classList`` of the structure `strBuildHTML` serves to add values provided
in the HTML attribute ``class``.
````js
new HTML().compose({classList: ['class-1','class-2', 'class-3']});
````
Will result :
````html
````
## ``attributes``
The attribute ``attributes`` of the structure `strBuildHTML` allows you to add
any HTML attribute with specified value (of type ``String`` or `Number` )
````js
new HTML().compose({name: 'th', attributes: {colspan: 2}});
````
Will result :
````html
````
## ``properties``
The attribute ``properties`` of the structure `strBuildHTML` is similare to
``attributes``. It allows you to add/edit HTMLElement properties as-in a JavaScript script
````js
new HTML().compose({properties: {textContent: 'Text Here'}});
````
Will result :
````html
Text Here
````
## ``children``
The attributes ``children`` of the structure `strBuildHTML` is a list of declaration
of type ``strBuildHTML`` which will be appended to the current element.
````js
new HTML().compose({
name: 'table',
children: [
{
name: 'tr',
children: [
{name: 'th', properties: {textContent: '#'}},
{name: 'th', properties: {textContent: 'First Name'}},
{name: 'th', properties: {textContent: 'Last Name'}},
{name: 'th', properties: {textContent: 'Age'}}
]
}
]
});
````
Will result :
````html
#
First Name
Last Name
Age
````
## ``functions``