tabs: render tabs when visible, destroy them when hidden

lib/proportions.js

@@ -3,9 +3,23 @@ define(["chroma-js", "virtual-dom", "numeral-intl"],
 
   return function (config) {
     var self = this
-    var fwTable, hwTable, geoTable, autoTable, gwTable
     var scale = Chroma.scale("YlGnBu").mode("lab")
 
+    var fwTable = document.createElement("table")
+    fwTable.classList.add("proportion")
+
+    var hwTable = document.createElement("table")
+    hwTable.classList.add("proportion")
+
+    var geoTable = document.createElement("table")
+    geoTable.classList.add("proportion")
+
+    var autoTable = document.createElement("table")
+    autoTable.classList.add("proportion")
+
+    var gwTable = document.createElement("table")
+    gwTable.classList.add("proportion")
+
     function showStatGlobal(o) {
       var content, caption
 
@@ -135,41 +149,26 @@ define(["chroma-js", "virtual-dom", "numeral-intl"],
       h2 = document.createElement("h2")
       h2.textContent = "Firmwareversionen"
       el.appendChild(h2)
-
-      fwTable = document.createElement("table")
-      fwTable.classList.add("proportion")
       el.appendChild(fwTable)
 
       h2 = document.createElement("h2")
       h2.textContent = "Hardwaremodelle"
       el.appendChild(h2)
-
-      hwTable = document.createElement("table")
-      hwTable.classList.add("proportion")
       el.appendChild(hwTable)
 
       h2 = document.createElement("h2")
       h2.textContent = "Auf der Karte sichtbar"
       el.appendChild(h2)
-
-      geoTable = document.createElement("table")
-      geoTable.classList.add("proportion")
       el.appendChild(geoTable)
 
       h2 = document.createElement("h2")
       h2.textContent = "Autoupdater"
       el.appendChild(h2)
-
-      autoTable = document.createElement("table")
-      autoTable.classList.add("proportion")
       el.appendChild(autoTable)
 
       h2 = document.createElement("h2")
       h2.textContent = "Gewählter Gateway"
       el.appendChild(h2)
-
-      gwTable = document.createElement("table")
-      gwTable.classList.add("proportion")
       el.appendChild(gwTable)
 
       if (config.globalInfos)

lib/tabs.js

@@ -8,14 +8,18 @@ define([], function () {
     var container = document.createElement("div")
 
     function gotoTab(li) {
-      for (var i = 0; i < tabs.children.length; i++) {
-        var el = tabs.children[i]
-        el.classList.remove("visible")
-        el.tab.classList.remove("visible")
-      }
+      for (var i = 0; i < tabs.children.length; i++)
+        tabs.children[i].classList.remove("visible")
+
+      while (container.firstChild)
+        container.removeChild(container.firstChild)
 
       li.classList.add("visible")
-      li.tab.classList.add("visible")
+
+      var tab = document.createElement("div")
+      tab.classList.add("tab")
+      container.appendChild(tab)
+      li.child.render(tab)
     }
 
     function switchTab() {
@@ -25,15 +29,10 @@ define([], function () {
     }
 
     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
+      li.child = d
       tabs.appendChild(li)
 
       var anyVisible = false
@@ -44,12 +43,8 @@ define([], function () {
           break
         }
 
-      if (!anyVisible) {
-        tab.classList.add("visible")
-        li.classList.add("visible")
-      }
-
-      d.render(tab)
+      if (!anyVisible)
+        gotoTab(li)
     }
 
     self.render = function (el) {

scss/main.scss

@@ -61,14 +61,6 @@ $buttondistance: 12pt;
   color: #dc0067;
 }
 
-.tab {
-  display: none;
-}
-
-.tab.visible {
-  display: block;
-}
-
 body {
   margin: 0;
   padding: 0;