further refactor js

Turn the div adapters into injectable files so that each PdfContainer can be customized. And the adapters can be used in different PdfContainers as well.

src/main/resources/static/js/multitool/imageHighlighter.js

@@ -1,27 +1,39 @@
-const getImageHighlighterCallback = (id) => {
-    const imageHighlighter = document.getElementById(id);
-    imageHighlighter.onclick = () => {
-        imageHighlighter.childNodes.forEach((child) => {
-            child.classList.add('remove');
-            setTimeout(() => {
-                imageHighlighter.removeChild(child);
-            }, 100)
-        })
+class ImageHiglighter {
+    imageHighlighter;
+    constructor(id) {
+        this.imageHighlighter = document.getElementById(id);
+        this.imageHighlightCallback = this.imageHighlightCallback.bind(this);
+        this.imageHighlighter.onclick = () => {
+            this.imageHighlighter.childNodes.forEach((child) => {
+                child.classList.add('remove');
+                setTimeout(() => {
+                    this.imageHighlighter.removeChild(child);
+                }, 100)
+            })
+        }
     }
 
-    const imageHighlightCallback = (highlightEvent) => {
+    imageHighlightCallback(highlightEvent) {
         var bigImg = document.createElement('img');
         bigImg.onclick = (imageClickEvent) => {
-            // This prevents the highlighter's onClick from closing the image when clicking on the image
-            // instead of next to it.
+            // This prevents the highlighter's onClick from closing the image when clicking
+            // on the image instead of next to it.
             imageClickEvent.preventDefault();
             imageClickEvent.stopPropagation();
         };
         bigImg.src = highlightEvent.target.src;
-        imageHighlighter.appendChild(bigImg);
+        this.imageHighlighter.appendChild(bigImg);
     };
 
-    return imageHighlightCallback
+    setActions() {
+        // not needed in this case
+    }
+
+    adapt(div) {
+        const img = div.querySelector('.page-image');
+        img.addEventListener('click', this.imageHighlightCallback)
+        return div;
+    }
 }
 
-export default getImageHighlighterCallback;
+export default ImageHiglighter;