Skip to content

B
baas-ide
Unverified Commit dd25330a authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #1392 from ethereum/refactor4

Clean app.js (4)
parents 71bd4b65 728dcaf8
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 124 deletions
src/app.js
View file @ dd25330a
......@@ -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')
......
src/app/files/file-explorer.js
View file @ dd25330a
......@@ -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
View file @ dd25330a
......@@ -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) {
......
src/app/panels/editor-panel.js
View file @ dd25330a
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
View file @ dd25330a
......@@ -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 {
......
src/app/panels/terminal.js
View file @ dd25330a
......@@ -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
}
......
src/app/plugin/pluginAPI.js
View file @ dd25330a
......@@ -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()
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment