Stop propagation prevents onclick from firing outside stack. Error fixed

sillsdev · Aug 25, 2023 · 045bb95 · 045bb95
1 parent e6a1e34
commit 045bb95
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/src/lib/components/StackView.svelte b/src/lib/components/StackView.svelte
@@ -4,7 +4,9 @@
 -->
 
 <script>
-    import { footnotes } from '$lib/data/stores';
+    import { footnotes, getVerseText } from '$lib/data/stores';
+    import config from '$lib/data/config';
+    import { cvs } from '$lib/scripts/scripture-reference-utils';
 
     let stack;
     let listening = false;
@@ -15,6 +17,30 @@
         }
     }
 
+    async function insideClick(event) {
+        if (event.target.hasAttribute('data-start-ref')) {
+            let start = JSON.parse(event.target.getAttribute('data-start-ref'));
+            if (config.mainFeatures['scripture-refs-display-from-popup'] === 'viewer') {
+                refs.set({
+                    docSet: start.docSet,
+                    book: start.book,
+                    chapter: start.chapter
+                });
+            } else {
+                const div = document.createElement('div');
+                const referenceSpan = document.createElement('span');
+                const footnoteSpan = document.createElement('span');
+                referenceSpan.classList.add('fr');
+                footnoteSpan.classList.add('ft');
+                referenceSpan.innerText = `${start.chapter}${cvs}${start.verse} `;
+                footnoteSpan.innerText = await getVerseText(start);
+                div.appendChild(referenceSpan);
+                div.appendChild(footnoteSpan);
+                footnotes.push(div.innerHTML);
+            }
+        }
+    }
+
     function toggleListener(footnotes) {
         if (listening && footnotes.length === 0) {
             document.removeEventListener('click', clickOutside);
@@ -33,9 +59,11 @@
 -->
 <div bind:this={stack} class="absolute w-full bottom-8 dy-stack">
     {#each $footnotes as item}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
             id="container"
             class="footnote rounded w-1/2 lg:max-w-screen-md h-40 drop-shadow-lg overflow-y-auto"
+            on:click|stopPropagation={insideClick}
         >
             <div id="container" class="footnote">{@html item}</div>
         </div>

diff --git a/src/lib/scripts/scripture-reference-utils.ts b/src/lib/scripts/scripture-reference-utils.ts
@@ -58,7 +58,7 @@ export function parseText(text: string) {
 }
 
 /**
- * Function to generate an inline span from a preprocessed string reference
+ * Function to generate an inline anchor tag from a preprocessed string reference
  * @param start: Reference object where the reference starts
  * @param end: Reference object where the reference ends
  * {
@@ -69,25 +69,14 @@ export function parseText(text: string) {
  *    verse: string;
  * }
  */
-export function generateSpan(start, end = undefined) {
-    const span: HTMLSpanElement = document.createElement('span');
-    span.classList.add('cursor-pointer');
-    span.innerHTML = start.phrase;
-    function onClick() {
-        console.log('click');
-        if (config.mainFeatures['scripture-refs-display-from-popup'] === 'viewer') {
-            refs.set({
-                docSet: start.docSet,
-                book: start.book,
-                chapter: start.chapter
-            });
-        } else {
-            footnotes.push(getVerseText(start, end));
-            // ToDo add ref set button
-        }
-    }
-    span.onclick = onClick;
-    return span;
+export function generateAnchor(start, end = undefined) {
+    const anchor = document.createElement('a');
+    anchor.classList.add('cursor-pointer');
+    anchor.href = '#';
+    anchor.innerHTML = start.phrase;
+    anchor.setAttribute('data-start-ref', JSON.stringify(start));
+    anchor.setAttribute('data-end-ref', JSON.stringify(end));
+    return anchor;
 }
 
 /**
@@ -99,7 +88,7 @@ export function generateHTML(reference: string) {
     let refs = parseText(reference);
     const spans = [];
     for (let i = 0; i < refs.length; i++) {
-        spans.push(generateSpan(refs[i]));
+        spans.push(generateAnchor(refs[i]));
     }
     const result = spans.map((span) => span.outerHTML).join('; ');
     return result;