Merge pull request #682 from ethereum/file-menu

File menu
pull/1/head
yann300 8 years ago committed by GitHub
commit 824c188de6
  1. 1
      package.json
  2. 6
      src/app.js
  3. 88
      src/app/panels/file-panel.js
  4. 3
      src/app/panels/righthand-panel.js
  5. 108
      src/app/tabs/files-tab.js

@ -29,6 +29,7 @@
"http-server": "0.9.0",
"jquery": "^2.2.0",
"js-base64": "^2.1.9",
"minixhr": "^3.2.2",
"mkdirp": "^0.5.1",
"nightwatch": "^0.9.3",
"notify-error": "^1.2.0",

@ -328,6 +328,9 @@ function run () {
},
setText: function (text) {
editor.setText(text)
},
packageFiles: (cb) => {
packageFiles(cb)
}
}
var filePanel = new FilePanel(FilePanelAPI, filesProviders)
@ -543,9 +546,6 @@ function run () {
executionContextProvider: () => {
return executionContext.getProvider()
},
packageFiles: (cb) => {
packageFiles(cb)
},
getContracts: () => {
if (compiler.lastCompilationResult && compiler.lastCompilationResult.data) {
return compiler.lastCompilationResult.data.contracts

@ -1,11 +1,13 @@
/* global confirm, prompt */
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var minixhr = require('minixhr') // simple and small cross-browser XMLHttpRequest (XHR)
var EventManager = require('ethereum-remix').lib.EventManager
var FileExplorer = require('../files/file-explorer')
var modalDialog = require('../ui/modaldialog')
var modalDialogCustom = require('../ui/modal-dialog-custom')
var QueryParams = require('../../lib/query-params')
var queryParams = new QueryParams()
module.exports = filepanel
@ -36,6 +38,24 @@ var css = csjs`
.newFile i:hover {
color : orange;
}
.gist {
padding : 10px;
}
.gist i {
cursor : pointer;
}
.gist i:hover {
color : orange;
}
.copyFiles {
padding : 10px;
}
.copyFiles i {
cursor : pointer;
}
.copyFiles i:hover {
color : orange;
}
.connectToLocalhost {
padding : 10px;
}
@ -114,6 +134,12 @@ function filepanel (appAPI, filesProvider) {
</label>
</span>
` : ''}
<span class="${css.gist}" title="Publish all open files to an anonymous github gist" onclick=${() => publishToGist(appAPI)}>
<i class="fa fa-github"></i>
</span>
<span class="${css.copyFiles}" title="Copy all files to another instance of Browser-solidity" onclick=${copyFiles}>
<i class="fa fa-files-o" aria-hidden="true"></i>
</span>
<span onclick=${connectToLocalhost} class="${css.connectToLocalhost}">
<i class="websocketconn fa fa-link" title="Connect to Localhost"></i>
</span>
@ -250,4 +276,62 @@ function filepanel (appAPI, filesProvider) {
}})
}
}
// ------------------ gist publish --------------
function publishToGist () {
function cb (data) {
if (data instanceof Error) {
console.log('fail', data.message)
modalDialogCustom.alert('Failed to create gist: ' + (data || 'Unknown transport error'))
} else {
data = JSON.parse(data)
if (data.html_url && confirm('Created a gist at ' + data.html_url + ' Would you like to open it in a new window?')) {
window.open(data.html_url, '_blank')
}
}
}
if (confirm('Are you sure you want to publish all your files anonymously as a public gist on github.com?')) {
appAPI.packageFiles((error, packaged) => {
if (error) {
console.log(error)
} else {
var description = 'Created using browser-solidity: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://ethereum.github.io/browser-solidity/#version=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&gist='
console.log(packaged)
minixhr({
url: 'https://api.github.com/gists',
method: 'POST',
data: JSON.stringify({
description: description,
public: true,
files: packaged
})
}, cb)
}
})
}
}
// ------------------ copy files --------------
function copyFiles () {
var target = prompt(
'To which other browser-solidity instance do you want to copy over all files?',
'https://ethereum.github.io/browser-solidity/'
)
if (target === null) {
return
}
appAPI.packageFiles((error, packaged) => {
if (error) {
console.log(error)
} else {
$('<iframe/>', {
src: target,
style: 'display:none;',
load: function () { this.contentWindow.postMessage(['loadFiles', packaged], '*') }
}).appendTo('body')
}
})
}
}

