Skip to content

Commit

Permalink
add file explorer
Browse files Browse the repository at this point in the history
  • Loading branch information
@serapath
serapath committed Apr 12, 2017
1 parent a51ff50 commit 40f8abe
Show file tree
Hide file tree
Showing 7 changed files with 661 additions and 81 deletions.
24 changes: 7 additions & 17 deletions assets/css/browser-solidity.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
padding: 0;
font-size: 12px;
Expand Down Expand Up @@ -39,11 +42,11 @@ body {
left: 0;
}

.files-wrapper {
#tabs-bar {
position: absolute;
overflow: hidden;
top: 0;
left: 5em;
left: 200px;
right: 3em;
}

Expand Down Expand Up @@ -75,8 +78,6 @@ body {
color: #999;
}

.newFile,
.uploadFile,
.toggleRHP {
display: block;
float: left;
Expand Down Expand Up @@ -124,18 +125,6 @@ body {
display: inline-block;
}

#input {
border-top: 3px solid #F4F6FF;
padding-top: 0.5em;
font-size: 15px;
position: absolute;
top: 2.5em;
left: 0;
right: 0;
bottom: 0;
min-width: 20vw;
}

#righthand-panel {
position: absolute;
top: 0;
Expand All @@ -161,6 +150,7 @@ body {
float: right;
height: 90%;
background-color: white;
padding-right: 1%;
}

#header #menu {
Expand Down Expand Up @@ -475,7 +465,7 @@ body {
bottom: 0;
cursor: col-resize;
z-index: 999;
border-right: 3px solid #F4F6FF;
border-right: 2px solid #C6CFF7;
}

#editor .ace-tm .ace_gutter,
Expand Down
9 changes: 5 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,16 @@
<body>

<div id="editor">
<span class="newFile" title="New File"><i class="fa fa-plus-circle" aria-hidden="true"></i></span>
<span class="uploadFile" title="Open local file"><label class="fa fa-folder-open"><input type="file" class="inputFile" multiple /></label></span>
<div class="files-wrapper">
<div id="tabs-bar">
<div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
<div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
<ul id="files" class="nav nav-tabs"></ul>
</div>
<span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
<div id="input"></div>
<div id="editor-container">
<div id="filepanel"></div>
<div id="input"></div>
</div>
<div id="dragbar"></div>
</div>

Expand Down
157 changes: 97 additions & 60 deletions src/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/* global alert, confirm, prompt, FileReader, Option, Worker, chrome */
/* global alert, confirm, prompt, Option, Worker, chrome */
'use strict'

var async = require('async')
var $ = require('jquery')
var base64 = require('js-base64').Base64
var swarmgw = require('swarmgw')
var csjs = require('csjs-inject')

var QueryParams = require('./app/query-params')
var queryParams = new QueryParams()
Expand All @@ -24,6 +25,7 @@ var FormalVerification = require('./app/formalVerification')
var EventManager = require('./lib/eventManager')
var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
var FilePanel = require('./app/file-panel')

var examples = require('./app/example-contracts')

Expand Down Expand Up @@ -84,12 +86,6 @@ var run = function () {
loadFiles(filesToLoad)
}

// -------- check file upload capabilities -------

if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
$('.uploadFile').remove()
}

// ------------------ gist load ----------------

