application-prototype
Version:
Application builder - prototype
89 lines (76 loc) • 2.71 kB
Markdown
# Custom-Elements
Links: [Index](../../README.md)
This module is a wrapper for `MutationObserver` API. It allows you to create custom HTML elements and continuously observe it's changes in a simple way using callback functions for each type of change.
#### Flow
Each new tag should have a module, that will export itself when `lazyLoadModules` will be called.
- Insert into HTML new tags
- For each tag load corresponding module.
- Each of these modules will load `custom-elements` module and will pass callback functions.
When required, this module will export an `Object` with 2 methods:
```js
{
registerMethods : function ( nodeName, prototypeMethods ) { ... }
lazyLoadModules : function ( list ) { ... }
}
```
`registerMethods` - will register callback functions for events.
`lazyLoadModules` - will load modules for each new HTML tag
Possible event handlers:
```js
{
'__onInit' : function () { ... },
'__onContentChange' : function () { ... },
'__onRemove' : function () { ... },
'__onAttrChange' : function () { ... }
}
```
Example:
A full example is located in examples folder. [Examples](docs/examples)
Add new custom element in HTML
```HTML
...
<body>
<mycustomelement>
</mycustomelement>
</body>
...
```
Below in a script load corresponding module for new tag:
```js
window.App = new ApplicationBuilder(); // initialize bare bone application prototype
App.modulePath('../../../constructors'); // register correct modules folder
App.require([
'customElements :: custom-elements', // customElements is used as an alias (useful for long named modules)
]).then(function (customElements) {
customElements.lazyLoadModules({
mycustomelement : 'elements/custom' // registering a module located in elements folder (see example)
});
});
```
In module named `custom.js` is following code:
```js
App.require('custom-elements', function (customElements) {
customElements.registerMethods('mycustomelement', { // first parameter should be the same as HTML tag name.
__onInit : function () {
// this function is called once at module initialization.
},
__onContentChange : function () {
// is called when nodes or content inside are changed
},
__onAttrChange : function () {
// is called when an attribute is changed
},
__onRemove : function () {
// is called when element is removed from DOM
},
/** other methods or properties that will be available on node.methods().myMethod()
myMethod : function () {
// this. is node
},
property1 : "test val", // global for all node with same tagname
... add others
*/
});
module.exports = {}; // nothing to export. But export is needed to signal end of module loading.
});
```