Skip to content

B
baas-ide
Commit c6a60897 authored by ninabreznik's avatar ninabreznik Committed by yann300
Browse files
Options

Somehow working refactoring

parent c3347896
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 182 deletions
index.html
View file @ c6a60897
...@@ -52,25 +52,6 @@ ...@@ -52,25 +52,6 @@
<div id="dragbar"></div> <div id="dragbar"></div>
</div> </div>
<div id="righthand-panel">
<div id="header">
<div id="menu">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
<ul id="options">
<li class="envView" title="Environment">Contract</li>
<li class="settingsView" title="Settings">Settings</li>
<li class="publishView" title="Publish" >Files</li>
<li class="debugView" title="Debugger">Debugger</li>
<li class="staticanalysisView" title="Static Analysis">Analysis</li>
<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul>
</div>
<div id="optionViews" class="settingsView">
<!-- contract-tab.js, settings-tab.js, debugger-tab.js, analysis-tab.js, files-tab.js -->
</div>
</div>
</div>
<script src="build/app.js"></script> <script src="build/app.js"></script>
</body> </body>
......
src/app.js
View file @ c6a60897
...@@ -25,15 +25,9 @@ var EventManager = require('ethereum-remix').lib.EventManager ...@@ -25,15 +25,9 @@ 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 OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
var FilePanel = require('./app/file-panel') var FilePanel = require('./app/file-panel')
var tabbedMenu = require('./app/tabbed-menu') var RighthandPanel = require('./app/righthand-panel')
var examples = require('./app/example-contracts') var examples = require('./app/example-contracts')
var contractTab = require('./app/contract-tab.js')
var SettingsTab = require('./app/settings-tab.js')
var analysisTab = require('./app/analysis-tab.js')
var debuggerTab = require('./app/debugger-tab.js')
var filesTab = require('./app/files-tab.js')
// The event listener needs to be registered as early as possible, because the // The event listener needs to be registered as early as possible, because the
// parent will send the message upon the "load" event. // parent will send the message upon the "load" event.
var filesToLoad = null var filesToLoad = null
...@@ -50,26 +44,7 @@ var run = function () { ...@@ -50,26 +44,7 @@ var run = function () {
var fileStorage = new Storage('sol:') var fileStorage = new Storage('sol:')
var files = new Files(fileStorage) var files = new Files(fileStorage)
var config = new Config(fileStorage) var config = new Config(fileStorage)
var compiler = new Compiler(handleImportCall)
var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
/* ----------------------------------------------
TABS - Righthand pannel
------------------------------------------------ */
var contractView = contractTab()
document.querySelector('#optionViews').appendChild(contractView)
var settingsView = new SettingsTab('#optionViews', {}, {compiler: compiler.event}, {})
var analysisView = analysisTab()
document.querySelector('#optionViews').appendChild(analysisView)
var debuggerView = debuggerTab()
document.querySelector('#optionViews').appendChild(debuggerView)
var filesView = filesTab()
document.querySelector('#optionViews').appendChild(filesView)
var executionContext = new ExecutionContext()
// return all the files, except the temporary/readonly ones // return all the files, except the temporary/readonly ones
function packageFiles () { function packageFiles () {
var ret = {} var ret = {}
...@@ -174,9 +149,6 @@ var run = function () { ...@@ -174,9 +149,6 @@ var run = function () {
window.syncStorage = chromeCloudSync window.syncStorage = chromeCloudSync
chromeCloudSync() chromeCloudSync()
// ----------------- editor ----------------------
var editor = new Editor(document.getElementById('input'))
// ---------------- FilePanel -------------------- // ---------------- FilePanel --------------------
// TODO: All FilePanel related CSS should move into file-panel.js // 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 // app.js provides file-panel.js with a css selector or a DOM element
...@@ -281,6 +253,9 @@ var run = function () { ...@@ -281,6 +253,9 @@ var run = function () {
}).appendTo('body') }).appendTo('body')
}) })
// ----------------- editor ----------------------
var editor = new Editor(document.getElementById('input'))
// --------------------Files tabs----------------------------- // --------------------Files tabs-----------------------------
var $filesEl = $('#files') var $filesEl = $('#files')
var FILE_SCROLL_DELTA = 300 var FILE_SCROLL_DELTA = 300
...@@ -444,68 +419,80 @@ var run = function () { ...@@ -444,68 +419,80 @@ var run = function () {
}) })
}) })
// ----------------- resizeable ui --------------- var compiler = new Compiler(handleImportCall)
var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
var EDITOR_WINDOW_SIZE = 'editorWindowSize'
var dragging = false // ----------------- Renderer -----------------
$('#dragbar').mousedown(function (e) { var transactionContextAPI = {
e.preventDefault() getAddress: (cb) => {
dragging = true cb(null, $('#txorigin').val())
var main = $('#righthand-panel') },
var ghostbar = $('<div id="ghostbar">', { getValue: (cb) => {
css: { try {
top: main.offset().top, var comp = $('#value').val().split(' ')
left: main.offset().left cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
} catch (e) {
cb(e)
} }
}).prependTo('body') },
getGasLimit: (cb) => {
$(document).mousemove(function (e) { cb(null, $('#gasLimit').val())
ghostbar.css('left', e.pageX + 2)
})
})
var $body = $('body')
function setEditorSize (delta) {
$('#righthand-panel').css('width', delta)
$('#editor').css('right', delta)
onResize()
} }
function getEditorSize () {
return $('#righthand-panel').width()
} }
$(document).mouseup(function (e) { var rendererAPI = {
if (dragging) { error: (file, error) => {
var delta = $body.width() - e.pageX + 2 if (file === config.get('currentFile')) {
$('#ghostbar').remove() editor.addAnnotation(error)
$(document).unbind('mousemove')
dragging = false
delta = (delta < 50) ? 50 : delta
setEditorSize(delta)
config.set(EDITOR_WINDOW_SIZE, delta)
reAdjust()
} }
}) },
errorClick: (errFile, errLine, errCol) => {
if (config.exists(EDITOR_WINDOW_SIZE)) { if (errFile !== config.get('currentFile') && files.exists(errFile)) {
setEditorSize(config.get(EDITOR_WINDOW_SIZE)) switchToFile(errFile)
}
editor.gotoLine(errLine, errCol)
},
currentCompiledSourceCode: () => {
if (compiler.lastCompilationResult.source) {
return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
}
return ''
},
resetDapp: (udappContracts, renderOutputModifier) => {
udapp.reset(udappContracts, transactionContextAPI, renderOutputModifier)
},
renderDapp: () => {
return udapp.render()
},
getAccounts: (callback) => {
udapp.getAccounts(callback)
},
getBalance: (address, callback) => {
udapp.getBalance(address, (error, balance) => {
if (error) {
callback(error)
} else { } else {
config.set(EDITOR_WINDOW_SIZE, getEditorSize()) callback(null, executionContext.web3().fromWei(balance, 'ether'))
} }
// ----------------- toggle right hand panel -----------------
var hidingRHP = false
$('.toggleRHP').click(function () {
hidingRHP = !hidingRHP
setEditorSize(hidingRHP ? 0 : config.get(EDITOR_WINDOW_SIZE))
$('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
$('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
}) })
}
}
var renderer = new Renderer(rendererAPI, compiler.event)
// ---------------- Righthand-panel --------------------
var rhpAPI = {
config: config,
onResize: onResize,
reAdjust: reAdjust,
renderer: renderer
}
var rhpEvents = {
compiler: compiler.event,
app: self.event
}
var righthandPanel = new RighthandPanel(document.body, rhpAPI, rhpEvents, {})
// ------------------------------------------------------------
var executionContext = new ExecutionContext()
// ----------------- editor resize --------------- // ----------------- editor resize ---------------
function onResize () { function onResize () {
...@@ -725,63 +712,6 @@ var run = function () { ...@@ -725,63 +712,6 @@ var run = function () {
}) })
}) })
// ----------------- Renderer -----------------
var transactionContextAPI = {
getAddress: (cb) => {
cb(null, $('#txorigin').val())
},
getValue: (cb) => {
try {
var comp = $('#value').val().split(' ')
cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
} catch (e) {
cb(e)
}
},
getGasLimit: (cb) => {
cb(null, $('#gasLimit').val())
}
}
var rendererAPI = {
error: (file, error) => {
if (file === config.get('currentFile')) {
editor.addAnnotation(error)
}
},
errorClick: (errFile, errLine, errCol) => {
if (errFile !== config.get('currentFile') && files.exists(errFile)) {
switchToFile(errFile)
}
editor.gotoLine(errLine, errCol)
},
currentCompiledSourceCode: () => {
if (compiler.lastCompilationResult.source) {
return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
}
return ''
},
resetDapp: (udappContracts, renderOutputModifier) => {
udapp.reset(udappContracts, transactionContextAPI, renderOutputModifier)
},
renderDapp: () => {
return udapp.render()
},
getAccounts: (callback) => {
udapp.getAccounts(callback)
},
getBalance: (address, callback) => {
udapp.getBalance(address, (error, balance) => {
if (error) {
callback(error)
} else {
callback(null, executionContext.web3().fromWei(balance, 'ether'))
}
})
}
}
var renderer = new Renderer(rendererAPI, compiler.event)
// ----------------- StaticAnalysis ----------------- // ----------------- StaticAnalysis -----------------
var staticAnalysisAPI = { var staticAnalysisAPI = {
renderWarning: (label, warningContainer, type) => { renderWarning: (label, warningContainer, type) => {
...@@ -996,16 +926,6 @@ var run = function () { ...@@ -996,16 +926,6 @@ var run = function () {
loadVersion('builtin') loadVersion('builtin')
}) })
var tabbedMenuAPI = {
warnCompilerLoading: function (msg) {
renderer.clear()
if (msg) {
renderer.error(msg, $('#output'), {type: 'warning'})
}
}
}
// load tabbed menu component
tabbedMenu(tabbedMenuAPI, compiler.event, self.event)
} }
module.exports = { module.exports = {
......
src/app/analysis-tab.js
View file @ c6a60897
...@@ -21,9 +21,10 @@ var css = csjs` ...@@ -21,9 +21,10 @@ var css = csjs`
module.exports = analysisTab module.exports = analysisTab
function analysisTab () { function analysisTab (container, API, events, opts) {
return yo` var el = yo`
<div class="${css.analysisTabView} "id="staticanalysisView"> <div class="${css.analysisTabView} "id="staticanalysisView">
</div> </div>
` `
container.appendChild(el)
} }
src/app/contract-tab.js
View file @ c6a60897
...@@ -54,7 +54,7 @@ var css = csjs` ...@@ -54,7 +54,7 @@ var css = csjs`
module.exports = contractTab module.exports = contractTab
function contractTab () { function contractTab (container, appAPI, appEvents, opts) {
function copyAddress () { function copyAddress () {
copy(document.querySelector('#envView #txorigin').value) copy(document.querySelector('#envView #txorigin').value)
} }
...@@ -105,5 +105,5 @@ function contractTab () { ...@@ -105,5 +105,5 @@ function contractTab () {
<div id="output" class="${css.contract}"></div> <div id="output" class="${css.contract}"></div>
</div> </div>
` `
return el container.appendChild(el)
} }
src/app/debugger-tab.js
View file @ c6a60897
...@@ -11,6 +11,7 @@ var css = csjs` ...@@ -11,6 +11,7 @@ var css = csjs`
module.exports = debuggerTab module.exports = debuggerTab
function debuggerTab () { function debuggerTab (container, API, events, opts) {
return yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>` var el = yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
container.appendChild(el)
} }
src/app/files-tab.js
View file @ c6a60897
...@@ -20,8 +20,8 @@ var css = csjs` ...@@ -20,8 +20,8 @@ var css = csjs`
module.exports = filesTab module.exports = filesTab
function filesTab () { function filesTab (container, API, events, opts) {
return yo` var el = yo`
<div class="${css.filesTabView}" id="publishView"> <div class="${css.filesTabView}" id="publishView">
<div class="${css.crow}"> <div class="${css.crow}">
<button id="gist" title="Publish all files as public gist on github.com"> <button id="gist" title="Publish all files as public gist on github.com">
...@@ -42,4 +42,5 @@ function filesTab () { ...@@ -42,4 +42,5 @@ function filesTab () {
</div> </div>
</div> </div>
` `
container.appendChild(el)
} }
src/app/righthand-panel.js 0 → 100644
View file @ c6a60897
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var $ = require('jquery')
var tabbedMenu = require('./tabbed-menu')
var contractTab = require('./contract-tab')
var settingsTab = require('./settings-tab')
var analysisTab = require('./analysis-tab')
var debuggerTab = require('./debugger-tab')
var filesTab = require('./files-tab')
// ------------------------------------------------------------------
module.exports = RighthandPanel
function RighthandPanel (container, API, events, opts) {
var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
var element = yo`
<div id="righthand-panel">
<div id="header">
<div id="menu">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
<ul id="options">
<li class="envView" title="Environment">Contract</li>
<li class="settingsView" title="Settings">Settings</li>
<li class="publishView" title="Publish" >Files</li>
<li class="debugView" title="Debugger">Debugger</li>
<li class="staticanalysisView" title="Static Analysis">Analysis</li>
<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul>
</div>
${optionViews}
</div>
</div>
`
contractTab(optionViews, API, events, opts)
settingsTab(optionViews, API, events, opts)
analysisTab(optionViews, API, events, opts)
debuggerTab(optionViews, API, events, opts)
filesTab(optionViews, API, events, opts)
container.appendChild(element)
// ----------------- toggle right hand panel -----------------
var hidingRHP = false
$('.toggleRHP').click(function () {
hidingRHP = !hidingRHP
setEditorSize(hidingRHP ? 0 : API.config.get(EDITOR_WINDOW_SIZE))
$('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
$('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
})
// ----------------- tabbed menu -----------------
var tabbedMenuAPI = {
warnCompilerLoading: function (msg) {
API.renderer.clear()
if (msg) {
API.renderer.error(msg, $('#output'), {type: 'warning'})
}
}
}
// load tabbed menu component
var tabContainer = undefined // @TODO
var tabEvents = {compiler: events.compiler, app: events.app}
tabbedMenu(tabContainer, tabbedMenuAPI, tabEvents, {})
// ----------------- resizeable ui ---------------
var EDITOR_WINDOW_SIZE = 'editorWindowSize'
var dragging = false
$('#dragbar').mousedown(function (e) {
e.preventDefault()
dragging = true
var main = $('#righthand-panel')
var ghostbar = $('<div id="ghostbar">', {
css: {
top: main.offset().top,
left: main.offset().left
}
}).prependTo('body')
$(document).mousemove(function (e) {
ghostbar.css('left', e.pageX + 2)
})
})
var $body = $('body')
function setEditorSize (delta) {
$('#righthand-panel').css('width', delta)
$('#editor').css('right', delta)
API.onResize()
}
function getEditorSize () {
return $('#righthand-panel').width()
}
$(document).mouseup(function (e) {
if (dragging) {
var delta = $body.width() - e.pageX + 2
$('#ghostbar').remove()
$(document).unbind('mousemove')
dragging = false
delta = (delta < 50) ? 50 : delta
setEditorSize(delta)
API.config.set(EDITOR_WINDOW_SIZE, delta)
API.reAdjust()
}
})
if (API.config.exists(EDITOR_WINDOW_SIZE)) {
setEditorSize(API.config.get(EDITOR_WINDOW_SIZE))
} else {
API.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
}
}
src/app/tabbed-menu.js
View file @ c6a60897
...@@ -3,13 +3,13 @@ var loadingSpinner = require('./loading-spinner') ...@@ -3,13 +3,13 @@ var loadingSpinner = require('./loading-spinner')
module.exports = tabbedMenu module.exports = tabbedMenu
function tabbedMenu (rendererAPI, compilerEvent, appEvent) { function tabbedMenu (container, API, events, opts) {
$('#options li').click(function (ev) { $('#options li').click(function (ev) {
var $el = $(this) var $el = $(this)
selectTab($el) selectTab($el)
}) })
appEvent.register('debuggingRequested', () => { events.app.register('debuggingRequested', () => {
selectTab($('ul#options li.debugView')) selectTab($('ul#options li.debugView'))
}) })
...@@ -17,17 +17,17 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) { ...@@ -17,17 +17,17 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
selectTab($('#options .envView')) selectTab($('#options .envView'))
// add event listeners for loading spinner // add event listeners for loading spinner
compilerEvent.register('loadingCompiler', function start () { events.compiler.register('loadingCompiler', function start () {
var settingsTab = document.querySelector('.settingsView') var settingsTab = document.querySelector('.settingsView')
if (settingsTab.children.length) return if (settingsTab.children.length) return
var spinner = loadingSpinner() var spinner = loadingSpinner()
settingsTab.appendChild(spinner) settingsTab.appendChild(spinner)
rendererAPI.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...') API.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
compilerEvent.register('compilerLoaded', finish) events.compiler.register('compilerLoaded', finish)
function finish () { function finish () {
compilerEvent.unregister('compilerLoaded', finish) events.compiler.unregister('compilerLoaded', finish)
settingsTab.removeChild(spinner) settingsTab.removeChild(spinner)
} }
}) })
...@@ -42,6 +42,6 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) { ...@@ -42,6 +42,6 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
$('#optionViews').attr('class', '').addClass(cls) $('#optionViews').attr('class', '').addClass(cls)
el.addClass('active') el.addClass('active')
} }
appEvent.trigger('tabChanged', [cls]) events.app.trigger('tabChanged', [cls])
} }
} }
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