_dom

v2.*

A light but powerful javascript library for html apps.

_dom.js is exclusively focused on html and css creation.

• Ultra light : < 40k uncompiled, ~ 18k compiled.
• Easy creation of html elements and css rules.
• Use sass like syntax to optimise your css rules.
• Interacts exclusively with native browser methods.
  • No time comsuming proxies.
  • No code compilation.
  • No intrusive attributes in base elements.
• Full html templating.
  • Low template architecture constraints.
  • Low dom intrusion (Attribute _dom added for controller when using templates, see _dom.model).
  • Handles shadow dom.

The purposes of _dom.js are:

• Create easily dynamic apps.
• Stay simple and minimal.
• Work on the lower level possible.
• Being integrable with any kind of web architecture.

Menu

• Use in web page
• Use with nodejs
• Html
  • _dom
• Css
  • _dom.rule
  • _dom.rules
• Templating
  • _dom.model
  • Instanciates and interact with model
  • Shadow dom / _dom.modelShadow
  • Model creator

• V2 features

API documentation.

Use in web page

<script src="./path/to/_dom.js"></script>

Use with nodejs

For web translators like webpack.

Install :

npm install dom-for-node

Import :

const _dom=require('dom-for-node');

html

Instanciate html elements or structure

_dom(tagName,datas,childs,nameSpace)

• string tagName : element tagname
• object datas [optional] : element attributes.
• Array childs [optional] : element childs. can contain strings and html elements.
• string nameSpace [optional] : element namesapace if any.
• returns HTMLElement

Exemple:

var inpt=_dom('input',{type:'text',value:'hello'});
document.body.appendChild(inpt);

var div=_dom('div',{style:{border:'solid 1px #0f0'}},[
	'aaa',
	_dom('u',['bbb']}),
	'ccc'
]);
document.body.appendChild(div);

css

create dynamics css rules.

_dom.rule(selector, datas)

• string selector : the new rule rule query selector.
• object datas [optional] : style datas if any.
• returns CSSStyleRule

Exemple :

var tableRule=_dom.rule('table',{border:'solid 1px #0f0'});

setTimeout(function(){
	tableRule.style.borderColor='#00f';
},2000);

Create rules collection with sass like structures

_dom.rules(datas)

• object datas : sass like structured object.
• returns collection of CSSStyleRule by selector and alias.

Exemple :

var rules =_dom.rules({
	'$color1':'#0f0',
	'$color2':'#f00',
	'table':{
		border:'solid 1px $color1',
		'& td':{
			'&>div':{
				alias:'subdiv',
				border:'solid 1px $color2',
				display:'block'
			}
		}
	}
});

setTimeout(function(){
	rules.table.style.borderColor='#00f';
	rules.subdiv.style.color='#d06';
},2000);

Templating

Add custom structures to _dom

_dom.model(tagName,constructor,cssRules,shadowed)

• string tagName : the custom element name. Must contain at least one "-" to avoid conflict with natives HTMLElements.
• function constructor : Must return an HTMLElement. Receive the arguments from _dom but the dont have to respect the classical nomenclature excepted tagName (the first). /!\ constructor Must be a function and NOT a lambda expression because it is scoped to its interface.
• object|function cssRules [optional] : is or returns an object describing rules like _dom.rules, but the created collection will be insancied only once and shared among interfaces.
• boolean shadowed [optional] : if true, your model uses shadow dom.

NB : You can use the Model creator to help generate model code.

Exemple :

/**
 * creates an Table of 1 line.
 * @param {string} tagName must be 'table-line'
 * @param {Array} wlist columns widths
 * @param {Array} childlist columns contents.
 * @returns {HTMLElement}
 */
_dom.model('table-line',function(tagName,wlist,childlist){
	var tdlist=[],dom_tr,dom;
	var build=function(){
		for(var i=0;i<childlist.length;i++){
			tdlist.push(_dom('td',{width:(wlist[i]?wlist[i]:'*')},[childlist[i]]));
		}
		dom_tr=_dom('tr',{},tdlist);
		dom= _dom('table',{border:'0',cellPadding:'0',cellSpacing:'0'},[
			_dom('tbody',{},[dom_tr])
		]);
	};
	/**
	 * (interfacing exemple) add a column.
	 * @param {string|HTMLElement} width  column content (when content is not set) or width
	 * @param {string|HTMLElement} content  column content
	 */
	this.push=function(width,content){
		if(!content){
			content=width;
			width='*';
		}
		if(!(content instanceof HTMLElement)){
			content=document.createTextNode(content+'');
		}
		var nutd=_dom('td',{width:width},[content]);
		dom_tr.appendChild(nutd);
	};
	build();
	return dom;
});

Instanciates and interact with model interface

The __dom attribute is added to the element to permit access to the component instance.

Exemple :

var tl=_dom('table-line',['1','*'],['000',_dom('div',{},['abc'])]);
// append element.
document.body.appendChild(tl);

setTimeout(function(){
	// calls component 'push' method.
	tl.__dom.push('def');
},2000);

The __dom attribute is configurable. You can hide the controller by removing the instance reference.

Exemple :

var tl=_dom('table-line',['1','*'],['000',_dom('div',{},['abc'])]);
var controller=tl.__dom;
delete tl['__dom'];

Shadow dom.

Though _dom is more designed for javascript, by using shadow dom with your models, you make them instanciables via Html. About shadow dom.

There are two ways to implement shadow dom with _dom models :

• On declaration :Set the _dom.model shadowed argument to true when you declare your model.
• When the model exists but he may not implement shadow dom : call _dom.modelShadow.

_dom.modelShadow(tagName)

• string tagName : the model name.

Exemple :

• in js

_dom.modelShadow('table-line');

• in html

<table-line wlist='["1","*"]' childlist='["abc"]'></table-line>

Model creator.

To create fast and easy the backbone of your component, you can use the model creator.

V2 features

V2 brings new features like module and new tools. Some of them (beta) are still experimental.

See more on documentation.