history: toggle-able sidebar

history.html

@@ -11,6 +11,25 @@
         font-size: 11pt;
       }
 
+      #sidebarhandle {
+        cursor: pointer;
+        font-family: sans;
+        font-size: 18pt;
+        position: absolute;
+        right: -1.4em;
+        top: 2em;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.6);
+        width: 1.5em;
+        padding: 0.25em 0;
+        text-align: center;
+        border-radius: 0 0.5em 0.5em 0;
+      }
+
+      #sidebarhandle:hover {
+        background: rgba(255, 255, 255, 1);
+      }
+
       .hostname {
       }
 
@@ -26,8 +45,21 @@
         flex-grow: 1;
       }
 
-      #lists {
+      #sidebar {
         max-width: 50em;
+        box-sizing: border-box;
+        position: relative;
+      }
+
+      #sidebar.hidden {
+        width: 0px;
+      }
+
+      #sidebar.hidden #lists {
+        display: none;
+      }
+
+      #lists {
         overflow: auto;
         padding: 0 1em 1em;
         box-sizing: border-box;
@@ -51,7 +83,7 @@
       }
 
       @media screen and (max-width: 80em) {
-        #lists {
+        #sidebar {
           max-width: 50vw;
           font-size: 0.8em;
         }
@@ -62,14 +94,30 @@
           flex-direction: column;
         }
 
+        #lists {
+          overflow: visible;
+        }
+
+        #sidebarhandle {
+          display: none;
+        }
+
         #map {
           height: 60vh;
         }
 
-        #lists {
+        #sidebar {
           max-width: none;
           height: auto;
         }
+
+        #sidebar.hidden {
+          width: auto;
+        }
+
+        #sidebar.hidden #lists {
+          display: block;
+        }
       }
     </style>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
@@ -83,23 +131,28 @@
     <div id="container">
       <div id="map">
       </div>
-      <div id="lists">
-        <p>
-          Zeigt Knoten an, die in den letzten 14 Tagen dazu gekommen oder verschwunden sind.
-          Funktioniert nur in wirklich modernen Browsern.
-        </p>
+      <div id="sidebar">
+        <div id="sidebarhandle">
+         ✕
+        </div>
+        <div id="lists">
+          <p>
+            Zeigt Knoten an, die in den letzten 14 Tagen dazu gekommen oder verschwunden sind.
+            Funktioniert nur in wirklich modernen Browsern.
+          </p>
 
-        <h2>Neue Knoten</h2>
-        <table>
-          <tbody id="newnodes">
-          </tbody>
-        </table>
+          <h2>Neue Knoten</h2>
+          <table>
+            <tbody id="newnodes">
+            </tbody>
+          </table>
 
-        <h2>Verschwundene Knoten</h2>
-        <table>
-          <tbody id="lostnodes">
-          </tbody>
-        </table>
+          <h2>Verschwundene Knoten</h2>
+          <table>
+            <tbody id="lostnodes">
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </body>

history.js

@@ -27,7 +27,25 @@ function getJSON(url) {
 }
 
 function main() {
-  getJSON('nodes.json').then(handle_data)
+  var options = { worldCopyJump: true,
+                  zoomControl: false
+                }
+
+  var map = L.map(document.getElementById("map"), options)
+
+  var sh = document.getElementById("sidebarhandle")
+  sh.onclick = function () {
+    var sb = document.getElementById("sidebar")
+
+    if (sb.classList.contains("hidden"))
+      sb.classList.remove("hidden")
+    else
+      sb.classList.add("hidden")
+
+    map.invalidateSize()
+  }
+
+  getJSON('nodes.json').then(handle_data(map))
 }
 
 function sort(key, d) {
@@ -66,38 +84,34 @@ function subtract(a, b) {
   })
 }
 
-function handle_data(data) {
-  var nodes = Object.keys(data.nodes).map(function (key) { return data.nodes[key] })
+function handle_data(map) {
+  return function (data) {
+    var nodes = Object.keys(data.nodes).map(function (key) { return data.nodes[key] })
 
-  nodes = nodes.filter( function (d) {
-    return "firstseen" in d && "lastseen" in d
-  })
+    nodes = nodes.filter( function (d) {
+      return "firstseen" in d && "lastseen" in d
+    })
 
-  nodes.forEach( function(node) {
-    node.firstseen = moment(node.firstseen)
-    node.lastseen = moment(node.lastseen)
-  })
+    nodes.forEach( function(node) {
+      node.firstseen = moment(node.firstseen)
+      node.lastseen = moment(node.lastseen)
+    })
 
-  var age = moment().subtract(14, 'days')
+    var age = moment().subtract(14, 'days')
 
-  var newnodes = limit("firstseen", age, sort("firstseen", nodes).filter(online))
-  var lostnodes = limit("lastseen", age, sort("lastseen", nodes).filter(offline))
+    var newnodes = limit("firstseen", age, sort("firstseen", nodes).filter(online))
+    var lostnodes = limit("lastseen", age, sort("lastseen", nodes).filter(offline))
 
-  var onlinenodes = subtract(nodes.filter(online).filter(has_location), newnodes)
+    var onlinenodes = subtract(nodes.filter(online).filter(has_location), newnodes)
 
-  addToList(document.getElementById("newnodes"), "firstseen", newnodes)
-  addToList(document.getElementById("lostnodes"), "lastseen", lostnodes)
+    addToList(document.getElementById("newnodes"), "firstseen", newnodes)
+    addToList(document.getElementById("lostnodes"), "lastseen", lostnodes)
 
-  mkmap(document.getElementById("map"), newnodes, lostnodes, onlinenodes)
+    mkmap(map, newnodes, lostnodes, onlinenodes)
+  }
 }
 
-function mkmap(el, newnodes, lostnodes, onlinenodes) {
-  var options = { worldCopyJump: true,
-                  zoomControl: false
-                }
-
-  var map = L.map(el, options)
-
+function mkmap(map, newnodes, lostnodes, onlinenodes) {
   L.control.zoom({ position: "topright" }).addTo(map)
 
   L.tileLayer("http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {