Merge pull request #1228 from ethereum/refactor_tabbedMenu

refactor tabbed menu

src/app/panels/righthand-panel.js

@@ -37,9 +37,8 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
       </div>
     </div>
   `
-  appAPI.switchTab = (tabClass) => {
+  // selectTabByClassName
-    this.event.trigger('switchTab', [tabClass])
+  appAPI.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
-  }
 
   events.rhp = self.event
 

src/app/tabs/styles/tabbed-menu-styles.js

@@ -1,38 +0,0 @@
-var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  li.active {
-    background-color: ${styles.rightPanel.backgroundColor_Tab};
-    color: ${styles.appProperties.mainText_Color}
-  }
-  .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}
-  }
-`
-
-module.exports = css

src/app/tabs/tabbed-menu.js

@@ -1,52 +1,101 @@
 var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+
 var helper = require('../../lib/helper')
+var styles = require('../ui/styles-guide/theme-chooser').chooser()
 
-var css = require('./styles/tabbed-menu-styles')
+var EventManager = remixLib.EventManager
 
-class TabbedMenu {
+module.exports = class TabbedMenu {
   constructor (api = {}, events = {}, opts = {}) {
-    var self = this
+    const self = this
-    var tabView = document.createElement('ul')
+    self.event = new EventManager()
-    this.tabView = tabView
+    self._opts = opts
-    this.events = events
+    self._api = api
-    this.tabs = {}
+    self._events = events
-    this.contents = {}
+    self._view = { el: null, viewport: null, tabs: {}, contents: {} }
-
     events.app.register('debuggingRequested', () => {
-      self.selectTab(tabView.querySelector('li.debugView'))
+      self.selectTabByTitle('Debugger')
-    })
-
-    events.rhp.register('switchTab', tabName => {
-      self.selectTab(tabView.querySelector(`li.${tabName}`))
     })
   }
-  render () { return this.tabView }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+    self._view.el = yo`<ul class=${css.menu}>${Object.values(self._view.tabs)}</ul>`
+    return self._view.el
+  }
+  renderViewport () {
+    const self = this
+    if (self._view.viewport) return self._view.viewport
+    self._view.viewport = yo`
+      <div id="optionViews" class=${css.optionViews}>
+        ${Object.values(self._view.contents)}
+      </div>`
+    return self._view.viewport
+  }
+  addTab (title, cssClass, content) {
+    const self = this
+    if (helper.checkSpecialChars(title)) return
+    if (self._view.contents[title] || self._view.tabs[title]) throw new Error('tab already exists')
+    self._view.contents[title] = content
+    self._view.tabs[title] = yo`<li class="${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
+    if (self._view.el) self._view.el.appendChild(self._view.tabs[title])
+    if (self._view.viewport) self._view.viewport.appendChild(self._view.contents[title])
+  }
   selectTabByTitle (title) {
-    this.selectTab(this.tabs[title])
+    const self = this
+    self.selectTab(self._view.tabs[title])
+  }
+  selectTabByClassName (tabClass) {
+    const self = this
+    self.selectTab(self._view.el.querySelector(`li.${tabClass}`))
   }
-
   selectTab (el) {
+    const self = this
     if (!el.classList.contains(css.active)) {
-      var nodes = el.parentNode.querySelectorAll('li')
+      var nodes = Object.values(self._view.tabs)
       for (var i = 0; i < nodes.length; ++i) {
         nodes[i].classList.remove(css.active)
-        this.contents[nodes[i].getAttribute('title')].style.display = 'none'
+        self._view.contents[nodes[i].getAttribute('title')].style.display = 'none'
       }
     }
     var title = el.getAttribute('title')
-    this.contents[el.getAttribute('title')].style.display = 'block'
+    self._view.contents[el.getAttribute('title')].style.display = 'block'
     el.classList.add(css.active)
-    this.events.app.trigger('tabChanged', [title])
+    self._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
+const css = csjs`
+  li.active {
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
+    color: ${styles.appProperties.mainText_Color}
+  }
+  .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}
+  }
+`