update tutorial url

index.html

@@ -57,7 +57,7 @@
 		<div id="modaldialog" class="modal">
 			<div class="modal-content">
 				<div class="modal-header">
-					<h2>Localhost connection</h2>
+					<h2></h2>
 				</div>
 				<div class="modal-body">
 				</div>

src/app.js

@@ -15,7 +15,7 @@ var gistHandler = new GistHandler()
 var Remixd = require('./lib/remixd')
 var Storage = require('./app/files/storage')
 var Browserfiles = require('./app/files/browser-files')
-var Systemfiles = require('./app/files/system-files')
+var SharedFolder = require('./app/files/shared-folder')
 var Config = require('./app/config')
 var Editor = require('./app/editor')
 var Renderer = require('./app/renderer')
@@ -48,7 +48,7 @@ var run = function () {
   var remixd = new Remixd()
   var filesProviders = {}
   filesProviders['browser'] = new Browserfiles(fileStorage)
-  filesProviders['localhost'] = new Systemfiles(remixd)
+  filesProviders['localhost'] = new SharedFolder(remixd)
 
   var tabbedFiles = {} // list of files displayed in the tabs bar
 

src/app/config.js

@@ -19,6 +19,7 @@ function Config (storage) {
   }
 
   this.get = function (key) {
+    this.ensureStorageUpdated(key)
     return this.items[key]
   }
 
@@ -29,6 +30,14 @@ function Config (storage) {
     } catch (exception) {
     }
   }
+
+  this.ensureStorageUpdated = function (key) {
+    if (key === 'currentFile') {
+      if (this.items[key] && this.items[key] !== '' && this.items[key].indexOf('browser/') !== 0 && this.items[key].indexOf('localhost/') !== 0) {
+        this.items[key] = 'browser/' + this.items[key]
+      }
+    }
+  }
 }
 
 module.exports = Config

src/app/file-explorer.js

@@ -2,6 +2,7 @@
 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
 var Treeview = require('ethereum-remix').ui.TreeView
+var modalDialog = require('./modaldialog')
 
 var EventManager = require('ethereum-remix').lib.EventManager
 
