Update imagemapper and add letter highlights

dictionary.js

@@ -996,7 +996,7 @@ var dictionary = new Map([
 ["CYP+KU", ""],
 ["CYP+O", ""],
 ["CYP+PA", ""],
-["DA", ""],
+["DA", "DA"],
 ["DE", ""],
 ["DI", ""],
 ["DI±PTE", ""],

explorer.js

@@ -815,8 +815,9 @@ function addWordsToImage(imageToAdd, name, imageType, img, imageWrapper, lens, i
 
       if (currentWord != prevWord) {
         wordContainer = document.createElement("div");
-        var wordID = "image-" + imageType + "-" + name + "-word-highlight-" + currentWord;
         wordContainer.className = "word-highlight";
+        var wordID = "image-" + imageType + "-" + name + "-word-highlight-" + currentWord;
+        wordContainer.classList.add(wordID);
         wordContainer.style.top = ((area.y / img.naturalHeight) * 100) + '%';
         wordContainer.style.left = ((area.x / img.naturalWidth) * 100) + '%';
         wordContainer.id = wordID;
@@ -1228,16 +1229,14 @@ function addWordTip(word, name, index) {
 function setHighlightLettersInTranscription(name, index, highlight) {
   var highlightedElements = [];
   for (var imageType of ["photo", "transcription"]) {
-    var element = document.getElementById("image-" + imageType + "-" + name + "-word-highlight-" + index);
-    if (!element) {
-      continue;
-    }
-
-    var elements = element.getElementsByClassName("letter-highlight");
-    Array.from(elements).forEach( element => {
-      element.style.backgroundColor = highlight;
-      element.style.border = highlight != "" ? "0.5px solid black" : "none";
-      highlightedElements.push(element);
+    var els = document.getElementsByClassName("image-" + imageType + "-" + name + "-word-highlight-" + index);
+    Array.from(els).forEach( el => {
+      var elements = el.getElementsByClassName("letter-highlight");
+      Array.from(elements).forEach( element => {
+        element.style.backgroundColor = highlight;
+        element.style.border = highlight != "" ? "0.5px solid black" : "none";
+        highlightedElements.push(element);
+      });
     });
   }
   return highlightedElements;

imagemapper/main.css

@@ -520,7 +520,7 @@ a:link, a:visited {
     display: inline-block;
 }
 #svg rect {
-    stroke-width: 3px;
+    stroke-width: 1px;
     stroke: #F00;
     fill: rgba(255,255,255,0.3);
 }
@@ -562,6 +562,7 @@ a:link, a:visited {
     fill: #FFF;
     stroke: #000;
     stroke-width: 2px;
+    visibility: hidden;
 }
 #svg rect.helper:hover {
     fill: #F00; 

imagemapper/summerHTMLImageMapCreator.js

@@ -502,14 +502,22 @@ var summerHtmlImageMapCreator = (function() {
                   if (!inscription) {
                     continue;
                   }
-                  for (var imageToLoad of [inscription.images[0], inscription.facsimileImages[0]]) {
+                  function isFacsimileImage(img, facsimiles) {
+                    for (var fac of facsimiles) {
+                      if (fac == img) {
+                        return true;
+                      }
+                    }
+                    return false;
+                  }
+                  for (var imageToLoad of [inscription.images, inscription.facsimileImages].flat()) {
                     console.log(imageToLoad);
                     if (coordinates.has(imageToLoad)) {
                       continue;
                     }
                     var inStorage = window.localStorage.getItem(imageToLoad);
                     if (!inStorage) {
-                      app.loadImage(imageToLoad, imageToLoad != inscription.facsimileImages[0] ? inscription.facsimileImages[0] : null);
+                      app.loadImage(imageToLoad, isFacsimileImage(imageToLoad, inscription.facsimileImages));
                       document.getElementById('title').textContent = inscription.name;
 
                       var letters = [];