diff --git a/history.html b/history.html index 3cc3dc3..15beefc 100644 --- a/history.html +++ b/history.html @@ -104,15 +104,15 @@ content: "\f12a"; } - #sidebar h2, #sidebar h3 { + .sidebar h2, .sidebar h3 { padding: 0 10pt; } - #sidebar p, #sidebar table, #sidebar pre, #sidebar ul { + .sidebar p, .sidebar table, .sidebar pre, .sidebar ul { padding: 0 10pt 1em; } - #sidebarhandle { + .sidebarhandle { position: absolute; right: -2.5em; top: 0.7em; @@ -120,12 +120,12 @@ transition: right 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s; } - #sidebarhandle:after { + .sidebarhandle:after { padding-right: 0.125em; content: "\f124"; } - #sidebar.hidden #sidebarhandle { + .sidebar.hidden .sidebarhandle { transform: scale(-1, 1); } @@ -140,7 +140,7 @@ color: #D43E2A !important; } - #sidebar { + .sidebar { z-index: 5; width: 50em; box-sizing: border-box; @@ -152,36 +152,36 @@ transition: left 0.5s; } - #sidebar.hidden { + .sidebar.hidden { left: -50em; } - #sidebardata { + .sidebar .container { overflow: auto; box-sizing: border-box; } - #sidebardata, .map { + .sidebar .container, .map { height: 100vh; } - #sidebar .icon { + .sidebar .icon { padding: 0 0.25em; } - #sidebar table { + .sidebar table { width: 100%; } - #sidebar table th { + .sidebar table th { text-align: left; } - #sidebar td:not(:first-child), #sidebar th:not(:first-child) { + .sidebar td:not(:first-child), .sidebar th:not(:first-child) { text-align: right; } - #sidebar a { + .sidebar a { color: #1566A9; } @@ -243,18 +243,18 @@ } @media screen and (max-width: 80em) { - #sidebar { + .sidebar { font-size: 0.8em; } } @media screen and (max-width: 60em) { - #sidebardata { + .sidebar .container { overflow: visible; height: auto; } - #sidebarhandle { + .sidebarhandle { display: none; } @@ -262,18 +262,18 @@ height: 60vh; } - #sidebar { + .sidebar { position: static; margin-left: 0em !important; width: auto; height: auto; } - #sidebar.hidden { + .sidebar.hidden { width: auto; } - #sidebar.hidden #sidebardata { + .sidebar.hidden .sidebar .container { display: block; } } @@ -290,12 +290,5 @@ - diff --git a/history.js b/history.js index e911288..77b5312 100644 --- a/history.js +++ b/history.js @@ -40,16 +40,6 @@ function main() { var map = L.map(mapDiv, 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") - } - var urls = [ config.dataPath + 'nodes.json', config.dataPath + 'graph.json' ] @@ -161,12 +151,12 @@ function handle_data(config, map) { d.target.node.neighbours.push({ node: d.source.node, link: d }) }) - var sidebar = document.getElementById("sidebardata") + var sidebar = mkSidebar(document.body) var infobox = new Infobox(sidebar) var gotoAnything = new gotoBuilder(config, infobox, showNodeinfo, showLinkinfo) - var markers = mkmap(map, now, newnodes, lostnodes, onlinenodes, links, gotoAnything) + var markers = mkmap(map, sidebar, now, newnodes, lostnodes, onlinenodes, links, gotoAnything) gotoAnything.addMarkers(markers) @@ -193,6 +183,31 @@ function handle_data(config, map) { } } +function mkSidebar(el) { + var sidebar = document.createElement("div") + sidebar.classList.add("sidebar") + el.appendChild(sidebar) + + var button = document.createElement("button") + sidebar.appendChild(button) + + button.classList.add("sidebarhandle") + button.onclick = function () { + sidebar.classList.toggle("hidden") + } + + var container = document.createElement("div") + container.classList.add("container") + sidebar.appendChild(container) + + container.getWidth = function () { + var small = window.matchMedia("(max-width: 60em)"); + return small.matches ? 0 : sidebar.offsetWidth + } + + return container +} + function showDistance(d) { if (isNaN(d.distance)) return @@ -212,7 +227,7 @@ function linkId(d) { return ids.sort().join("-") } -function mkmap(map, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything) { +function mkmap(map, sidebar, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything) { function mkMarker(dict, iconFunc) { return function (d) { var opt = { icon: iconFunc(d), @@ -288,7 +303,7 @@ function mkmap(map, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything) bounds = groupOnline.getBounds() if (bounds.isValid()) - map.fitBounds(bounds, {paddingTopLeft: [getSidebarWidth(), 0]}) + map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]}) var funcDict = {} @@ -302,7 +317,7 @@ function mkmap(map, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything) else bounds = L.latLngBounds([m.getLatLng()]) - map.fitBounds(bounds, {paddingTopLeft: [getSidebarWidth(), 0]}) + map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]}) m.openPopup(bounds.getCenter()) } }) @@ -310,12 +325,6 @@ function mkmap(map, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything) return funcDict } -function getSidebarWidth() { - var small = window.matchMedia("(max-width: 60em)"); - var sb = document.getElementById("sidebar") - return small.matches ? 0 : sb.offsetWidth -} - function addLinksToMap(map, graph, gotoAnything) { var markersDict = {}