Adarna is a suite of classes and functions that enable the development of dynamic web user interfaces, using purely javascript syntax.
The Template class is the primary object in Adarna that is used to generate and manipulate DOM elements.
1.) The example code below will produce the corresponding HTML DOM elements:
import {Template} from './adarna.js';
const t = new Template();
t.div({class:'row'},()=>{
t.div({class:'col6'},()=>{
t.input({type:'text',id:'username'});
});
t.div({class:'col6'},()=>{
t.input({type:'password',id:'password'});
});
});Result:
<div class="row">
<div class="col6">
<input type="text" id="username"/>
</div>
<div class="col6">
<input type="password" id="password"/>
</div>
</div>2.) In order for the Template object to be visible, we use the render() function to attach the object onto the HTML
<html>
<head></head>
<body>
<div id="app"></div>
<script type="module">
import {Template,render,$el,$q} from './adarna.js';
const app = $q('#app').first();
const t = new Template();
let ui = t.div({class:'row'},()=>{
t.div({class:'col6'},()=>{
t.input({type:'text',id:'username'});
});
t.div({class:'col6'},()=>{
t.input({type:'password',id:'password'});
});
});
$el.append(ui).to(app);
</script>
</body>
</html>3.) You can use the compile() method of the Template class to combined all generated elements in one parent document fragment.
import {Template,render} from './adarna.js';
const app = document.querySelector('#app');
const t = new Template();
let data = {1:'yes',0:'no'};
t.div({class:'row'},()=>{
t.div({class:'col6'},()=>{
t.input({type:'text',id:'username'});
});//div
t.div({class:'col6'},()=>{
t.input({type:'password',id:'password'});
});//div
});//div
/******************************************/
t.div({class:'row'},()=>{
t.div({class:'col12'},()=>{
t.select(()=>{
for(let key in data){
let text = data[key];
t.option({value:key},text);
}
});//div
});//div
});//div
//Combined all DOM elements into one document fragment
let ui = t.compile();
render(ui).to(app);this will result into a document fragment that contains the HTML elements below.
<div class="row">
<div class="col6">
<input type="text" id="username"/>
</div>
<div class="col6">
<input type="password" id="password"/>
</div>
</div>
<div class="row">
<div class="col12">
<select>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>4.) You can use a JSON object with camelcase notion as parameter for the in-line style attribute.
import {Template} from './adarna.js';
const t = new Template();
t.div({
style:{
backgroundColor:'blue',
color:'white'
}
},'Hello World');This will generate the HTML element:
<div style="background-color:'blue';color:'white'">
Hello World
</div>5.) DOM elements are generated by calling the tag name as a method of the Template object. This will return an HTML object with additional custom properties and methods. The paramters used in the method can be arranged in the following configuration below.
Type 1
/*
Parameter 1: Object for attributes
Parameter 2: Arrow function callback for inner HTML
*/
t.div({},(el)=>{
});Type 2
/*
Parameter 1: Object for attributes
Parameter 2: String for inner text
*/
t.div({},'Inner text');Type 3
/*
Parameter 1: Arrow function callback for inner HTML
*/
t.div((el)=>{
});Type 4
/*
Parameter 1: String for inner text
*/
t.div('Inner text');6.) Handling of events can be done using regular javascript methods
let button = t.button('I am a button');
button.onclick = (e)=>{
alert('Hello World');
}
button.addEventListener('click',(e)=>{
alert('Hello again!');
});7.) In order to create an independent text node a special method is available called txt().
t.span(()=>{
t.txt('Hello World');
});This will produce the result
<span>Hello World</span>8.) You can declare conditional statements or complex logic inside the arrow callback function to produce desired results when generating an element.
let test = Math.random() < 0.5;
t.div(()=>{
if(test){
t.txt('Hello World');
}else{
t.h1('Hakuna Matata');
}
});This code will produce either
<div>Hello World</div>or
<div>
<h1>Hakuna Matata</h1>
</div>