freifunk/hopglass
8
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

create sidebar entirely in javascript

Browse source
This commit is contained in:
Nils Schneider 2015-03-23 13:36:35 +01:00
parent 7a404926b2
commit a938f95482
2 changed files with 50 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
history.html
View file

@ -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 @@
<script src="history.js"></script>
</head>
<body>
<div id="sidebar">
<button id="sidebarhandle">
</button>
<div id="sidebardata">
</div>
</div>
</body>
</html>

51
history.js
View file

@ -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 = {}