tab creation extracted to guiUtils

frontend-js/src/main/js/Admin.js

@@ -6,6 +6,7 @@ var Promise = require("bluebird");
 
 var CustomMapOptions = require('./map/CustomMapOptions');
 var Header = require('./gui/Header');
+var GuiUtils = require('./gui/leftPanel/GuiUtils');
 var ObjectWithListeners = require('./ObjectWithListeners');
 
 var CommentsAdminPanel = require('./gui/admin/CommentsAdminPanel');
@@ -35,6 +36,7 @@ function Admin(options) {
   self.setElement(options.getElement());
 
   self.setConfiguration(options.getConfiguration());
+  self.setGuiUtils(new GuiUtils());
   self._createGui();
 }
 
@@ -99,39 +101,20 @@ Admin.prototype._createGui = function() {
 Admin.prototype.addTab = function(params, navElement, contentElement) {
   var self = this;
 
-  var name = params.name;
-
-  var tabId = "export_panel_tab_" + this._tabIdCount;
+  var tabId = "admin_panel_tab_" + this._tabIdCount;
   self._tabIdCount++;
 
-  var navClass = '';
-  var contentClass = 'tab-pane';
-  if (navElement.children.length === 0) {
-    navClass = "active";
-    contentClass = "tab-pane active";
-  }
-
-  var navLi = document.createElement("li");
-  navLi.className = navClass;
-
-  var navLink = document.createElement("a");
-  navLink.href = "#" + tabId;
-  if (name !== undefined) {
-    navLink.innerHTML = name;
-  }
-  navLink.onclick = function() {
-    $(this).tab('show');
-  };
-  navLi.appendChild(navLink);
-  if (name !== undefined) {
-    navLink.innerHTML = name;
-  }
+  var navLi = self.getGuiUtils().createTabMenuObject({
+    id : tabId,
+    name : params.name,
+    navigationBar : navElement
+  });
   navElement.appendChild(navLi);
 
-  var contentDiv = document.createElement("div");
-  contentDiv.style.height = "100%";
-  contentDiv.className = contentClass;
-  contentDiv.id = tabId;
+  var contentDiv = self.getGuiUtils().createTabContentObject({
+    id : tabId,
+    navigationObject :navLi,
+  });
 
   contentElement.appendChild(contentDiv);
 
@@ -182,4 +165,12 @@ Admin.prototype.getHeader = function() {
   return this._header;
 };
 
+Admin.prototype.setGuiUtils = function(guiUtils) {
+  this._guiUtils = guiUtils;
+};
+
+Admin.prototype.getGuiUtils = function() {
+  return this._guiUtils;
+};
+
 module.exports = Admin;

frontend-js/src/main/js/gui/AbstractGuiElement.js

@@ -88,4 +88,5 @@ AbstractGuiElement.prototype.getLastDownloadUrl = function() {
   return this._downloadFile;
 };
 
+
 module.exports = AbstractGuiElement;

frontend-js/src/main/js/gui/leftPanel/GuiUtils.js

@@ -413,4 +413,48 @@ GuiUtils.prototype.createModifiersLine = function(label, value) {
   return result;
 };
 
+GuiUtils.prototype.createTabMenuObject = function(params) {
+  var name = params.name;
+  var id = params.id;
+  var navigationBar = params.navigationBar;
+
+  var navClass = '';
+  if (navigationBar.children.length === 0) {
+    navClass = "active";
+  }
+
+  var navLi = document.createElement("li");
+  navLi.className = navClass;
+
+  var navLink = document.createElement("a");
+  navLink.href = "#" + id;
+  if (name !== undefined) {
+    navLink.innerHTML = name;
+  }
+  navLink.onclick = function() {
+    $(this).tab('show');
+  };
+  navLi.appendChild(navLink);
+  if (name !== undefined) {
+    navLink.innerHTML = name;
+  }
+  return navLi;
+};
+
+GuiUtils.prototype.createTabContentObject = function(params) {
+  var navigationObject = params.navigationObject;
+  var tabId = params.id;
+  var result = document.createElement("div");
+  result.style.height = "100%";
+
+  var contentClass = 'tab-pane';
+  if (navigationObject.className === "active") {
+    contentClass = "tab-pane active";
+  }
+
+  result.className = contentClass;
+  result.id = tabId;
+  return result;
+};
+
 module.exports = GuiUtils;