'input.myLoginClass[name=login]'.createElement()
'input.myLoginClass[name=login]'.set('placeholder', 'name@domfactory.com').createElement()
'input.myLoginClass'.set({name: 'login', placeholder: 'name@domfactory.com'}).createElement()
'form[style=border:1px solid green;]>input.myLoginClass[name=login]'.createElement()
'ul.myListClass'.append(['li[text=Val 1]', 'li[text=Val 2]', 'li[text=Val 3]']).createElement()
'ul.myListClass'.append('li[text=Val 1]', 'li[text=Val 2]', 'li[text=Val 3]').createElement()
['p[text=§1]', 'p[text=§2]', 'p[text=§3]'].createElement()
'text[text="Juste a NodeText"]'.createElement()
'input'.set('onfocus', function() {
this.value = 'input focused';
}).createElement()
'input'.set('value', function() {
return 'value returned by a function';
}).createElement()
'input[size=50]'.set('onappend', function() {
this.value = 'input append event triggered by "set(\'onappend\')" function';
}).createElement()
'input[size=50]'.on('append', function() {
this.value = 'input append event triggered by "on(\'append\')" function';
}).createElement()
'input'.set({
value: 'change me',
onblur: function() {this.api.checkValue()},
api: {
checkValue: function() {
this.value = this.value + ' (checked)';
}
}
}).createElement()
var domfactory = new DomFactory(
//Layouts
{
squareRed: ''.set({style: 'width:50px;height:50px;background-color:red;', text: 'Click me'}),
message: {
_base: function(message, isHtml) {
var def = {style: 'text-align:center;border-width:1px;border-style:solid; color:#425045;'};
def[isHtml ? 'html' : 'text'] = message;
return ''.set(def);
},
success: function(message, isHtml) {
var baseLayout = this.getLayout('message._base', message, isHtml);
baseLayout.setAttribute('style', baseLayout.getAttribute('style') + 'border-color:#4bc565; background-color:rgba(75, 197, 101, 0.5);');
return baseLayout;
},
error: function(message, isHtml) {
var baseLayout = this.getLayout('message._base', message, isHtml);
baseLayout.setAttribute('style', baseLayout.getAttribute('style') + 'border-color:#942d32; background-color:rgba(199, 79, 79, 0.5);');
return baseLayout;
}
}
},
// API
{
squareRed: {
onclick: function() {
this.api.grow();
},
grow: function() {
this.style.width = (parseInt(this.style.width) + 5) + 'px';
this.style.height= (parseInt(this.style.height) + 5) + 'px';
}
}
}
);
domfactory.getLayout('squareRed')
domfactory.getLayout('message.success', 'It\'s a success message')
domfactory.getLayout('message.success', 'It\'s a <b>html success</b> message', true)
domfactory.getLayout('message.error', 'It\'s an <b style="color:#911414;">error</b> message', true)