improve tabbed menu to dynamically load tab

src/app/panels/righthand-panel.js

 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
-var tabbedMenu = require('../tabs/tabbed-menu')
+var TabbedMenu = require('../tabs/tabbed-menu')
 var compileTab = require('../tabs/compile-tab')
 var runTab = require('../tabs/run-tab')
 var settingsTab = require('../tabs/settings-tab')
@@ -121,15 +121,9 @@ function RighthandPanel (appAPI, events, opts) {
   self.event = new EventManager()
   self._view = {}
 
-  var optionViews = yo`<div id="optionViews" class="settingsView">${cssTabs}</div>`
+  var optionViews = yo`<div id="optionViews"></div>`
   var options = yo`
     <ul class=${css.opts}>
-      <li class="${css.opts_li} compileView" title="Compile">Compile</li>
-      <li class="${css.opts_li} runView" title="Run">Run</li>
-      <li class="${css.opts_li} settingsView" title="Settings">Settings</li>
-      <li class="${css.opts_li} debugView" title="Debugger">Debugger</li>
-      <li class="${css.opts_li} staticanalysisView" title="Static Analysis">Analysis</li>
-      <li class="${css.opts_li} supportView" title="Help and support">Support</li>
     </ul>
   `
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
@@ -147,24 +141,26 @@ function RighthandPanel (appAPI, events, opts) {
   appAPI.switchTab = (tabClass) => {
     this.event.trigger('switchTab', [tabClass])
   }
-  compileTab(optionViews, appAPI, events, opts)
-  runTab(optionViews, appAPI, events, opts)
-  settingsTab(optionViews, appAPI, events, opts)
-  analysisTab(optionViews, appAPI, events, opts)
-  debuggerTab(optionViews, appAPI, events, opts)
-  supportTab(optionViews, appAPI, events, opts)
+
+  // load tabbed menu component
+  var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
+  self._view.tabbedMenu = new TabbedMenu(options, {}, tabEvents, {})
+
+  events.rhp = self.event
+
+  this._view.tabbedMenu.addTab('Compile', 'compileView', compileTab(optionViews, appAPI, events, opts))
+  this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events, opts))
+  this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events, opts))
+  this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews, appAPI, events, opts))
+  this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews, appAPI, events, opts))
+  this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, appAPI, events, opts))
+  this._view.tabbedMenu.selectTabByTitle('Compile')
 
   self.render = function () { return self._view.element }
 
   self.init = function () {
     ;[...options.children].forEach((el) => { el.classList.add(css.options) })
 
-    // ----------------- tabbed menu -----------------
-    var tabbedMenuAPI = {}
-    // load tabbed menu component
-    var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
-    tabbedMenu(options, tabbedMenuAPI, tabEvents, {})
-
     // ----------------- resizeable ui ---------------
     var limit = 60
     self._view.dragbar.addEventListener('mousedown', mousedown)
@@ -206,27 +202,3 @@ function RighthandPanel (appAPI, events, opts) {
     }
   }
 }
-
-var cssTabs = yo`<style>#optionViews.settingsView #settingsView {
-    display: block;
-}
-
-#optionViews.compileView #compileTabView {
-    display: block;
-}
-
-#optionViews.runView #runTabView {
-    display: block;
-}
-
-#optionViews.debugView #debugView {
-    display: block;
-}
-
-#optionViews.staticanalysisView #staticanalysisView {
-    display: block;
-}
-
-#optionViews.supportView #supportView {
-    display: block;
-}</style>`

src/app/tabs/analysis-tab.js

@@ -34,4 +34,5 @@ function analysisTab (container, appAPI, events, opts) {
     </div>
   `
   container.appendChild(el)
+  return el
 }

src/app/tabs/compile-tab.js

@@ -445,6 +445,7 @@ function compileTab (container, appAPI, appEvents, opts) {
     }
     return el
   }
+  return el
 }
 
 function detailsHelpSection () {

src/app/tabs/debugger-tab.js

@@ -24,4 +24,5 @@ function debuggerTab (container, appAPI, events, opts) {
       <div id="debugger" class="${css.debugger}"></div>
     </div>`
   container.appendChild(el)
+  return el
 }

