simple tabs

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;

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
+  }
+})

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)

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
+  }
+})