752ca37b9f0031e59abc0dedef4752b7eb890946
chmalee
  Fri May 19 12:11:41 2023 -0700
Generalize the notification box setups so we can have multiple of them. Starting on getting the tutorial to show up conditionally

diff --git src/hg/js/utils.js src/hg/js/utils.js
index 26a8296..59bc19a 100644
--- src/hg/js/utils.js
+++ src/hg/js/utils.js
@@ -785,69 +785,71 @@
 var ix = content.indexOf(sectionBegin);
 if (ix < 0)
     return "";
 content = content.substring(ix+sectionBegin.length);
 ix = content.indexOf(sectionEnd);
 if (ix < 0)
     return "";
 content = content.substring(0,ix);
 if (debug)
     alert('page nonce='+content);
 return content;
 }
 
 function notifBoxShow(cgiName, keyName) {
     /* move the notification bar div under '#TrackHeaderForm' */
-    let lsKey = cgiName + "." + keyName;
+    let lsKey = cgiName + "_" + keyName;
     var notifEl = document.getElementById(lsKey + "notifBox");
     // TODO: make a generic element for positioning this
     var parentEl = document.getElementById('TrackHeaderForm');
     parentEl.appendChild(notifEl);
     notifEl.style.display = 'block';
 }
 
 function notifBoxSetup(cgiName, keyName, msg) {
 /* Create a notification box if one hasn't been created, and
  * add msg to the list of shown notifications.
  * cgiName.keyName will be saved to localStorage in order to show
  * or hide this notification.
  * Must call notifBoxShow() in order to display the notification */
-// the key to save into localStorage
-lsKey = cgiName + "." + keyName;
+    lsKey = cgiName + "_" + keyName;
     let notifBox = document.getElementById(lsKey+"notifBox");
     if (notifBox) {
         notifBox.innerHTML += "<br>" + msg;
     } else {
         let newDiv = document.createElement("div");
+        newDiv.className = "notifBox";
         newDiv.style.display = "none";
         newDiv.style.width = "90%";
         newDiv.style.marginLeft = "100px";
         newDiv.id = lsKey+"notifBox";
         if (msg) {
             newDiv.innerHTML = msg;
         }
         newDiv.innerHTML += "<div style='text-align:center'>"+
             "<button id='" + lsKey + "notifyHide'>Close</button>&nbsp;"+
             "<button id='" + lsKey + "notifyHideForever'>Don't show again</button>"+
             "</div>";
         document.body.appendChild(newDiv);
-    $("#"+lsKey+"notifyHide").click( function() {
-        $("#notifBox").remove();
+        $("#"+lsKey+"notifyHide").click({"id":lsKey}, function() {
+            let key = arguments[0].data.id;
+            $("#"+key+"notifBox").remove();
         });
-    $("#"+lsKey+"notifyHideForever").click( function() {
-        $("#notifBox").remove();
-        localStorage.setItem("hgTracks.hideSpeedNotification", "1");
+        $("#"+lsKey+"notifyHideForever").click({"id": lsKey}, function() {
+            let key = arguments[0].data.id;
+            $("#"+key+"notifBox").remove();
+            localStorage.setItem(key, "1");
         });
     }
 }
 
 function warnBoxJsSetup()
 {   // Sets up warnBox if not already established.  This is duplicated from htmshell.c
     var html = "";
     html += "<center>";
     html += "<div id='warnBox' style='display:none;'>";
     html += "<CENTER><B id='warnHead'></B></CENTER>";
     html += "<UL id='warnList'></UL>";
     html += "<CENTER><button id='warnOK'></button></CENTER>";
     html += "</div></center>";