Working on palette lists.

app/js/ctrls/CTRLPalettesStore.js

@@ -3,11 +3,110 @@ import Utils from "/app/js/common/Utils.js";
 import NESPalette from "/app/js/models/NESPalette.js";
 
 
+const PLI_TEMPLATE = ".palette-list-item-template";
+const PLI_TITLE = ".title";
+const PLI_BG_COLOR = ".pal-bg-color";
+const PLI_FG_BASE = ".pal-fg-";
+const PLI_BG_BASE = ".pal-bg-";
+const PLI_SELECTED = ".item-selected";
+const PLI_COLOR_BASE = "nes-color-bg-";
+
 var Palettes = [];
 var CurrentPaletteIndex = 0;
 
 var BlockEmits = false;
 
+
+function HANDLE_PaletteClick(e){
+  if (!this.hasAttribute("palname")){return;}
+  var pname = this.getAttribute("palname");
+
+  if (Palettes.length > 0 && Palettes[CurrentPaletteIndex][0] !== pname){
+    var oel = Palettes[CurrentPaletteIndex][2];
+    oel.classList.remove(PLI_SELECTED);
+
+    for (let i=0; i < Palettes.length; i++){
+      if (Palettes[i][0] === pname){
+        Palettes[i][2].classList.add(PLI_SELECTED);
+        GlobalEvents.emit("set_app_palette", Palettes[i][1]);
+        break;
+      }
+    }
+  }
+}
+
+function SetElToColor(el, mode, pi, ci, hex){
+  var cel = null;
+  if (ci === 0){
+    cel = el.querySelectorAll(PLI_BG_COLOR);
+  } else {
+    cel = el.querySelectorAll(((mode == 0) ? PLI_FG_BASE : PLI_BG_BASE) + pi + "-" + ci);
+  }
+  if (cel !== null && cel.length === 1){
+    cel = cel[0];
+    var clist = cel.getAttribute("class").split(" ");
+    for (let i=0; i < clist.length; i++){
+      if (clist[i].startsWith(PLI_COLOR_BASE)){
+        cel.classList.remove(clist[i]);
+        break;
+      }
+    }
+    cel.classList.add("." + PLI_COLOR_BASE + hex);
+  }
+}
+
+
+function ColorElementToPalette(el, palette){
+  for (let p=0; p < 8; p++){
+    for (let c=1; c < 4; c++){
+      SetElToColor(
+        el, (p >= 4) ? 0 : 1,
+        p%4, c,
+        palette.get_palette_syscolor_index(p,c,true)
+      );
+    }
+  } 
+}
+
+function ConnectElementToPalette(el, palette){
+  palette.listen("palettes_changed", (e) => {
+    if (e.type == "ALL"){
+      ColorElementToPalette(el, palette);
+    } else if (e.type == "SPRITE"){
+      SetElToColor(
+        el, 0,
+        e.pindex%4, e.cindex,
+        palette.get_palette_syscolor_index(e.pindex, e.cindex, true)
+      );
+    } else if (e.type == "TILE"){
+      SetElToColor(
+        el, 1,
+        e.pindex, e.cindex,
+        palette.get_palette_syscolor_index(e.pindex, e.cindex, true)
+      );
+    }
+  });
+}
+
+
+function CreatePaletteDOMEntry(pname, palette){
+  var oel = document.querySelectorAll(PLI_TEMPLATE);
+  if (oel.length == 1){
+    var el = oel[0].cloneNode(true);
+    el.classList.remove(PLI_TEMPLATE);
+    el.classList.remove("hidden");
+    el.setAttribute("palname", pname);
+    ConnectElementToPalette(el, palette);
+    ColorElementToPalette(el, palette);
+    el.addEventListener("click", HANDLE_PaletteClick);
+    oel[0].parentNode.appendChild(el);
+    return el;
+  } else {
+    console.log("WARNING: Multiple templates found. Ambigous state.");
+  }
+  return null;
+}
+
 class CTRLPalettesStore{
   constructor(){}
 
@@ -35,25 +134,15 @@ class CTRLPalettesStore{
         for (let i=0; i < d.pals.length; i++){
           if (d.pals[i] instanceof Array){
             if (this.getPalette(d.pals[i][0]) === null){
-              var palette = new NESPalette();
-              try{
-                palette.json = d.pals[i][1]
-              } catch (e) {
-                console.log("Failed to create palette.", e.toString());
-                palette = null;
-              }
-              if (palette !== null){
-                newPalettes.push([d.pals[i][0], palette]);
-              }
+              this.createPalette(d.pals[i][0], d.pals[i][1]);
             }
           }
         }
         CurrentPaletteIndex = 0
-        if (newPalettes.length > 0){
-          if (d.cpi >= 0 && d.cpi < newPalettes.length){
+        if (Palettes.length > 0){
+          if (d.cpi >= 0 && d.cpi < Palettes.length){
             CurrentPaletteIndex = d.cpi;
           }
-          Palettes = newPalettes;
           GlobalEvents.emit("set_app_palette", Palettes[CurrentPaletteIndex][1]);
         }
       } else {
@@ -84,33 +173,54 @@ class CTRLPalettesStore{
     return (i >= 0) ? Palettes[i][1] : null;
   }
 
-  createPalette(name){
+  createPalette(name, pjson){
     var palette = this.getPalette(name);
     if (palette === null){
       palette = new NESPalette();
-      palette.set_palette([
-        "0F",
-        "05","06","07",
-        "09","0A","0B",
-        "01","02","03",
-        "0D","00","20",
-        "15","16","17",
-        "19","1A","1B",
-        "11","21","31",
-        "1D","10","30"
-      ]);
-      Palettes.push([name, palette]);
-      // TODO: Create an HTML entry for this new palette.
-
-      if (Palettes.length <= 1 && !BlockEmits){
-        GlobalEvents.emit("set_app_palette", palette);        
+      if (typeof(pjson) === "string"){
+        try {
+          palette.json = pjson;
+        } catch (e) {
+          console.log("Failed to create palette.", e.toString());
+          palette = null;
+        }
+      } else {
+        palette.set_palette([
+          "0F",
+          "05","06","07",
+          "09","0A","0B",
+          "01","02","03",
+          "0D","00","20",
+          "15","16","17",
+          "19","1A","1B",
+          "11","21","31",
+          "1D","10","30"
+        ]);
+      }
+
+      if (palette !== null){
+        var el = CreatePaletteDOMEntry(name, palette);
+        Palettes.push([name, palette, el]);
+
+        if (Palettes.length <= 1 && !BlockEmits){
+          GlobalEvents.emit("set_app_palette", palette);        
+        }
       }
     }
     return this;
   }
 
   removePalette(name){
-    // TODO: Write this function.
+    for (let i=0; i < Palettes.length; i++){
+      if (Palettes[i][0] === name){
+        if (CurrentPaletteIndex === i){
+          CurrentPaletteIndex = 0;
+          this.activatePalette(Palettes[0][0]);
+        }
+        Palettes[i][2].parentNode.removeChild(Palettes[i][2]);
+        Palettes.splice(i, 1);
+      }
+    }
     return this;
   }
 
@@ -119,6 +229,7 @@ class CTRLPalettesStore{
     if (i < 0)
       throw new ValueError("Failed to find palette named '" + oldname +"'. Cannot rename.");
     Palettes[i][0] = newname;
+    Palettes[i][2].setAttribute("palname", newname);
     return this;
   }
 
@@ -126,13 +237,20 @@ class CTRLPalettesStore{
     var i = this.paletteIndexFromName(name);
     if (i >= 0 && CurrentPaletteIndex !== i){
       CurrentPaletteIndex = i;
-      if (!BlockEmits){
-        GlobalEvents.emit("set_app_palette", Palettes[pindex][1]);
-      }
-      // TODO: Highlight palette HTML entry and unhighlight old one.
+      Palettes[CurrentPaletteIndex][2].click();
+      //if (!BlockEmits){
+      //  GlobalEvents.emit("set_app_palette", Palettes[CurrentPaletteIndex][1]);
+      //}
     }
     return this;
   }
+
+  clear(){
+    for (let i=0; i < Palettes.length; i++){
+      Palettes[i][2].parentNode.removeChild(Palettes[i][2]);
+    }
+    CurrentPaletteIndex = 0;
+  }
 }
 
 

views/paletteListItem.html

@@ -5,6 +5,56 @@
     </div>
   </div>
   <div class="pure-g">
-
+    <div class="pure-g">
+      <div class="pure-u-1-4 pal-bg-color">&nbsp;</div>
+      <div class="pure-u-3-4">
+        <div class="pure-g">
+          <div class="pure-u-1-2">
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-fg-0-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-0-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-0-3">&nbsp;</div>
+            </div>
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-fg-1-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-1-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-1-3">&nbsp;</div>
+            </div>
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-fg-2-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-2-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-2-3">&nbsp;</div>
+            </div>
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-fg-3-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-3-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-fg-3-3">&nbsp;</div>
+            </div>
+          </div>
+          <div class="pure-u-1-2">
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-bg-0-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-0-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-0-3">&nbsp;</div>
+            </div>
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-bg-1-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-1-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-1-3">&nbsp;</div>
+            </div>
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-bg-2-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-2-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-2-3">&nbsp;</div>
+            </div>
+            <div class="pure-g">
+              <div class="pure-u-1-4 pal-bg-3-1">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-3-2">&nbsp;</div>
+              <div class="pure-u-1-4 pal-bg-3-3">&nbsp;</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>