HTML Select List

Lotus Select List

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

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/select2.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-select2', Lotus.LotusHTMLElement.prototype, Lotus.ListCollectionView, xtag);. This is an issue with the xTag core and how it encapsulates styles using the tag name.

Mediating Components

The x-lotus-select tag exposes a single change 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-select', Lotus.LotusHTMLElement.prototype, Lotus.ListCollectionView, xtag);
            context.componentMap.mapComponent('x-lotus-select2', Lotus.LotusHTMLElement.prototype, Lotus.ListCollectionView, xtag);
            return context;
        }(xtag));
        //define our handler to set up the component when it loads.
        //Note you can avoid this if you use https://www.npmjs.com/package/lotusjs-mvw and take advantage of component mediators
        //mediators are attached to component instances at the moment of creation and receive callbacks for the ready evet automatially
        var handler={
            onReady:function(event){
                handler.initComponent(event.payload.target);
            },
            initComponent:function(component){
                var collection = new Lavender.ArrayList();
                var group = Math.random();
                collection.addItem({label: 'some label 1', value: 'some value 1',  name:group});
                collection.addItem({label: 'some label 2', value: 'some value 2',  name:group});
                collection.addItem({label: 'some label 3', value: 'some value 3',  name:group});
                collection.addItem({label: 'some label 4', value: 'some value 4',  name:group});
                component.collection = collection;
            },
            onChange: function (event) {
                console.log('My callback function received value: ' + event.payload.target.selectedItem.model.value);
            },
            addEventListeners:function (component) {
                //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
                component.addEventListener(Lotus.InputEvent.CHANGE, handler, 'onChange');
                //Do not set up data providers until the component is ready!
                //if you use lotusjs-mvw you can take advantage of component mediators that have built in onReady callbacks
                if(!component.ready){
                    component.addEventListener(Lotus.ComponentEvent.READY, handler, 'onReady')
                }else{
                    handler.initComponent(component)
                }
            }
        };
        //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 () {

            var list = document.getElementsByTagName('x-lotus-select');
            for (var i = 0; i < list.length; i++) {
                handler.addEventListeners(list[i].lotusComponentInstance);
            }
            //set up work around for pollyfill issue with xTag core
            list = document.getElementsByTagName('x-lotus-select2');
            for (var i = 0; i < list.length; i++) {
                handler.addEventListeners(list[i].lotusComponentInstance);
            }
        };