mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #1392 from ethereum/refactor4

Browse Source 
Clean app.js (4)
pull/1/head
yann300 6 years ago committed by GitHub
parent 71bd4b6512 728dcaf82a
commit dd25330a6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 141 additions and 124 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 39
      src/app.js
  2. 18
      src/app/files/file-explorer.js
  3. 103
      src/app/files/fileManager.js
  4. 30
      src/app/panels/editor-panel.js
  5. 63
      src/app/panels/file-panel.js
  6. 6
      src/app/panels/terminal.js
  7. 6
      src/app/plugin/pluginAPI.js

39
src/app.js
Unescape View File

@ -133,8 +133,8 @@ class App {
self._api.filesProviders['browser'] = new Browserfiles(fileStorage)
self._api.filesProviders['config'] = new BrowserfilesTree('config', configStorage)
self._api.filesProviders['config'].init()
registry.put({api: self._api.filesProviders['browser'], name: 'fileProviders/browser'})
registry.put({api: self._api.filesProviders['config'], name: 'fileProviders/config'})
registry.put({api: self._api.filesProviders['browser'], name: 'fileproviders/browser'})
registry.put({api: self._api.filesProviders['config'], name: 'fileproviders/config'})
var remixd = new Remixd()
registry.put({api: remixd, name: 'remixd/config'})
remixd.event.register('system', (message) => {
@ -145,15 +145,16 @@ class App {
self._api.filesProviders['github'] = new BasicReadOnlyExplorer('github')
self._api.filesProviders['gist'] = new NotPersistedExplorer('gist')
self._api.filesProviders['ipfs'] = new BasicReadOnlyExplorer('ipfs')
registry.put({api: self._api.filesProviders['localhost'], name: 'fileProviders/localhost'})
registry.put({api: self._api.filesProviders['swarm'], name: 'fileProviders/swarm'})
registry.put({api: self._api.filesProviders['github'], name: 'fileProviders/github'})
registry.put({api: self._api.filesProviders['gist'], name: 'fileProviders/gist'})
registry.put({api: self._api.filesProviders['ipfs'], name: 'fileProviders/ipfs'})
registry.put({api: self._api.filesProviders['localhost'], name: 'fileproviders/localhost'})
registry.put({api: self._api.filesProviders['swarm'], name: 'fileproviders/swarm'})
registry.put({api: self._api.filesProviders['github'], name: 'fileproviders/github'})
registry.put({api: self._api.filesProviders['gist'], name: 'fileproviders/gist'})
registry.put({api: self._api.filesProviders['ipfs'], name: 'fileproviders/ipfs'})
registry.put({api: self._api.filesProviders, name: 'fileproviders'})
self._view = {}
self._components = {}
self._components.compilerImport = new CompilerImport()
registry.put({api: self._components.compilerImport, name: 'compilerImport'})
registry.put({api: self._components.compilerImport, name: 'compilerimport'})
self.data = {
_layout: {
right: {
@ -496,12 +497,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
// ----------------- file manager ----------------------------
self._components.fileManager = new FileManager({
config: config,
editor: editor,
filesProviders: filesProviders,
compilerImport: self._components.compilerImport
})
self._components.fileManager = new FileManager()
var fileManager = self._components.fileManager
registry.put({api: fileManager, name: 'filemanager'})
@ -606,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')

18
src/app/files/file-explorer.js
Unescape View File

@ -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

103
src/app/files/fileManager.js
Unescape View File

@ -4,62 +4,47 @@ var $ = require('jquery')
var remixLib = require('remix-lib')
var yo = require('yo-yo')
var EventManager = remixLib.EventManager
var globalRegistry = require('../../global/registry')
/*
attach to files event (removed renamed)
opt needs:
- filesProviders
- config
- editor
trigger: currentFileChanged
*/
class FileManager {
constructor (opt = {}) {
constructor (localRegistry) {
this.tabbedFiles = {}
this.event = new EventManager()
var self = this
this.opt = opt
this.opt.filesProviders['browser'].event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
this.opt.filesProviders['localhost'].event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
this.opt.filesProviders['config'].event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
this.opt.filesProviders['gist'].event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
this.opt.filesProviders['browser'].event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
this.opt.filesProviders['localhost'].event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
this.opt.filesProviders['config'].event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
this.opt.filesProviders['gist'].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
})
self._components = {}
self._components.registry = localRegistry || globalRegistry
self._deps = {
compilerImport: self._components.registry.get('compilerimport').api,
editor: self._components.registry.get('editor').api,
config: self._components.registry.get('config').api,
browserExplorer: self._components.registry.get('fileproviders/browser').api,
localhostExplorer: self._components.registry.get('fileproviders/localhost').api,
configExplorer: self._components.registry.get('fileproviders/config').api,
gistExplorer: self._components.registry.get('fileproviders/gist').api,
filesProviders: self._components.registry.get('fileproviders').api
}
// 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 {
opt.editor.displayEmptyReadOnlySession()
self.opt.config.set('currentFile', '')
}
return false
})
self._deps.browserExplorer.event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
self._deps.localhostExplorer.event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
self._deps.configExplorer.event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
self._deps.gistExplorer.event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
self._deps.browserExplorer.event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
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) })
}
fileRenamedEvent (oldName, newName, isFolder) {
var self = this
if (!isFolder) {
this.opt.config.set('currentFile', '')
this.opt.editor.discard(oldName)
self._deps.config.set('currentFile', '')
self._deps.editor.discard(oldName)
if (this.tabbedFiles[oldName]) {
delete this.tabbedFiles[oldName]
this.tabbedFiles[newName] = newName
@ -67,12 +52,12 @@ class FileManager {
this.switchFile(newName)
} else {
var newFocus
for (var k in this.opt.tabbedFiles) {
for (var k in this.tabbedFiles) {
if (k.indexOf(oldName + '/') === 0) {
var newAbsolutePath = k.replace(oldName, newName)
this.tabbedFiles[newAbsolutePath] = newAbsolutePath
delete this.tabbedFiles[k]
if (this.opt.config.get('currentFile') === k) {
if (self._deps.config.get('currentFile') === k) {
newFocus = newAbsolutePath
}
}
@ -85,17 +70,19 @@ class FileManager {
}
currentPath () {
var currentFile = this.opt.config.get('currentFile')
var self = this
var currentFile = self._deps.config.get('currentFile')
var reg = /(.*\/).*/
var path = reg.exec(currentFile)
return path ? path[1] : null
}
fileRemovedEvent (path) {
if (path === this.opt.config.get('currentFile')) {
this.opt.config.set('currentFile', '')
var self = this
if (path === self._deps.config.get('currentFile')) {
self._deps.config.set('currentFile', '')
}
this.opt.editor.discardCurrentSession()
self._deps.editor.discardCurrentSession()
delete this.tabbedFiles[path]
this.refreshTabs()
}
@ -124,7 +111,7 @@ class FileManager {
var self = this
if (file) return _switchFile(file)
else {
var browserProvider = self.opt.filesProviders['browser']
var browserProvider = self._deps.filesProviders['browser']
browserProvider.resolveDirectory('browser', (error, filesTree) => {
if (error) console.error(error)
var fileList = Object.keys(filesTree)
@ -132,22 +119,22 @@ class FileManager {
_switchFile(browserProvider.type + '/' + fileList[0])
} else {
self.event.trigger('currentFileChanged', [])
self.opt.editor.displayEmptyReadOnlySession()
self._deps.editor.displayEmptyReadOnlySession()
}
})
}
function _switchFile (file) {
self.saveCurrentFile()
self.opt.config.set('currentFile', file)
self._deps.config.set('currentFile', file)
self.refreshTabs(file)
self.fileProviderOf(file).get(file, (error, content) => {
if (error) {
console.log(error)
} else {
if (self.fileProviderOf(file).isReadOnly(file)) {
self.opt.editor.openReadOnly(file, content)
self._deps.editor.openReadOnly(file, content)
} else {
self.opt.editor.open(file, content)
self._deps.editor.open(file, content)
}
self.event.trigger('currentFileChanged', [file, self.fileProviderOf(file)])
}
@ -165,12 +152,12 @@ class FileManager {
fileProviderOf (file) {
var provider = file.match(/[^/]*/)
if (provider !== null && this.opt.filesProviders[provider[0]]) {
return this.opt.filesProviders[provider[0]]
if (provider !== null && this._deps.filesProviders[provider[0]]) {
return this._deps.filesProviders[provider[0]]
} else {
for (var handler of this.opt.compilerImport.handlers()) {
for (var handler of this._deps.compilerImport.handlers()) {
if (handler.match.exec(file)) {
return this.opt.filesProviders[handler.type]
return this._deps.filesProviders[handler.type]
}
}
}
@ -178,9 +165,9 @@ class FileManager {
}
saveCurrentFile () {
var currentFile = this.opt.config.get('currentFile')
if (currentFile && this.opt.editor.current()) {
var input = this.opt.editor.get(currentFile)
var currentFile = this._deps.config.get('currentFile')
if (currentFile && this._deps.editor.current()) {
var input = this._deps.editor.get(currentFile)
if (input) {
var provider = this.fileProviderOf(currentFile)
if (provider) {

30
src/app/panels/editor-panel.js
Unescape View File

@ -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 {
</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

63
src/app/panels/file-panel.js
Unescape View File

@ -13,6 +13,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 +41,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 +123,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 +244,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 +262,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 +284,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 +299,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 +359,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 {

6
src/app/panels/terminal.js
Unescape View File

@ -136,7 +136,7 @@ class Terminal {
</div>
`
setInterval(() => {
updatePendingTxs(self._api, self._view.pendingTxCount)
updatePendingTxs(self._api.udapp, self._view.pendingTxCount)
}, 5000)
function listenOnNetwork (ev) {
@ -579,8 +579,8 @@ function domTerminalFeatures (self, scopedCommands) {
function blockify (el) { return yo`<div class=${css.block}>${el}</div>` }
// PENDING TX
function updatePendingTxs (api, el) {
var count = Object.keys(api.udapp.pendingTransactions()).length
function updatePendingTxs (udapp, el) {
var count = Object.keys(udapp.pendingTransactions()).length
el.innerText = count
}

6
src/app/plugin/pluginAPI.js
Unescape View File

@ -6,14 +6,14 @@ module.exports = (registry) => {
return {
config: {
setConfig: (mod, path, content, cb) => {
registry.get('fileProviders/config').api.set(mod + '/' + path, content)
registry.get('fileproviders/config').api.set(mod + '/' + path, content)
cb()
},
getConfig: (mod, path, cb) => {
cb(null, registry.get('fileProviders/config').get(mod + '/' + path))
cb(null, registry.get('fileproviders/config').get(mod + '/' + path))
},
removeConfig: (mod, path, cb) => {
cb(null, registry.get('fileProviders/config').api.remove(mod + '/' + path))
cb(null, registry.get('fileproviders/config').api.remove(mod + '/' + path))
if (cb) cb()
}
},

Write Preview
Loading…
Cancel
Save