Some tweaks to the UI for creating new 'Store' items.

app/js/ctrls/CTRLBanksStore.js

@@ -119,10 +119,22 @@ class CTRLBanksStore{
     GlobalEvents.listen("change_surface", HANDLE_ChangeSurface);
 
 
-    GlobalEvents.listen("bankstore-add", (function(e){
-      if (e.hasOwnProperty("bankname")){
+    GlobalEvents.listen("bankstore-add", (function(ev){
+      /*if (e.hasOwnProperty("bankname")){
         this.createBank(e.bankname);
         this.activateBank(e.bankname);
+      }*/
+      GlobalEvents.emit("modal-close");
+      var e = document.querySelector(".banks-store-add");
+      if (e){
+        var eform = e.querySelector("form");
+        var einput = e.querySelector('input[name="storeitemname"]');
+        if (eform && einput){
+          var name = einput.value;
+          eform.reset();
+          this.createBank(name);
+          this.activateBank(name);
+        } 
       }
     }).bind(this));
 

app/js/ctrls/CTRLPalettesStore.js

@@ -163,10 +163,18 @@ function CreatePaletteDOMEntry(pname, palette){
 
 class CTRLPalettesStore{
   constructor(){
-    GlobalEvents.listen("palstore-add", (function(e){
-      if (e.hasOwnProperty("palname")){
-        this.createPalette(e.palname);
-        this.activatePalette(e.palname);
+    GlobalEvents.listen("palstore-add", (function(ev){
+      GlobalEvents.emit("modal-close");
+      var e = document.querySelector(".palettes-store-add");
+      if (e){
+        var eform = e.querySelector("form");
+        var einput = e.querySelector('input[name="storeitemname"]');
+        if (eform && einput){
+          var name = einput.value;
+          eform.reset();
+          this.createPalette(name);
+          this.activatePalette(name);
+        } 
       }
     }).bind(this));
 

app/js/ui/Emitters.js

@@ -3,6 +3,7 @@ import GlobalEvents from "/app/js/common/EventCaller.js";
 
 function handle_emitter(event){
   if (this.hasAttribute("emit")){
+    event.preventDefault();
     var args = [this.getAttribute("emit"), this];
     if (this.hasAttribute("emit-args")){
       try {

views/docks.html

@@ -1,28 +1,28 @@
-          <div class="tabnav">
-            <ul tabs="<%= tabsetname %>">
-              <% tabs.forEach(function(item){ %>
-              <li tabid="<%= item.id %>"><a href="#"><%= item.name %></a></li>
-              <% }); %>
-            </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) %>
-              <% } %>
-              </div>
-            </div>
-            <% }); %>
-          </div>
+<div class="tabnav">
+  <ul tabs="<%= tabsetname %>">
+    <% tabs.forEach(function(item){ %>
+    <li tabid="<%= item.id %>"><a href="#"><%= item.name %></a></li>
+    <% }); %>
+  </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='{"cls":"<%= 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) %>
+    <% } %>
+    </div>
+  </div>
+  <% }); %>
+</div>

views/index.html

@@ -23,8 +23,8 @@
       <%- include('docks.html', {
         tabsetname:"assetlists",
         tabs:[
-          {name:"Palettes", id:"palettes", tmpl:"paletteListItem.html", addevent:"PaletteAdd", remevent:"palstore-remove", selected:true},
-          {name:"Banks", id:"banks", tmpl:"bankListItem.html", addevent:"BankAdd", remevent:"bankstore-remove", selected:false},
+          {name:"Palettes", id:"palettes", tmpl:"paletteListItem.html", addevent:"palettes-store-add", remevent:"palstore-remove", selected:true},
+          {name:"Banks", id:"banks", tmpl:"bankListItem.html", addevent:"banks-store-add", remevent:"bankstore-remove", selected:false},
           {name:"Attrib. Tables", id:"attrtbls", selected:false}
         ]  
       }); %>

views/modal.html

@@ -4,26 +4,10 @@
   </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>
-
-<div id="BankAdd" class="modal">
-  <div class="modal-content">
-    <label for="bankname">
-      New Bank Name: 
-    </label>
-    <input type="text" name="bankname" />
-    <button class="pure-button" emit="modal-submit" emit-args='{"subevent":"bankstore-add", "ids":"bankname", "closeoncomplete":true}'>Submit</button>
-  </div>
-</div>
-
+<%- include("modals/storeadd.html", {stores:[
+  {"modalclass":"palettes-store-add", "title":"New Palette Name", "addevent":"palstore-add"},
+  {"modalclass":"banks-store-add", "title":"New Bank Name", "addevent":"bankstore-add"}
+]}); %>
 
 <div id="LoadProject" class="modal">
   <div class="modal-content">

views/modals/storeadd.html

@@ -0,0 +1,13 @@
+<% stores.forEach(function(item){ %>
+<div class="modal <%= item.modalclass %>">
+  <div class="modal-content">
+    <form class="store-add-form">
+      <label for="storeitemname">
+        <%= item.title %>: 
+      </label>
+      <input type="text" name="storeitemname" />
+      <button class="pure-button" emit="<%= item.addevent %>">Submit</button>
+    </form>
+  </div>
+</div>
+<% }); %>