• API Docs for Version:

    • APIs

    Show:

    Source\flexygo\Proyectos\FlexyGo\FlexyGo\js\flexygo\ui\wc\flx-moduletab.js File

    1. /**
    2.  * @namespace flexygo.ui.wc
    3.  */
    4. var flexygo;
    5. (function (flexygo) {
    6.     var ui;
    7.     (function (ui) {
    8.         var wc;
    9.         (function (wc) {
    10.             /**
    11.             * Library for the FlxModuleTabElement web component.
    12.             *
    13.             * @class FlxModuleTabElement
    14.             * @constructor
    15.             * @return {FlxModuleTabElement}
    16.             */
    17.             class FlxModuleTabElement extends HTMLElement {
    18.                 constructor() {
    19.                     super();
    20.                     /**
    21.                    * Set when component is attached to DOM
    22.                    * @property connected {boolean}
    23.                    */
    24.                     this.connected = false;
    25.                     this.moduleName = null;
    26.                     this.pageName = null;
    27.                     this.mode = 'default';
    28.                     this.config = null;
    29.                     this.activeModule = null;
    30.                     this.activeTitle = '';
    31.                     this.moduleInitClass = null;
    32.                 }
    33.                 /**
    34.                 * Fires when element is attached to DOM
    35.                 * @method connectedCallback
    36.                 */
    37.                 connectedCallback() {
    38.                     let element = $(this);
    39.                     this.connected = true;
    40.                     let tabMode = element.attr('mode');
    41.                     if (tabMode && tabMode !== '') {
    42.                         this.mode = tabMode;
    43.                     }
    44.                     this.moduleName = element.attr("modulename");
    45.                     if (this.moduleName) {
    46.                         if (element.attr('manualInit') != 'true') {
    47.                             this.init();
    48.                         }
    49.                     }
    50.                 }
    51.                 /**
    52.                * Array of observed attributes.
    53.                * @property observedAttributes {Array}
    54.                */
    55.                 static get observedAttributes() {
    56.                     return ['modulename', 'mode'];
    57.                 }
    58.                 /**
    59.                * Fires when the attribute value of the element is changed.
    60.                * @method attributeChangedCallback
    61.                */
    62.                 attributeChangedCallback(attrName, oldVal, newVal) {
    63.                     let isDirty = false;
    64.                     if (!this.connected) {
    65.                         return;
    66.                     }
    67.                     if (attrName.toLowerCase() == 'mode' && newVal && newVal != '') {
    68.                         this.mode = newVal;
    69.                         if (this.mode) {
    70.                             isDirty = true;
    71.                         }
    72.                     }
    73.                     if (attrName.toLowerCase() == 'modulename' && newVal && newVal != '') {
    74.                         this.moduleName = newVal;
    75.                         if (this.moduleName) {
    76.                             isDirty = true;
    77.                         }
    78.                     }
    79.                     if (isDirty) {
    80.                         this.refresh();
    81.                     }
    82.                 }
    83.                 refresh() {
    84.                     if ($(this).attr('manualInit') != 'true') {
    85.                         this.init();
    86.                     }
    87.                 }
    88.                 init() {
    89.                     let me = $(this);
    90.                     me.removeAttr('manualInit');
    91.                     me.html('');
    92.                     let params = {
    93.                         ObjectName: me.attr('ObjectName'),
    94.                         ObjectWhere: me.attr('ObjectWhere'),
    95.                         ModuleName: this.moduleName
    96.                         //PageName: flexygo.history.getPageName(me)
    97.                     };
    98.                     this.pageName = flexygo.history.getPageName(me);
    99.                     flexygo.ajax.post('~/api/Page', 'GetPageTabModules', params, (response) => {
    100.                         if (response) {
    101.                             me.empty();
    102.                             this.config = flexygo.utils.sortObject(response, 'TabOrder');
    103.                             this.render();
    104.                         }
    105.                     }, null, () => { this.stopLoading(); }, () => { this.startLoading(); });
    106.                 }
    107.                 render() {
    108.                     let me = $(this);
    109.                     let rendered = '';
    110.                     let module;
    111.                     let tabActiveMod = null;
    112.                     /*remove default paddding from body*/
    113.                     me.closest('.cntBody').addClass("tabPadding");
    114.                     /*Create list elements*/
    115.                     let tabclass = 'nav nav-tabs';
    116.                     if (this.mode == 'default') {
    117.                         /* Change class for mobile default tab */
    118.                         if (flexygo.utils.isSizeMobile()) {
    119.                             tabclass = 'list-piped';
    120.                             /* add tab pills if more than one level*/
    121.                         }
    122.                         else if (me.parents('flx-moduletab').length > 0) {
    123.                             tabclass = 'nav nav-pills';
    124.                             //tabclass = 'tabbutton';
    125.                         }
    126.                     }
    127.                     else {
    128.                         tabclass = 'buttontab';
    129.                     }
    130.                     //check if empty
    131.                     if (this.config.length == 0) {
    132.                         rendered += ' <ul class="' + tabclass + '"><li class="active"><a data-toggle="tab" href="#hr1"> <i class="flx-icon icon-danger icon-margin-right"></i>' + flexygo.localization.translate('moduletab.emptytabs') + '</a></li></ul>';
    133.                         rendered += '<div class="row empty-tab clear-both"><i class="flx-icon icon-information-2 icon-lg icon-margin-right"></i><span><strong>Info!</strong> ' + flexygo.localization.translate('moduletab.nocontent') + '</span></div>';
    134.                         me.html(rendered);
    135.                     }
    136.                     else {
    137.                         //Get active module for tabs from local storage
    138.                         let tabName = this.pageName + '-' + this.moduleName;
    139.                         let tabs = flexygo.storage.local.get('activeTabs');
    140.                         if (tabs != null) {
    141.                             tabActiveMod = tabs[tabName];
    142.                         }
    143.                         if (typeof tabActiveMod != 'undefined' && tabActiveMod != null) {
    144.                             let activeTabExists = false;
    145.                             for (let i = 0; i < this.config.length; i++) {
    146.                                 if (tabActiveMod == this.config[i].ModuleName && this.config[i].InitHidden == false) {
    147.                                     activeTabExists = true;
    148.                                 }
    149.                             }
    150.                             if (!activeTabExists) {
    151.                                 tabActiveMod = null;
    152.                             }
    153.                         }
    154.                         /*Build default active module*/
    155.                         let activeModId;
    156.                         for (let i = 0; i < this.config.length; i++) {
    157.                             let mod = this.config[i];
    158.                             if (((typeof tabActiveMod == 'undefined' || tabActiveMod == null) && i == 0) || tabActiveMod == mod.ModuleName) {
    159.                                 let componentString = mod.WebComponent;
    160.                                 if (mod.Params) {
    161.                                     componentString += ' ' + mod.Params;
    162.                                 }
    163.                                 activeModId = i;
    164.                                 module = $('<' + componentString + ' />').attr('ObjectName', me.attr('ObjectName')).attr('ObjectWhere', me.attr('ObjectWhere')).attr('isClone', me.attr('isClone')).attr('id', 'mod-' + mod.ModuleName).attr('modulename', mod.ModuleName);
    165.                                 this.activeModule = mod;
    166.                                 this.activeTitle = mod.Title;
    167.                             }
    168.                         }
    169.                         me.empty();
    170.                         if (tabclass == 'buttontab') {
    171.                             let holder = $('<div class="tab-button-holder"/ >');
    172.                             let btn = $('<button class="tab-button" ><i class="' + this.activeModule.IconClass + '"></i><span class="bttext">' + this.activeTitle + '</span><span class="caret"></span></button>');
    173.                             holder.append(btn);
    174.                             me.append(holder);
    175.                             btn.on('click', () => {
    176.                                 var cntMenu = $('flx-contextmenu')[0];
    177.                                 if (!cntMenu.hideMenu(btn)) {
    178.                                     let menuUl = $('<ul class="flx-contextmenu"/>');
    179.                                     for (let i = 0; i < this.config.length; i++) {
    180.                                         let mod = this.config[i];
    181.                                         let iconClass = mod.IconClass;
    182.                                         let tabtext = mod.Title;
    183.                                         let activeStr = '';
    184.                                         if (i == activeModId) {
    185.                                             activeStr = 'active';
    186.                                         }
    187.                                         /*add list element*/
    188.                                         let iconmargin = '';
    189.                                         if (iconClass.length > 0) {
    190.                                             iconmargin = ' icon-margin-right';
    191.                                         }
    192.                                         let nNode = $('<li data-modname="' + mod.ModuleName + '" class="' + activeStr + '" title= "' + tabtext + '"  > <span><i class="' + iconClass + iconmargin + '" > </i><span>&nbsp;' + tabtext + '</span> </span></li>');
    193.                                         nNode.on('click', () => {
    194.                                             this.showModule(i);
    195.                                             $(this).find('button span.bttext').html(this.activeTitle);
    196.                                             $(this).find('button i').attr('class', this.activeModule.IconClass);
    197.                                         });
    198.                                         menuUl.append(nNode);
    199.                                     }
    200.                                     cntMenu.showMenu(menuUl, btn);
    201.                                 }
    202.                             });
    203.                         }
    204.                         else {
    205.                             rendered += ' <ul class="' + tabclass + '">';
    206.                             // run throught tab modules
    207.                             for (let i = 0; i < this.config.length; i++) {
    208.                                 let mod = this.config[i];
    209.                                 let iconClass = mod.IconClass;
    210.                                 let tabtext = mod.Title;
    211.                                 let activeStr = '';
    212.                                 if (i == activeModId) {
    213.                                     activeStr = 'active';
    214.                                 }
    215.                                 let headerClass = mod.HeaderClass;
    216.                                 /*add list element*/
    217.                                 let iconmargin = '';
    218.                                 if (iconClass.length > 0) {
    219.                                     iconmargin = ' icon-margin-right';
    220.                                 }
    221.                                 if (mod.InitHidden) {
    222.                                     rendered += '<li data-modname="' + mod.ModuleName + '" init="false" class="hidden ' + activeStr + '">';
    223.                                 }
    224.                                 else {
    225.                                     rendered += '<li data-modname="' + mod.ModuleName + '"  class="' + activeStr + '">';
    226.                                 }
    227.                                 rendered += '<a class="' + headerClass + '" data-toggle="tab" href="#hr1" data-module-index="' + i + '" > <i class="' + iconClass + iconmargin + '"></i><span class="tabTitle">' + tabtext + '</span><b data-modname="' + mod.ModuleName + '" class="clickable flx-icon icon-margin-left icon-settings develop-only text-muted"></b></a></li>';
    228.                             }
    229.                             rendered += '</ul>';
    230.                         }
    231.                         rendered += '<div class="modulediv"></div>';
    232.                         me.append(rendered);
    233.                     }
    234.                     this.saveModulePresetHistory(this.activeModule);
    235.                     /*Add module to body*/
    236.                     module.is("flx-list[mode=list]") ? me.find(".modulediv").addClass("overflowx") : me.find(".modulediv").removeClass("overflowx");
    237.                     let cont = me.children('.modulediv');
    238.                     me.parents('flx-module').each((i, e) => {
    239.                         e.objectdefaults = this.activeModule.ObjectDefaults;
    240.                     });
    241.                     cont.append(module);
    242.                     this.moduleInitClass = cont.attr('class');
    243.                     cont.addClass(this.activeModule.ModuleClass);
    244.                     me.find('[data-module-index]').on('click', (ev) => {
    245.                         this.showModule(parseInt($(ev.currentTarget).attr('data-module-index')));
    246.                     });
    247.                     me.find('b.icon-settings').on('click', (ev) => {
    248.                         ev.stopPropagation();
    249.                         ev.preventDefault();
    250.                         flexygo.nav.openPage('edit', 'sysModule', "moduleName='" + $(ev.currentTarget).attr('data-modname') + "'", null, 'popup', true);
    251.                     });
    252.                 }
    253.                 showModule(modIndex) {
    254.                     /*Render given module in body*/
    255.                     let me = $(this);
    256.                     let mod = this.config[modIndex];
    257.                     this.activeModule = mod;
    258.                     this.activeTitle = mod.Title;
    259.                     let componentString = mod.WebComponent;
    260.                     if (mod.Params) {
    261.                         componentString += ' ' + mod.Params;
    262.                     }
    263.                     /*let hist = flexygo.history.get(me);
    264.                     hist.filtersValues = null;
    265.                     flexygo.history.replace(hist, me);*/
    266.                     /*save preset configuration of the new module if its not set*/
    267.                     this.saveModulePresetHistory(mod);
    268.                     me.parents('flx-module').find('.cntButtons .pager').remove();
    269.                     me.parents('flx-module').find('.cntBodyHeader, .cntBodyFooter').find('*').not('.ctnArrowHeader,.ctnArrowHeader > *').remove();
    270.                     $.each(me.parents('flx-module'), (i, e) => {
    271.                         e.objectdefaults = mod.ObjectDefaults;
    272.                     });
    273.                     let module = $('<' + componentString + ' />').attr('ObjectName', me.attr('ObjectName')).attr('ObjectWhere', me.attr('ObjectWhere')).attr('id', 'mod-' + mod.ModuleName).attr('modulename', mod.ModuleName);
    274.                     /*remove previous module*/
    275.                     me.children('.modulediv').empty();
    276.                     me.children('.modulediv').append(module);
    277.                     me.children('.modulediv').removeClass().addClass(this.moduleInitClass).addClass(this.activeModule.ModuleClass);
    278.                     if (module.is('flx-list[mode=list]')) {
    279.                         me.find('.modulediv').addClass("overflowx");
    280.                     }
    281.                     else {
    282.                         me.find('.modulediv').removeClass("overflowx");
    283.                     }
    284.                     /*save active tab for next time*/
    285.                     let tabName = this.pageName + '-' + this.moduleName;
    286.                     let tabs = flexygo.storage.local.get('activeTabs');
    287.                     if (tabs == null) {
    288.                         tabs = {};
    289.                     }
    290.                     tabs[tabName] = mod.ModuleName;
    291.                     flexygo.storage.local.add('activeTabs', tabs);
    292.                 }
    293.                 saveModulePresetHistory(module) {
    294.                     let me = $(this);
    295.                     let history = flexygo.history.get(me);
    296.                     if (!history) {
    297.                         history = new flexygo.nav.FlexygoHistory();
    298.                     }
    299.                     if (!history.presetsValues) {
    300.                         history.presetsValues = new flexygo.nav.ModulePresetHistory();
    301.                     }
    302.                     if (!history.presetsValues[module.ModuleName]) {
    303.                         history.presetsValues[module.ModuleName] = new flexygo.nav.PresetHistoryValue();
    304.                         history.presetsValues[module.ModuleName].presetId = module.PresetName;
    305.                         history.presetsValues[module.ModuleName].presetText = module.PresetText;
    306.                         history.presetsValues[module.ModuleName].presetIcon = module.PresetIcon;
    307.                     }
    308.                     flexygo.history.replace(history, me, false);
    309.                 }
    310.                 translate(str) {
    311.                     return flexygo.localization.translate(str);
    312.                 }
    313.                 startLoading() {
    314.                     if ($(this).parents('flx-module').length > 0) {
    315.                         $(this).parents('flx-module')[0].startLoading();
    316.                     }
    317.                 }
    318.                 stopLoading() {
    319.                     if ($(this).parents('flx-module').length > 0) {
    320.                         $(this).parents('flx-module')[0].stopLoading();
    321.                     }
    322.                 }
    323.             }
    324.             wc.FlxModuleTabElement = FlxModuleTabElement;
    325.         })(wc = ui.wc || (ui.wc = {}));
    326.     })(ui = flexygo.ui || (flexygo.ui = {}));
    327. })(flexygo || (flexygo = {}));
    328. window.customElements.define('flx-moduletab', flexygo.ui.wc.FlxModuleTabElement);
    329. //# sourceMappingURL=flx-moduletab.js.map
    330.