@ -6,7 +6,6 @@ var runTab = require('../tabs/run-tab')
var settingsTab = require('../tabs/settings-tab')
var analysisTab = require('../tabs/analysis-tab')
var debuggerTab = require('../tabs/debugger-tab')
var filesTab = require('../tabs/files-tab')
var supportTab = require('../tabs/support-tab')
// -------------- styling ----------------------
@ -68,7 +67,6 @@ function RighthandPanel (appAPI, events, opts) {
<li class="compileView" title="Compile">Compile</li>
<li class="runView" title="Run">Run</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 class="supportView" title="Help and support">Support</li>
@ -92,7 +90,6 @@ function RighthandPanel (appAPI, events, opts) {
settingsTab(optionViews, appAPI, events, opts)
analysisTab(optionViews, appAPI, events, opts)
debuggerTab(optionViews, appAPI, events, opts)
filesTab(optionViews, appAPI, events, opts)
supportTab(optionViews, appAPI, events, opts)
self.render = function () { return self._view.element }

@ -1,108 +0,0 @@
/* global confirm, prompt */
var yo = require('yo-yo')
var $ = require('jquery')
var modalDialogCustom = require('../ui/modal-dialog-custom')
var QueryParams = require('../../lib/query-params')
var queryParams = new QueryParams()
// -------------- styling ----------------------
var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var css = csjs`
.filesTabView {
padding: 2%;
}
.crow extends ${styles.displayBox} {
margin-bottom: 1%;
display: flex;
flex-wrap: wrap;
}
.infoBox extends ${styles.infoTextBox} {
margin-top: 2em;
}
.button extends ${styles.button} {
background-color: ${styles.colors.blue};
margin-bottom: .5em;
margin-right: 1em;
}
`
module.exports = filesTab
function filesTab (container, appAPI, events, opts) {
var el = yo`
<div class="${css.filesTabView}" id="publishView">
<div class="${css.crow}">
<button class="${css.button}" id="gist" title="Publish all files as public gist on github.com">
<i class="fa fa-github"></i>
Publish Gist
</button>
Publish all open files to an anonymous github gist.<br>
</div>
<div class="${css.crow}">
<button class="${css.button}" id="copyOver" title="Copy all files to another instance of browser-solidity.">
<i class="fa fa-files-o" aria-hidden="true"></i>
Copy files
</button>
Copy all files to another instance of Browser-solidity.
</div>
<div class="${css.infoBox}">You can also load a gist by adding the following
<span class="pre">#gist=GIST_ID</span>
to your url, where GIST_ID is the id of the gist to load.
</div>
</div>
`
// ------------------ gist publish --------------
el.querySelector('#gist').addEventListener('click', function () {
if (confirm('Are you sure you want to publish all your files anonymously as a public gist on github.com?')) {
appAPI.packageFiles((error, packaged) => {
if (error) {
console.log(error)
} else {
var description = 'Created using browser-solidity: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://ethereum.github.io/browser-solidity/#version=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&gist='
console.log(packaged)
$.ajax({
url: 'https://api.github.com/gists',
type: 'POST',
data: JSON.stringify({
description: description,
public: true,
files: packaged
})
}).done(function (response) {
if (response.html_url && confirm('Created a gist at ' + response.html_url + ' Would you like to open it in a new window?')) {
window.open(response.html_url, '_blank')
}
}).fail(function (xhr, text, err) {
console.log('fail', text)
modalDialogCustom.alert('Failed to create gist: ' + (err || 'Unknown transport error'))
})
}
})
}
})
el.querySelector('#copyOver').addEventListener('click', function () {
var target = prompt(
'To which other browser-solidity instance do you want to copy over all files?',
'https://ethereum.github.io/browser-solidity/'
)
if (target === null) {
return
}
appAPI.packageFiles((error, packaged) => {
if (error) {
console.log(error)
} else {
$('<iframe/>', {
src: target,
style: 'display:none;',
load: function () { this.contentWindow.postMessage(['loadFiles', packaged], '*') }
}).appendTo('body')
}
})
})
container.appendChild(el)
}
Loading…
Cancel
Save