Feature/display reversals/685

config/index.d.ts

@@ -285,4 +285,11 @@ export type DictionaryConfig = AppConfig & {
             displayed: boolean;
         };
     };
+    singleEntryStyles?: {
+        name: string;
+        category?: string;
+        properties: {
+            [key: string]: string;
+        };
+    }[];
 };

convert/convertConfig.ts

@@ -248,6 +248,15 @@ function convertConfig(dataDir: string, verbose: number) {
     const mainStyles = document.querySelector('styles')!;
     data.styles = parseStyles(mainStyles, verbose);
 
+    if (isDictionaryConfig(data)) {
+        const singleEntryStyles = document.querySelector('styles[type=single-entry]');
+        if (singleEntryStyles) {
+            data.singleEntryStyles = parseStyles(singleEntryStyles, verbose);
+        } else if (verbose) {
+            console.log('No single-entry styles found in the XML document');
+        }
+    }
+
     if (isScriptureConfig(data)) {
         data.traits = parseTraits(document, dataDir, verbose);
         data.bookCollections = parseBookCollections(document, verbose);

convert/convertReverseIndex.ts

@@ -49,6 +49,7 @@ export function convertReverseIndex(
         .filter(([gloss]) => gloss?.length > 0);
 
     const entriesByLetter: { [letter: string]: [string, string][] } = {};
+    const fileIndexByLetter: { [letter: string]: string[] } = {}; // New index for files by letter
 
     let latestLetter = makeEntryLetter(alphabet[0]);
     indexEntries.forEach((entry) => {
@@ -57,14 +58,17 @@ export function convertReverseIndex(
 
         const firstLetter = getBaseLetter(gloss, alphabet);
         const entryLetter = firstLetter ?? latestLetter;
+        const fileEntryLetter = entryLetter.toLowerCase();
         if (!entriesByLetter[entryLetter]) {
             entriesByLetter[entryLetter] = [];
+            fileIndexByLetter[fileEntryLetter] = []; // Initialize file index for the letter
         }
         entriesByLetter[entryLetter].push([entry[0], entry[1]]);
         latestLetter = entryLetter;
     });
 
     Object.entries(entriesByLetter).forEach(([letter, entries]) => {
+        const fileLetter = letter.toLowerCase();
         entries.sort(([a], [b]) => a.localeCompare(b, language));
 
         let currentChunk: { [key: string]: ReversalEntry[] } = {};
@@ -99,14 +103,16 @@ export function convertReverseIndex(
                 currentCount++;
 
                 if (currentCount >= ENTRIES_PER_CHUNK || i === entries.length - 1) {
-                    const chunkFileName = `${letter.toLowerCase()}-${String(chunkIndex + 1).padStart(3, '0')}.json`;
+                    const chunkFileName = `${fileLetter}-${String(chunkIndex + 1).padStart(3, '0')}.json`;
                     const chunkPath = path.join(outputDir, chunkFileName);
 
                     files.push({
                         path: chunkPath,
                         content: JSON.stringify(currentChunk, null, 2)
                     });
 
+                    fileIndexByLetter[fileLetter].push(chunkFileName); // Add file to index
+
                     currentChunk = {};
                     currentCount = 0;
                     chunkIndex++;
@@ -115,6 +121,11 @@ export function convertReverseIndex(
         }
     });
 
+    files.push({
+        path: path.join(outputDir, 'index.json'),
+        content: JSON.stringify(fileIndexByLetter, null, 2) // Write the file index to index.json
+    });
+
     return files;
 }
 

convert/tests/sab/convertConfigSAB.test.ts

@@ -196,7 +196,7 @@ if (programType === 'DAB') {
 
     test('convertConfig: parse features', () => {
         const result = parseFeatures(document, 1);
-        expect(Object.keys(result)).toHaveLength(137);
+        expect(Object.keys(result)).toHaveLength(140);
     });
 
     test('convertConfig: parse background images', () => {

src/lib/components/LexiconAlphabetStrip.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    export let alphabet: string[];
+    export let activeLetter: string;
+    export let onLetterSelect: (letter: string) => void;
+</script>
+
+<div
+    class="flex m-2 gap-1 md:gap-2 mb-4 justify-start overflow-x-auto whitespace-nowrap pb-2 snap-x"
+>
+    {#each alphabet as letter}
+        <button
+            class="px-3 py-2 text-sm font-bold border rounded-md bg-gray-100 hover:bg-gray-200 cursor-pointer snap-start
+            sm:px-4 sm:py-3 sm:text-base
+            md:px-5 md:py-4 md:text-base
+            lg:px-6 lg:py-4 lg:text-lg"
+            style={activeLetter === letter
+                ? 'background-color: var(--TitleBackgroundColor); border-color: black;'
+                : ''}
+            on:click={() => onLetterSelect(letter)}
+        >
+            {letter}
+        </button>
+    {/each}
+</div>

src/lib/components/LexiconEntryView.svelte

@@ -0,0 +1,188 @@
+<script>
+    import { base } from '$app/paths';
+    import config from '$lib/data/config';
+    import { convertStyle } from '$lib/data/stores';
+    import initSqlJs from 'sql.js';
+    import { afterUpdate, onMount } from 'svelte';
+
+    export let selectedWord;
+    export let vernacularWordsList;
+    export let vernacularLanguage;
+    export let onSelectWord;
+    export let onSwitchLanguage;
+
+    let xmlData = '';
+
+    let singleEntryStyles = config.singleEntryStyles;
+
+    async function queryXmlByWordId(wordId) {
+        try {
+            const SQL = await initSqlJs({
+                locateFile: (file) => `${base}/wasm/sql-wasm.wasm`
+            });
+
+            const response = await fetch(`${base}/data.sqlite`);
+            if (!response.ok) {
+                throw new Error(
+                    `Failed to fetch database: ${response.status} ${response.statusText}`
+                );
+            }
+            const buffer = await response.arrayBuffer();
+            const db = new SQL.Database(new Uint8Array(buffer));
+            if (!db) {
+                console.error('Database not initialized');
+                return null;
+            }
+
+            const stmt = db.prepare('SELECT xml FROM entries WHERE id = ?');
+            stmt.bind([wordId]);
+
+            let result = null;
+            if (stmt.step()) {
+                result = stmt.getAsObject().xml;
+            }
+            stmt.free();
+            db.close();
+
+            return result;
+        } catch (error) {
+            console.error(`Error querying XML for word ID ${wordId}:`, error);
+            return null;
+        }
+    }
+
+    function formatXmlByClass(xmlString) {
+        if (!xmlString) return '';
+
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+
+        // Check if parsing failed
+        const parseError = xmlDoc.querySelector('parsererror');
+        if (parseError) {
+            console.error('XML parsing error:', parseError.textContent);
+            return `<span class="text-error">Error parsing XML: Invalid format</span>`;
+        }
+
+        function processNode(node, parentHasSenseNumber = false) {
+            let output = '';
+
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node.nodeValue.trim() ? node.nodeValue + ' ' : '';
+            }
+
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                let className = node.getAttribute('class') || '';
+                let isSenseNumber = className.includes('sensenumber');
+
+                let parentContainsSenseNumber =
+                    parentHasSenseNumber ||
+                    [...node.parentNode.children].some(
+                        (child) =>
+                            child.getAttribute &&
+                            (child.getAttribute('class') || '').includes('sensenumber')
+                    );
+
+                if (node.tagName === 'a' && node.hasAttribute('href')) {
+                    const href = node.getAttribute('href');
+                    const match = href.match(/E-(\d+)/); // Extract index number
+                    if (match) {
+                        const index = parseInt(match[1], 10); // Extracted number as integer
+                        const wordObject = vernacularWordsList.find((item) => item.id === index);
+                        const word = wordObject ? wordObject.name : 'Unknown'; // Fallback if not found
+                        const homonymIndex = wordObject ? wordObject.homonym_index : 1; // Default to 1 if not found
+
+                        let linkText = node.textContent.trim();
+
+                        // If the text inside the link matches the homonym index, use the homonym index as the text
+                        if (linkText === String(homonymIndex)) {
+                            linkText = homonymIndex.toString();
+                        }
+
+                        output += `<span class="clickable cursor-pointer" data-word="${word}" data-index="${index}" data-homonym="${homonymIndex}">${linkText}</span>`;
+                        return output;
+                    }
+                } else {
+                    output += '<' + node.tagName;
+                    for (let attr of node.attributes) {
+                        output += ` ${attr.name}="${attr.value}"`;
+                    }
+                    output += '>';
+
+                    for (let child of node.childNodes) {
+                        output += processNode(child, parentContainsSenseNumber || isSenseNumber);
+                    }
+
+                    output += `</${node.tagName}>`;
+                }
+            }
+
+            return output;
+        }
+
+        return processNode(xmlDoc.documentElement);
+    }
+
+    async function updateXmlData() {
+        if (
+            !selectedWord ||
+            (!selectedWord.index && (!selectedWord.indexes || selectedWord.indexes.length === 0))
+        ) {
+            xmlData = '';
+            return;
+        }
+
+        let wordIds = selectedWord.indexes ? selectedWord.indexes : [selectedWord.index];
+        let xmlResults = await Promise.all(wordIds.map(queryXmlByWordId));
+
+        // Insert an `<hr>` tag or a visible separator between entries
+        xmlData =
+            xmlResults
+                .filter((xml) => xml) // Ensure no null values are included
+                .map(formatXmlByClass)
+                .join('\n<hr>\n') + '\n<hr>\n'; // `<hr>` adds a visible line between entries
+    }
+
+    function attachEventListeners() {
+        const spans = document.querySelectorAll('.clickable');
+
+        spans.forEach((span) => {
+            const oldSpan = span.cloneNode(true);
+            span.parentNode.replaceChild(oldSpan, span);
+        });
+
+        const freshSpans = document.querySelectorAll('.clickable');
+        freshSpans.forEach((span) => {
+            span.addEventListener('click', () => {
+                onSwitchLanguage(vernacularLanguage);
+                const word = span.getAttribute('data-word');
+                const index = parseInt(span.getAttribute('data-index'), 10);
+                const homonym_index = parseInt(span.getAttribute('data-homonym'), 10);
+
+                onSelectWord({
+                    word,
+                    index,
+                    homonym_index
+                });
+            });
+        });
+    }
+
+    function applyStyles() {
+        for (let stl of singleEntryStyles) {
+            for (let elm of document.querySelectorAll(stl.name)) {
+                elm.style = convertStyle(stl.properties);
+            }
+        }
+    }
+
+    onMount(updateXmlData);
+
+    afterUpdate(() => {
+        updateXmlData();
+        applyStyles();
+        attachEventListeners();
+    });
+</script>
+
+<pre class="p-4 whitespace-pre-wrap break-words min-w-[100vw]">{@html xmlData}</pre>

src/lib/components/LexiconLanguageTabs.svelte

@@ -0,0 +1,45 @@
+<script>
+    import { expoInOut } from 'svelte/easing';
+    import { fly } from 'svelte/transition';
+
+    export let reversalLanguage;
+    export let selectedLanguage;
+    export let onSwitchLanguage;
+    export let vernacularLanguage;
+</script>
+
+<div class="flex w-full" style="background-color: var(--TabBackgroundColor);">
+    <div
+        role="button"
+        tabindex="0"
+        aria-pressed={selectedLanguage === vernacularLanguage}
+        on:click={() => onSwitchLanguage(vernacularLanguage)}
+        on:keydown={(e) => e.key === 'Enter' && onSwitchLanguage(vernacularLanguage)}
+        class="py-2.5 px-3.5 text-sm uppercase text-center relative dy-tabs dy-tabs-bordered mb-1"
+    >
+        {vernacularLanguage}
+        {#if selectedLanguage === vernacularLanguage}
+            <div
+                transition:fly={{ axis: 'x', easing: expoInOut, x: 70 }}
+                class="absolute -bottom-1 left-0 w-full h-1 bg-black"
+            ></div>
+        {/if}
+    </div>
+    <div
+        role="button"
+        tabindex="0"
+        aria-pressed={selectedLanguage === reversalLanguage}
+        on:click={() => onSwitchLanguage(reversalLanguage)}
+        on:keydown={(e) => e.key === 'Enter' && onSwitchLanguage(reversalLanguage)}
+        class="py-2.5 px-3.5 text-sm uppercase text-center relative dy-tabs dy-tabs-bordered mb-1"
+    >
+        {reversalLanguage}
+        {#if selectedLanguage === reversalLanguage}
+            <div
+                transition:fly={{ axis: 'x', easing: expoInOut, x: -70 }}
+                class="absolute -bottom-1 left-0 w-full h-1 bg-black"
+            ></div>
+        {/if}
+    </div>
+    <div class="flex-1"></div>
+</div>

src/lib/components/LexiconListViewHeader.svelte

@@ -0,0 +1,35 @@
+<script>
+    import LexiconAlphabetStrip from './LexiconAlphabetStrip.svelte';
+    import LexiconLanguageTabs from './LexiconLanguageTabs.svelte';
+
+    export let alphabet = [];
+    export let selectedLanguage;
+    export let vernacularLanguage;
+    export let reversalLanguage;
+    export let selectedLetter;
+    export let onSwitchLanguage;
+    export let onLetterChange;
+
+    let currentLetter = alphabet[0];
+
+    async function handleLetterSelect(letter) {
+        currentLetter = letter;
+        onLetterChange(letter);
+    }
+
+    $: if (alphabet && alphabet.length > 0) {
+        currentLetter = alphabet[0];
+    }
+    $: if (selectedLetter !== currentLetter) {
+        currentLetter = selectedLetter;
+    }
+</script>
+
+<LexiconLanguageTabs
+    {reversalLanguage}
+    {selectedLanguage}
+    {onSwitchLanguage}
+    {vernacularLanguage}
+/>
+
+<LexiconAlphabetStrip {alphabet} activeLetter={currentLetter} onLetterSelect={handleLetterSelect} />