Work being done to add new items to the asset lists (palette at the moment). Not fully working.

app/js/ctrls/CTRLPalettesStore.js

   return null;
 }
 
+
 class CTRLPalettesStore{
-  constructor(){}
+  constructor(){
+    GlobalEvents.listen("palstore-add", (function(e){
+      if (e.hasOwnProperty("palname")){
+        this.createPalette(e.palname);
+        this.activatePalette(e.palname);
+      }
+    }).bind(this));    
+  }
 
   get json(){
     var d = {

app/js/ui/Modal.js

 import GlobalEvents from "/app/js/common/EventCaller.js";
-
+import Input from "/app/js/ui/Input.js";
 
 class Modal{
   constructor(){
     GlobalEvents.listen("modal-close", (function(target, event){
       this.close_modal();
     }).bind(this));
+
+    GlobalEvents.listen("modal-submit", (function(target, event){
+      if (target !== this.__currentModalEl)
+        return;
+      if (!event.hasOwnProperty("subevent"))
+        return;
+      var ename = event.subevent;
+      var vals = {};
+      if (event.hasOwnProperty("ids")){
+        var ids = event.ids.split(",");
+        var cel = this.__currentModalEl;
+        ids.forEach((item) => {
+          var id = item.trim();
+          var el = cel.querySelector("[name='" + id + "']");
+          if (el && el.hasOwnProperty("value"))
+            vals[id] = el.value;
+        });
+      }
+      GlobalEvents.emit(ename, vals);
+      if (event.hasOwnProperty("closeoncomplete"))
+        this.close_modal();
+    }).bind(this));
   }
 
   get currentModalElement(){

views/docks.html

             </ul>
             <% tabs.forEach(function(item){ %>
             <div class="tab-content" fortabs="<%= tabsetname %>" tabid="<%= item.id %>">
+              <div class="simple-padding">
+                <% if (item.hasOwnProperty("addevent")){ %>
+                <button class="pure-button" emit="modal-open" emit-args='{"id":"<%= item.addevent %>"}'>
+                  <i class="fa fa-plus-circle"></i>
+                </button>
+                <% } %>
+                <% if (item.hasOwnProperty("remevent")){ %>
+                <button class="pure-button" emit="<%= item.remevent %>">
+                  <i class="fa fa-trash-alt"></i>
+                </button>
+                <% } %>
+              </div>
               <div class="list-container">
               <% if(item.hasOwnProperty("tmpl")){ %>
                 <%- include(item.tmpl) %>

views/index.html

       <%- include('docks.html', {
         tabsetname:"assetlists",
         tabs:[
-          {name:"Palettes", id:"palettes", tmpl:"paletteListItem.html", selected:true},
+          {name:"Palettes", id:"palettes", tmpl:"paletteListItem.html", addevent:"PaletteAdd", remevent:"palstore-remove", elected:true},
           {name:"Banks", id:"banks", selected:false},
           {name:"Attrib. Tables", id:"attrtbls", selected:false}
         ]  

views/modal.html

-    <div id="Welcome" class="modal">
-      <div class="modal-content">
-        Welcome to the modal!
-      </div>
-    </div>
+<div id="Welcome" class="modal">
+  <div class="modal-content">
+    Welcome to the modal!
+  </div>
+</div>
+
+<div id="PaletteAdd" class="modal">
+  <div class="modal-content">
+    <label for="palname">
+      New Palette Name: 
+    </label>
+    <input type="text" name="palname" />
+    <button class="pure-button" emit="modal-submit" emit-args='{"subevent":"palstore-add", "ids":"palname", "closeoncomplete":true}'>Submit</button>
+  </div>
+</div>