Element is main ui class of framework. It refers dom elements of html document. Each Element instance keeps one html dom. To specify tag for dom, you pass the tag name as string while creating an Element insance. Default tag value is div so if you don’t specify a tag name, it will create a div dom. To reach real dom, you can use .getDom() method.
var element = Element.new();
element.getDom();
//<div></div>
var element = Element.new('h2');
element.getDom();
//<h2></h2>To add child elements to an element, you use .add() method;
var element = Element.new('ul');
element.add(
Element.new('li'),
Element.new('li'),
Element.new('li')
);
element.getDom();
//<ul><li></li><li></li><li></li><li></li></ul>To play with dom, you can use these methods. I think there is no need to explain.
var element = Element.new('input')
.setAttr('type', 'button')
.setAttr('value', 'Click Me')
.addClass('btn')
.on('click', function(){
alert('Button has been clicked');
})
.setStyle('width', '100%');
element.getDom();
//<input type="button" value="Click Me" class="btn" style="width:100%;">For full documentation you can visit Element Library Documentation.
Document class is the bridge to access native javascript document object in framework’s way. Usage is simple.
var label = Element.new('label')
.setAttr('for', 'search_input')
.add('Subject:');
var input = Element.new('input')
.setAttr('type', 'text')
.setAttr('id', 'search_input');
var button = Element.new('button')
.add('Search!');
Document.new().add(
label,
input,
button
);Document.add appends native document.body with given child Element’s DOM. As a result It will produce this html;
<body>
<label for="search_input">Subject:</label>
<input type="text" id="search_input">
<button>Search!</button>
</body>Another thing to say, all instances of Document always points document.body as it’s DOM. That’s why it doesn’t create a new DOM like Element.
Event handling system is quite simple. There is an listener collection divided into action names, and when you call / trigger an action, listeners under that action name will be executed. This structure is comes from EventHandler class, and you can extend this class to have this event handling system in your class.
This is an example for how to use EventHandler methods.
var instance = EventHandler.new()
.handle('an_event')
.on('an_event', function(){
console.log('A listener has been called.');
})
.on('an_event', function(e){
console.log('Another listener has been called.');
console.log('Passed argument is "' + e + '"');
})
.trigger('an_event', 'Hello!');
/*
Console:
A listener has been called.
Another listener has been called.
Passed argument is "Hello!"
*/As you see, when you use an event, firstly you have to define that event with .handle() method. And you put listeners with .on() method in that event’s collection. Finally you call them with .trigger() method. Also you can pass an event object through trigger method as an argument. Here, "Hello!" string is our event object.
Element class is also extends EventHandler but handling is a little different, because html dom has a handler as well. To add event listener to an element using .on() method, that action must be handled by that component. If you want to add event listener which doesn’t handled by an component but handled by native javascript, you must use .onDom() method. Similarly, there are .offDom() and .triggerDom() methods to control events.
var button = Element.new('button')
.on('click', function(){
console.log('Button has been clicked.');
})
.onDom('click', function(e){
console.log('Button has been clicked.');
})When you click that button, it will print “Button has been clicked.” twice to console. One of them printed by listener triggered by EventHandler class with .on() method. Other one triggered by native dom dispatcher.
Many common used actions are handled by components. For example, Button component has click action and other many component has change action and some special actions. However, many other action like mouseover, keydown doesn’t handled by components, so you must use .onDom() method for these actions.
Also, have to say that, with this keyword in a listener handled by a component, you can reach the component directly, but it won’t work if you use a native handler with .onDom().
In this section, there is no need to explain usage and methods, examples are obvious. And not all methods, commonly used methods will be shown, so for full documentation, you should look Library Documentation.
change EventFor input components change event is fired only when user interacts and changes the state of component, not when you call .setValue() or derivations of it, like .check() for Check component
require(['burner/ui/Document', 'burner/ui/Button'], function(Document, Button){
Document.new().add(
Button.new('Click Me!')
.on('click', function(){
alert('Button has been clicked.');
}),
' ',
Button.new('With Icon')
.setIcon('bolt'),
' ',
Button.new().setIcon('bell')
);
});Themes and disabled states of Button;
require(['burner/ui/Document', 'burner/ui/Button'], function(Document, Button){
Document.new().add(
Button.new('Normal'), ' ',
Button.new('Primary').setTheme('PRIMARY'), ' ',
Button.new('Success').setTheme('SUCCESS'), ' ',
Button.new('Warning').setTheme('WARNING'), ' ',
Button.new('Danger').setTheme('DANGER'), ' ',
Button.new('Info').setTheme('INFO'), ' ',
Button.new('Dark').setTheme('DARK'),
Element.new('br'), Element.new('br'),
Button.new('Normal').setDisabled(true), ' ',
Button.new('Primary').setDisabled(true).setTheme('PRIMARY'), ' ',
Button.new('Success').setDisabled(true).setTheme('SUCCESS'), ' ',
Button.new('Warning').setDisabled(true).setTheme('WARNING'), ' ',
Button.new('Danger').setDisabled(true).setTheme('DANGER'), ' ',
Button.new('Info').setDisabled(true).setTheme('INFO'), ' ',
Button.new('Dark').setDisabled(true).setTheme('DARK')
);
});require(['burner/ui/Document', 'burner/ui/Input'], function(Document, Input){
Document.new().add(
Input.new()
.setPlaceholder('It is an placeholder')
.on('change', function(e){
alert('Value has changed: ' + e.value);
}),
' ',
Input.new().setValue('Disabled Input').setDisabled(true)
);
});change event is handled by EventHandler. Dispite of this, e parameter points native change event, as Input component passes native change event to handled change event. For more information EventHandler.
require(['burner/ui/Document', 'burner/ui/Element', 'burner/ui/Label'], function(Document, Element, Label){
Document.new().add(
Element.new().add(
Label.new('A Label')
),
Element.new().add(
Label.new('A Label with Icon').setIcon('camera')
),
Element.new().add(
Label.new('Boxed Label').setBoxed(true)
)
);
});Have to say that Label is boxed automatically when you put it in a Group component.
require(['burner/ui/Document', 'burner/ui/Group', 'burner/ui/Button', 'burner/ui/Input', 'burner/ui/Label'], function(Document, Group, Button, Input, Label){
var input = Input.new().setPlaceholder('Type a subject to search');
Document.new().add(
Label.new('Default Group'),
Element.new('br'),
Group.new().add(
Label.new('Subject'),
input,
Button.new().setIcon('search').on('click', function(){
alert('Search subject is: ' + input.getValue())
})
),
Element.new('br'), Element.new('br'),
Label.new('Disabled Group'),
Element.new('br'),
Group.new().add(
Label.new('Subject'),
Input.new().setPlaceholder('Type a subject to search'),
Button.new().setIcon('search')
).setDisabled(true),
Element.new('br'), Element.new('br'),
Label.new('Spaced Group'),
Element.new('br'),
Group.new('SPACED').add(
Label.new('Subject'),
Input.new().setPlaceholder('Type a subject to search'),
Button.new().setIcon('search')
),
Element.new('br'), Element.new('br'),
Label.new('Block Group *'),
Group.new('BLOCK').add(
Label.new('Subject'),
Input.new().setPlaceholder('Type a subject to search'),
Button.new().setIcon('search')
)
);
});An important point is if you want to use block group, there must be only one Input component. Not more than one or any.
require(['burner/ui/Document', 'burner/ui/Breadcrumb', 'burner/ui/Button', 'burner/ui/Label'], function(Document, Breadcrumb, Button, Label){
Document.new().add(
Label.new('Default Breadcrumb'),
Element.new('br'),
Breadcrumb.new().add(
Button.new('Home'),
Label.new('Path'),
Label.new('To'),
Label.new('Page')
),
Element.new('br'), Element.new('br'),
Label.new('Spaced Breadcrumb'),
Element.new('br'),
Breadcrumb.new('SPACED').add(
Button.new('Home'),
Label.new('Path'),
Label.new('To'),
Label.new('Page')
)
);
});require(['burner/ui/Document', 'burner/ui/Spinner', 'burner/ui/Label'], function(Document, Spinner, Label){
Document.new().add(
Label.new('Default'), ' ',
Spinner.new(),
Element.new('br'), Element.new('br'),
Label.new('Mininum is 2, and maximum is 10'), ' ',
Spinner.new().setMin(2).setMax(10),
Element.new('br'), Element.new('br'),
Label.new('Padding is 3'), ' ',
Spinner.new().setPad(3),
Element.new('br'), Element.new('br'),
Label.new('Minimum is -5, maximum is 5, and has loop'), ' ',
Spinner.new().setMin(-5).setMax(5).setLoop(true),
Element.new('br'), Element.new('br'),
Label.new('Buttons are hidden'), ' ',
Spinner.new().showButtons(false),
Element.new('br'), Element.new('br'),
Label.new('Disabled'), ' ',
Spinner.new().setDisabled(true)
);
});require(['burner/ui/Document', 'burner/ui/List'], function(Document, List){
Document.new().add(
List.new([
{
'title': 'An Option',
'value': 0
},
{
'title': 'Another Option',
'value': 1
},
{
'type': 'SEPARATOR',
},
{
'title': 'A Separated Option',
'value': 2
},
{
'title': 'Title of Separator',
'type': 'SEPARATOR'
},
{
'title': 'Last Option',
'value': 3
}
]).on('change', function(){
alert(
'Selected item:' +
this.getTitle() +
', and value: ' +
this.getValue()
);
})
);
});require(['burner/ui/Document', 'burner/ui/Dropdown'], function(Document, Dropdown){
Document.new().add(
Dropdown.new([
{
'title': 'An Option',
'value': 0
},
{
'title': 'Another Option',
'value': 1
},
{
'type': 'SEPARATOR',
},
{
'title': 'A Separated Option',
'value': 2
},
{
'title': 'Title of Separator',
'type': 'SEPARATOR'
},
{
'title': 'Last Option',
'value': 3
}
]).on('change', function(){
alert(
'Selected item:' +
this.getTitle() +
', and value: ' +
this.getValue()
);
})
);
});require(['burner/ui/Document', 'burner/ui/Check'], function(Document, Check){
Document.new().add(
Check.new(), ' ',
Check.new().setIcon('times').setValue(true), ' ',
Check.new().check().on('change', function(){
alert(this.getValue() ? 'Checked.' : 'Unchecked.');
})
);
});require(['burner/ui/Document', 'burner/ui/CheckGroup', 'burner/ui/Check'], function(Document, CheckGroup, Check){
var checkGroup = CheckGroup.new().on('change', function(){
alert('Checked boxes are "' + this.getValue().join('", "') + '" by order');
});
Document.new().add(
Check.new().setGroupValue('first').bind(checkGroup).setValue(true), ' ',
Check.new().setGroupValue('second').bind(checkGroup), ' ',
Check.new('third').bind(checkGroup)
);
});require(['burner/ui/Document', 'burner/ui/RadioGroup', 'burner/ui/Check'], function(Document, RadioGroup, Check){
var radioGroup = RadioGroup.new().on('change', function(){
console.log('radioGroup has changed. Value is: ' + this.getValue());
});
Document.new().add(
Check.new(0).bind(radioGroup).on('change', function(){
console.log('First check has changed. Value is: ' + this.getValue());
}), ' ',
Check.new(1).bind(radioGroup).on('change', function(){
console.log('Second check has changed. Value is: ' + this.getValue());
}).setIcon('check'), ' ',
Check.new().setGroupValue(2).bind(radioGroup).on('change', function(){
console.log('Third check has changed. Value is: ' + this.getValue());
})
);
});
//Check your console ;)require(['burner/ui/Document', 'burner/ui/RadioGroup', 'burner/ui/Switch'], function(Document, RadioGroup, Switch){
var radioGroup = RadioGroup.new().on('change', function(){
alert('radioGroup has changed. Value is: ' + this.getValue());
});
Document.new().add(
Switch.new(), ' ',
Switch.new().setValue(true), ' ',
Switch.new().check().on('change', function(){
alert(this.getValue() ? 'Checked.' : 'Unchecked.');
}),
Element.new('br'), Element.new('br'),
Switch.new(0).bind(radioGroup), ' ',
Switch.new(1).bind(radioGroup).check(), ' ',
Switch.new(2).bind(radioGroup)
);
});require(['burner/ui/Document', 'burner/ui/Message'], function(Document, Message){
Document.new().add(
Message.new('Default Message'),
Element.new('br'),
Message.new('Primary Message', 'PRIMARY'),
Element.new('br'),
Message.new('Success Message', 'SUCCESS'),
Element.new('br'),
Message.new('Danger Message', 'DANGER'),
Element.new('br'),
Message.new('Warning Message', 'WARNING'),
Element.new('br'),
Message.new('Info Message', 'INFO')
);
});require(['burner/ui/Document', 'burner/ui/Notifier', 'burner/ui/Button', 'burner/ui/Group'], function(Document, Notifier, Button, Group){
Document.new().add(
Group.new('SPACED').add(
Button.new('Notify').on('click', function(){
Notifier.new('Default Message')
}),
Button.new('Primary').on('click', function(){
Notifier.new('Primary Message', 'PRIMARY')
}),
Button.new('Success').on('click', function(){
Notifier.new('Success Message', 'SUCCESS')
}),
Button.new('Danger').on('click', function(){
Notifier.new('Danger Message', 'DANGER')
}),
Button.new('Warning').on('click', function(){
Notifier.new('Warning Message', 'WARNING')
}),
Button.new('Info').on('click', function(){
Notifier.new('Info Message', 'INFO')
})
)
);
});require(['burner/ui/Document', 'burner/ui/Tip', 'burner/ui/Button', 'burner/ui/Group'], function(Document, Tip, Button, Group){
var b1 = Button.new('Right');
var b2 = Button.new('Bottom');
var b3 = Button.new('Top');
var b4 = Button.new('Left');
Tip.new('A tip message.').bind(b1, 'HOVER').setDirection('RIGHT');
Tip.new('A tip message.').bind(b2, 'HOVER').setDirection('BOTTOM');
Tip.new('A tip message.').bind(b3, 'HOVER').setDirection('TOP');
Tip.new('A tip message.').bind(b4, 'HOVER').setDirection('LEFT');
Document.new().add(
Group.new('SPACED').add(
b1, b2, b3, b4
)
);
});Written with StackEdit.