@@ -35,11 +36,24 @@ module.exports = fileExplorer
 function fileExplorer (appAPI, files) {
   this.files = files
 
+  function remixdDialog () {
+    return yo`<div>This file has been changed outside of Remix IDE.</div>`
+  }
+
   this.files.event.register('fileExternallyChanged', (path, content) => {
     if (appAPI.currentFile() === path && appAPI.currentContent() !== content) {
-      if (confirm('This file has been changed outside of the remix.\nDo you want to replace the content displayed in remix by the new one?')) {
-        appAPI.setText(content)
-      }
+      modalDialog(path + ' changed', remixdDialog(),
+        {
+          label: 'Keep the content displayed in Remix',
+          fn: () => {}
+        },
+        {
+          label: 'Replace by the new content',
+          fn: () => {
+            appAPI.setText(content)
+          }
+        }
+      )
     }
   })
 
@@ -70,7 +84,6 @@ function fileExplorer (appAPI, files) {
       return yo`<label class="${data.children ? css.folder : css.file}"
         data-path="${data.path}"
         style="${isRoot ? 'font-weight:bold;' : ''}"
-        isfolder=${data.children !== undefined}
         onload=${function (el) { adaptEnvironment(el, focus, hover) }}
         onunload=${function (el) { unadaptEnvironment(el, focus, hover) }}
         onclick=${editModeOn}
@@ -187,7 +200,7 @@ function fileExplorer (appAPI, files) {
     var label = this
     if (event.which === 13) event.preventDefault()
     if ((event.type === 'blur' || event.which === 27 || event.which === 13) && label.getAttribute('contenteditable')) {
-      var isFolder = label.getAttribute('isfolder') === 'true'
+      var isFolder = label.className.indexOf('folder') !== -1
       var save = textUnderEdit !== label.innerText
       if (save && event.which !== 13) save = confirm('Do you want to rename?')
       if (save) {

src/app/file-panel.js

@@ -93,7 +93,7 @@ function filepanel (appAPI, filesProvider) {
 
   function remixdDialog () {
     return yo`<div><div>This feature allows to interact with your file system from Remix. Once the connection is made the shared folder will be available in the file explorer under <i>localhost</i></div>
-              <div><i>Remixd</i> first has to be run in your local computer. See <a href="http://remix.readthedocs.io/en/latest/tutorial_mist.html">http://remix.readthedocs.io/en/latest/remixd.html</a> for more details.</div>
+              <div><i>Remixd</i> first has to be run in your local computer. See <a target="_blank" href="http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html">http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html</a> for more details.</div>
               <div>Accepting this dialog will start a session between <i>${window.location.href}</i> and your local file system <i>ws://127.0.0.1:65520</i></div>
               <div>Please be sure your system is secured enough (port 65520 neither opened nor forwarded).</div>
               <div><i class="fa fa-link"></i> will update the connection status.</div>
@@ -252,18 +252,20 @@ function filepanel (appAPI, filesProvider) {
         if (error) console.log(error)
       })
     } else {
-      modalDialog('Connection to Localhost', remixdDialog(), () => {
-        filesProvider['localhost'].init((error) => {
-          if (error) {
-            console.log(error)
-          } else {
-            if (fileSystemExplorer.element && container.children.length > 0) {
-              container.removeChild(fileSystemExplorer.element)
-            }
-            container.appendChild(fileSystemExplorer.init())
-          }
-        })
-      })
+      modalDialog('Connection to Localhost', remixdDialog(),
+        { label: 'Connect',
+          fn: () => {
+            filesProvider['localhost'].init((error) => {
+              if (error) {
+                console.log(error)
+              } else {
+                if (fileSystemExplorer.element && container.children.length > 0) {
+                  container.removeChild(fileSystemExplorer.element)
+                }
+                container.appendChild(fileSystemExplorer.init())
+              }
+            })
+          }})
     }
   }
 }

src/app/files/system-files.js → src/app/files/shared-folder.js

@@ -2,7 +2,7 @@
 var async = require('async')
 var EventManager = require('ethereum-remix').lib.EventManager
 
