tabs: render tabs when visible, destroy them when hidden

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) {