Skip to content

Commit

Permalink
Somehow working refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@ninabreznik @yann300
ninabreznik authored and yann300 committed Jun 15, 2017
1 parent c334789 commit c6a6089
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 185 deletions.
19 changes: 0 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,25 +52,6 @@
<div id="dragbar"></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>

</body>
Expand Down
222 changes: 71 additions & 151 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,9 @@ var EventManager = require('ethereum-remix').lib.EventManager
var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
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 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
// parent will send the message upon the "load" event.
var filesToLoad = null
Expand All @@ -50,26 +44,7 @@ var run = function () {
var fileStorage = new Storage('sol:')
var files = new Files(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
function packageFiles () {
var ret = {}
Expand Down Expand Up @@ -174,9 +149,6 @@ var run = function () {
window.syncStorage = chromeCloudSync
chromeCloudSync()

// ----------------- editor ----------------------
var editor = new Editor(document.getElementById('input'))

// ---------------- 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
Expand Down Expand Up @@ -281,6 +253,9 @@ var run = function () {
}).appendTo('body')
})

// ----------------- editor ----------------------
var editor = new Editor(document.getElementById('input'))

// --------------------Files tabs-----------------------------
var $filesEl = $('#files')
var FILE_SCROLL_DELTA = 300
Expand Down Expand Up @@ -444,68 +419,80 @@ var run = function () {
})
})

// ----------------- resizeable ui ---------------

var EDITOR_WINDOW_SIZE = 'editorWindowSize'
var compiler = new Compiler(handleImportCall)
var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)

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
// ----------------- 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)
}
}).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)
onResize()
}

function getEditorSize () {
return $('#righthand-panel').width()
},
getGasLimit: (cb) => {
cb(null, $('#gasLimit').val())
}
}

$(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)
config.set(EDITOR_WINDOW_SIZE, delta)
reAdjust()
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'))
}
})
}
})

if (config.exists(EDITOR_WINDOW_SIZE)) {
setEditorSize(config.get(EDITOR_WINDOW_SIZE))
} else {
config.set(EDITOR_WINDOW_SIZE, getEditorSize())
}
var renderer = new Renderer(rendererAPI, compiler.event)

// ----------------- 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)
})

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

function onResize () {
Expand Down Expand Up @@ -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 -----------------
var staticAnalysisAPI = {
renderWarning: (label, warningContainer, type) => {
Expand Down Expand Up @@ -996,16 +926,6 @@ var run = function () {
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 = {
Expand Down
5 changes: 3 additions & 2 deletions src/app/analysis-tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@ var css = csjs`

module.exports = analysisTab

function analysisTab () {
return yo`
function analysisTab (container, API, events, opts) {
var el = yo`
<div class="${css.analysisTabView} "id="staticanalysisView">
</div>
`
container.appendChild(el)
}
4 changes: 2 additions & 2 deletions src/app/contract-tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ var css = csjs`

module.exports = contractTab

function contractTab () {
function contractTab (container, appAPI, appEvents, opts) {
function copyAddress () {
copy(document.querySelector('#envView #txorigin').value)
}
Expand Down Expand Up @@ -105,5 +105,5 @@ function contractTab () {
<div id="output" class="${css.contract}"></div>
</div>
`
return el
container.appendChild(el)
}
5 changes: 3 additions & 2 deletions src/app/debugger-tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ var css = csjs`

module.exports = debuggerTab

function debuggerTab () {
return yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
function debuggerTab (container, API, events, opts) {
var el = yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
container.appendChild(el)
}
5 changes: 3 additions & 2 deletions src/app/files-tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ var css = csjs`

module.exports = filesTab

function filesTab () {
return yo`
function filesTab (container, API, events, opts) {
var el = yo`
<div class="${css.filesTabView}" id="publishView">
<div class="${css.crow}">
<button id="gist" title="Publish all files as public gist on github.com">
Expand All @@ -42,4 +42,5 @@ function filesTab () {
</div>
</div>
`
container.appendChild(el)
}
Loading

0 comments on commit c6a6089

Please sign in to comment.