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

File explorer cleanup.

Browse Source
pull/1/head
chriseth 8 years ago committed by yann300
parent 689dd345ef
commit 405ea9d351
3 changed files with 50 additions and 46 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. 62
      src/app.js
  2. 14
      src/app/file-explorer.js
  3. 20
      src/app/file-panel.js

62
src/app.js
Unescape View File

@ -63,19 +63,12 @@ window.addEventListener('message', function (ev) {
}
}, false)
/*
trigger tabChanged
*/
var run = function () {
var self = this
this.event = new EventManager()
var fileStorage = new Storage('sol:')
var files = new Files(fileStorage)
var config = new Config(fileStorage)
var uiStorage = new Storage('sol-ui:')
var ui = new Files(uiStorage)
ui.set('currentFile', '')
// return all the files, except the temporary/readonly ones
function packageFiles () {
@ -184,56 +177,57 @@ var run = function () {
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
// and file-panel.js adds its elements (including css), see "Editor" above
var css = csjs`
.filepanel {
display : flex;
width : 200px;
}
`
var filepanel = document.querySelector('#filepanel')
filepanel.className = css.filepanel
var filepanelContainer = document.querySelector('#filepanel')
filepanelContainer.className = css.filepanel
var FilePanelAPI = {
createName: createNonClashingName,
switchToFile: switchToFile,
event: this.event
}
var el = new FilePanel(FilePanelAPI, files)
filepanel.appendChild(el)
var api = el.api
var filePanel = new FilePanel(FilePanelAPI, files)
// TODO this should happen inside file-panel.js
filepanelContainer.appendChild(filePanel)
api.register('ui', function changeLayout (data) {
filePanel.events.register('ui-hidden', function changeLayout (isHidden) {
var value
if (data.type === 'minimize') {
if (isHidden) {
value = -parseInt(window['filepanel'].style.width)
value = (isNaN(value) ? -window['filepanel'].getBoundingClientRect().width : value)
window['filepanel'].style.position = 'absolute'
window['filepanel'].style.left = (value - 5) + 'px'
window['filepanel'].style.width = -value + 'px'
window['tabs-bar'].style.left = '45px'
} else if (data.type === 'maximize') {
} else {
value = -parseInt(window['filepanel'].style.left) + 'px'
window['filepanel'].style.position = 'static'
window['filepanel'].style.width = value
window['filepanel'].style.left = ''
window['tabs-bar'].style.left = value
} else {
window['filepanel'].style.width = data.width + 'px'
window['tabs-bar'].style.left = data.width + 'px'
}
})
api.register('focus', function (path) {
[...window.files.querySelectorAll('.file .name')].forEach(function (span) {
if (span.innerText === path) switchToFile(path)
})
filePanel.events.register('ui-resize', function changeLayout (width) {
window['filepanel'].style.width = width + 'px'
window['tabs-bar'].style.left = width + 'px'
})
files.event.register('fileRenamed', function (oldName, newName) {
// TODO please never use 'window' when it is possible to use a variable
// that references the DOM node
[...window.files.querySelectorAll('.file .name')].forEach(function (span) {
if (span.innerText === oldName) span.innerText = newName
})
})
files.event.register('fileRemoved', function (path) {
if (path === ui.get('currentFile')) {
ui.set('currentFile', '')
if (path === config.get('currentFile')) {
config.set('currentFile', '')
switchToNextFile()
}
editor.discard(path)
@ -338,7 +332,7 @@ var run = function () {
if (!files.rename(originalName, newName)) {
alert('Error while renaming file')
} else {
ui.set('currentFile', '')
config.set('currentFile', '')
switchToFile(newName)
editor.discard(originalName)
}
@ -368,7 +362,7 @@ var run = function () {
function switchToFile (file) {
editorSyncFile()
ui.set('currentFile', file)
config.set('currentFile', file)
if (files.isReadOnly(file)) {
editor.openReadOnly(file, files.get(file))
@ -399,10 +393,10 @@ var run = function () {
$filesEl.append($('<li class="file"><span class="name">' + name + '</span><span class="remove"><i class="fa fa-close"></i></span></li>'))
}
var currentFileOpen = !!ui.get('currentFile')
var currentFileOpen = !!config.get('currentFile')
if (currentFileOpen) {
var active = $('#files .file').filter(function () { return $(this).find('.name').text() === ui.get('currentFile') })
var active = $('#files .file').filter(function () { return $(this).find('.name').text() === config.get('currentFile') })
active.addClass('active')
}
$('#input').toggle(currentFileOpen)
@ -640,7 +634,7 @@ var run = function () {
this.fullLineMarker = null
if (lineColumnPos) {
var source = compiler.lastCompilationResult.data.sourceList[location.file] // auto switch to that tab
if (ui.get('currentFile') !== source) {
if (config.get('currentFile') !== source) {
switchToFile(source)
}
this.statementMarker = editor.addMarker(lineColumnPos, 'highlightcode')
@ -764,12 +758,12 @@ var run = function () {
var rendererAPI = {
error: (file, error) => {
if (file === ui.get('currentFile')) {
if (file === config.get('currentFile')) {
editor.addAnnotation(error)
}
},
errorClick: (errFile, errLine, errCol) => {
if (errFile !== ui.get('currentFile') && files.exists(errFile)) {
if (errFile !== config.get('currentFile') && files.exists(errFile)) {
switchToFile(errFile)
}
editor.gotoLine(errLine, errCol)
@ -821,7 +815,7 @@ var run = function () {
if (transactionDebugger.isActive) return
editorSyncFile()
var currentFile = ui.get('currentFile')
var currentFile = config.get('currentFile')
if (currentFile) {
var target = currentFile
var sources = {}
@ -831,7 +825,7 @@ var run = function () {
}
function editorSyncFile () {
var currentFile = ui.get('currentFile')
var currentFile = config.get('currentFile')
if (currentFile) {
var input = editor.get(currentFile)
files.set(currentFile, input)
@ -843,7 +837,7 @@ var run = function () {
var saveTimeout = null
function editorOnChange () {
var currentFile = ui.get('currentFile')
var currentFile = config.get('currentFile')
if (!currentFile) {
return
}

14
src/app/file-explorer.js
Unescape View File

@ -37,7 +37,7 @@ module.exports = fileExplorer
function fileExplorer (appAPI, files) {
var fileEvents = files.event
var tv = new Treeview({
var treeView = new Treeview({
extractData: function (value, tree, key) {
var newValue = {}
// var isReadOnly = false
@ -86,10 +86,11 @@ function fileExplorer (appAPI, files) {
var focusElement = null
var textUnderEdit = null
var element = tv.render(files.listAsTree())
var element = treeView.render(files.listAsTree())
element.className = css.fileexplorer
var api = new EventManager()
var events = new EventManager()
var api = {}
api.addFile = function addFile (file) {
var name = file.name
if (!files.exists(name) || confirm('The file ' + name + ' already exists! Would you like to overwrite it?')) {
@ -97,7 +98,7 @@ function fileExplorer (appAPI, files) {
fileReader.onload = function (event) {
var success = files.set(name, event.target.result)
if (!success) alert('Failed to create file ' + name)
else api.trigger('focus', [name])
else events.trigger('focus', [name])
}
fileReader.readAsText(file)
}
@ -113,7 +114,7 @@ function fileExplorer (appAPI, files) {
var label = getLabelFrom(li)
var filepath = label.dataset.path
var isFile = label.className.indexOf('file') === 0
if (isFile) api.trigger('focus', [filepath])
if (isFile) events.trigger('focus', [filepath])
}
function hover (event) {
@ -247,12 +248,13 @@ function fileExplorer (appAPI, files) {
}
function fileAdded (filepath) {
var el = tv.render(files.listAsTree())
var el = treeView.render(files.listAsTree())
el.className = css.fileexplorer
element.parentElement.replaceChild(el, element)
element = el
}
element.events = events
element.api = api
return element
}

20
src/app/file-panel.js
Unescape View File

@ -106,11 +106,13 @@ function filepanel (appAPI, files) {
`
}
var api = new EventManager()
var events = new EventManager()
var element = template()
element.api = api
fileExplorer.api.register('focus', function (path) {
api.trigger('focus', [path])
// TODO please do not add custom javascript objects, which have no
// relation to the DOM to DOM nodes
element.events = events
fileExplorer.events.register('focus', function (path) {
appAPI.switchToFile(path)
})
return element
@ -120,10 +122,15 @@ function filepanel (appAPI, files) {
this.classList.toggle(css.isVisible)
this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left')
api.trigger('ui', [{ type: isHidden ? 'minimize' : 'maximize' }])
events.trigger('ui-hidden', [isHidden])
}
function uploadFile (event) {
// TODO This should not go to the file explorer.
// The file explorer is merely a view on the current state of
// the files module. Please ask the user here if they want to overwrite
// a file and then just use `files.add`. The file explorer will
// pick that up via the 'fileAdded' event from the files module.
;[...this.files].forEach(fileExplorer.api.addFile)
}
@ -159,7 +166,8 @@ function filepanel (appAPI, files) {
document.removeEventListener('keydown', cancelGhostbar)
var width = (event.pageX < limit) ? limit : event.pageX
element.style.width = width + 'px'
api.trigger('ui', [{ type: 'resize', width: width }])
// Please change this to something like 'ui-resize'
events.trigger('ui-resize', [width])
}
function createNewFile () {

Write Preview
Loading…
Cancel
Save