- fixed some JS performance issues with the client side UI update for active system modules (e.g. system description)

This commit is contained in:
Mark Friedrich
2018-07-07 20:05:57 +02:00
parent f9d7b00672
commit ab5ec91f60
11 changed files with 182 additions and 202 deletions

View File

@@ -74,26 +74,6 @@ class SystemSignatureModel extends AbstractMapTrackingModel {
]
];
/**
* set an array with all data for a system
* @param $data
*/
public function setData($data){
unset($data['id']);
unset($data['created']);
unset($data['updated']);
unset($data['createdCharacterId']);
unset($data['updatedCharacterId']);
foreach((array)$data as $key => $value){
if(!is_array($value)){
if($this->exists($key)){
$this->$key = $value;
}
}
}
}
/**
* get signature data
* @return \stdClass

View File

@@ -475,7 +475,7 @@ define([
// update system info panels
if(data.system){
mapModule.updateSystemModuleData(data.system);
ModuleMap.updateSystemModulesData(mapModule, data.system);
}
// store current map user data (cache)

View File

@@ -84,6 +84,7 @@ define([
* @param tabElement
*/
let setMapContentObserver = (tabElement) => {
tabElement.on('pf:drawSystemModules', '.' + config.mapTabContentClass, function(e){
drawSystemModules($(e.target));
});
@@ -98,7 +99,36 @@ define([
tabElement.on('pf:removeConnectionModules', '.' + config.mapTabContentClass, function(e){
removeConnectionModules($(e.target));
}) ;
});
tabElement.on('pf:updateSystemModules', '.' + config.mapTabContentClass, function(e, data){
updateSystemModules($(e.target), data);
});
};
/**
* update (multiple) modules
* @param tabContentElement
* @param modules
* @param data
*/
let updateModules = (tabContentElement, modules, data) => {
for(let Module of modules){
let moduleElement = tabContentElement.find('.' + Module.config.moduleTypeClass);
if(moduleElement.length > 0){
Module.updateModule(moduleElement, data);
}
}
};
/**
* update system modules with new data
* @param tabContentElement
* @param data
*/
let updateSystemModules = (tabContentElement, data) => {
let systemModules = [SystemInfoModule, SystemSignatureModule];
updateModules(tabContentElement, systemModules, data);
};
/**
@@ -303,15 +333,15 @@ define([
};
/**
* updates current visible/active mapElement in mapModuleElement with user data
* @param mapModuleElement
* updates current visible/active mapElement in mapModule with user data
* @param mapModule
* @returns {Promise<any>}
*/
let updateActiveMapUserData = (mapModuleElement) => {
let updateActiveMapUserData = (mapModule) => {
let updateActiveMapModuleExecutor = (resolve, reject) => {
// get all active map elements for module
let mapElement = mapModuleElement.getActiveMap();
let mapElement = mapModule.getActiveMap();
updateMapUserData(mapElement).then(payload => resolve());
};
@@ -355,22 +385,22 @@ define([
};
/**
* update system info panels (below map)
* update active system modules (below map)
* @param mapModule
* @param systemData
*/
$.fn.updateSystemModuleData = function(systemData){
let mapModule = $(this);
let updateSystemModulesData = (mapModule, systemData) => {
if(systemData){
// check if current open system is still the requested info system
let currentSystemData = Util.getCurrentSystemData();
if(currentSystemData){
if(systemData.id === currentSystemData.systemData.id){
// trigger system update events
$(document).triggerHandler('pf:updateSystemInfoModule', [systemData]);
$(document).triggerHandler('pf:updateSystemSignatureModule', [systemData]);
}
if(
currentSystemData &&
systemData.id === currentSystemData.systemData.id
){
// trigger system update events
let tabContentElement = $( '#' + config.mapTabIdPrefix + systemData.mapId + '.' + config.mapTabContentClass);
tabContentElement.trigger('pf:updateSystemModules', [systemData]);
}
}
};
@@ -946,15 +976,15 @@ define([
/**
* clear all active maps
* @param mapModuleElement
* @param mapModule
* @returns {Promise<any>}
*/
let clearMapModule = (mapModuleElement) => {
let clearMapModule = (mapModule) => {
let promiseDeleteTab = [];
let tabMapElement = $('#' + config.mapTabElementId);
if(tabMapElement.length > 0){
let tabElements = mapModuleElement.getMapTabElements();
let tabElements = mapModule.getMapTabElements();
for(let i = 0; i < tabElements.length; i++){
let tabElement = $(tabElements[i]);
let mapId = tabElement.data('map-id');
@@ -1040,10 +1070,10 @@ define([
/**
* load/update map module into element (all maps)
* @param mapModuleElement
* @param mapModule
* @returns {Promise<any>}
*/
let updateMapModule = (mapModuleElement) => {
let updateMapModule = (mapModule) => {
// performance logging (time measurement)
let logKeyClientMapData = Init.performanceLogging.keyClientMapData;
Util.timeStart(logKeyClientMapData);
@@ -1060,7 +1090,7 @@ define([
if(tempMapData.length === 0){
// clear all existing maps ----------------------------------------------------------------------------
clearMapModule(mapModuleElement)
clearMapModule(mapModule)
.then(payload => {
// no map data available -> show "new map" dialog
$(document).trigger('pf:menuShowMapSettings', {tab: 'new'});
@@ -1082,7 +1112,7 @@ define([
};
// tab element already exists
let tabElements = mapModuleElement.getMapTabElements();
let tabElements = mapModule.getMapTabElements();
// mapIds that are currently active
let activeMapIds = [];
@@ -1148,7 +1178,7 @@ define([
};
tabMapElement = getMapTabElement(options, currentUserData);
mapModuleElement.prepend(tabMapElement);
mapModule.prepend(tabMapElement);
// add new tab for each map
for(let j = 0; j < tempMapData.length; j++){
@@ -1214,6 +1244,7 @@ define([
return {
updateTabData: updateTabData,
updateMapModule: updateMapModule,
updateActiveMapUserData: updateActiveMapUserData
updateActiveMapUserData: updateActiveMapUserData,
updateSystemModulesData: updateSystemModulesData
};
});

View File

@@ -46,8 +46,8 @@ define([
fontTriglivianClass: 'pf-triglivian' // class for "Triglivian" names (e.g. Abyssal systems)
};
// disable Module update temporary (until. some requests/animations) are finished
let disableModuleUpdate = true;
// disable Module update temporary (in case e.g. textarea is currently active)
let disableModuleUpdate = false;
// animation speed values
let animationSpeedToolbarAction = 200;
@@ -55,17 +55,6 @@ define([
// max character length for system description
let maxDescriptionLength = 512;
/**
* set module observer and look for relevant system data to update
*/
let setModuleObserver = (moduleElement) => {
$(document).off('pf:updateSystemInfoModule').on('pf:updateSystemInfoModule', function(e, data){
if(data){
moduleElement.updateSystemInfoModule(data);
}
});
};
/**
* shows the tool action element by animation
* @param toolsActionElement
@@ -95,47 +84,37 @@ define([
/**
* update trigger function for this module
* compare data and update module
* @param moduleElement
* @param systemData
*/
$.fn.updateSystemInfoModule = function(systemData){
// module update is disabled
if(disableModuleUpdate === true){
return;
}
let moduleElement = $(this);
let updateModule = (moduleElement, systemData) => {
let systemId = moduleElement.data('id');
if(systemId === systemData.id){
// update module
// system status ==========================================================================================
// update system status -----------------------------------------------------------------------------------
let systemStatusLabelElement = moduleElement.find('.' + config.systemInfoStatusLabelClass);
let systemStatusId = parseInt( systemStatusLabelElement.attr( config.systemInfoStatusAttributeName ) );
if(systemStatusId !== systemData.status.id){
// status changed
let currentStatusClass = Util.getStatusInfoForSystem(systemStatusId, 'class');
let newStatusClass = Util.getStatusInfoForSystem(systemData.status.id, 'class');
let newStatusLabel = Util.getStatusInfoForSystem(systemData.status.id, 'label');
systemStatusLabelElement.removeClass(currentStatusClass).addClass(newStatusClass).text(newStatusLabel);
// set new status attribute
systemStatusLabelElement.attr( config.systemInfoStatusAttributeName, systemData.status.id);
}
// description textarea element ===========================================================================
// update description textarea ----------------------------------------------------------------------------
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
let description = descriptionTextareaElement.editable('getValue', true);
if(description !== systemData.description){
if(
!disableModuleUpdate && // don´t update if field is active
description !== systemData.description
){
// description changed
// description button
let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
// set new value
@@ -145,10 +124,8 @@ define([
if(systemData.description.length === 0){
// show/activate description field
// show button if value is empty
descriptionButton.show();
hideToolsActionElement(actionElement);
}else{
// hide/disable description field
@@ -158,8 +135,8 @@ define([
}
}
// created/updated tooltip ================================================================================
let nameRowElement = $(moduleElement).find('.' + config.systemInfoNameClass);
// created/updated tooltip --------------------------------------------------------------------------------
let nameRowElement = moduleElement.find('.' + config.systemInfoNameClass);
let tooltipData = {
created: systemData.created,
@@ -230,7 +207,7 @@ define([
emptytext: '',
onblur: 'cancel',
showbuttons: true,
value: '', // value is set by trigger function updateSystemInfoModule()
value: '', // value is set by trigger function updateModule()
rows: 5,
name: 'description',
inputclass: config.descriptionTextareaElementClass,
@@ -422,20 +399,6 @@ define([
return moduleElement;
};
/**
* init callback
* @param moduleElement
* @param mapId
* @param systemData
*/
let initModule = (moduleElement, mapId, systemData) => {
// set module observer
setModuleObserver(moduleElement);
// enable auto update
disableModuleUpdate = false;
};
/**
* efore module destroy callback
* @param moduleElement
@@ -449,7 +412,7 @@ define([
return {
config: config,
getModule: getModule,
initModule: initModule,
updateModule: updateModule,
beforeDestroy: beforeDestroy
};
});

View File

@@ -284,14 +284,28 @@ define([
}
};
/**
* update trigger function for this module
* compare data and update module
* @param moduleElement
* @param systemData
*/
let updateModule = (moduleElement, systemData) => {
if(systemData.signatures){
updateSignatureTable(moduleElement, systemData.signatures, true);
}
};
/**
* Updates a signature table, changes all signatures where name matches
* add all new signatures as a row
*
* @param moduleElement
* @param signatureDataOrig
* @param deleteOutdatedSignatures -> set to "true" if signatures should be deleted that are not included in "signatureData"
*/
$.fn.updateSignatureTable = function(signatureDataOrig, deleteOutdatedSignatures){
let updateSignatureTable = (moduleElement, signatureDataOrig, deleteOutdatedSignatures) => {
// check if table update is allowed
if(disableTableUpdate === true){
return;
@@ -303,8 +317,6 @@ define([
// disable update until function is ready;
lockSignatureTable();
let moduleElement = $(this);
// get signature table API
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
@@ -575,7 +587,7 @@ define([
unlockSignatureTable(true);
// updates table with new/updated signature information
this.moduleElement.updateSignatureTable(responseData.signatures, false);
updateSignatureTable(this.moduleElement, responseData.signatures, false);
}).fail(function( jqXHR, status, error) {
let reason = status + ' ' + error;
Util.showNotify({title: jqXHR.status + ': Update signatures', text: reason, type: 'warning'});
@@ -2311,12 +2323,6 @@ define([
let tablePrimaryElement = moduleElement.find('.' + config.sigTablePrimaryClass);
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
$(document).off('pf:updateSystemSignatureModule').on('pf:updateSystemSignatureModule', function(e, data){
if(data.signatures){
moduleElement.updateSignatureTable(data.signatures, true);
}
});
// set multi row select ---------------------------------------------------------------------------------------
tablePrimaryElement.on('click', 'tr', {moduleElement: moduleElement}, function(e){
if(e.ctrlKey) {
@@ -2451,6 +2457,7 @@ define([
getModule: getModule,
initModule: initModule,
beforeReDraw: beforeReDraw,
updateModule: updateModule,
beforeDestroy: beforeDestroy,
getAllSignatureNamesBySystem: getAllSignatureNamesBySystem
};

View File

@@ -1502,14 +1502,13 @@ define([
/**
* get all mapTabElements (<a> tags)
* or search for a specific tabElement within the
* mapModuleElement
* or search for a specific tabElement within mapModule
* @param mapId
* @returns {JQuery|*|{}|T}
*/
$.fn.getMapTabElements = function(mapId){
let mapModuleElement = $(this);
let mapTabElements = mapModuleElement.find('#' + config.mapTabBarId).find('a');
let mapModule = $(this);
let mapTabElements = mapModule.find('#' + config.mapTabBarId).find('a');
if(mapId){
// search for a specific tab element

View File

@@ -475,7 +475,7 @@ define([
// update system info panels
if(data.system){
mapModule.updateSystemModuleData(data.system);
ModuleMap.updateSystemModulesData(mapModule, data.system);
}
// store current map user data (cache)

View File

@@ -84,6 +84,7 @@ define([
* @param tabElement
*/
let setMapContentObserver = (tabElement) => {
tabElement.on('pf:drawSystemModules', '.' + config.mapTabContentClass, function(e){
drawSystemModules($(e.target));
});
@@ -98,7 +99,36 @@ define([
tabElement.on('pf:removeConnectionModules', '.' + config.mapTabContentClass, function(e){
removeConnectionModules($(e.target));
}) ;
});
tabElement.on('pf:updateSystemModules', '.' + config.mapTabContentClass, function(e, data){
updateSystemModules($(e.target), data);
});
};
/**
* update (multiple) modules
* @param tabContentElement
* @param modules
* @param data
*/
let updateModules = (tabContentElement, modules, data) => {
for(let Module of modules){
let moduleElement = tabContentElement.find('.' + Module.config.moduleTypeClass);
if(moduleElement.length > 0){
Module.updateModule(moduleElement, data);
}
}
};
/**
* update system modules with new data
* @param tabContentElement
* @param data
*/
let updateSystemModules = (tabContentElement, data) => {
let systemModules = [SystemInfoModule, SystemSignatureModule];
updateModules(tabContentElement, systemModules, data);
};
/**
@@ -303,15 +333,15 @@ define([
};
/**
* updates current visible/active mapElement in mapModuleElement with user data
* @param mapModuleElement
* updates current visible/active mapElement in mapModule with user data
* @param mapModule
* @returns {Promise<any>}
*/
let updateActiveMapUserData = (mapModuleElement) => {
let updateActiveMapUserData = (mapModule) => {
let updateActiveMapModuleExecutor = (resolve, reject) => {
// get all active map elements for module
let mapElement = mapModuleElement.getActiveMap();
let mapElement = mapModule.getActiveMap();
updateMapUserData(mapElement).then(payload => resolve());
};
@@ -355,22 +385,22 @@ define([
};
/**
* update system info panels (below map)
* update active system modules (below map)
* @param mapModule
* @param systemData
*/
$.fn.updateSystemModuleData = function(systemData){
let mapModule = $(this);
let updateSystemModulesData = (mapModule, systemData) => {
if(systemData){
// check if current open system is still the requested info system
let currentSystemData = Util.getCurrentSystemData();
if(currentSystemData){
if(systemData.id === currentSystemData.systemData.id){
// trigger system update events
$(document).triggerHandler('pf:updateSystemInfoModule', [systemData]);
$(document).triggerHandler('pf:updateSystemSignatureModule', [systemData]);
}
if(
currentSystemData &&
systemData.id === currentSystemData.systemData.id
){
// trigger system update events
let tabContentElement = $( '#' + config.mapTabIdPrefix + systemData.mapId + '.' + config.mapTabContentClass);
tabContentElement.trigger('pf:updateSystemModules', [systemData]);
}
}
};
@@ -946,15 +976,15 @@ define([
/**
* clear all active maps
* @param mapModuleElement
* @param mapModule
* @returns {Promise<any>}
*/
let clearMapModule = (mapModuleElement) => {
let clearMapModule = (mapModule) => {
let promiseDeleteTab = [];
let tabMapElement = $('#' + config.mapTabElementId);
if(tabMapElement.length > 0){
let tabElements = mapModuleElement.getMapTabElements();
let tabElements = mapModule.getMapTabElements();
for(let i = 0; i < tabElements.length; i++){
let tabElement = $(tabElements[i]);
let mapId = tabElement.data('map-id');
@@ -1040,10 +1070,10 @@ define([
/**
* load/update map module into element (all maps)
* @param mapModuleElement
* @param mapModule
* @returns {Promise<any>}
*/
let updateMapModule = (mapModuleElement) => {
let updateMapModule = (mapModule) => {
// performance logging (time measurement)
let logKeyClientMapData = Init.performanceLogging.keyClientMapData;
Util.timeStart(logKeyClientMapData);
@@ -1060,7 +1090,7 @@ define([
if(tempMapData.length === 0){
// clear all existing maps ----------------------------------------------------------------------------
clearMapModule(mapModuleElement)
clearMapModule(mapModule)
.then(payload => {
// no map data available -> show "new map" dialog
$(document).trigger('pf:menuShowMapSettings', {tab: 'new'});
@@ -1082,7 +1112,7 @@ define([
};
// tab element already exists
let tabElements = mapModuleElement.getMapTabElements();
let tabElements = mapModule.getMapTabElements();
// mapIds that are currently active
let activeMapIds = [];
@@ -1148,7 +1178,7 @@ define([
};
tabMapElement = getMapTabElement(options, currentUserData);
mapModuleElement.prepend(tabMapElement);
mapModule.prepend(tabMapElement);
// add new tab for each map
for(let j = 0; j < tempMapData.length; j++){
@@ -1214,6 +1244,7 @@ define([
return {
updateTabData: updateTabData,
updateMapModule: updateMapModule,
updateActiveMapUserData: updateActiveMapUserData
updateActiveMapUserData: updateActiveMapUserData,
updateSystemModulesData: updateSystemModulesData
};
});

View File

@@ -46,8 +46,8 @@ define([
fontTriglivianClass: 'pf-triglivian' // class for "Triglivian" names (e.g. Abyssal systems)
};
// disable Module update temporary (until. some requests/animations) are finished
let disableModuleUpdate = true;
// disable Module update temporary (in case e.g. textarea is currently active)
let disableModuleUpdate = false;
// animation speed values
let animationSpeedToolbarAction = 200;
@@ -55,17 +55,6 @@ define([
// max character length for system description
let maxDescriptionLength = 512;
/**
* set module observer and look for relevant system data to update
*/
let setModuleObserver = (moduleElement) => {
$(document).off('pf:updateSystemInfoModule').on('pf:updateSystemInfoModule', function(e, data){
if(data){
moduleElement.updateSystemInfoModule(data);
}
});
};
/**
* shows the tool action element by animation
* @param toolsActionElement
@@ -95,47 +84,37 @@ define([
/**
* update trigger function for this module
* compare data and update module
* @param moduleElement
* @param systemData
*/
$.fn.updateSystemInfoModule = function(systemData){
// module update is disabled
if(disableModuleUpdate === true){
return;
}
let moduleElement = $(this);
let updateModule = (moduleElement, systemData) => {
let systemId = moduleElement.data('id');
if(systemId === systemData.id){
// update module
// system status ==========================================================================================
// update system status -----------------------------------------------------------------------------------
let systemStatusLabelElement = moduleElement.find('.' + config.systemInfoStatusLabelClass);
let systemStatusId = parseInt( systemStatusLabelElement.attr( config.systemInfoStatusAttributeName ) );
if(systemStatusId !== systemData.status.id){
// status changed
let currentStatusClass = Util.getStatusInfoForSystem(systemStatusId, 'class');
let newStatusClass = Util.getStatusInfoForSystem(systemData.status.id, 'class');
let newStatusLabel = Util.getStatusInfoForSystem(systemData.status.id, 'label');
systemStatusLabelElement.removeClass(currentStatusClass).addClass(newStatusClass).text(newStatusLabel);
// set new status attribute
systemStatusLabelElement.attr( config.systemInfoStatusAttributeName, systemData.status.id);
}
// description textarea element ===========================================================================
// update description textarea ----------------------------------------------------------------------------
let descriptionTextareaElement = moduleElement.find('.' + config.descriptionTextareaElementClass);
let description = descriptionTextareaElement.editable('getValue', true);
if(description !== systemData.description){
if(
!disableModuleUpdate && // don´t update if field is active
description !== systemData.description
){
// description changed
// description button
let descriptionButton = moduleElement.find('.' + config.addDescriptionButtonClass);
// set new value
@@ -145,10 +124,8 @@ define([
if(systemData.description.length === 0){
// show/activate description field
// show button if value is empty
descriptionButton.show();
hideToolsActionElement(actionElement);
}else{
// hide/disable description field
@@ -158,8 +135,8 @@ define([
}
}
// created/updated tooltip ================================================================================
let nameRowElement = $(moduleElement).find('.' + config.systemInfoNameClass);
// created/updated tooltip --------------------------------------------------------------------------------
let nameRowElement = moduleElement.find('.' + config.systemInfoNameClass);
let tooltipData = {
created: systemData.created,
@@ -230,7 +207,7 @@ define([
emptytext: '',
onblur: 'cancel',
showbuttons: true,
value: '', // value is set by trigger function updateSystemInfoModule()
value: '', // value is set by trigger function updateModule()
rows: 5,
name: 'description',
inputclass: config.descriptionTextareaElementClass,
@@ -422,20 +399,6 @@ define([
return moduleElement;
};
/**
* init callback
* @param moduleElement
* @param mapId
* @param systemData
*/
let initModule = (moduleElement, mapId, systemData) => {
// set module observer
setModuleObserver(moduleElement);
// enable auto update
disableModuleUpdate = false;
};
/**
* efore module destroy callback
* @param moduleElement
@@ -449,7 +412,7 @@ define([
return {
config: config,
getModule: getModule,
initModule: initModule,
updateModule: updateModule,
beforeDestroy: beforeDestroy
};
});

View File

@@ -284,14 +284,28 @@ define([
}
};
/**
* update trigger function for this module
* compare data and update module
* @param moduleElement
* @param systemData
*/
let updateModule = (moduleElement, systemData) => {
if(systemData.signatures){
updateSignatureTable(moduleElement, systemData.signatures, true);
}
};
/**
* Updates a signature table, changes all signatures where name matches
* add all new signatures as a row
*
* @param moduleElement
* @param signatureDataOrig
* @param deleteOutdatedSignatures -> set to "true" if signatures should be deleted that are not included in "signatureData"
*/
$.fn.updateSignatureTable = function(signatureDataOrig, deleteOutdatedSignatures){
let updateSignatureTable = (moduleElement, signatureDataOrig, deleteOutdatedSignatures) => {
// check if table update is allowed
if(disableTableUpdate === true){
return;
@@ -303,8 +317,6 @@ define([
// disable update until function is ready;
lockSignatureTable();
let moduleElement = $(this);
// get signature table API
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
@@ -575,7 +587,7 @@ define([
unlockSignatureTable(true);
// updates table with new/updated signature information
this.moduleElement.updateSignatureTable(responseData.signatures, false);
updateSignatureTable(this.moduleElement, responseData.signatures, false);
}).fail(function( jqXHR, status, error) {
let reason = status + ' ' + error;
Util.showNotify({title: jqXHR.status + ': Update signatures', text: reason, type: 'warning'});
@@ -2311,12 +2323,6 @@ define([
let tablePrimaryElement = moduleElement.find('.' + config.sigTablePrimaryClass);
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
$(document).off('pf:updateSystemSignatureModule').on('pf:updateSystemSignatureModule', function(e, data){
if(data.signatures){
moduleElement.updateSignatureTable(data.signatures, true);
}
});
// set multi row select ---------------------------------------------------------------------------------------
tablePrimaryElement.on('click', 'tr', {moduleElement: moduleElement}, function(e){
if(e.ctrlKey) {
@@ -2451,6 +2457,7 @@ define([
getModule: getModule,
initModule: initModule,
beforeReDraw: beforeReDraw,
updateModule: updateModule,
beforeDestroy: beforeDestroy,
getAllSignatureNamesBySystem: getAllSignatureNamesBySystem
};

View File

@@ -1502,14 +1502,13 @@ define([
/**
* get all mapTabElements (<a> tags)
* or search for a specific tabElement within the
* mapModuleElement
* or search for a specific tabElement within mapModule
* @param mapId
* @returns {JQuery|*|{}|T}
*/
$.fn.getMapTabElements = function(mapId){
let mapModuleElement = $(this);
let mapTabElements = mapModuleElement.find('#' + config.mapTabBarId).find('a');
let mapModule = $(this);
let mapTabElements = mapModule.find('#' + config.mapTabBarId).find('a');
if(mapId){
// search for a specific tab element