serapath
8 years ago
parent
a51ff50181
commit
40f8abe827
@ -0,0 +1,318 @@ |
|||||||
|
/* global FileReader, confirm, alert */ |
||||||
|
var yo = require('yo-yo') |
||||||
|
var csjs = require('csjs-inject') |
||||||
|
var Treeview = require('ethereum-remix').ui.TreeView |
||||||
|
|
||||||
|
var EventManager = require('../lib/eventManager') |
||||||
|
|
||||||
|
var css = csjs` |
||||||
|
.fileexplorer { |
||||||
|
box-sizing : border-box; |
||||||
|
} |
||||||
|
.folder, |
||||||
|
.file { |
||||||
|
font-size : 14px; |
||||||
|
} |
||||||
|
.hasFocus { |
||||||
|
background-color : #F4F6FF; |
||||||
|
} |
||||||
|
.rename { |
||||||
|
background-color : white; |
||||||
|
} |
||||||
|
.remove { |
||||||
|
align-self : center; |
||||||
|
padding-left : 10px; |
||||||
|
} |
||||||
|
.activeMode { |
||||||
|
display : flex; |
||||||
|
justify-content : space-between; |
||||||
|
margin-right : 10px; |
||||||
|
padding-right : 19px; |
||||||
|
} |
||||||
|
ul { |
||||||
|
padding : 0; |
||||||
|
} |
||||||
|
` |
||||||
|
module.exports = fileExplorer |
||||||
|
|
||||||
|
function fileExplorer (appAPI, files) { |
||||||
|
var fileEvents = files.event |
||||||
|
var tv = new Treeview({ |
||||||
|
extractData: function (value, tree, key) { |
||||||
|
var newValue = {} |
||||||
|
// var isReadOnly = false
|
||||||
|
var isFile = false |
||||||
|
Object.keys(value).filter(function keep (x) { |
||||||
|
if (x === '/content') isFile = true |
||||||
|
// if (x === '/readOnly') isReadOnly = true
|
||||||
|
if (x[0] !== '/') return true |
||||||
|
}).forEach(function (x) { newValue[x] = value[x] }) |
||||||
|
return { |
||||||
|
path: (tree || {}).path ? tree.path + '/' + key : key, |
||||||
|
children: isFile ? undefined |
||||||
|
: value instanceof Array ? value.map((item, index) => ({ |
||||||
|
key: index, value: item |
||||||
|
})) : value instanceof Object ? Object.keys(value).map(subkey => ({ |
||||||
|
key: subkey, value: value[subkey] |
||||||
|
})) : undefined |
||||||
|
} |
||||||
|
}, |
||||||
|
formatSelf: function (key, data) { |
||||||
|
return yo`<label class=${data.children ? css.folder : css.file} |
||||||
|
data-path="${data.path}" |
||||||
|
onload=${function (el) { adaptEnvironment(el, focus, hover) }} |
||||||
|
onunload=${function (el) { unadaptEnvironment(el, focus, hover) }} |
||||||
|
onclick=${editModeOn} |
||||||
|
onkeydown=${editModeOff} |
||||||
|
onblur=${editModeOff} |
||||||
|
>${key}</label>` |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
var deleteButton = yo` |
||||||
|
<span class=${css.remove} onclick=${deletePath}> |
||||||
|
<i class="fa fa-trash" aria-hidden="true"></i> |
||||||
|
</span> |
||||||
|
` |
||||||
|
|
||||||
|
fileEvents.register('fileFocus', fileFocus) |
||||||
|
fileEvents.register('fileRemoved', fileRemoved) |
||||||
|
fileEvents.register('fileRenamed', fileRenamed) |
||||||
|
fileEvents.register('fileAdded', fileAdded) |
||||||
|
fileEvents.register('fileChanged', fileChanged) |
||||||
|
|
||||||
|
var filepath = null |
||||||
|
var focusElement = null |
||||||
|
var textUnderEdit = null |
||||||
|
|
||||||
|
var element = tv.render(files.listAsTree()) |
||||||
|
element.className = css.fileexplorer |
||||||
|
|
||||||
|
var api = new EventManager() |
||||||
|
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]) |
||||||
|
} |
||||||
|
fileReader.readAsText(file) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function focus (event) { |
||||||
|
event.cancelBubble = true |
||||||
|
var li = this |
||||||
|
if (focusElement === li) return |
||||||
|
if (focusElement) focusElement.classList.toggle(css.hasFocus) |
||||||
|
focusElement = li |
||||||
|
focusElement.classList.toggle(css.hasFocus) |
||||||
|
var label = getLabelFrom(li) |
||||||
|
var filepath = label.dataset.path |
||||||
|
var isFile = label.className.indexOf('file') === 0 |
||||||
|
if (isFile) api.trigger('focus', [filepath]) |
||||||
|
} |
||||||
|
|
||||||
|
function hover (event) { |
||||||
|
if (event.type === 'mouseout') { |
||||||
|
var exitedTo = event.toElement || event.relatedTarget |
||||||
|
if (this.contains(exitedTo)) return |
||||||
|
this.style.backgroundColor = '' |
||||||
|
this.style.paddingRight = '19px' |
||||||
|
return this.removeChild(deleteButton) |
||||||
|
} |
||||||
|
this.style.backgroundColor = '#F4F6FF' |
||||||
|
this.style.paddingRight = '0px' |
||||||
|
this.appendChild(deleteButton) |
||||||
|
} |
||||||
|
|
||||||
|
function getElement (path) { |
||||||
|
var label = element.querySelector(`label[data-path="${path}"]`) |
||||||
|
if (label) return getLiFrom(label) |
||||||
|
} |
||||||
|
|
||||||
|
function deletePath (event) { |
||||||
|
event.cancelBubble = true |
||||||
|
var span = this |
||||||
|
var li = span.parentElement.parentElement |
||||||
|
var label = getLabelFrom(li) |
||||||
|
var path = label.dataset.path |
||||||
|
var isFolder = !!~label.className.indexOf('folder') |
||||||
|
if (confirm(` |
||||||
|
Do you really want to delete "${path}" ? |
||||||
|
${isFolder ? '(and all contained files and folders)' : ''} |
||||||
|
`)) {
|
||||||
|
li.parentElement.removeChild(li) |
||||||
|
removeSubtree(files, path) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function editModeOn (event) { |
||||||
|
var label = this |
||||||
|
var li = getLiFrom(label) |
||||||
|
var classes = li.className |
||||||
|
if (~classes.indexOf('hasFocus') && !label.getAttribute('contenteditable')) { |
||||||
|
textUnderEdit = label.innerText |
||||||
|
label.setAttribute('contenteditable', true) |
||||||
|
label.classList.add(css.rename) |
||||||
|
label.focus() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function editModeOff (event) { |
||||||
|
var label = this |
||||||
|
if (event.type === 'blur' || event.which === 27 || event.which === 13) { |
||||||
|
var save = textUnderEdit !== label.innerText |
||||||
|
if (event.which === 13) event.preventDefault() |
||||||
|
if (save && event.which !== 13) save = confirm('Do you want to rename?') |
||||||
|
if (save) renameSubtree(label) |
||||||
|
else label.innerText = textUnderEdit |
||||||
|
label.removeAttribute('contenteditable') |
||||||
|
label.classList.remove(css.rename) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function renameSubtree (label, dontcheck) { |
||||||
|
var oldPath = label.dataset.path |
||||||
|
var newPath = oldPath |
||||||
|
newPath = newPath.split('/') |
||||||
|
newPath[newPath.length - 1] = label.innerText |
||||||
|
newPath = newPath.join('/') |
||||||
|
if (!dontcheck) { |
||||||
|
var allPaths = Object.keys(files.list()) |
||||||
|
for (var i = 0, len = allPaths.length, path, err; i < len; i++) { |
||||||
|
path = allPaths[i] |
||||||
|
if (files.IsReadOnly(path)) { |
||||||
|
err = 'path contains readonly elements' |
||||||
|
break |
||||||
|
} else if (path.indexOf(newPath) === 0) { |
||||||
|
err = 'new path is conflicting with another existing path' |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
if (err) { |
||||||
|
alert(`couldn't rename - ${err}`) |
||||||
|
label.innerText = textUnderEdit |
||||||
|
} else { |
||||||
|
textUnderEdit = label.innerText |
||||||
|
updateAllLabels([getElement(oldPath)], oldPath, newPath) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function updateAllLabels (lis, oldPath, newPath) { |
||||||
|
lis.forEach(function (li) { |
||||||
|
var label = getLabelFrom(li) |
||||||
|
var path = label.dataset.path |
||||||
|
var newName = path.replace(oldPath, newPath) |
||||||
|
label.dataset.path = newName |
||||||
|
var isFile = label.className.indexOf('file') === 0 |
||||||
|
if (isFile) files.rename(path, newName) |
||||||
|
var ul = li.lastChild |
||||||
|
if (ul.tagName === 'UL') { |
||||||
|
updateAllLabels([...ul.children], oldPath, newPath) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function fileChanged (filepath) { } |
||||||
|
|
||||||
|
function fileFocus (path) { |
||||||
|
if (filepath === path) return |
||||||
|
filepath = path |
||||||
|
var el = getElement(filepath) |
||||||
|
expandPathTo(el) |
||||||
|
setTimeout(function focusNode () { el.click() }, 0) |
||||||
|
} |
||||||
|
|
||||||
|
function fileRemoved (filepath) { |
||||||
|
var li = getElement(filepath) |
||||||
|
if (li) li.parentElement.removeChild(li) |
||||||
|
} |
||||||
|
|
||||||
|
function fileRenamed (oldName, newName) { |
||||||
|
var li = getElement(oldName) |
||||||
|
if (li) { |
||||||
|
oldName = oldName.split('/') |
||||||
|
newName = newName.split('/') |
||||||
|
var index = oldName.reduce(function (idx, key, i) { |
||||||
|
return oldName[i] !== newName[i] ? i : idx |
||||||
|
}, undefined) |
||||||
|
var newKey = newName[index] |
||||||
|
var oldPath = oldName.slice(0, index + 1).join('/') |
||||||
|
li = getElement(oldPath) |
||||||
|
var label = getLabelFrom(li) |
||||||
|
label.innerText = newKey |
||||||
|
renameSubtree(label, true) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function fileAdded (filepath) { |
||||||
|
var el = tv.render(files.listAsTree()) |
||||||
|
el.className = css.fileexplorer |
||||||
|
element.parentElement.replaceChild(el, element) |
||||||
|
element = el |
||||||
|
fileFocus(filepath) |
||||||
|
appAPI.switchToFile(filepath) |
||||||
|
} |
||||||
|
|
||||||
|
element.api = api |
||||||
|
return element |
||||||
|
} |
||||||
|
/****************************************************************************** |
||||||
|
HELPER FUNCTIONS |
||||||
|
******************************************************************************/ |
||||||
|
function adaptEnvironment (label, focus, hover) { |
||||||
|
var li = getLiFrom(label) |
||||||
|
li.style.position = 'relative' |
||||||
|
var span = li.firstChild |
||||||
|
// add focus
|
||||||
|
li.addEventListener('click', focus) |
||||||
|
// add hover
|
||||||
|
span.classList.add(css.activeMode) |
||||||
|
span.addEventListener('mouseover', hover) |
||||||
|
span.addEventListener('mouseout', hover) |
||||||
|
} |
||||||
|
|
||||||
|
function unadaptEnvironment (label, focus, hover) { |
||||||
|
var li = getLiFrom(label) |
||||||
|
var span = li.firstChild |
||||||
|
li.style.position = undefined |
||||||
|
// remove focus
|
||||||
|
li.removeEventListener('click', focus) |
||||||
|
// remove hover
|
||||||
|
span.classList.remove(css.activeMode) |
||||||
|
span.removeEventListener('mouseover', hover) |
||||||
|
span.removeEventListener('mouseout', hover) |
||||||
|
} |
||||||
|
|
||||||
|
function getLiFrom (label) { |
||||||
|
return label.parentElement.parentElement.parentElement |
||||||
|
} |
||||||
|
|
||||||
|
function getLabelFrom (li) { |
||||||
|
return li.children[0].children[1].children[0] |
||||||
|
} |
||||||
|
|
||||||
|
function removeSubtree (files, path) { |
||||||
|
var allPaths = Object.keys(files.list()) // @TODO: change `files`
|
||||||
|
var removePaths = allPaths.filter(function (p) { return ~p.indexOf(path) }) |
||||||
|
removePaths.forEach(function (path) { |
||||||
|
[...window.files.querySelectorAll('.file .name')].forEach(function (span) { |
||||||
|
if (span.innerText === path) { |
||||||
|
var li = span.parentElement |
||||||
|
li.parentElement.removeChild(li) // delete tab
|
||||||
|
} |
||||||
|
}) |
||||||
|
files.remove(path) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function expandPathTo (li) { |
||||||
|
while ((li = li.parentElement.parentElement) && li.tagName === 'LI') { |
||||||
|
var caret = li.firstChild.firstChild |
||||||
|
if (caret.classList.contains('fa-caret-right')) caret.click() // expand
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,173 @@ |
|||||||
|
/* global alert */ |
||||||
|
var csjs = require('csjs-inject') |
||||||
|
var yo = require('yo-yo') |
||||||
|
|
||||||
|
var EventManager = require('../lib/eventManager') |
||||||
|
var FileExplorer = require('./file-explorer') |
||||||
|
|
||||||
|
module.exports = filepanel |
||||||
|
|
||||||
|
var css = csjs` |
||||||
|
.container { |
||||||
|
display : flex; |
||||||
|
flex-direction : row; |
||||||
|
width : 100%; |
||||||
|
box-sizing : border-box; |
||||||
|
} |
||||||
|
.fileexplorer { |
||||||
|
display : flex; |
||||||
|
flex-direction : column; |
||||||
|
position : relative; |
||||||
|
top : -33px; |
||||||
|
width : 100%; |
||||||
|
} |
||||||
|
.menu { |
||||||
|
display : flex; |
||||||
|
flex-direction : row; |
||||||
|
} |
||||||
|
.newFile { |
||||||
|
padding : 10px; |
||||||
|
} |
||||||
|
.uploadFile { |
||||||
|
padding : 10px; |
||||||
|
} |
||||||
|
.toggleLHP { |
||||||
|
display : flex; |
||||||
|
justify-content : flex-end; |
||||||
|
padding : 10px; |
||||||
|
width : 100%; |
||||||
|
font-weight : bold; |
||||||
|
cursor : pointer; |
||||||
|
color : black; |
||||||
|
} |
||||||
|
.isVisible { |
||||||
|
position : absolute; |
||||||
|
left : 35px; |
||||||
|
} |
||||||
|
.isHidden { |
||||||
|
position : absolute; |
||||||
|
height : 99% |
||||||
|
left : -101%; |
||||||
|
} |
||||||
|
.treeview { |
||||||
|
height : 100%; |
||||||
|
background-color : white; |
||||||
|
} |
||||||
|
.dragbar { |
||||||
|
position : relative; |
||||||
|
top : 6px; |
||||||
|
cursor : col-resize; |
||||||
|
z-index : 999; |
||||||
|
border-right : 2px solid #C6CFF7; |
||||||
|
} |
||||||
|
.ghostbar { |
||||||
|
width : 3px; |
||||||
|
background-color : #C6CFF7; |
||||||
|
opacity : 0.5; |
||||||
|
position : absolute; |
||||||
|
cursor : col-resize; |
||||||
|
z-index : 9999; |
||||||
|
top : 0; |
||||||
|
bottom : 0; |
||||||
|
} |
||||||
|
` |
||||||
|
|
||||||
|
var limit = 60 |
||||||
|
var canUpload = window.File || window.FileReader || window.FileList || window.Blob |
||||||
|
var ghostbar = yo`<div class=${css.ghostbar}></div>` |
||||||
|
|
||||||
|
function filepanel (appAPI, files) { |
||||||
|
var fileExplorer = new FileExplorer(appAPI, files) |
||||||
|
var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>` |
||||||
|
|
||||||
|
function template () { |
||||||
|
return yo` |
||||||
|
<div class=${css.container}> |
||||||
|
<div class=${css.fileexplorer}> |
||||||
|
<div class=${css.menu}> |
||||||
|
<span onclick=${createNewFile} class="newFile ${css.newFile}" title="New File"> |
||||||
|
<i class="fa fa-plus-circle"></i> |
||||||
|
</span> |
||||||
|
${canUpload ? yo` |
||||||
|
<span class=${css.uploadFile} title="Open local file"> |
||||||
|
<label class="fa fa-folder-open"> |
||||||
|
<input type="file" onchange=${uploadFile} multiple /> |
||||||
|
</label> |
||||||
|
</span> |
||||||
|
` : ''}
|
||||||
|
<span class=${css.toggleLHP} onclick=${toggle} title="Toggle left hand panel"> |
||||||
|
<i class="fa fa-angle-double-left"></i> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class=${css.treeview}>${fileExplorer}</div> |
||||||
|
</div> |
||||||
|
${dragbar} |
||||||
|
</div> |
||||||
|
` |
||||||
|
} |
||||||
|
|
||||||
|
var api = new EventManager() |
||||||
|
var element = template() |
||||||
|
element.api = api |
||||||
|
fileExplorer.api.register('focus', function (path) { |
||||||
|
api.trigger('focus', [path]) |
||||||
|
}) |
||||||
|
|
||||||
|
return element |
||||||
|
|
||||||
|
function toggle (event) { |
||||||
|
var isHidden = element.classList.toggle(css.isHidden) |
||||||
|
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' }]) |
||||||
|
} |
||||||
|
|
||||||
|
function uploadFile (event) { |
||||||
|
;[...this.files].forEach(fileExplorer.api.addFile) |
||||||
|
} |
||||||
|
|
||||||
|
function mousedown (event) { |
||||||
|
event.preventDefault() |
||||||
|
if (event.which === 1) { |
||||||
|
moveGhostbar(event) |
||||||
|
document.body.appendChild(ghostbar) |
||||||
|
document.addEventListener('mousemove', moveGhostbar) |
||||||
|
document.addEventListener('mouseup', removeGhostbar) |
||||||
|
document.addEventListener('keydown', cancelGhostbar) |
||||||
|
} |
||||||
|
} |
||||||
|
function cancelGhostbar (event) { |
||||||
|
if (event.keyCode === 27) { |
||||||
|
document.body.removeChild(ghostbar) |
||||||
|
document.removeEventListener('mousemove', moveGhostbar) |
||||||
|
document.removeEventListener('mouseup', removeGhostbar) |
||||||
|
document.removeEventListener('keydown', cancelGhostbar) |
||||||
|
} |
||||||
|
} |
||||||
|
function moveGhostbar (event) { |
||||||
|
var rhp = window['righthand-panel'].offsetLeft |
||||||
|
var newpos = (event.pageX < limit) ? limit : event.pageX |
||||||
|
newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit) |
||||||
|
ghostbar.style.left = newpos + 'px' |
||||||
|
} |
||||||
|
|
||||||
|
function removeGhostbar (event) { |
||||||
|
document.body.removeChild(ghostbar) |
||||||
|
document.removeEventListener('mousemove', moveGhostbar) |
||||||
|
document.removeEventListener('mouseup', removeGhostbar) |
||||||
|
document.removeEventListener('keydown', cancelGhostbar) |
||||||
|
var width = (event.pageX < limit) ? limit : event.pageX |
||||||
|
element.style.width = width + 'px' |
||||||
|
api.trigger('ui', [{ type: 'resize', width: width }]) |
||||||
|
} |
||||||
|
|
||||||
|
function createNewFile () { |
||||||
|
var newName = appAPI.createName('Untitled') |
||||||
|
if (!files.set(newName, '')) { |
||||||
|
alert('Failed to create file ' + newName) |
||||||
|
} else { |
||||||
|
appAPI.switchToFile(newName) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
'use strict' |
||||||
|
|
||||||
|
var examples = require('../../src/app/example-contracts') |
||||||
|
var init = require('../helpers/init') |
||||||
|
var sauce = require('./sauce') |
||||||
|
|
||||||
|
var sources = { |
||||||
|
'sources': { |
||||||
|
'ballot.sol': examples.ballot.content, |
||||||
|
'test/client/credit.sol': '', |
||||||
|
'src/voting.sol': '', |
||||||
|
'src/leasing.sol': '', |
||||||
|
'src/gmbh/contract.sol': false, |
||||||
|
'src/gmbh/test.sol': false, |
||||||
|
'src/gmbh/company.sol': false, |
||||||
|
'src/gmbh/node_modules/ballot.sol': false, |
||||||
|
'src/ug/finance.sol': false, |
||||||
|
'app/solidity/mode.sol': true, |
||||||
|
'app/ethereum/constitution.sol': true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
before: function (browser, done) { |
||||||
|
init(browser, done) |
||||||
|
}, |
||||||
|
'@sources': function () { |
||||||
|
return sources |
||||||
|
}, |
||||||
|
'FileExplorer': function (browser) { |
||||||
|
runTests(browser) |
||||||
|
}, |
||||||
|
tearDown: sauce |
||||||
|
} |
||||||
|
|
||||||
|
function runTests (browser, testData) { |
||||||
|
browser |
||||||
|
.waitForElementPresent('#filepanel ul li', 10000, true, function () {}) |
||||||
|
.end() |
||||||
|
} |
||||||
Loading…
Reference in new issue