Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

create infobox in javascript

Browse Source
This commit is contained in:
Nils Schneider 2015-03-23 13:23:12 +01:00
parent 8fcbf0ae53
commit f54d430df3
2 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
history.html
View File

@ -56,23 +56,19 @@
text-align: left !important; text-align: left !important;
} }
#infobox .clients { .infobox .clients {
font-family: "ionicons"; font-family: "ionicons";
color: #1566A9; color: #1566A9;
word-spacing: -0.2em; word-spacing: -0.2em;
} }
#infobox { .infobox {
position: relative; position: relative;
box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24); box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
padding: 0.25em 0; padding: 0.25em 0;
} }
#infobox.hidden {
display: none;
}
button { button {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
font-family: "ionicons"; font-family: "ionicons";
@ -301,8 +297,6 @@
</button> </button>
<div id="sidebardata"> <div id="sidebardata">
<div id="infobox" class="hidden">
</div>
</div> </div>
</div> </div>
</body> </body>

53
history.js
View File

@ -157,16 +157,19 @@ 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 gotoAnything = new gotoBuilder(config, showNodeinfo, showLinkinfo) var sidebar = document.getElementById("sidebardata")
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, now, newnodes, lostnodes, onlinenodes, links, gotoAnything)
gotoAnything.addMarkers(markers) gotoAnything.addMarkers(markers)
showMeshstats(document.getElementById("sidebardata"), nodes) showMeshstats(sidebar, nodes)
mkNodesList(document.getElementById("sidebardata"), config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes) mkNodesList(sidebar, config.showContact, "firstseen", gotoAnything.node, "Neue Knoten", newnodes)
mkNodesList(document.getElementById("sidebardata"), config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes) mkNodesList(sidebar, config.showContact, "lastseen", gotoAnything.node, "Verschwundene Knoten", lostnodes)
mkLinkList(document.getElementById("sidebardata"), gotoAnything.link, links) mkLinkList(sidebar, gotoAnything.link, links)
var historyDict = { nodes: {}, links: {} } var historyDict = { nodes: {}, links: {} }
@ -484,24 +487,30 @@ function showMeshstats(el, nodes) {
el.appendChild(p) el.appendChild(p)
} }
function infobox() { function Infobox(sidebar) {
var self = this
el = undefined
function close() { function close() {
destroy() destroy()
pushHistory() pushHistory()
} }
function destroy() { function destroy() {
el.classList.add("hidden") if (el && el.parentNode) {
while (el.hasChildNodes()) el.parentNode.removeChild(el)
el.removeChild(el.childNodes[0]) el = undefined
}
} }
var el = document.getElementById("infobox") self.create = function () {
destroy() destroy()
el.classList.remove("hidden")
el.scrollIntoView(false)
el = document.createElement("div")
sidebar.insertBefore(el, sidebar.firstChild)
el.scrollIntoView(false)
el.classList.add("infobox")
el.close = close el.close = close
el.destroy = destroy el.destroy = destroy
@ -511,10 +520,14 @@ function infobox() {
el.appendChild(closeButton) el.appendChild(closeButton)
return el return el
}
return self
} }
function showNodeinfo(config, gotoAnything, d) { function showNodeinfo(config, infobox, gotoAnything, d) {
var el = infobox() var el = infobox.create()
var h2 = document.createElement("h2") var h2 = document.createElement("h2")
h2.textContent = d.nodeinfo.hostname h2.textContent = d.nodeinfo.hostname
var span = document.createElement("span") var span = document.createElement("span")
@ -732,8 +745,8 @@ function showBar(className, v) {
return span return span
} }
function showLinkinfo(config, gotoAnything, d) { function showLinkinfo(config, infobox, gotoAnything, d) {
var el = infobox() var el = infobox.create()
var h2 = document.createElement("h2") var h2 = document.createElement("h2")
a1 = document.createElement("a") a1 = document.createElement("a")
@ -800,7 +813,7 @@ function trueDefault(d) {
return d === undefined ? true : d return d === undefined ? true : d
} }
function gotoBuilder(config, nodes, links) { function gotoBuilder(config, infobox, nodes, links) {
var markers = {} var markers = {}
var self = this var self = this
@ -811,7 +824,7 @@ function gotoBuilder(config, nodes, links) {
if (showMap && d.nodeinfo.node_id in markers) if (showMap && d.nodeinfo.node_id in markers)
markers[d.nodeinfo.node_id]() markers[d.nodeinfo.node_id]()
nodes(config, self, d) nodes(config, infobox, self, d)
if (push) if (push)
pushHistory( { node: d }) pushHistory( { node: d })
@ -826,7 +839,7 @@ function gotoBuilder(config, nodes, links) {
if (showMap && linkId(d) in markers) if (showMap && linkId(d) in markers)
markers[linkId(d)]() markers[linkId(d)]()
links(config, self, d) links(config, infobox, self, d)
if (push) if (push)
pushHistory( { link: d }) pushHistory( { link: d })