var loadingFromGist = gistHandler.handleLoad(queryParams.get(), function (gistId) {
Expand Down Expand Up @@ -159,26 +155,83 @@ var run = function () {
chromeCloudSync()

// ----------------- editor ----------------------

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

// ----------------- tabbed menu -------------------
$('#options li').click(function (ev) {
var $el = $(this)
selectTab($el)
})

var selectTab = function (el) {
var match = /[a-z]+View/.exec(el.get(0).className)
if (!match) return
var cls = match[0]
if (!el.hasClass('active')) {
el.parent().find('li').removeClass('active')
$('#optionViews').attr('class', '').addClass(cls)
el.addClass('active')
// ---------------- FilePanel --------------------
/****************************************************************************
@TODO's
1. I would put a virtual file called Summary as the root entry of the treeview, which displays the list of the files with the size in bytes of each
2. drag'n'drop to enable to rename files&folders in the file explorer into different sub folders
3. I would put a virtual file called `Summary` as the root entry of the treeview, which displays the list of the files with the size in bytes of each.
4. add maybe more tape tests
5. gist imports + copy to the browser => phase of writing
6. add filemanagement from righthand panel to filepanel compoennt (editing/imports/exports, public gist, load from github, create new project, ... setup load and modify files)
*/
// var sources = {
// '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
// }
// Object.keys(sources).forEach(function (key) { files.set(key, sources[key]) })
/****************************************************************************/
var css = csjs`
.filepanel {
display : flex;
width : 200px;
}
`
var filepanel = document.querySelector('#filepanel')
filepanel.className = css.filepanel
var FilePanelAPI = {
createName: createNonClashingName,
switchToFile: switchToFile
}
var el = new FilePanel(FilePanelAPI, files)
filepanel.appendChild(el)
var api = el.api

api.register('ui', function changeLayout (data) {
var value
if (data.type === 'minimize') {
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') {
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'
}
self.event.trigger('tabChanged', [cls])
}
})
api.register('focus', function (path) {
[...window.files.querySelectorAll('.file .name')].forEach(function (span) {
if (span.innerText === path) switchToFile(path) // @TODO: scroll into view
})
})
files.event.register('fileRenamed', function (oldName, newName) {
[...window.files.querySelectorAll('.file .name')].forEach(function (span) {
if (span.innerText === oldName) span.innerText = newName
})
})

// ------------------ gist publish --------------

Expand Down Expand Up @@ -221,39 +274,26 @@ var run = function () {
}).appendTo('body')
})

// ----------------- file selector-------------

var $filesEl = $('#files')
var FILE_SCROLL_DELTA = 300

$('.newFile').on('click', function () {
var newName = createNonClashingName('Untitled')
if (!files.set(newName, '')) {
alert('Failed to create file ' + newName)
} else {
switchToFile(newName)
}
// ---------------- tabbed menu ------------------
$('#options li').click(function (ev) {
var $el = $(this)
selectTab($el)
})

// ----------------- file upload -------------

$('.inputFile').on('change', function () {
var fileList = $('input.inputFile')[0].files
for (var i = 0; i < fileList.length; i++) {
var name = fileList[i].name
if (!files.exists(name) || confirm('The file ' + name + ' already exists! Would you like to overwrite it?')) {
var fileReader = new FileReader()
fileReader.onload = function (ev) {
if (!files.set(name, ev.target.result)) {
alert('Failed to create file ' + name)
} else {
switchToFile(name)
}
}
fileReader.readAsText(fileList[i])
}
var selectTab = function (el) {
var match = /[a-z]+View/.exec(el.get(0).className)
if (!match) return
var cls = match[0]
if (!el.hasClass('active')) {
el.parent().find('li').removeClass('active')
$('#optionViews').attr('class', '').addClass(cls)
el.addClass('active')
}
})
self.event.trigger('tabChanged', [cls])
}

var $filesEl = $('#files')
var FILE_SCROLL_DELTA = 300

// Switch tab
$filesEl.on('click', '.file:not(.active)', function (ev) {
Expand Down Expand Up @@ -325,6 +365,8 @@ var run = function () {

currentFile = file

files.event.trigger('fileFocus', [file])

if (files.isReadOnly(file)) {
editor.openReadOnly(file, files.get(file))
} else {
Expand Down Expand Up @@ -368,7 +410,6 @@ var run = function () {
})
}

var $filesWrapper = $('.files-wrapper')
var $scrollerRight = $('.scroller-right')
var $scrollerLeft = $('.scroller-left')

Expand All @@ -381,12 +422,8 @@ var run = function () {
return itemsWidth
}

// function widthOfHidden () {
// return ($filesWrapper.outerWidth() - widthOfList() - getLeftPosi())
// }

function widthOfVisible () {
return $filesWrapper.outerWidth()
return document.querySelector('#editor-container').offsetWidth
}

function getLeftPosi () {
Expand Down
21 changes: 21 additions & 0 deletions src/app/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,34 @@

var EventManager = require('../lib/eventManager')

var csjs = require('csjs-inject')
var ace = require('brace')
var Range = ace.acequire('ace/range').Range
require('../mode-solidity.js')

var css = csjs`
.editor-container {
display : flex;
position : absolute;
top : 2.5em;
left : 0;
right : 0;
bottom : 0;
min-width : 20vw;
}
.ace-editor {
top : 4px;
border-top : 3px solid transparent;
font-size : 15px;
width : 100%;
}
`
document.querySelector('#editor-container').className = css['editor-container']

function Editor (editorElement) {
var editor = ace.edit(editorElement)
editorElement.editor = editor // required to access the editor during tests
editorElement.className += ' ' + css['ace-editor']
var event = new EventManager()
this.event = event
var sessions = {}
Expand Down
Loading

0 comments on commit 40f8abe

Please sign in to comment.