tooltip for disconnect, update core

.gitignore

@@ -0,0 +1 @@
+node_modules

index.html

@@ -40,6 +40,9 @@
         <button id="network" title="Connection Graph" style="display:none" class="icon-button icon-collapse network go-button">
             <img src="static/img/network.png">
             <span>Peers</span>
+            <div id="tooltip-lostpeer" style="opacity:0; display:none;" class="tooltip">
+              <span>Lost connection to "Guest"</span>
+            </div>
         </button>
     </nav>
     <div id="sidebar" class="sidebar theme-light">

src/editor/editor.js

@@ -90,7 +90,6 @@ Editor.prototype.highlight = function (selections) {
 
     selections.forEach(function (sel) {
       if (sel.filePath !== self._workingFile.path) return
-      console.log(sel)
 
       sel.change.ranges.forEach(function (range) {
         if (self._isNonEmptyRange(range)) {

src/index.js

@@ -189,7 +189,7 @@ Multihack.prototype._initRemote = function (cb) {
     })
     self._remote.on('lostPeer', function (peer) {
       if (self.embed) return
-      Interface.alert('Connection Lost', 'Your connection to "'+peer.metadata.nickname+'" has been lost.')
+      Interface.flashTooltip('tooltip-lostpeer', 'Your connection to "'+peer.metadata.nickname+'" has been lost.')
     })
 
     Editor.on('change', function (data) {

src/interface/interface.js

@@ -4,6 +4,7 @@ var Modal = require('./modal')
 var TreeView = require('./treeview')
 var PeerGraph = require('p2p-graph')
 var cuid = require('cuid')
+var mustache = require('mustache')
 
 inherits(Interface, EventEmitter)
 
@@ -191,6 +192,23 @@ Interface.prototype.alert = function (title, message, cb) {
   alertModal.open()
 }
 
+Interface.prototype.flashTooltip = function (id, message) {
+  var sanitized = mustache.render('{{message}}', {message: message})
+  var tooltip = document.getElementById(id)
+  var span = tooltip.querySelector('span')
+
+  span.innerHTML = sanitized
+  tooltip.style.opacity = 1
+  tooltip.style.display = ''
+
+  setTimeout(function () {
+    tooltip.style.opacity = 0
+    setTimeout(function () {
+      tooltip.style.display = ''
+    }, 300)
+  }, 3000)
+}
+
 Interface.prototype.alertHTML = function (title, message, cb) {
   var alertModal = new Modal('alert-html', {
     title: title,

static/css/style.css

@@ -38,6 +38,7 @@ body {
     top: 0;
     right: 0;
     padding-right: 10px;
+    z-index: 1;
 }
 
 .embed .nav {
@@ -57,6 +58,7 @@ body {
 .nav .icon-button {
     float: right;
     margin-top: 15px;
+    position: relative;
 }
 
 .nav .icon-button span {
@@ -67,6 +69,40 @@ body {
     margin-left: 6px;
 }
 
+.nav .icon-button .tooltip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: opacity .3s ease-in-out;
+}
+
+.nav .icon-button .tooltip > span {
+  position: absolute;
+  top: calc(100% + 5px);
+  right: 0;
+  background: #222222;
+  padding: 5px;
+  white-space: nowrap;
+  border: black 1px solid;
+}
+
+.nav .icon-button .tooltip > span:after {
+  width: 0; 
+  height: 0; 
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid black;
+  position: absolute;
+  right: 30px;
+  top: -5px;
+  content: "";
+}
+
 .noselect,
 .userlist *,
 .tree *,