filepanel / file manager / fileexplorer

src/app.js

@@ -602,20 +602,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   chromeCloudStorageSync()
 
   // ---------------- FilePanel --------------------
-  var FilePanelAPI = {
-    switchFile: function (path) {
-      fileManager.switchFile(path)
-    },
-    event: fileManager.event,
-    config: config,
-    currentContent: function () {
-      return editor.get(config.get('currentFile'))
-    },
-    setText: function (text) {
-      editor.setText(text)
-    }
-  }
-  var filePanel = new FilePanel(FilePanelAPI, filesProviders)
+  var filePanel = new FilePanel()
 
   // TODO this should happen inside file-panel.js
   var filepanelContainer = document.querySelector('#filepanel')

src/app/files/file-explorer.js

@@ -10,9 +10,11 @@ var helper = require('../../lib/helper')
 
 var css = require('./styles/file-explorer-styles')
 
+var globalRegistry = require('../../global/registry')
+
 let MENU_HANDLE
 
-function fileExplorer (appAPI, files) {
+function fileExplorer (localRegistry, files) {
   var self = this
   this.events = new EventManager()
   // file provider backend
@@ -22,13 +24,21 @@ function fileExplorer (appAPI, files) {
   // path currently focused on
   this.focusPath = null
 
+  self._components = {}
+  self._components.registry = localRegistry || globalRegistry
+  self._deps = {
+    config: self._components.registry.get('config').api,
+    editor: self._components.registry.get('editor').api,
+    fileManager: self._components.registry.get('filemanager').api
+  }
+
   // warn if file changed outside of Remix
   function remixdDialog () {
     return yo`<div>This file has been changed outside of Remix IDE.</div>`
   }
 
   this.files.event.register('fileExternallyChanged', (path, file) => {
-    if (appAPI.config.get('currentFile') === path && appAPI.currentContent() && appAPI.currentContent() !== file.content) {
+    if (self._deps.config.get('currentFile') === path && self._deps.editor.currentContent() && self._deps.editor.currentContent() !== file.content) {
       modalDialog(path + ' changed', remixdDialog(),
         {
           label: 'Keep the content displayed in Remix',
@@ -37,7 +47,7 @@ function fileExplorer (appAPI, files) {
         {
           label: 'Replace by the new content',
           fn: () => {
-            appAPI.setText(file.content)
+            self._deps.editor.setText(file.content)
           }
         }
       )
@@ -186,7 +196,7 @@ function fileExplorer (appAPI, files) {
   }
 
   // register to main app, trigger when the current file in the editor changed
-  appAPI.event.register('currentFileChanged', (newFile, explorer) => {
+  self._deps.fileManager.event.register('currentFileChanged', (newFile, explorer) => {
     if (self.focusElement && (!explorer || explorer.type !== files.type) && self.focusPath !== newFile) {
       self.focusElement.classList.remove(css.hasFocus)
       self.focusElement = null

src/app/files/fileManager.js

@@ -38,31 +38,6 @@ class FileManager {
     self._deps.localhostExplorer.event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
     self._deps.configExplorer.event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
     self._deps.gistExplorer.event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
-
-    // tabs
-    var $filesEl = $('#files')
-
-    // Switch tab
-    $filesEl.on('click', '.file:not(.active)', function (ev) {
-      ev.preventDefault()
-      self.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.tabbedFiles[name]
-      self.refreshTabs()
-      if (Object.keys(self.tabbedFiles).length) {
-        self.switchFile(Object.keys(self.tabbedFiles)[0])
-      } else {
-        self._deps.editor.displayEmptyReadOnlySession()
-        self._deps.config.set('currentFile', '')
-      }
-      return false
-    })
   }
 
   fileRenamedEvent (oldName, newName, isFolder) {
@@ -136,7 +111,7 @@ class FileManager {
     var self = this
     if (file) return _switchFile(file)
     else {
-      var browserProvider = self._.filesProviders['browser']
+      var browserProvider = self._deps.filesProviders['browser']
       browserProvider.resolveDirectory('browser', (error, filesTree) => {
         if (error) console.error(error)
         var fileList = Object.keys(filesTree)

src/app/panels/editor-panel.js

 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
+var $ = require('jquery')
 
 var Terminal = require('./terminal')
 var globalRegistry = require('../../global/registry')
@@ -20,7 +21,8 @@ class EditorPanel {
       txlistener: self._components.registry.get('txlistener').api,
       contextView: self._components.registry.get('contextview').api,
       udapp: self._components.registry.get('udapp').api,
-      cmdInterpreter: self._components.registry.get('cmdinterpreter').api
+      cmdInterpreter: self._components.registry.get('cmdinterpreter').api,
+      fileManager: self._components.registry.get('filemanager').api
     }
     self.event = new EventManager()
     self.data = {
@@ -171,6 +173,32 @@ class EditorPanel {
         </span>
       </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.switchFile(Object.keys(self._deps.fileManager.tabbedFiles)[0])
+      } else {
+        self._deps.editor.displayEmptyReadOnlySession()
+        self._deps.config.set('currentFile', '')
+      }
+      return false
+    })
+
     return self._view.tabsbar
     function toggleScrollers (event = {}) {
       if (event.type) self.data._focus = event.type

src/app/panels/file-panel.js

 /* global FileReader */
 var async = require('async')
-var $ = require('jquery')
 var yo = require('yo-yo')
 var remixLib = require('remix-lib')
 var Gists = require('gists')
@@ -13,6 +12,8 @@ var QueryParams = require('../../lib/query-params')
 var queryParams = new QueryParams()
 var helper = require('../../lib/helper')
 
+var globalRegistry = require('../../global/registry')
+
 var styleGuide = require('../ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
 
@@ -39,14 +40,21 @@ var ghostbar = yo`<div class=${css.ghostbar}></div>`
       - call fileProvider API
 */
 
-function filepanel (appAPI, filesProvider) {
+function filepanel (localRegistry) {
   var self = this
-  var fileExplorer = new FileExplorer(appAPI, filesProvider['browser'])
-  var fileSystemExplorer = new FileExplorer(appAPI, filesProvider['localhost'])
-  var swarmExplorer = new FileExplorer(appAPI, filesProvider['swarm'])
-  var githubExplorer = new FileExplorer(appAPI, filesProvider['github'])
-  var gistExplorer = new FileExplorer(appAPI, filesProvider['gist'])
-  var configExplorer = new FileExplorer(appAPI, filesProvider['config'])
+  self._components = {}
+  self._components.registry = localRegistry || globalRegistry
+  self._deps = {
+    fileProviders: self._components.registry.get('fileproviders').api,
+    fileManager: self._components.registry.get('filemanager').api,
+    config: self._components.registry.get('config').api
+  }
+  var fileExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['browser'])
+  var fileSystemExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['localhost'])
+  var swarmExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['swarm'])
+  var githubExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['github'])
+  var gistExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['gist'])
+  var configExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['config'])
 
   var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
 
@@ -114,51 +122,51 @@ function filepanel (appAPI, filesProvider) {
   fileExplorer.ensureRoot()
   configExplorer.ensureRoot()
   var websocketconn = element.querySelector('.websocketconn')
-  filesProvider['localhost'].remixd.event.register('connecting', (event) => {
+  self._deps.fileProviders['localhost'].remixd.event.register('connecting', (event) => {
     websocketconn.style.color = styles.colors.yellow
     websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event))
   })
 
-  filesProvider['localhost'].remixd.event.register('connected', (event) => {
+  self._deps.fileProviders['localhost'].remixd.event.register('connected', (event) => {
     websocketconn.style.color = styles.colors.green
     websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event))
     fileSystemExplorer.show()
   })
 
-  filesProvider['localhost'].remixd.event.register('errored', (event) => {
+  self._deps.fileProviders['localhost'].remixd.event.register('errored', (event) => {
     websocketconn.style.color = styles.colors.red
     websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event))
     fileSystemExplorer.hide()
   })
 
-  filesProvider['localhost'].remixd.event.register('closed', (event) => {
+  self._deps.fileProviders['localhost'].remixd.event.register('closed', (event) => {
     websocketconn.style.color = styles.colors.black
     websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event))
     fileSystemExplorer.hide()
   })
 
   fileExplorer.events.register('focus', function (path) {
-    appAPI.switchFile(path)
+    self._deps.fileManager.switchFile(path)
   })
 
   configExplorer.events.register('focus', function (path) {
-    appAPI.switchFile(path)
+    self._deps.fileManager.switchFile(path)
   })
 
   fileSystemExplorer.events.register('focus', function (path) {
-    appAPI.switchFile(path)
+    self._deps.fileManager.switchFile(path)
   })
 
   swarmExplorer.events.register('focus', function (path) {
-    appAPI.switchFile(path)
+    self._deps.fileManager.switchFile(path)
   })
 
   githubExplorer.events.register('focus', function (path) {
-    appAPI.switchFile(path)
+    self._deps.fileManager.switchFile(path)
   })
 
   gistExplorer.events.register('focus', function (path) {
-    appAPI.switchFile(path)
+    self._deps.fileManager.switchFile(path)
   })
 
   self.render = function render () { return element }
@@ -235,12 +243,12 @@ function filepanel (appAPI, filesProvider) {
 
   function createNewFile () {
     modalDialogCustom.prompt(null, 'File Name', 'Untitled.sol', (input) => {
-      helper.createNonClashingName(input, filesProvider['browser'], (error, newName) => {
+      helper.createNonClashingName(input, self._deps.fileProviders['browser'], (error, newName) => {
         if (error) return modalDialogCustom.alert('Failed to create file ' + newName + ' ' + error)
-        if (!filesProvider['browser'].set(newName, '')) {
+        if (!self._deps.fileProviders['browser'].set(newName, '')) {
           modalDialogCustom.alert('Failed to create file ' + newName)
         } else {
-          appAPI.switchFile(filesProvider['browser'].type + '/' + newName)
+          self._deps.fileManager.switchFile(self._deps.fileProviders['browser'].type + '/' + newName)
         }
       })
     }, null, true)
@@ -253,15 +261,15 @@ function filepanel (appAPI, filesProvider) {
     * @param {String} txHash    - hash of the transaction
     */
   function connectToLocalhost () {
-    if (filesProvider['localhost'].isConnected()) {
-      filesProvider['localhost'].close((error) => {
+    if (self._deps.fileProviders['localhost'].isConnected()) {
+      self._deps.fileProviders['localhost'].close((error) => {
         if (error) console.log(error)
       })
     } else {
       modalDialog('Connect to localhost', remixdDialog(),
         { label: 'Connect',
           fn: () => {
-            filesProvider['localhost'].init((error) => {
+            self._deps.fileProviders['localhost'].init((error) => {
               if (error) {
                 console.log(error)
               } else {
@@ -275,7 +283,7 @@ function filepanel (appAPI, filesProvider) {
   // ------------------ gist publish --------------
 
   function updateGist () {
-    var gistId = filesProvider['gist'].id
+    var gistId = self._deps.fileProviders['gist'].id
     if (!gistId) {
       tooltip('no gist content is currently loaded.')
     } else {
@@ -290,12 +298,12 @@ function filepanel (appAPI, filesProvider) {
   }
 
   function toGist (fileProviderName, id) {
-    packageFiles(filesProvider[fileProviderName], (error, packaged) => {
+    packageFiles(self._deps.fileProviders[fileProviderName], (error, packaged) => {
       if (error) {
         console.log(error)
         modalDialogCustom.alert('Failed to create gist: ' + error)
       } else {
-        var tokenAccess = appAPI.config.get('settings/gist-access-token')
+        var tokenAccess = self._deps.config.get('settings/gist-access-token')
         if (!tokenAccess) {
           modalDialogCustom.alert('Remix requires an access token (which includes gists creation permission). Please go to the settings tab for more information.')
         } else {
@@ -350,7 +358,7 @@ function filepanel (appAPI, filesProvider) {
     })
     function doCopy (target) {
       // package only files from the browser storage.
-      packageFiles(filesProvider['browser'], (error, packaged) => {
+      packageFiles(self._deps.fileProviders['browser'], (error, packaged) => {
         if (error) {
           console.log(error)
         } else {