From b7fa08ef2a0160f95bb2122fe33fa8f08bf0e3b6 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Fri, 20 Mar 2015 13:30:28 +0100 Subject: [PATCH] history: toggle-able sidebar --- history.html | 89 +++++++++++++++++++++++++++++++++++++++++----------- history.js | 62 ++++++++++++++++++++++-------------- 2 files changed, 109 insertions(+), 42 deletions(-) diff --git a/history.html b/history.html index 3913ad9..7c42cf5 100644 --- a/history.html +++ b/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; + } } @@ -83,23 +131,28 @@
-
-

- Zeigt Knoten an, die in den letzten 14 Tagen dazu gekommen oder verschwunden sind. - Funktioniert nur in wirklich modernen Browsern. -

+
diff --git a/history.js b/history.js index 4a26fe3..18d57dd 100644 --- a/history.js +++ b/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", {