Updated CTRLPalettesStore and CTRLBanksStore (and associative *ListItem.html files to use the new EditableText class.

app/js/ctrls/CTRLBanksStore.js

@@ -1,5 +1,6 @@
 import GlobalEvents from "/app/js/common/EventCaller.js";
 import Utils from "/app/js/common/Utils.js";
+import EditableText from "/app/js/ui/EditableText.js";
 import Renderer from "/app/js/ui/Renderer.js";
 import NESBank from "/app/js/models/NESBank.js";
 import NESPalette from "/app/js/models/NESPalette.js";
@@ -28,11 +29,14 @@ function HANDLE_BankClick(e){
 
 
 function SetElBankName(el, name){
-  el.setAttribute("bankname", name);
-  var sel = el.querySelector("." + BLI_TITLE);
-  if (sel){
-    sel.innerHTML = name;
-  }
+  var et = new EditableText(el, "title");
+  et.listen("value_change", (v) => {el.setAttribute("bankname", v);});
+  et.value = name;
+  return et;
+  //var sel = el.querySelector("." + BLI_TITLE);
+  //if (sel){
+  //  sel.innerHTML = name;
+  //}
 }
 
 
@@ -63,8 +67,7 @@ function CreateBankDOMEntry(name, bank){
   el.classList.remove(BLI_TEMPLATE);
   el.classList.remove("hidden");
   el.setAttribute("bankname", name);
-  ConnectElementToBank(el, bank);
-  SetElBankName(el, name); 
+  ConnectElementToBank(el, bank); 
   el.addEventListener("click", HANDLE_BankClick);
   baseel.parentNode.appendChild(el);
   setTimeout(()=>{
@@ -140,12 +143,11 @@ class CTRLBanksStore{
       if (bank !== null){
         var el = CreateBankDOMEntry(name, bank);
         if (el){
-          Banks[name] = {bank:bank, el:el};
-          //Banks.push([name, bank, el]);
+          var elname = SetElBankName(el, name);
+          Banks[name] = {bank:bank, el:el, elname:elname};
 
           if (this.length <= 1){
             Banks[name].el.click();
-            //GlobalEvents.emit("change_surface", bank);
           }
         }
       }
@@ -178,8 +180,8 @@ class CTRLBanksStore{
   renameBank(name, newname){
     if ((name in Banks) && !(newname in Banks)){
       Banks[newname] = Banks[name];
+      Banks[newname].elname.value = newname;
       delete Banks[name];
-      SetElBankName(Banks[newname].el, newname);
     }
     return this;
   }
@@ -187,8 +189,6 @@ class CTRLBanksStore{
   activateBank(name){
     if (CurrentBank !== name && (name in Banks)){
       Banks[name].el.click();
-      //CurrentBank = name;
-      //GlobalEvents.emit("change_surface", Banks[CurrentBank].bank);
     }
     return this;
   }

app/js/ctrls/CTRLPalettesStore.js

@@ -1,5 +1,6 @@
 import GlobalEvents from "/app/js/common/EventCaller.js";
 import Utils from "/app/js/common/Utils.js";
+import EditableText from "/app/js/ui/EditableText.js";
 import NESPalette from "/app/js/models/NESPalette.js";
 
 
@@ -23,12 +24,12 @@ function HANDLE_PaletteClick(e){
   var pname = this.getAttribute("palname");
 
   if (Palettes.length > 0){
-    if (Palettes[CurrentPaletteIndex][0] !== pname || !Palettes[CurrentPaletteIndex][2].classList.contains(PLI_SELECTED)){
+    if (Palettes[CurrentPaletteIndex][0].value !== pname || !Palettes[CurrentPaletteIndex][2].classList.contains(PLI_SELECTED)){
       var oel = Palettes[CurrentPaletteIndex][2];
       oel.classList.remove(PLI_SELECTED);
 
       for (let i=0; i < Palettes.length; i++){
-        if (Palettes[i][0] === pname){
+        if (Palettes[i][0].value === pname){
           Palettes[i][2].classList.add(PLI_SELECTED);
           CurrentPaletteIndex = i;
           GlobalEvents.emit("set_app_palette", Palettes[i][1]);
@@ -41,11 +42,15 @@ function HANDLE_PaletteClick(e){
 
 function SetElPaletteName(el, pname){
   el.setAttribute("palname", pname);
-  var sel = el.querySelectorAll("." + PLI_TITLE);
+  var et = new EditableText(el, "title");
+  et.value = pname;
+  et.listen("value_change", (v) => {el.setAttribute("palname", v);});
+  return et;
+  /*var sel = el.querySelectorAll("." + PLI_TITLE);
   if (sel.length === 1){
     sel = sel[0];
     sel.innerHTML = pname;
-  }
+  }*/
 }
 
 function SetElToColor(el, mode, pi, ci, hex){
@@ -123,7 +128,7 @@ function CreatePaletteDOMEntry(pname, palette){
     el.classList.remove("hidden");
     ConnectElementToPalette(el, palette);
     ColorElementToPalette(el, palette);
-    SetElPaletteName(el, pname);
+    //SetElPaletteName(el, pname);
     el.addEventListener("click", HANDLE_PaletteClick);
     oel[0].parentNode.appendChild(el);
     return el;
@@ -199,7 +204,7 @@ class CTRLPalettesStore{
 
   paletteIndexFromName(name){
     for (let i=1; i < Palettes.length; i++){
-      if (Palettes[i][0] == name){
+      if (Palettes[i][0].value == name){
         return i;
       }
     }
@@ -238,10 +243,10 @@ class CTRLPalettesStore{
 
       if (palette !== null){
         var el = CreatePaletteDOMEntry(name, palette);
-        Palettes.push([name, palette, el]);
+        var eltitle = SetElPaletteName(el, name);
+        Palettes.push([eltitle, palette, el]);
 
         if (Palettes.length <= 1 && !BlockEmits){
-          //GlobalEvents.emit("set_app_palette", palette);
           el.click();        
         }
       }
@@ -251,10 +256,10 @@ class CTRLPalettesStore{
 
   removePalette(name){
     for (let i=0; i < Palettes.length; i++){
-      if (Palettes[i][0] === name){
+      if (Palettes[i][0].value === name){
         if (CurrentPaletteIndex === i){
           CurrentPaletteIndex = 0;
-          this.activatePalette(Palettes[0][0]);
+          this.activatePalette(Palettes[0][0].value);
         }
         Palettes[i][2].parentNode.removeChild(Palettes[i][2]);
         Palettes.splice(i, 1);
@@ -270,11 +275,11 @@ class CTRLPalettesStore{
   }
 
   renamePalette(oldname, newname){
-    var i = paletteIndexFromName(oldname);
+    var i = this.paletteIndexFromName(oldname);
     if (i < 0)
       throw new ValueError("Failed to find palette named '" + oldname +"'. Cannot rename.");
-    Palettes[i][0] = newname;
-    SetElPaletteName(Palettes[i][2], newname);
+    Palettes[i][0].value = newname;
+    //SetElPaletteName(Palettes[i][2], newname);
     return this;
   }
 
@@ -282,9 +287,6 @@ class CTRLPalettesStore{
     var i = this.paletteIndexFromName(name);
     if (i >= 0 && CurrentPaletteIndex !== i){
       Palettes[CurrentPaletteIndex][2].click();
-      //if (!BlockEmits){
-      //  GlobalEvents.emit("set_app_palette", Palettes[CurrentPaletteIndex][1]);
-      //}
     }
     return this;
   }

views/bankListItem.html

@@ -2,5 +2,6 @@
   <div class="list-h-padding list-v-padding" style="display:flex">
     <canvas class="bank-img" width="152" height="74"></canvas>
     <span class="title">Title here</span>
+    <input class="title hidden" type="text" value="Title here"></input>
   </div>
 </div>

views/paletteListItem.html

@@ -3,6 +3,7 @@
     <div class=pure-g">
       <div class=pure-u-1">
         <span class="title">Title here</span>
+        <input class="title hidden" type="text" value="Title here"></input>
       </div>
     </div>
     <div class="pure-g">