refactor out the tab component for using external lib

src/app/files/fileManager.js

 'use strict'
 
-var $ = require('jquery')
-var yo = require('yo-yo')
 var EventEmitter = require('events')
 var EventManager = require('../../lib/events')
 var globalRegistry = require('../../global/registry')
@@ -14,7 +12,7 @@ var CompilerImport = require('../compiler/compiler-imports')
 
 class FileManager {
   constructor (localRegistry) {
-    this.tabbedFiles = {}
+    this.openedFiles = {} // list all opened files
     this.event = new EventManager()
     this.nodeEvent = new EventEmitter()
     this._components = {}
@@ -64,18 +62,18 @@ class FileManager {
     if (!isFolder) {
       self._deps.config.set('currentFile', '')
       self._deps.editor.discard(oldName)
-      if (this.tabbedFiles[oldName]) {
-        delete this.tabbedFiles[oldName]
-        this.tabbedFiles[newName] = newName
+      if (this.openedFiles[oldName]) {
+        delete this.openedFiles[oldName]
+        this.openedFiles[newName] = newName
       }
       this.switchFile(newName)
     } else {
       var newFocus
-      for (var k in this.tabbedFiles) {
+      for (var k in this.openedFiles) {
         if (k.indexOf(oldName + '/') === 0) {
           var newAbsolutePath = k.replace(oldName, newName)
-          this.tabbedFiles[newAbsolutePath] = newAbsolutePath
-          delete this.tabbedFiles[k]
+          this.openedFiles[newAbsolutePath] = newAbsolutePath
+          delete this.openedFiles[k]
           if (self._deps.config.get('currentFile') === k) {
             newFocus = newAbsolutePath
           }
@@ -85,7 +83,7 @@ class FileManager {
         this.switchFile(newFocus)
       }
     }
-    this.refreshTabs()
+    this.event.trigger('fileRenamed', [oldName, newName])
   }
 
   currentFileProvider () {
@@ -101,6 +99,18 @@ class FileManager {
     return self._deps.config.get('currentFile')
   }
 
+  closeFile (name) {
+    var self = this
+    delete self.openedFiles[name]
+    if (Object.keys(self.openedFiles).length) {
+      self.switchFile(Object.keys(self.openedFiles)[0])
+    } else {
+      self._deps.editor.displayEmptyReadOnlySession()
+      self._deps.config.set('currentFile', '')
+    }
+    this.event.trigger('fileClosed', [name])
+  }
+
   currentPath () {
     var self = this
     var currentFile = self._deps.config.get('currentFile')
@@ -145,7 +155,7 @@ class FileManager {
   }
 
   removeTabsOf (provider) {
-    for (var tab in this.tabbedFiles) {
+    for (var tab in this.openedFiles) {
       if (this.fileProviderOf(tab).type === provider.type) {
         this.fileRemovedEvent(tab)
       }
@@ -154,36 +164,16 @@ class FileManager {
 
   fileRemovedEvent (path) {
     var self = this
-    if (!this.tabbedFiles[path]) return
+    if (!this.openedFiles[path]) return
     if (path === self._deps.config.get('currentFile')) {
       self._deps.config.set('currentFile', '')
     }
     self._deps.editor.discard(path)
-    delete this.tabbedFiles[path]
-    this.refreshTabs()
+    delete this.openedFiles[path]
+    this.event.trigger('fileRemoved', [path])
     this.switchFile()
   }
 
-  // Display files that have already been selected
-  refreshTabs (newfile) {
-    if (newfile) {
-      this.tabbedFiles[newfile] = newfile
-    }
-
-    var $filesEl = $('#files')
-    $filesEl.find('.file').remove()
-
-    for (var file in this.tabbedFiles) {
-      $filesEl.append(yo`<li class="file"><span class="name">${file}</span><span class="remove"><i class="fa fa-close"></i></span></li>`)
-    }
-
-    var active = $('#files .file').filter(function () {
-      return $(this).find('.name').text() === newfile
-    })
-    if (active.length) active.addClass('active')
-    $('#output').toggle(active)
-  }
-
   switchFile (file) {
     var self = this
     if (file) return _switchFile(file)
@@ -203,7 +193,7 @@ class FileManager {
     function _switchFile (file) {
       self.saveCurrentFile()
       self._deps.config.set('currentFile', file)
-      self.refreshTabs(file)
+      self.openedFiles[file] = file
       self.fileProviderOf(file).get(file, (error, content) => {
         if (error) {
           console.log(error)

src/app/panels/editor-panel.js

 var yo = require('yo-yo')
 var EventManager = require('../../lib/events')
-var $ = require('jquery')
 
 var Terminal = require('./terminal')
 var Editor = require('../editor/editor')
 var globalRegistry = require('../../global/registry')
+var { TabProxy } = require('./tab-proxy.js')
 
 var ContextualListener = require('../editor/contextualListener')
 var ContextView = require('../editor/contextView')
@@ -41,6 +41,7 @@ class EditorPanel {
       udapp: self._components.registry.get('udapp').api,
       pluginManager: self._components.registry.get('pluginmanager').api
     }
+    self.tabProxy = new TabProxy(self._deps.fileManager, self._components.editor)
     self.data = {
       _FILE_SCROLL_DELTA: 200,
       _layout: {
@@ -140,7 +141,7 @@ class EditorPanel {
     self._view.terminal = self._components.terminal.render()
     self._view.content = yo`
       <div class=${css.content}>
-        ${self._renderTabsbar()}
+        ${self.tabProxy.renderTabsbar()}
         <div class=${css.contextviewcontainer}>
           ${self._components.contextView.render()}
         </div>
@@ -164,121 +165,6 @@ class EditorPanel {
   updateTerminalFilter (filter) {
     this._components.terminal.updateJournal(filter)
   }
-  _renderTabsbar () {
-    var self = this
-    if (self._view.tabsbar) return self._view.tabsbar
-    self._view.filetabs = yo`<ul id="files" class="${css.files} nav nav-tabs"></ul>`
-    self._view.tabs = yo`
-      <div class=${css.tabs} onmouseenter=${toggleScrollers} onmouseleave=${toggleScrollers}>
-        <div onclick=${scrollLeft} class="${css.scroller} ${css.hide} ${css.scrollerleft}">
-          <i class="fa fa-chevron-left "></i>
-        </div>
-        ${self._view.filetabs}
-        <div onclick=${scrollRight} class="${css.scroller} ${css.hide} ${css.scrollerright}">
-           <i class="fa fa-chevron-right "></i>
-        </div>
-      </div>
-    `
-    self._view.tabsbar = yo`
-      <div class=${css.tabsbar}>
-        <div class=${css.buttons}>
-          <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}
-      </div>
-    `
-
-    // tabs
-    var $filesEl = $(self._view.filetabs)
-
-    // Switch tab
-    $filesEl.on('click', '.file:not(.active)', function (ev) {
-      ev.preventDefault()
-      self._deps.fileManager.switchFile($(this).find('.name').text())
-      return false
-    })
-
-    // Remove current tab
-    $filesEl.on('click', '.file .remove', function (ev) {
-      ev.preventDefault()
-      var name = $(this).parent().find('.name').text()
-      delete self._deps.fileManager.tabbedFiles[name]
-      self._deps.fileManager.refreshTabs()
-      if (Object.keys(self._deps.fileManager.tabbedFiles).length) {
-        self._deps.fileManager.switchFile(Object.keys(self._deps.fileManager.tabbedFiles)[0])
-      } else {
-        self._components.editor.displayEmptyReadOnlySession()
-        self._deps.config.set('currentFile', '')
-      }
-      return false
-    })
-
-    return self._view.tabsbar
-    function toggleScrollers (event = {}) {
-      if (event.type) self.data._focus = event.type
-      var isMouseEnter = self.data._focus === 'mouseenter'
-      var leftArrow = this.children[0]
-      var rightArrow = this.children[2]
-      if (isMouseEnter && this.children[1].offsetWidth > this.offsetWidth) {
-        var hiddenLength = self._view.filetabs.offsetWidth - self._view.tabs.offsetWidth
-        var currentLeft = self._view.filetabs.offsetLeft || 0
-        var hiddenRight = hiddenLength + currentLeft
-        if (currentLeft < 0) {
-          leftArrow.classList.add(css.show)
-          leftArrow.classList.remove(css.hide)
-        }
-        if (hiddenRight > 0) {
-          rightArrow.classList.add(css.show)
-          rightArrow.classList.remove(css.hide)
-        }
-      } else {
-        leftArrow.classList.remove(css.show)
-        leftArrow.classList.add(css.hide)
-        rightArrow.classList.remove(css.show)
-        rightArrow.classList.add(css.hide)
-      }
-    }
-    function increase () { self._components.editor.editorFontSize(1) }
-    function decrease () { self._components.editor.editorFontSize(-1) }
-    function scrollLeft (event) {
-      var leftArrow = this
-      var rightArrow = this.nextElementSibling.nextElementSibling
-      var currentLeft = self._view.filetabs.offsetLeft || 0
-      if (currentLeft < 0) {
-        rightArrow.classList.add(css.show)
-        rightArrow.classList.remove(css.hide)
-        if (currentLeft < -self.data._FILE_SCROLL_DELTA) {
-          self._view.filetabs.style.left = `${currentLeft + self.data._FILE_SCROLL_DELTA}px`
-        } else {
-          self._view.filetabs.style.left = `${currentLeft - currentLeft}px`
-          leftArrow.classList.remove(css.show)
-          leftArrow.classList.add(css.hide)
-        }
-      }
-    }
-
-    function scrollRight (event) {
-      var rightArrow = this
-      var leftArrow = this.previousElementSibling.previousElementSibling
-      var hiddenLength = self._view.filetabs.offsetWidth - self._view.tabs.offsetWidth
-      var currentLeft = self._view.filetabs.offsetLeft || 0
-      var hiddenRight = hiddenLength + currentLeft
-      if (hiddenRight > 0) {
-        leftArrow.classList.add(css.show)
-        leftArrow.classList.remove(css.hide)
-        if (hiddenRight > self.data._FILE_SCROLL_DELTA) {
-          self._view.filetabs.style.left = `${currentLeft - self.data._FILE_SCROLL_DELTA}px`
-        } else {
-          self._view.filetabs.style.left = `${currentLeft - hiddenRight}px`
-          rightArrow.classList.remove(css.show)
-          rightArrow.classList.add(css.hide)
-        }
-      }
-    }
-  }
 }
 
 module.exports = EditorPanel

src/app/panels/tab-proxy.js

+var yo = require('yo-yo')
+var $ = require('jquery')
+
+var styles = require('./styles/editor-panel-styles')
+var css = styles.css
+
+export class TabProxy {
+  constructor (fileManager, editor) {
+    this.fileManager = fileManager
+    this.editor = editor
+    this.activeEntity
+    this.entities = {}
+    this.data = {}
+    this._view = {}
+
+    fileManager.event.register('fileRemoved', (name) => {
+      var filesEl = document.querySelector('#files')
+      var file = filesEl.querySelector(`li[path="${name}"]`)
+      if (file) {
+        filesEl.removeChild(file)
+      }
+    })
+
+    fileManager.event.register('fileClosed', (name) => {
+      var filesEl = document.querySelector('#files')
+      var file = filesEl.querySelector(`li[path="${name}"]`)
+      if (file) {
+        filesEl.removeChild(file)
+      }
+    })
+
+    fileManager.event.register('currentFileChanged', (file) => {
+      var filesEl = document.querySelector('#files')
+      if (!filesEl.querySelector(`li[path="${file}"]`)) {
+        filesEl.appendChild(yo`<li class="file" path="${file}" ><span class="name">${file}</span><span class="remove"><i class="fa fa-close"></i></span></li>`)
+      }
+      this.active(file)
+    })
+
+    fileManager.event.register('fileRenamed', (oldName, newName) => {
+      var filesEl = document.querySelector('#files')
+      var file = filesEl.querySelector(`li[path="${oldName}"]`)
+      if (file) {
+        filesEl.setAttribute('path', file)
+        file.querySelector(`.name`).innerHTML = newName
+      }
+    })
+  }
+
+  active (name) {
+    var filesEl = document.querySelector('#files')
+    let file = filesEl.querySelector(`li[path="${this.activeEntity}"]`)
+    if (file) $(file).removeClass('active')
+    if (name) {
+      let active = filesEl.querySelector(`li[path="${name}"]`)
+      if (active) {
+        $(active).addClass('active')
+        this.activeEntity = name
+      }
+    }
+  }
+
+  addHandler (type, fn) {
+    this.handlers[type] = fn
+  }
+
+  renderTabsbar () {
+    var self = this
+    self._view.filetabs = yo`<ul id="files" class="${css.files} nav nav-tabs"></ul>`
+
+    self._view.tabs = yo`
+      <div class=${css.tabs} onmouseenter=${toggleScrollers} onmouseleave=${toggleScrollers}>
+        <div onclick=${scrollLeft} class="${css.scroller} ${css.hide} ${css.scrollerleft}">
+          <i class="fa fa-chevron-left "></i>
+        </div>
+        ${self._view.filetabs}
+        <div onclick=${scrollRight} class="${css.scroller} ${css.hide} ${css.scrollerright}">
+           <i class="fa fa-chevron-right "></i>
+        </div>
+      </div>
+    `
+    let tabsbar = yo`
+      <div class=${css.tabsbar}>
+        <div class=${css.buttons}>
+          <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}
+      </div>
+    `
+
+    // tabs
+    var $filesEl = $(self._view.filetabs)
+
+    // Switch tab
+    $filesEl.on('click', '.file:not(.active)', function (ev) {
+      ev.preventDefault()
+      self.fileManager.switchFile($(this).find('.name').text())
+      return false
+    })
+
+    // Remove current tab
+    $filesEl.on('click', '.file .remove', function (ev) {
+      ev.preventDefault()
+      var name = $(this).parent().find('.name').text()
+      self.fileManager.closeFile(name)
+      return false
+    })
+
+    return tabsbar
+
+    function toggleScrollers (event = {}) {
+      if (event.type) self.data._focus = event.type
+      var isMouseEnter = self.data._focus === 'mouseenter'
+      var leftArrow = this.children[0]
+      var rightArrow = this.children[2]
+      if (isMouseEnter && this.children[1].offsetWidth > this.offsetWidth) {
+        var hiddenLength = self._view.filetabs.offsetWidth - self._view.tabs.offsetWidth
+        var currentLeft = self._view.filetabs.offsetLeft || 0
+        var hiddenRight = hiddenLength + currentLeft
+        if (currentLeft < 0) {
+          leftArrow.classList.add(css.show)
+          leftArrow.classList.remove(css.hide)
+        }
+        if (hiddenRight > 0) {
+          rightArrow.classList.add(css.show)
+          rightArrow.classList.remove(css.hide)
+        }
+      } else {
+        leftArrow.classList.remove(css.show)
+        leftArrow.classList.add(css.hide)
+        rightArrow.classList.remove(css.show)
+        rightArrow.classList.add(css.hide)
+      }
+    }
+    function increase () { self.editor.editorFontSize(1) }
+    function decrease () { self.editor.editorFontSize(-1) }
+    function scrollLeft (event) {
+      var leftArrow = this
+      var rightArrow = this.nextElementSibling.nextElementSibling
+      var currentLeft = self._view.filetabs.offsetLeft || 0
+      if (currentLeft < 0) {
+        rightArrow.classList.add(css.show)
+        rightArrow.classList.remove(css.hide)
+        if (currentLeft < -self.data._FILE_SCROLL_DELTA) {
+          self._view.filetabs.style.left = `${currentLeft + self.data._FILE_SCROLL_DELTA}px`
+        } else {
+          self._view.filetabs.style.left = `${currentLeft - currentLeft}px`
+          leftArrow.classList.remove(css.show)
+          leftArrow.classList.add(css.hide)
+        }
+      }
+    }
+
+    function scrollRight (event) {
+      var rightArrow = this
+      var leftArrow = this.previousElementSibling.previousElementSibling
+      var hiddenLength = self._view.filetabs.offsetWidth - self._view.tabs.offsetWidth
+      var currentLeft = self._view.filetabs.offsetLeft || 0
+      var hiddenRight = hiddenLength + currentLeft
+      if (hiddenRight > 0) {
+        leftArrow.classList.add(css.show)
+        leftArrow.classList.remove(css.hide)
+        if (hiddenRight > self.data._FILE_SCROLL_DELTA) {
+          self._view.filetabs.style.left = `${currentLeft - self.data._FILE_SCROLL_DELTA}px`
+        } else {
+          self._view.filetabs.style.left = `${currentLeft - hiddenRight}px`
+          rightArrow.classList.remove(css.show)
+          rightArrow.classList.add(css.hide)
+        }
+      }
+    }
+  }
+}