Special Web Components

A Web Components Widget Library

There are special Web Components used to manage some generic tasks. They are

webf_window_manager

xtag.register('webf_window_manager', webf_features({
            extends: "webf",
            lifecycle: {
                created: function() {
                    this._created();
                }
            },
            methods: {
                TAG:function(data, t){
                    var self=this;
                    var t=t ? t : this._build();
                    $(document).click(function(e){
                        var target= e.target;
                        if(self._findParentWC("WEBF_POPUP",target)){
                            return;
                        } else {
                            $(".WEBF_MENU").each(function(ix,e){
                                e._hide_popup(self);
                            })
                        };
                    });
                    return t;
                },
            }
        },WEBF_FEATURE("WEBF_WINDOW_MANAGER")));

It manages click on the document. If the click is outside a popup all the menu are closed.
Only one instance of this component should exist.

webf_i18n_manager

xtag.register('webf_i18n_manager', webf_features({
            extends: "webf",
            lifecycle: {
                created: function() {
                    this._created();
                }
            },
            methods: {
                _getKeys: function(lang){
                    if (!this._i18nLangs[lang]) return this._i18nLangs["_default"];
                    return this._i18nLangs[lang];
                },
                _addKeys: function(keys, lang){
                    if (!lang) lang="_default";
                    var l = this._i18nLangs[lang];
                    if (!l) l=this._i18nLangs[lang]={};

                    for (var key in keys) {
                        l[key]=keys[key];
                    }
                },
                _addKey: function(key, value, lang){
                    if (!lang) lang="_default";
                    var l = this._i18nLangs[lang];
                    if (!l) l=this._i18nLangs[lang]={};

                    for (var key in keys) {
                        l[key]=keys[key];
                    }
                },

                TAG:function(data, t){
                    var self=this;
                    var t=t ? t : this._build();

                    this._i18nLangs={
                        "_default": {}
                    }
                        document._i18nMngr=this;

                        var link = document.querySelectorAll('link[rel=import]');
                        for (var i = 0; i < link.length; i++) {
                            var e = link[i];
                            var content = e.content.querySelectorAll("i18n");
                            for (var j = 0; j < content.length; j++) {
                                var e1 = content[j];
                                var id= e1.id;
                                var d=JSON.parse(e1.textContent);
                                this._addKeys(d,e1.getAttribute("lang"));
                            }
                        }
                    return t;
                },
            }
        },WEBF_FEATURE("WEBF_I18N_MANAGER")));

Give access to I18n keys. Keys are read from the template and stored.

webf_action

        xtag.register('webf_action', webf_features({
            lifecycle: {
                created: function() {
                    var f = new Function("e", this.textContent);
                    var actionF= this._hasAscendantFeature("WEBF_ACTION");
                    actionF.action=f;
                }
            },

        },WEBF_FEATURE("WEBF_ACTION")));

It reads its content and transforms it into a javascript function. So actions can be written:

<g-button><webf-action>Alert("hello")</webf-action></g-buttom>

Not sure about this implementation.