Skip to content

Commit

Permalink
File explorer cleanup.
Browse files Browse the repository at this point in the history
  • Loading branch information
@chriseth @yann300
chriseth authored and yann300 committed May 16, 2017
1 parent 689dd34 commit 405ea9d
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 46 deletions.
62 changes: 28 additions & 34 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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))
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 = {}
Expand All @@ -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)
Expand All @@ -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
}
Expand Down
14 changes: 8 additions & 6 deletions src/app/file-explorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -86,18 +86,19 @@ 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?')) {
var fileReader = new FileReader()
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)
}
Expand All @@ -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) {
Expand Down Expand Up @@ -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
}
Expand Down
20 changes: 14 additions & 6 deletions src/app/file-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
}

Expand Down Expand Up @@ -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 () {
Expand Down

0 comments on commit 405ea9d

Please sign in to comment.