-class SystemFiles {
+class SharedFolder {
   constructor (remixd) {
     this.event = new EventManager()
     this.remixd = remixd
@@ -14,7 +14,7 @@ class SystemFiles {
       'EEXIST': 'File already exists'
     }
     this.remixd.event.register('notified', (data) => {
-      if (data.scope === 'systemfiles') {
+      if (data.scope === 'sharedfolder') {
         if (data.name === 'created') {
           this.init(() => {
             this.event.trigger('fileAdded', [this.type + '/' + data.value.path, data.value.isReadOnly, data.value.isFolder])
@@ -24,7 +24,7 @@ class SystemFiles {
             this.event.trigger('fileRemoved', [this.type + '/' + data.value.path])
           })
         } else if (data.name === 'changed') {
-          this.remixd.call('systemfiles', 'get', {path: data.value}, (error, content) => {
+          this.remixd.call('sharedfolder', 'get', {path: data.value}, (error, content) => {
             if (error) {
               console.log(error)
             } else {
@@ -46,7 +46,7 @@ class SystemFiles {
   }
 
   init (cb) {
-    this.remixd.call('systemfiles', 'list', {}, (error, filesList) => {
+    this.remixd.call('sharedfolder', 'list', {}, (error, filesList) => {
       if (error) {
         cb(error)
       } else {
@@ -69,7 +69,7 @@ class SystemFiles {
 
   get (path, cb) {
     var unprefixedpath = this.removePrefix(path)
-    this.remixd.call('systemfiles', 'get', {path: unprefixedpath}, (error, content) => {
+    this.remixd.call('sharedfolder', 'get', {path: unprefixedpath}, (error, content) => {
       if (!error) {
         this.filesContent[path] = content
         cb(error, content)
@@ -83,7 +83,7 @@ class SystemFiles {
 
   set (path, content, cb) {
     var unprefixedpath = this.removePrefix(path)
-    this.remixd.call('systemfiles', 'set', {path: unprefixedpath, content: content}, (error, result) => {
+    this.remixd.call('sharedfolder', 'set', {path: unprefixedpath, content: content}, (error, result) => {
       if (cb) cb(error, result)
       var path = this.type + '/' + unprefixedpath
       this.filesContent[path]
@@ -116,7 +116,7 @@ class SystemFiles {
   rename (oldPath, newPath, isFolder) {
     var unprefixedoldPath = this.removePrefix(oldPath)
     var unprefixednewPath = this.removePrefix(newPath)
-    this.remixd.call('systemfiles', 'rename', {oldPath: unprefixedoldPath, newPath: unprefixednewPath}, (error, result) => {
+    this.remixd.call('sharedfolder', 'rename', {oldPath: unprefixedoldPath, newPath: unprefixednewPath}, (error, result) => {
       if (error) {
         console.log(error)
         if (this.error[error.code]) error = this.error[error.code]
@@ -198,4 +198,4 @@ function listAsTree (self, filesList, callback) {
   })
 }
 
-module.exports = SystemFiles
+module.exports = SharedFolder

src/app/modaldialog.js

-module.exports = (title, content, okFn, cancelFn) => {
+module.exports = (title, content, ok, cancel) => {
+  var okDiv = document.getElementById('modal-footer-ok')
+  var cancelDiv = document.getElementById('modal-footer-cancel')
+  okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK'
+  cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel'
+
   var modal = document.querySelector('.modal-body')
   var modaltitle = document.querySelector('.modal-header h2')
 
@@ -11,29 +16,18 @@ module.exports = (title, content, okFn, cancelFn) => {
   var container = document.querySelector('.modal')
   container.style.display = container.style.display === 'block' ? hide() : show()
 
-  function ok () {
+  function okListenner () {
     hide()
-    if (okFn) okFn()
+    if (ok && ok.fn) ok.fn()
     removeEventListener()
   }
 
-  function cancel () {
+  function cancelListenner () {
     hide()
-    if (cancelFn) cancelFn()
+    if (cancel && cancel.fn) cancel.fn()
     removeEventListener()
   }
 
-  function blur (event) {
-    if (event.target === container) {
-      cancel()
-    }
-  }
-
-  window.onclick = (event) => {
-    console.log('clicj windo')
-    blur(event)
-  }
-
   function hide () {
     container.style.display = 'none'
   }
@@ -43,10 +37,10 @@ module.exports = (title, content, okFn, cancelFn) => {
   }
 
   function removeEventListener () {
-    document.getElementById('modal-footer-ok').removeEventListener('click', ok)
-    document.getElementById('modal-footer-cancel').removeEventListener('click', cancel)
+    okDiv.removeEventListener('click', okListenner)
+    cancelDiv.removeEventListener('click', cancelListenner)
   }
 
-  document.getElementById('modal-footer-ok').addEventListener('click', ok)
-  document.getElementById('modal-footer-cancel').addEventListener('click', cancel)
+  okDiv.addEventListener('click', okListenner)
+  cancelDiv.addEventListener('click', cancelListenner)
 }

src/lib/remixd.js

 'use strict'
 var EventManager = require('ethereum-remix').lib.EventManager
+var modalDialog = require('../app/modaldialog')
+var yo = require('yo-yo')
 
 class Remixd {
   constructor () {
@@ -66,8 +68,11 @@ class Remixd {
   }
 
   errored (event) {
+    function remixdDialog () {
+      return yo`<div>Connection to Remixd closed. Localhost connection not available anymore.</div>`
+    }
     if (this.connected) {
-      alert('connection to Remixd lost!.') // eslint-disable-line
+      modalDialog('Lost connection to Remixd!', remixdDialog(), {}, {label: ''})
     }
     this.connected = false
     this.socket = null