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,6 +131,10 @@
     <div id="container">
       <div id="map">
       </div>
+      <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.
@@ -102,5 +154,6 @@
           </table>
         </div>
       </div>
+    </div>
   </body>
 </html>

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,7 +84,8 @@ function subtract(a, b) {
   })
 }
 
-function handle_data(data) {
+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) {
@@ -88,16 +107,11 @@ function handle_data(data) {
     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", {