REFACTOR (7) fix toggle and resize of panels

assets/css/browser-solidity.css

@@ -42,18 +42,6 @@
     display: inline-block;
 }
 
-#righthand-panel {
-    position: absolute;
-    top: 0;
-    width: 37em;
-    max-width: 80vw;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-
 #header {
     font-size: 13px;
     height: 100%;
@@ -322,17 +310,6 @@
     border: .2em dotted #ffbd01;
 }
 
-#ghostbar {
-    width: 1px;
-    background-color: red;
-    opacity: 0.5;
-    position: absolute;
-    cursor: col-resize;
-    z-index: 9999;
-    top: 0;
-    bottom: 0;
-}
-
 input[readonly] {
     display: block;
     width: 100%;

src/app.js

@@ -44,42 +44,89 @@ var css = csjs`
     position           : relative;
     width              : 100vw;
     height             : 100vh;
+    overflow           : hidden;
   }
   .centerpanel         {
     display            : flex;
     flex-direction     : column;
     position           : absolute;
     top                : 0;
-    left               : 200px;
-    right              : 0;
     bottom             : 0;
+    overflow           : hidden;
   }
   .leftpanel           {
     display            : flex;
+    flex-direction     : column;
     position           : absolute;
     top                : 0;
-    left               : 0;
-    right              : 0;
     bottom             : 0;
-    width              : 200px;
+    left               : 0;
+    overflow           : hidden;
   }
-  .dragbar2            {
-    background-color   : transparent;
+  .rightpanel          {
+    display            : flex;
+    flex-direction     : column;
     position           : absolute;
-    width              : 0.5em;
-    top                : 3em;
+    top                : 0;
+    right              : 0;
     bottom             : 0;
-    cursor             : col-resize;
-    z-index            : 999;
-    border-right       : 2px solid hsla(215, 81%, 79%, .3);    
+    overflow           : hidden;
   }
 `
 
 class App {
   constructor (opts = {}) {
     var self = this
+    self._api = {}
+    var fileStorage = new Storage('sol:')
+    self._api.config = new Config(fileStorage)
+    self._api.filesProviders = {}
+    self._api.filesProviders['browser'] = new Browserfiles(fileStorage)
+    self._api.filesProviders['localhost'] = new SharedFolder(new Remixd())
     self._view = {}
     self._components = {}
+    self.data = {
+      _layout: {
+        right: {
+          offset: self._api.config.get('right-offset') || 200,
+          show: true
+        }, // @TODO: adapt sizes proportionally to browser window size
+        left: {
+          offset: self._api.config.get('left-offset') || 200,
+          show: true
+        }
+      }
+    }
+    // ----------------- editor ----------------------------
+    self._components.editor = new Editor({}) // @TODO: put into editorpanel
+    // ----------------- editor panel ----------------------
+    self._components.editorpanel = new EditorPanel({
+      api: { editor: self._components.editor },
+      data: { _layout: self.data._layout }
+    })
+    self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
+  }
+  _adjustLayout (direction, delta) {
+    var self = this
+    var layout = self.data._layout[direction]
+    if (layout) {
+      if (delta === undefined) {
+        layout.show = !layout.show
+        if (layout.show) delta = layout.offset
+        else delta = 0
+      } else {
+        self._api.config.set(`${direction}-offset`, delta)
+        layout.offset = delta
+      }
+    }
+    if (direction === 'left') {
+      self._view.leftpanel.style.width = delta + 'px'
+      self._view.centerpanel.style.left = delta + 'px'
+    }
+    if (direction === 'right') {
+      self._view.rightpanel.style.width = delta + 'px'
+      self._view.centerpanel.style.right = delta + 'px'
+    }
   }
   init () {
     var self = this
@@ -88,22 +135,6 @@ class App {
   render () {
     var self = this
     if (self._view.el) return self._view.el
-    /*************************************************************************/
-    // ----------------- editor ----------------------------
-    self._components.editor = new Editor({}) // @TODO: put into editorpanel
-    // ----------------- editor panel ----------------------
-    var opts = { api: { editor: self._components.editor } }
-    self._components.editorpanel = new EditorPanel(opts)
-    /*************************************************************************/
-    // self._api = opts.api
-    // self.data = {
-    //   _layout: {
-    //     seperator1:  self._api.config.get('seperator1') ||  200,
-    //     seperator2:  self._api.config.get('seperator2') ||  200,
-    //     editorsize:  self._api.config.get('editorWindowSize') || 400
-    //   }
-    // }
-    /*************************************************************************/
     self._view.leftpanel = yo`
       <div id="filepanel" class=${css.leftpanel}>
         ${''}
@@ -115,8 +146,7 @@ class App {
       </div>
     `
     self._view.rightpanel = yo`
-      <div>
-        <div id="dragbar" class=${css.dragbar2}></div>
+      <div class=${css.rightpanel}>
         ${''}
       </div>
     `
@@ -127,6 +157,9 @@ class App {
         ${self._view.rightpanel}
       </div>
     `
+    // INIT
+    self._adjustLayout('left', self.data._layout.left.offset)
+    self._adjustLayout('right', self.data._layout.right.offset)
     return self._view.el
   }
 }
@@ -152,12 +185,9 @@ function run () {
   }, false)
 
   this.event = new EventManager()
-  var fileStorage = new Storage('sol:')
-  var config = new Config(fileStorage)
-  var remixd = new Remixd()
-  var filesProviders = {}
-  filesProviders['browser'] = new Browserfiles(fileStorage)
-  filesProviders['localhost'] = new SharedFolder(remixd)
+
+  var config = self._api.config
+  var filesProviders = self._api.filesProviders
 
   var tabbedFiles = {} // list of files displayed in the tabs bar
 
@@ -301,10 +331,7 @@ function run () {
   var filepanelContainer = document.querySelector('#filepanel')
   filepanelContainer.appendChild(filePanel.render())
 
-  filePanel.event.register('resize', function changeLayout (width) {
-    self._view.leftpanel.style.width = width + 'px'
-    self._view.centerpanel.style.left = width + 'px'
-  })
+  filePanel.event.register('resize', delta => self._adjustLayout('left', delta))
 
   function fileRenamedEvent (oldName, newName, isFolder) {
     // TODO please never use 'window' when it is possible to use a variable
@@ -644,17 +671,9 @@ function run () {
   // ---------------- Righthand-panel --------------------
   var rhpAPI = {
     config: config,
-    setEditorSize (delta) {
-      $('#righthand-panel').css('width', delta)
-      self._view.centerpanel.style.right = delta + 'px'
-      document.querySelector(`.${css.dragbar2}`).style.right = delta + 'px'
-      onResize()
-    },
     warnCompilerLoading: (msg) => {
       renderer.clear()
-      if (msg) {
-        renderer.error(msg, $('#output'), {type: 'warning'})
-      }
+      if (msg) renderer.error(msg, $('#output'), {type: 'warning'})
     },
     executionContextChange: (context) => {
       return executionContext.executionContextChange(context)
@@ -668,16 +687,17 @@ function run () {
     app: self.event,
     udapp: udapp.event
   }
-  var righthandPanel = new RighthandPanel(rhpAPI, rhpEvents, {}) // eslint-disable-line
-  self._view.rightpanel.appendChild(righthandPanel.render())
-  righthandPanel.init()
+  self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, {})
+  self._view.rightpanel.appendChild(self._components.righthandpanel.render())
+  self._components.righthandpanel.init()
+  self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))
 
   // ----------------- editor resize ---------------
 
   function onResize () {
     editor.resize(document.querySelector('#editorWrap').checked)
   }
-  window.onresize = onResize
+  self._onResize = window.onresize = onResize
   onResize()
 
   self._view.el.addEventListener('change', onResize)

src/app/editor-panel.js

@@ -191,12 +191,12 @@ class EditorPanel {
     function toggleLHP (event) {
       this.children[0].classList.toggle('fa-angle-double-right')
       this.children[0].classList.toggle('fa-angle-double-left')
-      self.event.trigger('resize', [])
+      self.event.trigger('resize', ['left'])
     }
     function toggleRHP (event) {
       this.children[0].classList.toggle('fa-angle-double-right')
       this.children[0].classList.toggle('fa-angle-double-left')
-      self.event.trigger('resize', [])
+      self.event.trigger('resize', ['right'])
     }
     function increase () { self._api.editor.editorFontSize(1) }
     function decrease () { self._api.editor.editorFontSize(-1) }

src/app/file-panel.js

@@ -13,6 +13,7 @@ var css = csjs`
     display           : flex;
     flex-direction    : row;
     width             : 100%;
+    height            : 100%;
     box-sizing        : border-box;
   }
   .fileexplorer       {
@@ -56,9 +57,11 @@ var css = csjs`
     background-color  : white;
   }
   .dragbar            {
-    position          : relative;
-    top               : 36px;
-    left              : 2px;
+    position          : absolute;
+    top               : 37px;
+    width             : 0.5em;
+    right             : 0;
+    bottom            : 0;
     cursor            : col-resize;
     z-index           : 999;
     border-right      : 2px solid hsla(215, 81%, 79%, .3);
@@ -172,6 +175,7 @@ function filepanel (appAPI, filesProvider) {
     ;[...this.files].forEach(fileExplorer.api.addFile)
   }
 
+  // ----------------- resizeable ui ---------------
   function mousedown (event) {
     event.preventDefault()
     if (event.which === 1) {
@@ -190,21 +194,21 @@ function filepanel (appAPI, filesProvider) {
       document.removeEventListener('keydown', cancelGhostbar)
     }
   }
-  function moveGhostbar (event) {
-    var rhp = window['righthand-panel'].offsetLeft
+  function getPosition (event) {
+    var rhp = document.body.offsetWidth - window['righthand-panel'].offsetWidth
     var newpos = (event.pageX < limit) ? limit : event.pageX
     newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit)
-    ghostbar.style.left = newpos + 'px'
+    return newpos
+  }
+  function moveGhostbar (event) {
+    ghostbar.style.left = getPosition(event) + 'px'
   }
-
   function removeGhostbar (event) {
     document.body.removeChild(ghostbar)
     document.removeEventListener('mousemove', moveGhostbar)
     document.removeEventListener('mouseup', removeGhostbar)
     document.removeEventListener('keydown', cancelGhostbar)
-    var width = (event.pageX < limit) ? limit : event.pageX
-    element.style.width = width + 'px'
-    self.event.trigger('resize', [width])
+    self.event.trigger('resize', [getPosition(event)])
   }
 
   function createNewFile () {

src/app/righthand-panel.js

@@ -1,5 +1,6 @@
+var csjs = require('csjs-inject')
 var yo = require('yo-yo')
-var $ = require('jquery')
+var EventManager = require('ethereum-remix').lib.EventManager
 
 var tabbedMenu = require('./tabbed-menu')
 var contractTab = require('./contract-tab')
@@ -8,8 +9,6 @@ var analysisTab = require('./analysis-tab')
 var debuggerTab = require('./debugger-tab')
 var filesTab = require('./files-tab')
 
-var csjs = require('csjs-inject')
-
 var css = csjs`
   .options {
       float: left;
@@ -21,6 +20,25 @@ var css = csjs`
       margin-right: 0.5em;
       font-size: 1em;
   }
+  .dragbar             {
+    position           : absolute;
+    width              : 0.5em;
+    top                : 3em;
+    bottom             : 0;
+    cursor             : col-resize;
+    z-index            : 999;
+    border-left        : 2px solid hsla(215, 81%, 79%, .3);    
+  }
+  .ghostbar           {
+    width             : 3px;
+    background-color  : #C6CFF7;
+    opacity           : 0.5;
+    position          : absolute;
+    cursor            : col-resize;
+    z-index           : 9999;
+    top               : 0;
+    bottom            : 0;
+  }
 `
 
 // ------------------------------------------------------------------
@@ -30,6 +48,9 @@ module.exports = RighthandPanel
 function RighthandPanel (appAPI, events, opts) {
   var self = this
   self._api = appAPI
+  self.event = new EventManager()
+  self._view = {}
+
   var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
   var options = yo`
     <ul id="options">
@@ -41,8 +62,10 @@ function RighthandPanel (appAPI, events, opts) {
       <li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
     </ul>
   `
-  var element = yo`
+  self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
+  self._view.element = yo`
     <div id="righthand-panel">
+      ${self._view.dragbar}
       <div id="header">
         <div id="menu">
           <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
@@ -58,7 +81,7 @@ function RighthandPanel (appAPI, events, opts) {
   debuggerTab(optionViews, appAPI, events, opts)
   filesTab(optionViews, appAPI, events, opts)
 
-  self.render = function () { return element }
+  self.render = function () { return self._view.element }
 
   self.init = function () {
     ;[...options.children].forEach((el) => { el.classList.add(css.options) })
@@ -72,48 +95,43 @@ function RighthandPanel (appAPI, events, opts) {
     tabbedMenu(options, tabbedMenuAPI, tabEvents, {})
 
     // ----------------- resizeable ui ---------------
-
-    var EDITOR_WINDOW_SIZE = 'editorWindowSize'
-
-    var dragging = false
-    $('#dragbar').mousedown(function (e) {
-      e.preventDefault()
-      dragging = true
-      var main = $('#righthand-panel')
-      var ghostbar = $('<div id="ghostbar">', {
-        css: {
-          top: main.offset().top,
-          left: main.offset().left
-        }
-      }).prependTo('body')
-
-      $(document).mousemove(function (e) {
-        ghostbar.css('left', e.pageX + 2)
-      })
-    })
-
-    var $body = $('body')
-
-    function getEditorSize () {
-      return $('#righthand-panel').width()
+    var limit = 60
+    self._view.dragbar.addEventListener('mousedown', mousedown)
+    var ghostbar = yo`<div class=${css.ghostbar}></div>`
+    function mousedown (event) {
+      event.preventDefault()
+      if (event.which === 1) {
+        moveGhostbar(event)
+        document.body.appendChild(ghostbar)
+        document.addEventListener('mousemove', moveGhostbar)
+        document.addEventListener('mouseup', removeGhostbar)
+        document.addEventListener('keydown', cancelGhostbar)
+      }
     }
-
-    $(document).mouseup(function (e) {
-      if (dragging) {
-        var delta = $body.width() - e.pageX + 2
-        $('#ghostbar').remove()
-        $(document).unbind('mousemove')
-        dragging = false
-        delta = (delta < 50) ? 50 : delta
-        self._api.setEditorSize(delta)
-        appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
+    function cancelGhostbar (event) {
+      if (event.keyCode === 27) {
+        document.body.removeChild(ghostbar)
+        document.removeEventListener('mousemove', moveGhostbar)
+        document.removeEventListener('mouseup', removeGhostbar)
+        document.removeEventListener('keydown', cancelGhostbar)
       }
-    })
-
-    if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) {
-      self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
-    } else {
-      appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
+    }
+    function getPosition (event) {
+      var lhp = window['filepanel'].offsetWidth
+      var max = document.body.offsetWidth - limit
+      var newpos = (event.pageX > max) ? max : event.pageX
+      newpos = (newpos > (lhp + limit)) ? newpos : lhp + limit
+      return newpos
+    }
+    function moveGhostbar (event) {
+      ghostbar.style.left = getPosition(event) + 'px'
+    }
+    function removeGhostbar (event) {
+      document.body.removeChild(ghostbar)
+      document.removeEventListener('mousemove', moveGhostbar)
+      document.removeEventListener('mouseup', removeGhostbar)
+      document.removeEventListener('keydown', cancelGhostbar)
+      self.event.trigger('resize', [document.body.offsetWidth - getPosition(event)])
     }
   }
 }