Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests 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"; content: "\f12a";
} }
#sidebar h2, #sidebar h3 { .sidebar h2, .sidebar h3 {
padding: 0 10pt; padding: 0 10pt;
} }
#sidebar p, #sidebar table, #sidebar pre, #sidebar ul { .sidebar p, .sidebar table, .sidebar pre, .sidebar ul {
padding: 0 10pt 1em; padding: 0 10pt 1em;
} }
#sidebarhandle { .sidebarhandle {
position: absolute; position: absolute;
right: -2.5em; right: -2.5em;
top: 0.7em; top: 0.7em;
@ -120,12 +120,12 @@
transition: right 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s; transition: right 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s;
} }
#sidebarhandle:after { .sidebarhandle:after {
padding-right: 0.125em; padding-right: 0.125em;
content: "\f124"; content: "\f124";
} }
#sidebar.hidden #sidebarhandle { .sidebar.hidden .sidebarhandle {
transform: scale(-1, 1); transform: scale(-1, 1);
} }
@ -140,7 +140,7 @@
color: #D43E2A !important; color: #D43E2A !important;
} }
#sidebar { .sidebar {
z-index: 5; z-index: 5;
width: 50em; width: 50em;
box-sizing: border-box; box-sizing: border-box;
@ -152,36 +152,36 @@
transition: left 0.5s; transition: left 0.5s;
} }
#sidebar.hidden { .sidebar.hidden {
left: -50em; left: -50em;
} }
#sidebardata { .sidebar .container {
overflow: auto; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
} }
#sidebardata, .map { .sidebar .container, .map {
height: 100vh; height: 100vh;
} }
#sidebar .icon { .sidebar .icon {
padding: 0 0.25em; padding: 0 0.25em;
} }
#sidebar table { .sidebar table {
width: 100%; width: 100%;
} }
#sidebar table th { .sidebar table th {
text-align: left; 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; text-align: right;
} }
#sidebar a { .sidebar a {
color: #1566A9; color: #1566A9;
} }
@ -243,18 +243,18 @@
} }
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
#sidebar { .sidebar {
font-size: 0.8em; font-size: 0.8em;
} }
} }
@media screen and (max-width: 60em) { @media screen and (max-width: 60em) {
#sidebardata { .sidebar .container {
overflow: visible; overflow: visible;
height: auto; height: auto;
} }
#sidebarhandle { .sidebarhandle {
display: none; display: none;
} }
@ -262,18 +262,18 @@
height: 60vh; height: 60vh;
} }
#sidebar { .sidebar {
position: static; position: static;
margin-left: 0em !important; margin-left: 0em !important;
width: auto; width: auto;
height: auto; height: auto;
} }
#sidebar.hidden { .sidebar.hidden {
width: auto; width: auto;
} }
#sidebar.hidden #sidebardata { .sidebar.hidden .sidebar .container {
display: block; display: block;
} }
} }
@ -290,12 +290,5 @@
<script src="history.js"></script> <script src="history.js"></script>
</head> </head>
<body> <body>
<div id="sidebar">
<button id="sidebarhandle">
</button>
<div id="sidebardata">
</div>
</div>
</body> </body>
</html> </html>

51
history.js
View File

@ -40,16 +40,6 @@ function main() {
var map = L.map(mapDiv, options) 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', var urls = [ config.dataPath + 'nodes.json',
config.dataPath + 'graph.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 }) 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 infobox = new Infobox(sidebar)
var gotoAnything = new gotoBuilder(config, infobox, showNodeinfo, showLinkinfo) 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) 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) { function showDistance(d) {
if (isNaN(d.distance)) if (isNaN(d.distance))
return return
@ -212,7 +227,7 @@ function linkId(d) {
return ids.sort().join("-") 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) { function mkMarker(dict, iconFunc) {
return function (d) { return function (d) {
var opt = { icon: iconFunc(d), var opt = { icon: iconFunc(d),
@ -288,7 +303,7 @@ function mkmap(map, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything)
bounds = groupOnline.getBounds() bounds = groupOnline.getBounds()
if (bounds.isValid()) if (bounds.isValid())
map.fitBounds(bounds, {paddingTopLeft: [getSidebarWidth(), 0]}) map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
var funcDict = {} var funcDict = {}
@ -302,7 +317,7 @@ function mkmap(map, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything)
else else
bounds = L.latLngBounds([m.getLatLng()]) bounds = L.latLngBounds([m.getLatLng()])
map.fitBounds(bounds, {paddingTopLeft: [getSidebarWidth(), 0]}) map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
m.openPopup(bounds.getCenter()) m.openPopup(bounds.getCenter())
} }
}) })
@ -310,12 +325,6 @@ function mkmap(map, now, newnodes, lostnodes, onlinenodes, graph, gotoAnything)
return funcDict 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) { function addLinksToMap(map, graph, gotoAnything) {
var markersDict = {} var markersDict = {}