From c1bda7f7e62e9a9895d6878973ad07ef8f8813db Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 27 Jun 2018 12:36:00 +0200 Subject: [PATCH] filepanel / file manager / fileexplorer --- src/app.js | 15 +------- src/app/files/file-explorer.js | 18 +++++++--- src/app/files/fileManager.js | 27 +------------- src/app/panels/editor-panel.js | 30 +++++++++++++++- src/app/panels/file-panel.js | 64 +++++++++++++++++++--------------- 5 files changed, 81 insertions(+), 73 deletions(-) diff --git a/src/app.js b/src/app.js index 448715157e..0fb711af02 100644 --- a/src/app.js +++ b/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') diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js index 9a40e65144..8b1eafc30d 100644 --- a/src/app/files/file-explorer.js +++ b/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`
This file has been changed outside of Remix IDE.
` } 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 diff --git a/src/app/files/fileManager.js b/src/app/files/fileManager.js index 2ba0957f93..559cf5d7ce 100644 --- a/src/app/files/fileManager.js +++ b/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) diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js index 2c00a74ac8..19b5a61045 100644 --- a/src/app/panels/editor-panel.js +++ b/src/app/panels/editor-panel.js @@ -1,6 +1,7 @@ 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 { ` + + // 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 diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js index cea4250d9a..dba67bf36b 100644 --- a/src/app/panels/file-panel.js +++ b/src/app/panels/file-panel.js @@ -1,6 +1,5 @@ /* 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`
` - 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`
` @@ -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 {