Javascript framework / library - all in one JS,HTML,STYLE.
npm i --save jfjs
JF is Framework / Library all in one place. JF works with json type of structured javascript objects and converts that into HTML5. You can create rich templates which after JF execution creates HTML with JS and even with style. All that you need to work with JF framework is to add JF file, no other dependencies.
- All in one template - js, html, style
- Simple usage
- Simple markup - JSON type
- Native code
- Fastest html builder ever created
- Template accepts functions
- No Selector framework (example: jQuery) is needed because all templates arr linked within javscript in JF.templates array
sample = {
element: "div",
id: "sampleId",
class: "sampleClass",
text: "Sample text"
}
Will create:
<div class="sampleClass" id="sampleId">Sample text</div>
(must have String) element Specifies the html node type
(optional String) id specifies id
(optional String) class specifies class
(optional Object|String) data can hold objects, arrays strings for the specific html element
(optional Object) style object can contain style
(optional String) inlineStyle inline style for specific html element
(optional Function) *custom* function executed after html has loaded, to be able to us need to include "custom" name in object key
(optional Function) on* any on* native html function (examples: onclick,onload,onmouseover...)
(optional String) name reserved word used for fillTemplate function to populate template with json input
(optional String) text text representation for html element
Creator(document.body,sample)
What it does?
- Appends to document.body Element the templates resulting HTML
- Creates above template and stores the template in JF.templates array with following ID as a key.
- Creates JF.templates.sampleId Object containing: cssRules: Array[] linked rules if template has any, they are stored within JFstyle object elements: Object all create elements within template html funcArr: Array[] all custom functions html: HTMLElement linked html itself name: "sampleId" defined ID or generated ID if no specified remove: function remove function - should be used to completely remove template with all dependencies template: Object the template object itself with which the template was created
There are 3 global javascript functions: "Creator", "JFstyle" and "Controller" which handles actions for template objects
Creator(HTMLElement $target, Object $template1, Object $template2, ...., Object $templateN) Is responsible for taking a template and creating html
$target target HTML element on which appendChild method will be called after creating template
$template1...$templateN Templates from which the html will be created
returns Array with created templates
Controller(String $name, String $action, Function $function, Boolean $bool) Is responsible for creating simple interaction between templates
$name name of route
$action action to be called or queued
$function function which will be executed
$bool true/false parameter for the function to be deleted after execution
returns true / false
JFstyle Holds all css styles for templates
has 1 function .addStyle(String $style)
returns true / false
sampleObject = {
element: "div",
id: "about",
title: {
element: "h3",
text: "Hello I'm Gatis Priede",
style: {
display: "inline-block"
},
custommargin: function(element){
var pos = element.getBoundingClientRect().width / element.parentNode.getBoundingClientRect().width * 100 / 2;
element.style.marginLeft = 50 - pos + "%";
}
},
description: {
element: "h2",
text: "Web crossplatform developer",
style: {
display: "inline-block"
},
custommargin: function(element){
var pos = element.getBoundingClientRect().width / element.parentNode.getBoundingClientRect().width * 100 / 2;
element.style.marginLeft = 50 - pos + "%";
}
},
info:{
element: "p",
text: "sampleText"
}
}
After execution html will result in
<div id="about">
<h3 style="margin-left: 24.6463677775114%;">Hello I'm Gatis Priede</h3>
<h2 style="margin-left: 7.23704490187348%;">Web crossplatform developer</h2>
<p>sampleText</p>
</div>
Simple navigation example
sampleNavigation = {
element:'div',
id:'navigation',
style:{
width:'100%',
'min-height':'50px'
},
buttons:{
customfunc: function(element){
for(var id in element.children){
var button = element.children[id];
if(button instanceof HTMLElement){
button.onmouseover = function(){
this.classList.add('hover');
}
button.onmouseout = function(){
this.classList.remove('hover');
}
button.onclick = function(){
if(element.lastItem !== undefined){
element.lastItem.remove('active');
}
this.classList.add('active');
element.lastItem = this.classList;
}
}
}
JFstyle.addStyle('.active { color: white; background: rgb(200, 200, 200);}');
JFstyle.addStyle('.hover { color: rgb(122, 122, 122); background: white;}');
},
element:"div",
class: "div",
style:{
float:"left",
width:"100%"
},
home:{
element:"button",
text:"about",
style:{
border:"none",
width:"25%",
padding:"2px",
transition: "background ease 1s",
"border-radius":"1px",
"text-transform": "uppercase"
},
},
pictures:{
element:"button",
text:"pictures"
},
programmings:{
element:"button",
text:"programming"
},
contacts:{
element:"button",
text:"contacts"
}
}
}
Will result in:
<div id="navigation">
<div class="div">
<button class="active">about</button>
<button class="">pictures</button>
<button class="">programming</button>
<button>contacts</button>
</div>
</div>`