Fixed interactions and cleaned code for CTRLBankTools

app/js/ctrls/CTRLBankTools.js

@@ -3,52 +3,42 @@ import NESBank from "/app/js/models/NESBank.js";
 
 
 
-var EL = null;
+var ELCtrl = null;
+var ELSel = null;
+var ELLab = null;
+var ELOff = null;
 var SURF = null;
-var LastVal = "all";
-
-function GetSubControls(){
-  var els = [];
-  if (EL !== null){
-    var ellab = EL.querySelectorAll(".painter-bank-offset");
-    var eloff = null;
-    if (ellab.length === 1){
-      els.push(ellab[0]);
-      eloff = els[0].querySelectorAll("#offset-select");
-      if (eloff.length === 1){
-        els.push(eloff[0]);
-      } else {
-        console.log("Ambiguous number of 'offset-select' elements.");
-      }
-    } else {
-      console.log("Ambiguous number of 'painter-bank-offset' elements.");
-    }
-  }
-  return (els.length == 2) ? els : null;
-}
+
 
 function OpenControls(){
-  if (EL !== null && SURF !== null){
-    var subel = GetSubControls();
+  if (ELCtrl !== null && SURF !== null){
     switch(SURF.access_mode){
       case NESBank.ACCESSMODE_8K:
-        subel[0].classList.add("hidden");
+        ELSel.value = "8K";
+        ELLab.classList.add("hidden");
         break;
       case NESBank.ACCESSMODE_4K:
+        ELSel.value = "4K"; break;
       case NESBank.ACCESSMODE_2K:
+        ELSel.value = "2K"; break;
       case NESBank.ACCESSMODE_1K:
-        subel[0].classList.remove("hidden");
-        subel[1].setAttribute("max", SURF.access_offset_length - 1);
-        subel[1].setAttribute("value", SURF.access_offset);
+        ELSel.value = "1K"; break; 
         break;
     }
-    EL.classList.remove("hidden"); 
+
+    if (ELSel.value !== "8K"){
+      ELLab.classList.remove("hidden");
+      ELOff.setAttribute("max", SURF.access_offset_length - 1);
+      ELOff.value = SURF.access_offset;
+      //ELOff.setAttribute("value", SURF.access_offset);
+    }
+    ELCtrl.classList.remove("hidden");
   }
 }
 
 function CloseControls(){
-  if (EL !== null){
-    EL.classList.add("hidden");
+  if (ELCtrl !== null){
+    ELCtrl.classList.add("hidden");
   }
 }
 
@@ -65,39 +55,32 @@ function HANDLE_SurfChange(surf){
 
 
 function HANDLE_ModeChange(){
-  if (EL !== null && SURF !== null){
+  if (ELCtrl !== null && SURF !== null){
     var val = this.options[this.selectedIndex].value; 
-    var subel = GetSubControls();
     switch(val){
       case "8K":
         SURF.access_mode = NESBank.ACCESSMODE_8K;
-        subel[0].classList.add("hidden");
+        ELLab.classList.add("hidden");
         break;
       case "4K":
-        SURF.access_mode = NESBank.ACCESSMODE_4K;
-        subel[0].classList.remove("hidden");
-        subel[1].setAttribute("value", SURF.access_offset);
-        subel[1].setAttribute("max", SURF.access_offset_length - 1);
-        break;
+        SURF.access_mode = NESBank.ACCESSMODE_4K; break;
       case "2K":
-        SURF.access_mode = NESBank.ACCESSMODE_2K;
-        subel[0].classList.remove("hidden");
-        subel[1].setAttribute("value", SURF.access_offset);
-        subel[1].setAttribute("max", SURF.access_offset_length - 1);
-        break;
+        SURF.access_mode = NESBank.ACCESSMODE_2K; break;
       case "1K":
-        SURF.access_mode = NESBank.ACCESSMODE_1K;
-        subel[0].classList.remove("hidden");
-        subel[1].setAttribute("value", SURF.access_offset);
-        subel[1].setAttribute("max", SURF.access_offset_length - 1);
-        break;
+        SURF.access_mode = NESBank.ACCESSMODE_1K; break;
+    }
+    if (SURF.access_mode !== NESBank.ACCESSMODE_8K){
+      ELLab.classList.remove("hidden");
+      //ELOff.setAttribute("value", SURF.access_offset);
+      ELOff.setAttribute("max", SURF.access_offset_length - 1);
+      ELOff.value = SURF.access_offset;
     }
   }
 }
 
 
 function HANDLE_OffsetChange(){
-  if (EL !== null && SURF !== null){
+  if (ELCtrl !== null && SURF !== null){
     var val = parseInt(this.value);
     SURF.access_offset = val;
   }
@@ -109,24 +92,49 @@ class CTRLBankTools{
     GlobalEvents.listen("change_surface", HANDLE_SurfChange);
   }
 
+  close(){
+    if (ELSel)
+      ELSel.removeEventListener("change", HANDLE_ModeChange);
+    if (ELOff)
+      ELOff.removeEventListener("change", HANDLE_OffsetChange);
+    if (ELCtrl)
+      ELCtrl.classList.add("hidden");
+    ELCTRL = null;
+    ELSel = null;
+    ELLab = null;
+    ELOff = null;
+  }
+
   initialize(){
-    if (EL === null){
-      EL = document.querySelectorAll(".painter-bank-controls");
-      if (EL.length !== 1){
-        console.log("ERROR: More than one painter-bank-controls element found. Ambiguous State.");
+    if (ELCtrl === null){
+      ELCtrl = document.querySelector(".painter-bank-controls");
+      if (!ELCtrl){
+        console.log("ERROR: Failed to find 'painter-bank-controls' element");
+        return;
+      }
+
+      ELSel = ELCtrl.querySelector(".painter-bank-mode");
+      if (!ELSel){
+        this.close();
+        console.log("ERROR: Failed to find 'painter-bank-mode' element.");
         return;
       }
-      EL = EL[0];
-      var elsel = EL.querySelectorAll(".painter-bank-mode");
-      if (elsel.length !== 1){
-        console.log("Ambiguous number of 'painter-bank-mode' elements.");
-        EL = null;
+
+      ELLab = ELCtrl.querySelector(".painter-bank-offset");
+      if (!ELLab){
+        this.close();
+        console.log("ERROR: Failed to find 'painter-bank-offset' element.");
+        return;
+      }
+
+      ELOff = ELLab.querySelector("#offset-select");
+      if (!ELOff){
+        this.close();
+        console.log("ERROR: Failed to find 'offset-select' element.");
         return;
       }
-      elsel = elsel[0];
-      elsel.addEventListener("change", HANDLE_ModeChange);
-      var subel = GetSubControls();
-      subel[1].addEventListener("change", HANDLE_OffsetChange);
+      ELSel.addEventListener("change", HANDLE_ModeChange);
+      ELOff.addEventListener("change", HANDLE_OffsetChange);
       OpenControls();
     }
   }