Working on TABs. There's a bug in the event listener at the moment.

app/js/main.js

@@ -2,6 +2,7 @@ import GlobalEvents from "/app/js/common/EventCaller.js";
 import EmitterElements from "/app/js/ui/Emitters.js";
 import Input from "/app/js/ui/Input.js";
 import Modal from "/app/js/ui/Modal.js";
+import Tabs from "/app/js/ui/Tabs.js";
 import CTRLPalettes from "/app/js/ctrls/CTRLPalettes.js";
 import CTRLPainter from "/app/js/ctrls/CTRLPainter.js";
 import CTRLPalettesStore from "/app/js/ctrls/CTRLPalettesStore.js";
@@ -26,6 +27,7 @@ function TitlePainter(pal){
 function initialize(DOC){
   TitlePainter(NESPalette.SystemColor);
   EmitterElements.initialize();
+  Tabs.initialize();
   //GlobalEvents.listen("emitted-event", handle_emitted);
 
   //var nespainter = new NESPainter(DOC.getElementById("painter"));

app/js/ui/Tabs.js

@@ -0,0 +1,78 @@
+import GlobalEvents from "/app/js/common/EventCaller.js";
+
+
+function UnselectTab(tabname, tabid, el){
+  el.classList.remove("tab-selected");
+  var d = document.querySelectorAll("[fortabs='" + tabname + "'][tabid='" + tabid + "']");
+  for (let i=0; i < d.length; i++){
+    d[i].classList.add("hidden");
+  }
+}
+
+function SelectTab(tabname, tabid, el){
+  if (!el.classList.contains("tab-selected"))
+    el.classList.add("tab-selected");
+  var d = document.querySelectorAll("[fortabs='" + tabname + "'][tabid='" + tabid + "']");
+  for (let i=0; i < d.length; i++){
+    d[i].classList.remove("hidden");
+  }
+}
+
+function GenTABListener(tabname, tabid, lil){
+  return function(e){
+    // TODO: FIX ME!!
+    var sel = lil.querySelector("li.tab-selected");
+    if (sel){
+      var oldtabid = sel.getAttribute("tabid");
+      UnselectTab(tabname, oldtabid, sel);
+    }
+    sel = lil.querySelector("li[tabid='" + tabid + "']");
+    if (sel){
+      SelectTab(tabname, tabid, sel);
+    }
+  }
+}
+
+
+function HideAllTABContent(tabname){
+  var d = document.querySelectorAll("[fortabs='" + tabname + "']");
+  for (let i=0; i < d.length; i++){
+    d[i].classList.add("hidden");
+  }
+}
+
+class Tabs{
+  constructor(){}
+
+  initialize(){
+    var tabs = document.querySelectorAll("ul[tabs]");
+    for (let i=0; i < tabs.length; i++){
+      var selectionMade = false;
+      var tabname = tabs[i].getAttribute("tabs");
+      HideAllTABContent(tabname);
+      var li = tabs[i].querySelectorAll("li[tabid]");
+      for (let j=0; j < li.length; j++){
+        var tabid = li[j].getAttribute("tabid");
+        var a = li[j].querySelector("a");
+        a.addEventListener("click", GenTABListener(tabname, tabid, li));
+        if (li[j].classList.contains("tab-selected")){
+          if (selectionMade){
+            UnselectTab(tabname, tabid, li[j]);
+          } else {
+            SelectTab(tabname, tabid, li[j]);
+            selectionMade = true;
+          }
+        }
+      }
+      if (selectionMade == false){
+        var tabid = li[0].getAttribute("tabid");
+        SelectTab(tabname, tabid, li[0]);
+      }
+    }
+  }
+}
+
+
+const instance = new Tabs();
+export default instance;
+

sass/tabs.scss

@@ -1,23 +1,35 @@
 
-.tabnav {
-  background-color: $tabnav-bg;
+.tabnav { 
   color: $tabnav-text;
+  padding: 0;
   
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
   li {
-    display: inline; 
+    background-color: $tabnav-bg; 
+    display: inline;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+
+    &.tab-selected {
+      background-color: $tabnav-content-bg;
+      color: $tabnav-content-text;
+    }
   }
-  a {
-    padding: 0 10px;
-    text-decoration: none;
+
+  a {  
+    padding: 0 10px; 
+    text-decoration: none; 
   }
 
   div.tab-content {
     background-color: $tabnav-content-bg;
     color: $tabnav-content-text;
+    padding: 1.25em 0.75em 0.5em 0.75em
   }
 }
 
-.tab-selected {
-  background-color: $tabnav-content-bg;
-  color: $tabnav-content-text;
-}
+

views/docks.html

@@ -1,10 +1,16 @@
           <div class="tabnav">
-            <ul tabname="assetlists">
+            <ul tabs="assetlists">
               <li class="tab-selected" tabid="palettes"><a href="#">Palettes</a></li>
-              <li tabid="Banks"><a href="#">Banks</a></li>
-              <li tabid="AttrTables"><a href="#">Attib. Tables</a></li>
+              <li tabid="banks"><a href="#">Banks</a></li>
+              <li tabid="attrtables"><a href="#">Attib. Tables</a></li>
             </ul>
-            <div class="tab-content" contentfor="assetlists" tabid="palettes">
-              Stuff to go here!
+            <div class="tab-content" fortabs="assetlists" tabid="palettes">
+              Palettes Content!
+            </div>
+            <div class="tab-content" fortabs="assetlists" tabid="banks">
+              Bank Content!
+            </div>
+            <div class="tab-content" fortabs="assetlists" tabid="attrtables">
+              Attribute Table Content!
             </div>
           </div>