REFACTOR (5) put centerpanel's editor and tabs into editorpanel component

assets/css/browser-solidity.css

@@ -1,43 +1,3 @@
-.scroller {
-    position: absolute;
-    z-index: 999;
-    text-align: center;
-    cursor: pointer;
-    display: none;
-    padding: 0 0.9em;
-    vertical-align: middle;
-    background-color: rgba(255, 255, 255, 0.8);
-    height: 100%;
-    font-size: 1.3em;
-}
-
-.scroller i {
-    line-height: 3em;
-}
-
-.scroller-right {
-    right: 0;
-}
-
-.scroller-left {
-    left: 0;
-}
-
-#files {
-    list-style: none;
-    margin: 0;
-    font-size: 15px;
-    height: 2.5em;
-    box-sizing: border-box;
-    line-height: 2em;
-    padding: 0.5em 0 0;
-    position: relative; 
-    left: 40px;
-    top:0;
-    min-width:3000px;
-    border-bottom: 0 none;
-}
-
 #files .file {
     padding: 0 0.6em;
     box-sizing: border-box;
@@ -51,22 +11,6 @@
     color: #999;
 }
 
-.toggleRHP {
-    display: block;
-    float: left;
-    margin-top: 0.5em;
-    padding: 0.6em;
-    font-weight: bold;
-    cursor: pointer;
-    color: black;
-}
-
-.toggleRHP {
-    float: right;
-    position: absolute;
-    right: 0;
-}
-
 #files .file.active {
     color: black;
     font-weight: bold;

src/app.js

@@ -26,6 +26,7 @@ var ExecutionContext = require('./app/execution-context')
 var Debugger = require('./app/debugger')
 var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
 var FilePanel = require('./app/file-panel')
+var EditorPanel = require('./app/editor-panel')
 var RighthandPanel = require('./app/righthand-panel')
 var examples = require('./app/example-contracts')
 
@@ -53,9 +54,6 @@ var css = csjs`
     right              : 0;
     bottom             : 0;
   }
-  .tabsbar             {
-    overflow           : hidden;
-  }
   .leftpanel           {
     display            : flex;
     position           : absolute;
@@ -81,6 +79,7 @@ class App {
   constructor (opts = {}) {
     var self = this
     self._view = {}
+    self._components = {}
   }
   init () {
     var self = this
@@ -89,28 +88,33 @@ class App {
   render () {
     var self = this
     if (self._view.el) return self._view.el
-    /***************************************************************************/
+    /*************************************************************************/
-    self._view.leftpanel = yo`<div id="filepanel" class=${css.leftpanel}></div>`
+    // ----------------- editor ----------------------------
-    self._view.rightpanel = yo`<div></div>`
+    self._components.editor = new Editor({}) // @TODO: put into editorpanel
-    self._view.tabsbar = yo`
+    // ----------------- editor panel ----------------------
-      <div class=${css.tabsbar}>
+    var opts = { api: { editor: self._components.editor } }
-        <div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
+    self._components.editorpanel = new EditorPanel(opts)
-        <div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
+    /*************************************************************************/
-        <ul id="files" class="nav nav-tabs"></ul>
+    self._view.leftpanel = yo`
+      <div id="filepanel" class=${css.leftpanel}>
+        ${''}
       </div>
     `
     self._view.centerpanel = yo`
       <div id="editor-container" class=${css.centerpanel}>
-        ${self._view.tabsbar}
+        ${self._components.editorpanel.render()}
-        <div id="input"></div>
+      </div>
+    `
+    self._view.rightpanel = yo`
+      <div>
+        <div id="dragbar" class=${css.dragbar2}></div>
+        ${''}
       </div>
     `
     self._view.el = yo`
       <div class=${css.browsersolidity}>
         ${self._view.leftpanel}
-        <span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
         ${self._view.centerpanel}
-        <div id="dragbar" class=${css.dragbar2}></div>
         ${self._view.rightpanel}
       </div>
     `
