Tabs working.

app/js/ui/Tabs.js

@@ -20,15 +20,14 @@ function SelectTab(tabname, tabid, el){
 
 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);
+    for (let i=0; i < lil.length; i++){
+      if (lil[i].classList.contains("tab-selected")){
+        if (lil[i].getAttribute("tabid") !== tabid){
+          UnselectTab(tabname, lil[i].getAttribute("tabid"), lil[i]);
+        } else {break; /* The same tab is being selected. */}
+      } else if (lil[i].getAttribute("tabid") === tabid){
+        SelectTab(tabname, tabid, lil[i]);
+      }
     }
   }
 }

package.json

@@ -25,5 +25,6 @@
     "ejs": "^2.6.1",
     "express": "^4.16.4",
     "sass": "^1.17.2"
-  }
+  },
+  "devDependencies": {}
 }

views/docks.html

@@ -1,16 +1,12 @@
           <div class="tabnav">
-            <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>
+            <ul tabs="<%= tabsetname %>">
+              <% tabs.forEach(function(item){ %>
+              <li tabid="<%= item.id %>"><a href="#"><%= item.name %></a></li>
+              <% }); %>
             </ul>
-            <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!
+            <% tabs.forEach(function(item){ %>
+            <div class="tab-content" fortabs="<%= tabsetname %>" tabid="<%= item.id %>">
+              <div class="list-container"></div>
             </div>
+            <% }); %>
           </div>

views/index.html

@@ -19,7 +19,14 @@
       </div>
 
       <div class="pure-u-6-24 simple-padding">
-      <%- include('docks.html'); %>
+      <%- include('docks.html', {
+        tabsetname:"assetlists",
+        tabs:[
+          {name:"Palettes", id:"palettes", selected:true},
+          {name:"Banks", id:"banks", selected:false},
+          {name:"Attrib. Tables", id:"attrtbls", selected:false}
+        ]  
+      }); %>
       </div>
     </div>