Skip to content

Latest commit

 

History

History
88 lines (76 loc) · 2.65 KB

custom-elements.md

File metadata and controls

88 lines (76 loc) · 2.65 KB

Custom-Elements

Links: Index

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:

	{
		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:

	{
		'__onInit' : function () { ... },
		'__onContentChange' : function () { ... },
		'__onRemove' : function () { ... },
		'__onAttrChange' : function () { ... }
	}

Example: A full example is located in examples folder. Examples

Add new custom element in HTML

	...
	<body>
		<mycustomelement>

		</mycustomelement>
	</body>
	...

Below in a script load corresponding module for new tag:

	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:

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.
});