HTML Button

This is an example of and HTML button. Blah!:

Lotus Button

Here's an example of a Lotus Button component. The x-lotus-button tag extends the Lotus.LotusHTMLElement tag. Our x-lotus-button is also mapped to a Lotus component in the call to context.componentMap.mapComponent('x-lotus-button', Lotus.LotusHTMLElement.prototype, Lotus.Button, xtag);.A new instance of Lotus.Button is attached to each tag instance. Open your console to observe the click callbacks.

Dynamically Change Skin

If your browser does not natively support web component (Safari) you will not see any change. See the xTag polyfill workaround below.

Changing the appearance of any image control instance is as simple as attaching a different skin using data-template-url="templates/button-messages.html". Below is the exact same custom set of tags with a different skin attached. All using the same set of selectors encapsulated with Shadow DOM. Imagine how many skins could be created without a single change to the component code.

xTag Pollyfill Workaround

Note: If your browser does not natively support web components you have to attach the new skin using a different tag. In this example we do the following: context.componentMap.mapComponent('x-lotus-button2', Lotus.LotusHTMLElement.prototype, Lotus.Button, xtag);. This is an issue with the xTag core and how it encapsulates styles using the tag name.

Mediating Components

The x-lotus-button tags exposes a single click event by default. In order to listen for that event you have to assign an event handler after the document loads. An example is below. However if you are serious about event mediation of we encourage you to check out lotusjs-mvw. This is a full blown MVW framework which comes with a mediator map for your components (and much more). This allows you to build application mediators that are mapped to your custom tags. Mediators can do all sorts of useful things like triggering business logic, dispatching application events to trigger commands, and setting up data binding within your surrounding application.

		
		var context = (function( xtag ){
            var context = new Lotus.Context(new Lavender.Config);
            context.componentMap.mapComponent('x-lotus-button', Lotus.LotusHTMLElement.prototype, Lotus.Button, xtag);
            context.componentMap.mapComponent('x-lotus-button2', Lotus.LotusHTMLElement.prototype, Lotus.Button, xtag);
            return context;
        }( xtag ));
		//the following is an example of how you can mediate the component events that are dispatched.
		//A better alternative is to use https://www.npmjs.com/package/lotusjs-mvw and take advantage of component mediators
		window.onload = function() {
			hljs.initHighlighting();
			var list = document.getElementsByTagName('x-lotus-button');
			var handler = {
				onChange:function(event){
					console.log('My callback function received event type ' + event.type);
				}
			}
			for (var i = 0; i < list.length; i++) {
				//the lotus syntax for addEventListener is slightly different than that of DOM elements,
				//but it ensures the scope of this within a callback is always relative the the second parameter which is the object instance
				list[i].lotusComponentInstance.addEventListener(Lotus.ComponentEvent.CLICK, handler, 'onChange')
			}
		};