Tracklist Schema

assets/css/app.css

@@ -22,7 +22,7 @@
         --white-alabaster: #F3EFE3;
         --linen: #FAF1E6;
 
-        --deep-saffron: #ff9933;
+        --aerospace-orange: #ff9933;
         --coral-orange: #FF8349;
         --atomic-tangerine: #FF9B6D;
 
@@ -43,10 +43,10 @@
 
         --color-primary: var(--chili-red);
         --color-primary-accent: var(--chili-red);
-        --color-primary-background: var(--white-alabaster);
+        --color-primary-background: var(--black);
         --color-secondary: var(--blood-red);
         --color-secondary-background: var(--dun);
-        --color-text: var(--black)
+        --color-primarytext: var(--pearl)
     }
 }
 
@@ -80,6 +80,10 @@
   @apply bg-orange-400/30 border-b-0 border-l-8 border-red-600 p-4 pl-8 rounded-sm;
 }
 
+.tapflashed {
+     animation: tapflash 0.32s ease-out;
+}
+
 @font-face {
     font-family: "et-book";
     src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");

assets/js/app.js

@@ -36,6 +36,16 @@ let liveSocket = new LiveSocket("/live", Socket, {
 
     session: fetchSession(),
   },
+  metadata: {
+    keydown: (event, element) => {
+      return {
+        key: event.key,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+      };
+    },
+  },
+
   hooks: Hooks,
 });
 
@@ -73,6 +83,64 @@ function genAnonId(length = 18) {
 }
 
 
+let lastEmphasizedElement = null;
+
+function emphasizeVerseElement(selectorId, className) {
+  console.log("LESGOO EMPHASISE", selectorId);
+
+  // remove emphasis from prev
+  if (lastEmphasizedElement && lastEmphasizedElement.classList.contains(className)) {
+    lastEmphasizedElement.classList.remove(className);
+    lastEmphasizedElement = null;
+  }
+
+  const escapedId = CSS.escape(selectorId);
+  const element = document.querySelector(`[emph_verse_id="${escapedId}"]`);
+
+  if (element) {
+
+    if (!element.classList.contains(className)) {
+      element.classList.add(className);
+    }
+
+
+    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+
+    if (element.tabIndex < 0) {
+
+      element.tabIndex = -1;
+    }
+    element.focus({ preventScroll: true });
+
+
+    lastEmphasizedElement = element;
+  } else {
+    console.warn(`Element with verse_id "${selectorId}" not found`);
+
+    // Fallback: try searching by verse_id failed
+    const nodeElement = document.querySelector(`[verse_id="${escapedId}"]`);
+    if (nodeElement) {
+      console.log("Found element by node_id instead");
+      nodeElement.classList.add(className);
+      nodeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+      if (nodeElement.tabIndex < 0) {
+        nodeElement.tabIndex = -1;
+      }
+      nodeElement.focus({ preventScroll: true });
+
+      lastEmphasizedElement = nodeElement;
+    }
+  }
+}
+
+
+window.addEventListener("phx:verseEmphasis", (e) => {
+  const { verseId, className } = e.detail;
+
+  emphasizeVerseElement(verseId, className)
+});
 
 
 // Show progress bar on live navigation and form submits