src/app/tabs/run-tab.js

@@ -250,6 +250,7 @@ function runTab (container, appAPI, appEvents, opts) {
     noInstancesText.style.display = 'block'
     instanceContainer.appendChild(noInstancesText)
   })
+  return el
 }
 
 function fillAccountsList (appAPI, container) {

src/app/tabs/settings-tab.js

@@ -137,6 +137,7 @@ function SettingsTab (container, appAPI, appEvents, opts) {
   })
 
   container.appendChild(el)
+  return el
 }
 
 function setVersionText (text, el) {

src/app/tabs/support-tab.js

@@ -86,6 +86,7 @@ function supportTab (container, appAPI, events, opts) {
     </div>
   `
   container.appendChild(el)
+  return el
 }
 
 function openLink () {

src/app/tabs/tabbed-menu.js

-var $ = require('jquery')
+var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
@@ -6,46 +6,84 @@ var remixLib = require('remix-lib')
 var styleGuide = remixLib.ui.styleGuide
 var styles = styleGuide()
 
-module.exports = tabbedMenu
+var helper = require('../../lib/helper')
 
 var css = csjs`
   li.active {
     background-color: ${styles.rightPanel.backgroundColor_Tab};
-    color: ${styles.appProperties.mainText_Color};
+    color: ${styles.appProperties.mainText_Color}
   }
-`
-
-function tabbedMenu (container, appAPI, events, opts) {
-  var lis = container.querySelectorAll('li')
-  for (var li = 0; li < lis.length; ++li) {
-    lis[li].onclick = function (ev) { selectTab(this) }
+  .options {
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    font-size: 1em;
+    text-align: center;
+  }
+  .opts {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .opts_li {
+    display: block;
+    font-weight: bold;
+    color: ${styles.rightPanel.text_Teriary}
   }
+  .opts_li.active {
+    color: ${styles.rightPanel.text_Primary}
+  }
+  .opts_li:hover {
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
+  }
+`
 
-  events.app.register('debuggingRequested', () => {
-    selectTab(container.querySelector('li.debugView'))
-  })
+class TabbedMenu {
+  constructor (tabView, api, events, opts) {
+    var self = this
+    this.tabView = tabView
+    this.events = events
+    this.tabs = {}
+    this.contents = {}
 
-  events.rhp.register('switchTab', tabName => {
-    selectTab(container.querySelector(`li.${tabName}`))
-  })
+    events.app.register('debuggingRequested', () => {
+      self.selectTab(tabView.querySelector('li.debugView'))
+    })
 
-  // initialize tabbed menu
-  selectTab(container.querySelector('.compileView'))
+    events.rhp.register('switchTab', tabName => {
+      self.selectTab(tabView.querySelector(`li.${tabName}`))
+    })
+  }
 
-  // select tab
+  selectTabByTitle (title) {
+    this.selectTab(this.tabs[title])
+  }
 
-  function selectTab (el) {
-    var match = /[a-z]+View/.exec(el.className)
-    if (!match) return
-    var cls = match[0]
+  selectTab (el) {
     if (!el.classList.contains(css.active)) {
       var nodes = el.parentNode.querySelectorAll('li')
       for (var i = 0; i < nodes.length; ++i) {
         nodes[i].classList.remove(css.active)
+        this.contents[nodes[i].getAttribute('title')].style.display = 'none'
       }
-      $('#optionViews').attr('class', '').addClass(cls)
-      el.classList.add(css.active)
     }
-    events.app.trigger('tabChanged', [cls])
+    var title = el.getAttribute('title')
+    this.contents[el.getAttribute('title')].style.display = 'block'
+    el.classList.add(css.active)
+    this.events.app.trigger('tabChanged', [title])
+  }
+
+  addTab (title, cssClass, content) {
+    var self = this
+    if (!helper.checkSpecialChars(title)) {
+      this.contents[title] = content
+      this.tabs[title] = yo`<li class="${css.opts_li} ${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
+      this.tabView.appendChild(this.tabs[title])
+    }
   }
 }
+
+module.exports = TabbedMenu