PluginManager uses Guiutils for managing tabs

frontend-js/src/main/css/global.css

@@ -415,6 +415,9 @@ table.minerva-window-drug-table td {
     position: relative;
 }
 
+/**
+Plugin tabs
+ */
 .minerva-plugin-split-bar {
     width: 5px;
     height: 100%;
@@ -433,6 +436,16 @@ table.minerva-window-drug-table td {
     display: none;
 }
 
+.minerva-plugin > .parentTabs {
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+.minerva-plugin > .parentTabs > .tab-pane {
+    overflow: auto;
+}
+
 .minerva-annotation-row-odd {
     padding: 5px;
     background-color: #EAEAEA;

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

@@ -816,92 +816,6 @@ GuiUtils.prototype.createTabContentObject = function (params) {
   return result;
 };
 
-/**
- *
- * @param {HTMLElement} [params.element]
- * @param {string} params.id
- *
- * @returns {{element: HTMLElement, menu: HTMLElement, content: HTMLElement, tabId: *}}
- */
-GuiUtils.prototype.createTabDiv = function (params) {
-  var tabDiv = Functions.createElement({
-    type: "div",
-    name: "tabView",
-    className: "tabbable boxed parentTabs"
-  });
-
-  var tabMenuDiv = Functions.createElement({
-    type: "ul",
-    className: "nav nav-tabs"
-  });
-  tabDiv.appendChild(tabMenuDiv);
-
-  var tabContentDiv = Functions.createElement({
-    type: "div",
-    className: "tab-content"
-  });
-  tabDiv.appendChild(tabContentDiv);
-
-  if (params.element !== undefined) {
-    params.element.appendChild(tabDiv);
-  }
-
-  return {
-    element: tabDiv,
-    menu: tabMenuDiv,
-    content: tabContentDiv,
-    tabId: params.id
-  }
-};
-
-GuiUtils.prototype.createTab = function (params) {
-  var tabData = params.tabData;
-
-  var tabId = tabData.tabId + "_tab_" + tabIdCounter;
-  tabIdCounter++;
-
-  var navClass = '';
-  var contentClass = 'tab-pane';
-  if (tabData.menu.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;
-
-  navLink.innerHTML = params.title;
-
-  navLink.onclick = function () {
-    $(this).tab('show');
-  };
-  navLi.appendChild(navLink);
-  tabData.menu.appendChild(navLi);
-
-  var contentDiv = document.createElement("div");
-  contentDiv.style.height = "100%";
-  contentDiv.className = contentClass;
-  contentDiv.id = tabId;
-
-  if (Functions.isDomElement(params.content)) {
-    contentDiv.appendChild(params.content);
-  } else {
-    contentDiv.innerHTML = params.content;
-  }
-  tabData.content.appendChild(contentDiv);
-
-  $(contentDiv).css("overflow", "auto");
-  $(contentDiv).css("height", "calc(100vh - " + $(contentDiv).offset().top + "px)");
-
-  return {
-    title: navLink,
-    content: contentDiv
-  }
-};
-
 /**
  *
  * @param {string} toolTip

frontend-js/src/main/js/plugin/Plugin.js

@@ -10,6 +10,19 @@ var Functions = require('../Functions');
 
 var pluginId = 0;
 
+/**
+ * @typedef {Object} PluginOptions
+ * @property {CustomMap} map
+ * @property {Configuration} configuration
+ * @property {HTMLElement} element
+ * @property {string} [url]
+ */
+
+/**
+ *
+ * @param {PluginOptions} options
+ * @constructor
+ */
 function Plugin(options) {
   ObjectWithListeners.call(this);
   var self = this;

frontend-js/src/main/js/plugin/PluginManager.js

@@ -11,6 +11,7 @@ var Promise = require("bluebird");
 
 // noinspection JSUnusedLocalSymbols
 var logger = require('../logger');
+var Functions = require('../Functions');
 
 /**
  *
@@ -41,18 +42,45 @@ function PluginManager(options) {
 PluginManager.prototype = Object.create(AbstractGuiElement.prototype);
 PluginManager.prototype.constructor = AbstractGuiElement;
 
+/**
+ *
+ * @returns {Plugin[]}
+ */
 PluginManager.prototype.getPlugins = function () {
   return this._plugins;
 };
 
+/**
+ *
+ * @returns {GuiUtils}
+ */
+PluginManager.prototype.getGuiUtils = function () {
+  if (this._guiUtils === undefined) {
+    this._guiUtils = new GuiUtils(this.getConfiguration());
+  }
+  return this._guiUtils;
+};
+
+/**
+ *
+ * @param {Plugin|{url:string}} options
+ * @returns {Plugin}
+ */
 PluginManager.prototype.addPlugin = function (options) {
   var self = this;
-  var tabData = self.createTabForPlugin();
+  if (self._panels === undefined) {
+    $(self.getElement()).show();
+    self.getGuiUtils().initTabContent(self);
+  }
+  var element = Functions.createElement({type: "div"});
+
+  self.getGuiUtils().addTab(self, {name: "PLUGIN", content: element});
+
   var plugin;
   if (options instanceof Plugin) {
     plugin = options;
     plugin.setOptions({
-      element: tabData.content,
+      element: element,
       configuration: self.getConfiguration(),
       map: self.getMap()
     });
@@ -62,22 +90,20 @@ PluginManager.prototype.addPlugin = function (options) {
     }
     plugin = new Plugin({
       url: options.url,
-      element: tabData.content,
+      element: element,
       configuration: self.getConfiguration(),
       map: self.getMap()
     });
     plugin.addListener("onUnload", function () {
-      tabData.content.parentNode.removeChild(tabData.content);
-      tabData.title.parentNode.parentNode.removeChild(tabData.title.parentNode);
+      self.getGuiUtils().hideTab(self, element);
     });
   }
   self._plugins.push(plugin);
   return plugin.load().then(function () {
-    tabData.title.innerHTML = plugin.getName();
-    var tab = $(tabData.content);
-    tab.css('overflow', 'auto');
+    var liElement = $("a[href='#" + element.parentNode.id + "']", $(self.getElement()))[0].innerHTML = plugin.getName();
+    var tab = $(element.parentNode);
     var adjustHeight = function () {
-      tab.css('height', 'calc( 100vh - ' + $(tabData.content.parentNode).offset().top + 'px )');
+      tab.css('height', 'calc( 100vh - ' + $(element.parentNode.parentNode).offset().top + 'px )');
     };
 
     self._pluginOnResizeHandlers[plugin.getPluginId()] = adjustHeight;
@@ -93,27 +119,15 @@ PluginManager.prototype.addPlugin = function (options) {
   });
 };
 
+/**
+ *
+ * @param {string} url
+ * @returns {boolean}
+ */
 PluginManager.prototype.isValidUrl = function (url) {
   return isUrl(url);
 };
-PluginManager.prototype.createTabForPlugin = function () {
-  var self = this;
-  var tabData = self._tabData;
-  var guiUtils = new GuiUtils(self.getConfiguration());
-  if (tabData === undefined) {
-    $(self.getElement()).show();
-    self._tabData = guiUtils.createTabDiv({element: self.getElement(), id: "plugin_tab"});
-    tabData = self._tabData;
-    $(tabData.element).css('position', 'absolute');
-    $(tabData.element).css('top', '0');
-    $(tabData.element).css('width', '100%');
-  }
-  return guiUtils.createTab({
-    title: "",
-    content: "",
-    tabData: tabData
-  });
-};
+
 PluginManager.prototype.adjustMinWidth = function () {
   var self = this;
   var oldVal = self.getElement().style.minWidth;

frontend-js/src/test/js/map/CustomMap-test.js

@@ -592,7 +592,7 @@ describe('CustomMap', function () {
       return map.triggerEvent("map-click", data);
     }).then(function () {
       //we need to wait because some implementations don't use promises...
-      return Promise.delay(100);
+      return Promise.delay(150);
     }).then(function () {
       assert.equal(map.getId(), map.getActiveSubmapId());
       var element = new IdentifiedElement({id: 329171, type: "ALIAS", modelId: map.getId()});