simplify support-tab

src/app/tabs/support-tab.js

@@ -6,32 +6,37 @@ var globalRegistry = require('../../global/registry')
 var EventManager = require('../../lib/events')
 
 class SupportTab {
+
   constructor (localRegistry) {
-    const self = this
+    this.event = new EventManager()
-    self.event = new EventManager()
+
-    self._view = { el: null, gitterIframe: '', config: {} }
+    this.el = null
-    self.data = { gitterIsLoaded: false }
+    this.gitterIframe = ''
-    self._components = {}
+
-    self._components.registry = localRegistry || globalRegistry
+    this.data = { gitterIsLoaded: false }
-
+    this._components = {}
-    self._deps = {
+    this._components.registry = localRegistry || globalRegistry
-      app: self._components.registry.get('app').api
+
+    this._deps = {
+      app: this._components.registry.get('app').api
     }
 
-    self._deps.app.event.register('tabChanged', (tabName) => {
+    this._deps.app.event.register('tabChanged', (tabName) => {
-      if (tabName !== 'Support' || self.data.gitterIsLoaded) return
+      if (tabName !== 'Support' || this.data.gitterIsLoaded) return
       const iframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
-      self._view.gitterIframe.parentNode.replaceChild(iframe, self._view.gitterIframe)
+      this.gitterIframe.parentNode.replaceChild(iframe, this.gitterIframe)
-      self._view.gitterIframe = iframe
+      this.gitterIframe = iframe
-      self._view.el.style.display = 'block'
+      this.el.style.display = 'block'
-      self.data.gitterIsLoaded = true
+      this.data.gitterIsLoaded = true
     })
   }
+
   render () {
-    const self = this
+    if (this.el) return this.el
-    if (self._view.el) return self._view.el
+
-    self._view.gitterIframe = yo`<div></div>`
+    this.gitterIframe = yo`<div></div>`
-    self._view.config.remixd = yo`
+
+    const remixd = yo`
       <div class="${css.info}">
         <div class=${css.title}>Accessing local files</div>
         <div class="${css.crow}">
@@ -43,7 +48,8 @@ class SupportTab {
         <div class="${css.crow}"><a target="_blank" href="https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem">http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html</a></div>
         <div class="${css.crow}">Installation: <pre class=${css.remixdinstallation}>npm install remixd -g</pre></div>
       </div>`
-    self._view.config.localremixd = yo`
+
+    const localremixd = yo`
       <div class="${css.info}">
         <div class=${css.title}>Running Remix locally</div>
         <div class="${css.crow}">
@@ -56,7 +62,8 @@ class SupportTab {
         </div>
         <a target="_blank" href="https://github.com/horizon-games/remix-app">https://github.com/horizon-games/remix-app</a>
       </div>`
-    self._view.el = yo`
+
+    this.el = yo`
       <div class="${css.supportTabView}" id="supportView">
         <div class="${css.infoBox}">
           Have a question, found a bug or want to propose a feature? Have a look at the
@@ -65,17 +72,18 @@ class SupportTab {
           <a target="_blank" href='https://solidity.readthedocs.io/en/latest/'> Solidity</a>.
         </div>
         <div class="${css.chat}">
-          <div class="${css.chatTitle}" onclick=${openLink} title='Click to open chat in Gitter'>
+          <div class="${css.chatTitle}" onclick=${() => { window.open('https://gitter.im/ethereum/remix') }} title='Click to open chat in Gitter'>
             <div class="${css.chatTitleText}">ethereum/remix community chat</div>
           </div>
-          ${self._view.gitterIframe}
+          ${this.gitterIframe}
         </div>
-        ${self._view.config.remixd}
+        ${remixd}
-        ${self._view.config.localremixd}
+        ${localremixd}
       </div>`
-    return self._view.el
+
-    function openLink () { window.open('https://gitter.im/ethereum/remix') }
+    return this.el
   }
+
 }
 
 module.exports = SupportTab