Merge pull request #682 from ethereum/file-menu

package.json

@@ -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",

src/app.js

@@ -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

src/app/panels/file-panel.js

-
+/* 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;
   }
@@ -106,7 +126,7 @@ function filepanel (appAPI, filesProvider) {
           <div class=${css.menu}>
             <span onclick=${createNewFile} class="newFile ${css.newFile}" title="Create New File in the Browser Storage Explorer">
               <i class="fa fa-plus-circle"></i>
-            </span>            
+            </span>
             ${canUpload ? yo`
               <span class=${css.uploadFile} title="Add Local file to the Browser Storage Explorer">
                 <label class="fa fa-folder-open">
@@ -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')
+      }
+    })
+  }
 }

src/app/panels/righthand-panel.js

@@ -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 }

src/app/tabs/files-tab.js

-/* 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)
-}