@@ -126,6 +130,7 @@ function run () {
   var queryParams = new QueryParams()
   var gistHandler = new GistHandler()
 
+  var editor = self._components.editor
   // The event listener needs to be registered as early as possible, because the
   // parent will send the message upon the "load" event.
   var filesToLoad = null
@@ -271,9 +276,6 @@ function run () {
     createName: createNonClashingName,
     switchToFile: switchToFile,
     event: this.event,
-    editorFontSize: function (incr) {
-      editor.editorFontSize(incr)
-    },
     currentFile: function () {
       return config.get('currentFile')
     },
@@ -288,26 +290,9 @@ function run () {
 
   // TODO this should happen inside file-panel.js
   var filepanelContainer = document.querySelector('#filepanel')
-  filepanelContainer.appendChild(filePanel)
+  filepanelContainer.appendChild(filePanel.render())
-
+
-  filePanel.events.register('ui-hidden', function changeLayout (isHidden) {
+  filePanel.event.register('resize', function changeLayout (width) {
-    var value
-    if (isHidden) {
-      value = -parseInt(self._view.leftpanel.style.width)
-      value = (isNaN(value) ? -self._view.leftpanel.getBoundingClientRect().width : value)
-      self._view.leftpanel.style.position = 'absolute'
-      self._view.leftpanel.style.left = (value - 5) + 'px'
-      self._view.leftpanel.style.width = -value + 'px'
-      self._view.centerpanel.style.left = '45px'
-    } else {
-      value = -parseInt(self._view.leftpanel.style.left) + 'px'
-      self._view.leftpanel.style.position = 'static'
-      self._view.leftpanel.style.width = value
-      self._view.leftpanel.style.left = ''
-      self._view.centerpanel.style.left = value
-    }
-  })
-  filePanel.events.register('ui-resize', function changeLayout (width) {
     self._view.leftpanel.style.width = width + 'px'
     self._view.centerpanel.style.left = width + 'px'
   })
@@ -411,12 +396,8 @@ function run () {
     })
   })
 
-  // ----------------- editor ----------------------
-  var editor = new Editor(document.getElementById('input'))
-
   // --------------------Files tabs-----------------------------
   var $filesEl = $('#files')
-  var FILE_SCROLL_DELTA = 300
 
   // Switch tab
   $filesEl.on('click', '.file:not(.active)', function (ev) {
@@ -497,7 +478,6 @@ function run () {
     for (var file in tabbedFiles) {
       $filesEl.append($('<li class="file"><span class="name">' + file + '</span><span class="remove"><i class="fa fa-close"></i></span></li>'))
     }
-
     var currentFileOpen = !!config.get('currentFile')
 
     if (currentFileOpen) {
@@ -506,57 +486,9 @@ function run () {
     }
     $('#input').toggle(currentFileOpen)
     $('#output').toggle(currentFileOpen)
+    self._components.editorpanel.refresh()
   }
 
-  var $scrollerRight = $('.scroller-right')
-  var $scrollerLeft = $('.scroller-left')
-
-  function widthOfList () {
-    var itemsWidth = 0
-    $('.file').each(function () {
-      var itemWidth = $(this).outerWidth()
-      itemsWidth += itemWidth
-    })
-    return itemsWidth
-  }
-
-  function widthOfVisible () {
-    return document.querySelector('#editor-container').offsetWidth
-  }
-
-  function getLeftPosi () {
-    return $filesEl.position().left
-  }
-
-  function reAdjust () {
-    if (widthOfList() + getLeftPosi() > widthOfVisible()) {
-      $scrollerRight.fadeIn('fast')
-    } else {
-      $scrollerRight.fadeOut('fast')
-    }
-
-    if (getLeftPosi() < 0) {
-      $scrollerLeft.fadeIn('fast')
-    } else {
-      $scrollerLeft.fadeOut('fast')
-      $filesEl.animate({ left: getLeftPosi() + 'px' }, 'slow')
-    }
-  }
-
-  $scrollerRight.click(function () {
-    var delta = (getLeftPosi() - FILE_SCROLL_DELTA)
-    $filesEl.animate({ left: delta + 'px' }, 'slow', function () {
-      reAdjust()
-    })
-  })
-
-  $scrollerLeft.click(function () {
-    var delta = Math.min((getLeftPosi() + FILE_SCROLL_DELTA), 0)
-    $filesEl.animate({ left: delta + 'px' }, 'slow', function () {
-      reAdjust()
-    })
-  })
-
   var compiler = new Compiler(handleImportCall)
   var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
 
@@ -709,7 +641,6 @@ function run () {
       document.querySelector(`.${css.dragbar2}`).style.right = delta + 'px'
       onResize()
     },
-    reAdjust: reAdjust,
     warnCompilerLoading: (msg) => {
       renderer.clear()
       if (msg) {
@@ -736,7 +667,6 @@ function run () {
 
   function onResize () {
     editor.resize(document.querySelector('#editorWrap').checked)
-    reAdjust()
   }
   window.onresize = onResize
   onResize()

src/app/editor-panel.js

@@ -0,0 +1,186 @@
+var csjs = require('csjs-inject')
+var yo = require('yo-yo')
+var EventManager = require('ethereum-remix').lib.EventManager
+
+var css = csjs`
+  .tabsbar             {
+    display            : flex;
+    overflow           : hidden;
+  }
+  .tabs               {
+    position          : relative;
+    display           : flex;
+    margin            : 0;
+    left              : 10px;
+    margin-right      : 10px;
+    width             : 100%;
+    overflow          : hidden;
+  }
+  .files              {
+    position          : relative; 
+    list-style        : none;
+    margin            : 0;
+    font-size         : 15px;
+    height            : 2.5em;
+    box-sizing        : border-box;
+    line-height       : 2em;
+    padding           : 0.5em 0 0;
+    top               : 0;
+    border-bottom     : 0 none;
+  }
+  .changeeditorfontsize {
+    margin            : 0;
+  }
+  .changeeditorfontsize i {
+    cursor            : pointer;
+    display           : block;
+    color             : #111111;
+  }
+  .changeeditorfontsize i {
+    cursor            : pointer;
+  }
+  .changeeditorfontsize i:hover {
+    color             : orange;
+  }
+  .buttons            {
+    display           : flex;
+    flex-direction    : row;
+    justify-content   : space-around;
+    align-items       : center;
+    min-width         : 45px;
+  }
+  .toggleLHP          {
+    display           : flex;
+    padding           : 10px;
+    width             : 100%;
+    font-weight       : bold;
+    color             : black;
+  }
+  .toggleLHP i        {
+    cursor            : pointer;
+  }
+  .toggleLHP i:hover  {
+    color             : orange;
+  }
+  .scroller           {
+    position          : absolute;
+    z-index           : 999;
+    text-align        : center;
+    cursor            : pointer;
+    padding           : 0 0.9em;
+    vertical-align    : middle;
+    background-color  : rgba(255, 255, 255, 0.8);
+    height            : 100%;
+    font-size         : 1.3em;
+  }
+  .scroller i         {
+    line-height       : 3em;
+  }
+  .scrollerright      {
+    right             : 0;
+    margin-right      : 15px;
+  }
+  .scrollerleft       {
+    left              : 0;
+  }
+  .toggleRHP          {
+    margin-top        : 0.5em;
+    padding           : 0.6em;
+    font-weight       : bold;
+    color             : black;
+    right             : 0;
+  }
+  .toggleRHP i        {
+    cursor            : pointer;
+  }
+  .toggleRHP i:hover  {
+    color             : orange;
+  }
+  .show               {
+    opacity           : 1;
+    transition        : .3s opacity ease-in;
+  }
+  .hide               {
+    opacity           : 0;
+    pointer-events    : none;
+    transition        : .3s opacity ease-in;
+  }
+`
+
+class EditorPanel {
+  constructor (opts = {}) {
+    var self = this
+    self.data = {}
+    self._view = {}
+    self._api = { editor: opts.api.editor }
+  }
+  refresh () {
+    var self = this
+    self._view.tabs.onmouseenter()
+  }
+  render () {
+    var self = this
+    if (self._view.el) return self._view.el
+    self._view.el = [
+      self._renderTabsbar(),
+      self._api.editor.render()
+    ]
+    return self._view.el
+  }
+  _renderTabsbar () {
+    var self = this
+    if (self._view.tabsbar) return self._view.tabsbar
+    self._view.tabs = yo`
+      <div class=${css.tabs} onmouseenter=${toggleScrollers} onmouseleave=${toggleScrollers}>
+        <div class="${css.scroller} ${css.hide} ${css.scrollerright}"><i class="fa fa-chevron-right "></i></div>
+        <ul id="files" class="${css.files} nav nav-tabs"></ul>
+        <div class="${css.scroller} ${css.hide} ${css.scrollerleft}"><i class="fa fa-chevron-left "></i></div>
+      </div>    
+    `
+    self._view.tabsbar = yo`
+      <div class=${css.tabsbar}>
+        <div class=${css.buttons}>
+          <span class=${css.toggleLHP} onclick=${toggleLHP} title="Toggle left hand panel">
+            <i class="fa fa-angle-double-left"></i>
+          </span>
+          <span class=${css.changeeditorfontsize} >
+            <i class="increditorsize fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
+            <i class="decreditorsize fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
+          </span>
+        </div>
+        ${self._view.tabs}
+        <span class="${css.toggleRHP}" onclick=${toggleRHP} title="Toggle right hand panel">
+          <i class="fa fa-angle-double-right"></i>
+        </span>
+      </div>
+    `
+    return self._view.tabsbar
+    function toggleScrollers (event = {}) {
+      if (event.type) self.data._focus = event.type
+      var isMouseEnter = self.data._focus === 'mouseenter'
+      if (isMouseEnter && this.children[1].offsetWidth > this.offsetWidth) {
+        this.children[0].classList.add(css.show)
+        this.children[2].classList.add(css.show)
+        this.children[0].classList.remove(css.hide)
+        this.children[2].classList.remove(css.hide)
+      } else {
+        this.children[0].classList.remove(css.show)
+        this.children[2].classList.remove(css.show)
+        this.children[0].classList.add(css.hide)
+        this.children[2].classList.add(css.hide)
+      }
+    }
+    function toggleLHP (event) {
+      this.children[0].classList.toggle('fa-angle-double-right')
+      this.children[0].classList.toggle('fa-angle-double-left')
+    }
+    function toggleRHP (event) {
+      this.children[0].classList.toggle('fa-angle-double-right')
+      this.children[0].classList.toggle('fa-angle-double-left')
+    }
+    function increase () { self._api.editor.editorFontSize(1) }
+    function decrease () { self._api.editor.editorFontSize(-1) }
+  }
+}
+
+module.exports = EditorPanel

src/app/editor.js

@@ -24,12 +24,15 @@ document.head.appendChild(yo`
   </style>
 `)
 
-function Editor (editorElement) {
+function Editor (opts = {}) {
-  var editor = ace.edit(editorElement)
+  var self = this
-  editorElement.editor = editor // required to access the editor during tests
+  var el = yo`<div id="input"></div>`
-  editorElement.className += ' ' + css['ace-editor']
+  var editor = ace.edit(el)
+  el.className += ' ' + css['ace-editor']
+  el.editor = editor // required to access the editor during tests
+  self.render = function () { return el }
   var event = new EventManager()
-  this.event = event
+  self.event = event
   var sessions = {}
   var sourceAnnotations = []
   var readOnlySessions = {}
@@ -37,7 +40,6 @@ function Editor (editorElement) {
 
   var emptySession = createSession('')
 
-  var self = this
   editor.on('guttermousedown', function (e) {
     var target = e.domEvent.target
     if (target.className.indexOf('ace_gutter-cell') === -1) {

src/app/file-panel.js

@@ -28,29 +28,29 @@ var css = csjs`
   .newFile            {
     padding           : 10px;
   }
+  .newFile i          {
+    cursor            : pointer;
+  }
+  .newFile i:hover    {
+    color             : orange;
+  }
   .connectToLocalhost {
     padding           : 10px;
   }
-  .uploadFile         {
+  .connectToLocalhost i {
-    padding           : 10px;
+    cursor            : pointer;
   }
-  .toggleLHP          {
+  .connectToLocalhost i:hover   {
-    display           : flex;
+    color             : orange;
-    justify-content   : flex-end;
+  }
+  .uploadFile         {
     padding           : 10px;
-    width             : 100%;
-    font-weight       : bold;
-    cursor            : pointer;
-    color             : black;
   }
-  .isVisible          {
+  .uploadFile label:hover   {
-    position          : absolute;
+    color             : orange;
-    left              : 35px;
   }
-  .isHidden {
+  .uploadFile label   {
-    position          : absolute;
+    cursor            : pointer;
-    height            : 99%;
-    left              : -101%;
   }
   .treeview {
     background-color  : white;
@@ -73,13 +73,6 @@ var css = csjs`
     top               : 0;
     bottom            : 0;
   }
-  .changeeditorfontsize {
-    padding: 10px;
-  }
-  .changeeditorfontsize i {
-    display: block;
-    color: #111111;
-  }
 `
 
 var limit = 60
@@ -87,6 +80,7 @@ var canUpload = window.File || window.FileReader || window.FileList || window.Bl
 var ghostbar = yo`<div class=${css.ghostbar}></div>`
 
 function filepanel (appAPI, filesProvider) {
+  var self = this
   var fileExplorer = new FileExplorer(appAPI, filesProvider['browser'])
   var fileSystemExplorer = new FileExplorer(appAPI, filesProvider['localhost'])
   var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
@@ -119,13 +113,6 @@ function filepanel (appAPI, filesProvider) {
             <span onclick=${connectToLocalhost} class="${css.connectToLocalhost}">
               <i class="websocketconn fa fa-link" title="Connect to Localhost"></i>
             </span>
-            <span class=${css.changeeditorfontsize} >
-              <i class="increditorsize fa fa-plus" aria-hidden="true" title="increase editor font size"></i>
-              <i class="decreditorsize fa fa-minus" aria-hidden="true" title="decrease editor font size"></i>
-            </span>
-            <span class=${css.toggleLHP} onclick=${toggle} title="Toggle left hand panel">
-              <i class="fa fa-angle-double-left"></i>
-            </span>
           </div>
           <div class=${css.treeview}>${fileExplorer.init()}</div>
           <div class="filesystemexplorer ${css.treeview}"></div>
@@ -135,10 +122,10 @@ function filepanel (appAPI, filesProvider) {
     `
   }
 
-  var events = new EventManager()
+  var event = new EventManager()
+  self.event = event
   var element = template()
-  element.querySelector('.increditorsize').addEventListener('click', () => { appAPI.editorFontSize(1) })
+
-  element.querySelector('.decreditorsize').addEventListener('click', () => { appAPI.editorFontSize(-1) })
   var containerFileSystem = element.querySelector('.filesystemexplorer')
   var websocketconn = element.querySelector('.websocketconn')
   filesProvider['localhost'].remixd.event.register('connecting', (event) => {
@@ -166,9 +153,7 @@ function filepanel (appAPI, filesProvider) {
       containerFileSystem.removeChild(fileSystemExplorer.element)
     }
   })
-  // TODO please do not add custom javascript objects, which have no
+
-  // relation to the DOM to DOM nodes
-  element.events = events
   fileExplorer.events.register('focus', function (path) {
     appAPI.switchToFile(path)
   })
@@ -177,15 +162,7 @@ function filepanel (appAPI, filesProvider) {
     appAPI.switchToFile(path)
   })
 
-  return element
+  self.render = function render () { return element }
-
-  function toggle (event) {
-    var isHidden = element.classList.toggle(css.isHidden)
-    this.classList.toggle(css.isVisible)
-    this.children[0].classList.toggle('fa-angle-double-right')
-    this.children[0].classList.toggle('fa-angle-double-left')
-    events.trigger('ui-hidden', [isHidden])
-  }
 
   function uploadFile (event) {
     // TODO The file explorer is merely a view on the current state of
@@ -227,7 +204,7 @@ function filepanel (appAPI, filesProvider) {
     document.removeEventListener('keydown', cancelGhostbar)
     var width = (event.pageX < limit) ? limit : event.pageX
     element.style.width = width + 'px'
-    events.trigger('ui-resize', [width])
+    self.event.trigger('resize', [width])
   }
 
   function createNewFile () {

src/app/righthand-panel.js

@@ -62,15 +62,6 @@ function RighthandPanel (appAPI, events, opts) {
 
   self.init = function () {
     ;[...options.children].forEach((el) => { el.classList.add(css.options) })
-      // ----------------- toggle right hand panel -----------------
-
-    var hidingRHP = false
-    $('.toggleRHP').click(function () {
-      hidingRHP = !hidingRHP
-      self._api.setEditorSize(hidingRHP ? 0 : appAPI.config.get(EDITOR_WINDOW_SIZE))
-      $('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
-      $('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
-    })
 
     // ----------------- tabbed menu -----------------
     var tabbedMenuAPI = {
@@ -116,7 +107,6 @@ function RighthandPanel (appAPI, events, opts) {
         delta = (delta < 50) ? 50 : delta
         self._api.setEditorSize(delta)
         appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
-        appAPI.reAdjust()
       }
     })