refactor: lightbox ID generation and shadow management

Replaces the async SHA-256 based unique ID generation with a synchronous hashCode method in Utility. Refactors LightBox to manage Shadow instances in a local cache instead of querying the DOM, and removes the static find method from Shadow. Also extracts image link wrapping logic into a helper method for clarity.

3 files changed, 35 insertions, 37 deletions

diff --git a/src/lightbox.js b/src/lightbox.js
index 3b25585..579f14b 100644
--- a/src/lightbox.js
+++ b/src/lightbox.js
@@ -1,9 +1,10 @@
-import utility from './utility.js';
+import Utility from './utility.js';
 import Overlay from './overlay.js';
 import Shadow from './shadow.js';
 
 export default class LightBox {
   overlay = new Overlay();
+  shadows = {};
 
   /**
    * ============
@@ -17,37 +18,36 @@ export default class LightBox {
   }
 
   init() {
-    const container = document.querySelectorAll(this.container);
     const images = document.querySelectorAll(`${this.container} img[data-libo]`);
 
     images.forEach(image => {
-      // generate unique id for image
-      const id = utility.generateUniqueId(image.src);
-      image.id = id;
-
-      // get parent and wrap image with a link if it's not already wrapped
-      const parent = image.parentElement;
-      let link;
-      if (!parent || parent.tagName !== 'A') {
-        link = document.createElement('a');
-        link.href = image.src;
-        link.dataset.liboLink = true;
-
-        parent.insertBefore(link, image);
-        link.appendChild(image);
-      } else {
-        link = parent;
-      }
-
+      image.id = Utility.hashCode(image.src); // generate unique id for image
+      const link = this.wrapInLink(image);
       // add event listener to open lightbox on click
       link.addEventListener('click', e => {
         e.preventDefault();
         this.openLightBox(image);
       });
-
     });
   }
 
+  wrapInLink(image) {
+    // wrap image with a link if it's not already wrapped
+    const parent = image.parentElement;
+    let link;
+    if (!parent || parent.tagName !== 'A') {
+      link = document.createElement('a');
+      link.href = image.src;
+      link.dataset.liboLink = true;
+
+      parent.insertBefore(link, image);
+      link.appendChild(image);
+    } else {
+      link = parent;
+    }
+    return link;
+  }
+
   /**
    * ============
    * Actions
@@ -55,7 +55,11 @@ export default class LightBox {
    */
 
   openLightBox(image) {
-    const shadow = Shadow.find(image) || new Shadow(image);
+    const shadow = this.shadows[image.id] || new Shadow(image);
+    if (!this.shadows[image.id]) {
+      this.shadows[image.id] = shadow;
+    }
+
     shadow.open();
 
     this.overlay.add(shadow);
diff --git a/src/shadow.js b/src/shadow.js
index 84eac48..6051cd9 100644
--- a/src/shadow.js
+++ b/src/shadow.js
@@ -39,11 +39,6 @@ export default class Shadow {
     });
   }
 
-  static find(image) {
-    const shadowId = `libo-shadow-${image.id}`;
-    return document.getElementById(shadowId);
-  }
-
   calculateStartsAndFinals() {
     // get starting state
     this.startingState = {
diff --git a/src/utility.js b/src/utility.js
index 790443d..f2ee3fb 100644
--- a/src/utility.js
+++ b/src/utility.js
@@ -1,12 +1,11 @@
-const utility = {
-  generateUniqueId: (str) => {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(str);
-    const hashBuffer = crypto.subtle.digest('SHA-256', data); // SHA-256 hash
-    const hashArray = Array.from(new Uint8Array(hashBuffer)); // Convert buffer to array
-    const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
-    return hashHex; // Return the hex string
+export default class Utility {
+  static hashCode(str) {
+    let hash = 0;
+    for (let i = 0, len = str.length; i < len; i++) {
+        let chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return (hash>0) ? hash : -hash;
   }
 }
-
-export default utility;