e016f7eae81edd3cfac1f65219dc6c18e91c7e22
chmalee
  Wed May 22 10:47:12 2024 -0700
Unify the different color pickers (drag select highlights, track item highlights and track item colors) into hui.js. Ensure the text box and palette selector work, refs #24507

diff --git src/hg/js/hui.js src/hg/js/hui.js
index 9d110f9..0a5a489 100644
--- src/hg/js/hui.js
+++ src/hg/js/hui.js
@@ -1465,100 +1465,112 @@
             } else {
                 newStyle = 'display:none'; 
                 $(this).find('img').attr('src','../images/downBlue.png');
             }
 
             for (var control in advancedControls ) 
                 advancedControls[control].style = newStyle;
             }
         );
 }
 
 
 var hlColor = '#aac6ff';
 var prevHlColor;
 var hlColorDefault = '#aac6ff';
-function makeHighlightPicker(inputId, parentEl, trackName) {
+function makeHighlightPicker(cartVar, parentEl, trackName, label, cartColor = hlColorDefault) {
 /* Create an input with a color selection field, optionally append the resulting
  * html to parentEl, if parent is not null */
     /* Some helper function for keeping track of colors */
     let saveHlColor = function(hlColor, trackName) {
         hlColor = hlColor;
         if (typeof common !== "undefined" && common.track) {
             // regular hgTrackUi
-            setCartVars([common.track + ".highlightColor"], [hlColor], null, true);
+            setCartVars([cartVar], [hlColor], null, true);
         } else if (trackName) {
             // hgTrackUi pop up
-            cart.setVars([trackName + ".highlightColor"], [hlColor], null, false);
+            cart.setVars([cartVar], [hlColor], null, false);
         } else {
             // hgTracks dragSelect, uses different cart variable
             cart.setVars(["prevHlColor"], [hlColor], null, false);
         }
         prevHlColor = hlColor;
         return hlColor;
     };
 
     let loadHlColor = function() {
         // load hlColor from prevHlColor in the cart, or use default color, set and return it
         // color is a 6-char hex string prefixed by #
         if (typeof prevHlColor !== "undefined" && prevHlColor.length > 0) {
             hlColor = prevHlColor;
         } else if (typeof cartHighlightColor !== "undefined" && cartHighlightColor.length > 0) {
             hlColor = cartHighlightColor;
         } else {
             hlColor = hlColorDefault;
         }
         return hlColor;
     };
 
     let colorPickerContainer = document.createElement("p");
-    colorPickerContainer.textContent = "Highlight color:";
+    colorPickerContainer.textContent = typeof label !== "undefined" && label.length > 0 ? label : "Highlight color:";
     let inpText = document.createElement("input");
-    inpText.id = inputId + "Input";
+    // special case the drag select highlight feature because it has special code:
+    if (cartVar === "hlColor") {
+        inpText.id = cartVar + "Input";
+    } else {
+        inpText.id = "colorPicker." + cartVar + "Input";
+    }
     inpText.value = loadHlColor();
     inpText.type = "text";
     inpText.style = "width: 70px";
     // The actual color picker:
     let inpSpec = document.createElement("input");
-    inpSpec.id = inputId + "Picker";
+    if (cartVar === "hlColor") {
+        inpSpec.id = cartVar + "Picker";
+    } else {
+        inpSpec.id = "colorPicker." + cartVar + "Picker";
+    }
     let inpResetLink  = document.createElement("a");
     inpResetLink.href = "#";
-    inpResetLink.id = inputId + "Reset";
+    inpResetLink.id = cartVar + "Reset";
     inpResetLink.textContent = "Reset";
     colorPickerContainer.appendChild(inpText);
     colorPickerContainer.appendChild(inpSpec);
     colorPickerContainer.appendChild(inpResetLink);
 
     if (typeof parentEl !== undefined) {
         parentEl.appendChild(colorPickerContainer);
     } else {
         alert("Must supply parentNode to append color picker");
         throw new Error();
     }
-
     let opt = {
         hideAfterPaletteSelect: true,
         color: $(inpSpec).val(),
         showPalette: true,
         showInput: true,
+        showSelectionPalette: true,
+        showInitial: true,
         preferredFormat: "hex",
+        localStorageKey: "genomebrowser",
         change: function() {
             let color = $(inpSpec).spectrum("get");
             $(inpText).val(color);
             saveHlColor(color, trackName);
         },
     };
     $(inpSpec).spectrum(opt);
 
     // update the color picker if you change the input box
-    $(inpSpec).change(function() {
-        $(inpSpec).spectrum("set", $(inpSpec).val());
+    $(inpText).change(function() {
+        $(inpSpec).spectrum("set", $(inpText).val());
+        saveHlColor($(inpText).val(), trackName);
     });
     // Restore the default on Reset link click
     $(inpResetLink).click(function() {
         let hlDefault = hlColorDefault;
         $(inpText).val(hlDefault);
         $(inpSpec).spectrum("set", hlDefault);
         saveHlColor(hlDefault, trackName);
     });
     $(inpSpec).spectrum("set", $(inpText).val());
 }