From cd164a3b2974da067fcda2851d85855488f5c9c5 Mon Sep 17 00:00:00 2001 From: Piotr Gawron <piotr.gawron@uni.lu> Date: Tue, 11 Apr 2017 16:50:19 +0200 Subject: [PATCH] LeftPanel agregator --- .../src/main/js/gui/leftPanel/LeftPanel.js | 159 ++++++++++++++++++ .../test/js/gui/leftPanel/LeftPanel-test.js | 38 +++++ 2 files changed, 197 insertions(+) create mode 100644 frontend-js/src/main/js/gui/leftPanel/LeftPanel.js create mode 100644 frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js diff --git a/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js new file mode 100644 index 0000000000..0a9147d776 --- /dev/null +++ b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js @@ -0,0 +1,159 @@ +"use strict"; + +/* exported logger */ + +var AbstractGuiElement = require('../AbstractGuiElement'); +var ChemicalPanel = require('./ChemicalPanel'); +var DrugPanel = require('./DrugPanel'); +var Footer = require('./Footer'); +var Header = require('../Header'); +var MiRnaPanel = require('./MiRnaPanel'); +var OverlayPanel = require('./OverlayPanel'); +var ProjectInfoPanel = require('./ProjectInfoPanel'); +var SearchPanel = require('./SearchPanel'); +var SubmapPanel = require('./SubmapPanel'); +var UserPanel = require('./UserPanel'); + +var Functions = require('../../Functions'); +var logger = require('../../logger'); + +function LeftPanel(params) { + AbstractGuiElement.call(this, params); + var self = this; + + this._tabIdCount = 0; + + self._createPanelGui(); + +} + +LeftPanel.prototype = Object.create(AbstractGuiElement.prototype); +LeftPanel.prototype.constructor = LeftPanel; + +LeftPanel.prototype._createPanelGui = function(message) { + var self = this; + var panels = [ { + name : "SEARCH", + className : "fa-search", + panelClass : SearchPanel, + }, { + name : "DRUG", + className : "fa-map-marker", + panelClass : DrugPanel, + }, { + name : "CHEMICAL", + className : "fa-map-marker", + panelClass : ChemicalPanel, + }, { + name : "MiRNA", + className : "fa-map-marker", + panelClass : MiRnaPanel, + }, { + name : "OVERLAYS", + className : "fa-th-list", + panelClass : OverlayPanel, + }, { + name : "LOGIN", + className : "fa-sign-in", + panelClass : UserPanel, + }, { + name : "SUBMAPS", + className : "fa-sitemap", + panelClass : SubmapPanel, + }, { + name : "PROJECT", + className : "fa-info", + panelClass : ProjectInfoPanel, + } ]; + + var headerDiv = Functions.createElement({ + type : "div", + id : "headerPanel" + }); + new Header({ + element : headerDiv, + customMap : self.getMap(), + }); + self.getElement().appendChild(headerDiv); + + var tabDiv = Functions.createElement({ + type : "div", + name : "tabView", + className : "tabbable boxed parentTabs" + }); + self.getElement().appendChild(tabDiv); + + 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); + + var footerDiv = Functions.createElement({ + type : "div", + }); + new Footer({ + element : footerDiv, + customMap : self.getMap(), + }); + self.getElement().appendChild(footerDiv); + + for (var i = 0; i < panels.length; i++) { + self.addTab(panels[i], tabMenuDiv, tabContentDiv); + } +}; + +LeftPanel.prototype.addTab = function(params, navElement, contentElement) { + var self =this; + + var name = params.name; + + var tabId = "left_panel_ab_" + 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) { + if (name.length > 12) { + name = name.substring(0, 10) + "..."; + } + navLink.innerHTML = name; + } + navLink.onclick = function() { + $(this).tab('show'); + }; + navLi.appendChild(navLink); + if (name !== undefined) { + navLink.innerHTML = name; + } + navElement.appendChild(navLi); + + var contentDiv = document.createElement("div"); + contentDiv.style.height = "100%"; + contentDiv.id = tabId; + + contentElement.appendChild(contentDiv); + + new params.panelClass({ + element : contentDiv, + customMap : self.getMap(), + }); +}; + +module.exports = LeftPanel; diff --git a/frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js b/frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js new file mode 100644 index 0000000000..e088d48784 --- /dev/null +++ b/frontend-js/src/test/js/gui/leftPanel/LeftPanel-test.js @@ -0,0 +1,38 @@ +"use strict"; + +/* exported logger */ + +var Helper = require('../../helper'); + +require('../../mocha-config.js'); + +var LeftPanel = require('../../../../main/js/gui/leftPanel/LeftPanel'); + +var chai = require('chai'); +var assert = chai.assert; +var logger = require('../../logger'); + +describe('LeftPanel', function() { + + var helper; + before(function() { + helper = new Helper(); + }); + + it('constructor', function() { + var map = helper.createCustomMap(); + helper.createSearchDbOverlay(map); + helper.createDrugDbOverlay(map); + helper.createChemicalDbOverlay(map); + helper.createMiRnaDbOverlay(map); + + new LeftPanel({ + element : testDiv, + customMap : map + }); + + assert.equal(logger.getWarnings().length, 0); + + }); + +}); -- GitLab