toggle swap panel

src/app.js

@@ -104,8 +104,9 @@ var css = csjs`
     flex-direction     : column;
     position           : absolute;
     top                : 0;
+    left               : 50px;
     bottom             : 0;
-    overflow           : hidden
+    overflow           : hidden;
   }
   .highlightcode {
     position:absolute;
@@ -173,10 +174,7 @@ class App {
 
   init () {
     var self = this
-    self._view.swappanel.style.left = self._view.iconpanel.clientWidth + 'px'
-    self._view.mainpanel.style.left = (self._view.iconpanel.clientWidth + self._view.swappanel.clientWidth) + 'px'
-
-    let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 400, x: 450 }) // eslint-disable-line
+    self._components.resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 400, x: 450 })
     run.apply(self)
   }
 
@@ -450,7 +448,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   const swapPanelComponent = new SwapPanelComponent()
   const verticalIconComponent = new VerticalIconsComponent()
   const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager) // eslint-disable-line
-  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager) // eslint-disable-line
+  const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager) // eslint-disable-line  
+
+  swapPanelApi.event.on('toggle', () => {
+    this._components.resizeFeature.panel1.clientWidth !== 0 ? this._components.resizeFeature.minimize() : this._components.resizeFeature.maximise() 
+  })
+  swapPanelApi.event.on('showing', () => { this._components.resizeFeature.maximise() })
 
   self._components.editorpanel.init()
   self._components.fileManager.init()

src/app/components/swap-panel-api.js

@@ -1,10 +1,18 @@
-// const EventEmmitter = require('events')
+import EventEmmitter from 'events'
 
 class SwapPanelApi {
   constructor (swapPanelComponent, verticalIconsComponent, appManager) {
+    this.event = new EventEmmitter()
     this.component = swapPanelComponent
+    this.currentContent
     verticalIconsComponent.event.on('showContent', (moduleName) => {
+      if (this.currentContent === moduleName) {
+        this.event.emit('toggle')
+        return
+      }
+      this.event.emit('showing', moduleName)
       this.component.showContent(moduleName)
+      this.currentContent = moduleName
     })
     appManager.event.on('requestContainer', (mod, content) => {
       this.add(mod.name, content)

src/lib/panels-resize.js

@@ -37,6 +37,9 @@ export default class PanelsResize {
   constructor (idpanel1, idpanel2, opt) {
     var panel1 = document.querySelector(idpanel1)
     var panel2 = document.querySelector(idpanel2)
+    this.panel1 = panel1
+    this.panel2 = panel2
+    this.opt = opt
 
     var ghostbar = yo`<div class=${css.ghostbar}></div>`
 
@@ -61,13 +64,13 @@ export default class PanelsResize {
     }
 
     let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
-      let p = processPositiions(event)
+      let p = processPositions(event)
       if (p.panel1Width <= opt.minWidth || p.panel2Width <= opt.minWidth) return
       ghostbar.style.left = event.x + 'px'
     }
 
     let setPosition = (event) => {
-      let p = processPositiions(event)
+      let p = processPositions(event)
       panel1.style.width = p.panel1Width + 'px'
       panel2.style.left = p.panel2left + 'px'
       panel2.style.width = p.panel2Width + 'px'
@@ -81,7 +84,7 @@ export default class PanelsResize {
       setPosition(event)
     }
 
-    let processPositiions = (event) => {
+    let processPositions = (event) => {
       let panel1Width = event.x - panel1.offsetLeft
       panel1Width = panel1Width < opt.minWidth ? opt.minWidth : panel1Width
       let panel2left = panel1.offsetLeft + panel1Width
@@ -98,5 +101,23 @@ export default class PanelsResize {
     panel1.appendChild(dragbar)
 
     setPosition(opt)
+  }  
+
+  minimize () {
+    let panel1Width = 0
+    let panel2left = this.panel1.offsetLeft + panel1Width
+    let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
+    this.panel1.style.width = panel1Width + 'px'
+    this.panel2.style.left = panel2left + 'px'
+    this.panel2.style.width = panel2Width + 'px'
+  }
+
+  maximise () {
+    let panel1Width = this.opt.minWidth
+    let panel2left = this.panel1.offsetLeft + panel1Width
+    let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
+    this.panel1.style.width = panel1Width + 'px'
+    this.panel2.style.left = panel2left + 'px'
+    this.panel2.style.width = panel2Width + 'px'
   }
 }