left panel uses gui utils for managing tabs

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

@@ -36,12 +36,7 @@ var logger = require('../../logger');
 function LeftPanel(params) {
   AbstractGuiElement.call(this, params);
   var self = this;
-
-  this._tabIdCount = 0;
-  this._panels = [];
-
   self._createPanelGui();
-
 }
 
 LeftPanel.prototype = Object.create(AbstractGuiElement.prototype);
@@ -73,11 +68,7 @@ LeftPanel.prototype._createPanelGui = function () {
     customMap: self.getMap()
   }));
 
-  var guiUtils = self.getGuiUtils();
-  var tabData = guiUtils.createTabDiv({
-    element: self.getElement(),
-    id: "left_panel"
-  });
+  self.getGuiUtils().initTabContent(self);
 
   self.setHeader(header);
 
@@ -89,27 +80,27 @@ LeftPanel.prototype._createPanelGui = function () {
   });
 
   for (var i = 0; i < panels.length; i++) {
-    self.addTab(panels[i], tabData);
+    self.getGuiUtils().addTab(self, panels[i]);
   }
 };
 
 LeftPanel.prototype.getPanelsDefinition = function () {
   return [{
-    name: "SEARCH",
-    className: "fa-search",
-    panelClass: SearchPanel
+    name: "<div class='maintabdiv'><i class='fa fa-search maintab'></i><br>SEARCH</div>",
+    panelClass: SearchPanel,
+    options: {parent: this}
   }, {
-    name: "OVERLAYS",
-    className: "fa-th-list",
-    panelClass: OverlayPanel
+    name: "<div class='maintabdiv'><i class='fa fa-th-list maintab'></i><br>OVERLAYS</div>",
+    panelClass: OverlayPanel,
+    options: {parent: this}
   }, {
-    name: "SUBMAPS",
-    className: "fa-sitemap",
-    panelClass: SubmapPanel
+    name: "<div class='maintabdiv'><i class='fa fa-sitemap maintab'></i><br>SUBMAPS</div>",
+    panelClass: SubmapPanel,
+    options: {parent: this}
   }, {
-    name: "INFO",
-    className: "fa-info",
-    panelClass: ProjectInfoPanel
+    name: "<div class='maintabdiv'><i class='fa fa-info maintab'></i><br>INFO</div>",
+    panelClass: ProjectInfoPanel,
+    options: {parent: this}
   }];
 };
 
@@ -118,7 +109,7 @@ LeftPanel.prototype.hideTab = function (panel) {
   var panelDefinitions = self.getPanelsDefinition();
   for (var i = 0; i < panelDefinitions.length; i++) {
     if (panel instanceof panelDefinitions[i].panelClass) {
-      var liElement = $("li:has(a[data='left_tab_" + i + "'])", $(self.getElement()))[0];
+      var liElement = $("li:has(a[href='#" + panel.getElement().id + "'])", $(self.getElement()))[0];
       if (liElement !== undefined) {
         liElement.style.display = "none";
       } else {
@@ -189,9 +180,9 @@ LeftPanel.prototype.showElementDetails = function (element) {
     var model = self.getMap().getSubmapById(element.getModelId()).getModel();
     var bioEntity;
     return model.getByIdentifiedElement(element, true).then(function (result) {
-      bioEntity=result;
+      bioEntity = result;
       return self.prepareElementDetailsContent(bioEntity);
-    }).then(function(elementDetailsDiv){
+    }).then(function (elementDetailsDiv) {
       div.innerHTML = "";
       div.appendChild(elementDetailsDiv);
       $(div).dialog("open");
@@ -261,38 +252,6 @@ LeftPanel.prototype.getElementTitle = function (bioEntity) {
   }
 };
 
-LeftPanel.prototype.addTab = function (params, tabData) {
-  var self = this;
-
-  var name = params.name;
-  if (name !== undefined) {
-    if (name.length > 12) {
-      name = name.substring(0, 10) + "...";
-    }
-  } else {
-    name = "";
-  }
-
-
-  var guiUtils = self.getGuiUtils();
-  var data = guiUtils.createTab({
-    tabData: tabData,
-    title: '<div class="maintabdiv"><i class="fa ' + params.className + ' maintab"></i><br>' + name
-    + '</div>',
-    content: ""
-  });
-
-  $(data.title).attr("data", "left_tab_" + this._panels.length);
-
-  this._panels.push(new params.panelClass({
-    element: data.content,
-    customMap: self.getMap(),
-    configuration: self.getConfiguration(),
-    parent: self
-  }));
-
-};
-
 LeftPanel.prototype.hide = function () {
   this.getElement().style.display = "none";
 };