Skip to content

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

Merge pull request #606 from serapath-contribution/master

Refactor browser-solidity
parents 0362e1cc 0850d33b
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 59 deletions
index.html
View file @ 85512ec4
...@@ -37,21 +37,6 @@ ...@@ -37,21 +37,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head> </head>
<body> <body>
<div id="editor">
<div id="tabs-bar">
<div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
<div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
<ul id="files" class="nav nav-tabs"></ul>
</div>
<span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
<div id="editor-container">
<div id="filepanel"></div>
<div id="input"></div>
</div>
<div id="dragbar"></div>
</div>
<script src="build/app.js"></script> <script src="build/app.js"></script>
<div id="modaldialog" class="modal"> <div id="modaldialog" class="modal">
......
src/app.js
View file @ 85512ec4
...@@ -6,13 +6,15 @@ var $ = require('jquery') ...@@ -6,13 +6,15 @@ var $ = require('jquery')
var base64 = require('js-base64').Base64 var base64 = require('js-base64').Base64
var swarmgw = require('swarmgw') var swarmgw = require('swarmgw')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager
var UniversalDApp = require('./universal-dapp.js')
var Remixd = require('./lib/remixd')
var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
var QueryParams = require('./app/query-params') var QueryParams = require('./app/query-params')
var queryParams = new QueryParams()
var GistHandler = require('./app/gist-handler') var GistHandler = require('./app/gist-handler')
var gistHandler = new GistHandler()
var Remixd = require('./lib/remixd')
var Storage = require('./app/files/storage') var Storage = require('./app/files/storage')
var Browserfiles = require('./app/files/browser-files') var Browserfiles = require('./app/files/browser-files')
var SharedFolder = require('./app/files/shared-folder') var SharedFolder = require('./app/files/shared-folder')
...@@ -21,27 +23,79 @@ var Editor = require('./app/editor') ...@@ -21,27 +23,79 @@ var Editor = require('./app/editor')
var Renderer = require('./app/renderer') var Renderer = require('./app/renderer')
var Compiler = require('./app/compiler') var Compiler = require('./app/compiler')
var ExecutionContext = require('./app/execution-context') var ExecutionContext = require('./app/execution-context')
var UniversalDApp = require('./universal-dapp.js')
var Debugger = require('./app/debugger') var Debugger = require('./app/debugger')
var EventManager = require('ethereum-remix').lib.EventManager
var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView') var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
var FilePanel = require('./app/file-panel') var FilePanel = require('./app/file-panel')
var RighthandPanel = require('./app/righthand-panel') var RighthandPanel = require('./app/righthand-panel')
var examples = require('./app/example-contracts') var examples = require('./app/example-contracts')
// The event listener needs to be registered as early as possible, because the var css = csjs`
// parent will send the message upon the "load" event. .editor-container {
var filesToLoad = null display : flex;
var loadFilesCallback = function (files) { filesToLoad = files } // will be replaced later position : absolute;
top : 2.5em;
left : 0;
right : 0;
bottom : 0;
min-width : 20vw;
}
.filepanel-container {
display : flex;
width : 200px;
}
`
window.addEventListener('message', function (ev) { class App {
if (typeof ev.data === typeof [] && ev.data[0] === 'loadFiles') { constructor (opts = {}) {
loadFilesCallback(ev.data[1]) var self = this
self._view = {}
}
init () {
var self = this
run.apply(self)
}
render () {
var self = this
if (self._view.el) return self._view.el
/***************************************************************************/
var el = yo`
<div id="editor">
<div id="tabs-bar">
<div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
<div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
<ul id="files" class="nav nav-tabs"></ul>
</div>
<span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
<div id="editor-container" class=${css['editor-container']}>
<div id="filepanel" class=${css['filepanel-container']}></div>
<div id="input"></div>
</div>
<div id="dragbar"></div>
</div>
`
return el
} }
}, false) }
var run = function () {
module.exports = App
function run () {
var self = this var self = this
var queryParams = new QueryParams()
var gistHandler = new GistHandler()
// The event listener needs to be registered as early as possible, because the
// parent will send the message upon the "load" event.
var filesToLoad = null
var loadFilesCallback = function (files) { filesToLoad = files } // will be replaced later
window.addEventListener('message', function (ev) {
if (typeof ev.data === typeof [] && ev.data[0] === 'loadFiles') {
loadFilesCallback(ev.data[1])
}
}, false)
this.event = new EventManager() this.event = new EventManager()
var fileStorage = new Storage('sol:') var fileStorage = new Storage('sol:')
var config = new Config(fileStorage) var config = new Config(fileStorage)
...@@ -172,17 +226,6 @@ var run = function () { ...@@ -172,17 +226,6 @@ var run = function () {
chromeCloudSync() chromeCloudSync()
// ---------------- FilePanel -------------------- // ---------------- FilePanel --------------------
// TODO: All FilePanel related CSS should move into file-panel.js
// app.js provides file-panel.js with a css selector or a DOM element
// and file-panel.js adds its elements (including css), see "Editor" above
var css = csjs`
.filepanel-container {
display : flex;
width : 200px;
}
`
var filepanelContainer = document.querySelector('#filepanel')
filepanelContainer.className = css['filepanel-container']
var FilePanelAPI = { var FilePanelAPI = {
createName: createNonClashingName, createName: createNonClashingName,
switchToFile: switchToFile, switchToFile: switchToFile,
...@@ -201,7 +244,9 @@ var run = function () { ...@@ -201,7 +244,9 @@ var run = function () {
} }
} }
var filePanel = new FilePanel(FilePanelAPI, filesProviders) var filePanel = new FilePanel(FilePanelAPI, filesProviders)
// TODO this should happen inside file-panel.js // TODO this should happen inside file-panel.js
var filepanelContainer = document.querySelector('#filepanel')
filepanelContainer.appendChild(filePanel) filepanelContainer.appendChild(filePanel)
filePanel.events.register('ui-hidden', function changeLayout (isHidden) { filePanel.events.register('ui-hidden', function changeLayout (isHidden) {
...@@ -1012,7 +1057,3 @@ var run = function () { ...@@ -1012,7 +1057,3 @@ var run = function () {
loadVersion('builtin') loadVersion('builtin')
}) })
} }
module.exports = {
'run': run
}
src/app/editor.js
View file @ 85512ec4
...@@ -8,22 +8,12 @@ var Range = ace.acequire('ace/range').Range ...@@ -8,22 +8,12 @@ var Range = ace.acequire('ace/range').Range
require('../mode-solidity.js') require('../mode-solidity.js')
var css = csjs` var css = csjs`
.editor-container {
display : flex;
position : absolute;
top : 2.5em;
left : 0;
right : 0;
bottom : 0;
min-width : 20vw;
}
.ace-editor { .ace-editor {
top : 4px; top : 4px;
font-size : 1.1em; font-size : 1.1em;
width : 100%; width : 100%;
} }
` `
document.querySelector('#editor-container').className = css['editor-container']
function Editor (editorElement) { function Editor (editorElement) {
var editor = ace.edit(editorElement) var editor = ace.edit(editorElement)
......
src/index.js
View file @ 85512ec4
'use strict' 'use strict'
require('babel-polyfill') require('babel-polyfill')
var app = require('./app.js') var App = require('./app.js')
var $ = require('jquery')
$(document).ready(function () { app.run() }) var app = new App({})
document.body.appendChild(app.render())
app.init() // @TODO: refactor to remove
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