diff --git a/index.html b/index.html index 49d0aa8..0a89a63 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,36 @@ paint-order: stroke; } + .tabs { + list-style: none; + display: flex; + } + + .tabs li { + flex: 1; + text-align: center; + padding: 0.5em; + cursor: pointer; + } + + .tabs li:hover { + background: rgba(0, 0, 0, 0.03); + color: #dc0067; + } + + .tabs .visible { + font-weight: bold; + border-bottom: 2pt solid black; + } + + .tab { + display: none; + } + + .tab.visible { + display: block; + } + body { margin: 0; padding: 0; diff --git a/lib/container.js b/lib/container.js new file mode 100644 index 0000000..aa993f3 --- /dev/null +++ b/lib/container.js @@ -0,0 +1,17 @@ +define([], function () { + return function () { + var self = this + + var container = document.createElement("div") + + self.add = function (d) { + d.render(container) + } + + self.render = function (el) { + el.appendChild(container) + } + + return self + } +}) diff --git a/lib/main.js b/lib/main.js index 666feb8..74dd30b 100644 --- a/lib/main.js +++ b/lib/main.js @@ -1,5 +1,5 @@ -require(["router", "map", "sidebar", "meshstats", "linklist", "simplenodelist", "infobox/main"], -function (Router, Map, Sidebar, Meshstats, Linklist, SimpleNodelist, Infobox) { +require(["router", "map", "sidebar", "tabs", "container", "meshstats", "linklist", "simplenodelist", "infobox/main"], +function (Router, Map, Sidebar, Tabs, Container, Meshstats, Linklist, SimpleNodelist, Infobox) { getJSON("config.json").then(main) function main(config) { @@ -13,6 +13,8 @@ function (Router, Map, Sidebar, Meshstats, Linklist, SimpleNodelist, Infobox) { var linkScale = chroma.scale(chroma.interpolate.bezier(['green', 'yellow', 'red'])).domain([1, 5]) var sidebar = new Sidebar(document.body) var infobox = new Infobox(config, sidebar, router) + var tabs = new Tabs() + var newlost = new Container() map = new Map(linkScale, sidebar, router) document.body.insertBefore(map.div, document.body.firstChild) @@ -23,9 +25,11 @@ function (Router, Map, Sidebar, Meshstats, Linklist, SimpleNodelist, Infobox) { linklist = new Linklist(linkScale, router) sidebar.add(meshstats) - sidebar.add(newnodeslist) - sidebar.add(lostnodeslist) - sidebar.add(linklist) + sidebar.add(tabs) + newlost.add(newnodeslist) + newlost.add(lostnodeslist) + tabs.add("Neu & Verschwunden", newlost) + tabs.add("Verbindungen", linklist) router.addTarget(infobox) router.addTarget(map) diff --git a/lib/tabs.js b/lib/tabs.js new file mode 100644 index 0000000..a4d500c --- /dev/null +++ b/lib/tabs.js @@ -0,0 +1,58 @@ +define([], function () { + return function () { + var self = this + + var tabs = document.createElement("ul") + tabs.classList.add("tabs") + + var container = document.createElement("div") + + function switchTab(ev) { + for (var i = 0; i < tabs.children.length; i++) { + var el = tabs.children[i] + el.classList.remove("visible") + el.tab.classList.remove("visible") + } + + this.classList.add("visible") + this.tab.classList.add("visible") + + return false + } + + self.add = function (title, d) { + var tab = document.createElement("div") + tab.classList.add("tab") + container.appendChild(tab) + + var li = document.createElement("li") + li.textContent = title + li.onclick = switchTab + tab.li = li + li.tab = tab + tabs.appendChild(li) + + var anyVisible = false + + for (var i = 0; i < tabs.children.length; i++) + if (tabs.children[i].classList.contains("visible")) { + anyVisible = true + break + } + + if (!anyVisible) { + tab.classList.add("visible") + li.classList.add("visible") + } + + d.render(tab) + } + + self.render = function (el) { + el.appendChild(tabs) + el.appendChild(container) + } + + return self + } +})