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/AlphabetStrip.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/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/LexiconReversalListView.svelte

@@ -0,0 +1,32 @@
+<script>
+    export let reversalWordsList;
+    export let onSelectWord;
+</script>
+
+<ul class="space-y-3 px-4 pb-4">
+    {#each reversalWordsList as { word, indexes, vernacularWords, letter }}
+        <li class="cursor-pointer text-lg mb-3" id="letter-{letter}">
+            <button
+                type="button"
+                class="w-full text-left py-1"
+                aria-label={`Select word ${word}`}
+                on:click={() => onSelectWord({ word, indexes })}
+                on:keydown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        onSelectWord({ word, indexes });
+                        event.preventDefault();
+                    }
+                }}
+            >
+                <p class="font-bold break-words">{word}</p>
+                <p class="text-md ml-4">
+                    {#each vernacularWords as { name, homonymIndex }, i}
+                        {#if i > 0},
+                        {/if}
+                        {name}{#if homonymIndex > 0}<sub>{homonymIndex}</sub>{/if}
+                    {/each}
+                </p>
+            </button>
+        </li>
+    {/each}
+</ul>

src/lib/components/LexiconReversalView.svelte

@@ -0,0 +1,35 @@
+<script>
+    import AlphabetStrip from './AlphabetStrip.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}
+/>
+
+<AlphabetStrip {alphabet} activeLetter={currentLetter} onLetterSelect={handleLetterSelect} />

src/lib/components/LexiconVernacularListView.svelte

@@ -0,0 +1,34 @@
+<script>
+    export let vernacularWordsList;
+    export let onSelectWord;
+</script>
+
+<ul class="space-y-3 px-4 pb-4">
+    {#each vernacularWordsList as { id, name, homonym_index, type, num_senses, summary, letter }}
+        <li class="cursor-pointer text-lg mb-3 scroll-mt-16" id="letter-{letter}">
+            <button
+                type="button"
+                class="w-full text-left py-1"
+                aria-label={`Select word ${name}`}
+                on:click={() => onSelectWord({ word: name, index: id })}
+                on:keydown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        onSelectWord({ word: name, index: id });
+                        event.preventDefault();
+                    }
+                }}
+            >
+                <p class="font-bold break-words">
+                    {name}{#if homonym_index > 0}<sub>{homonym_index}</sub>{/if}
+                </p>
+                {#if summary}
+                    <p class="ml-4 italic">
+                        {#each summary.match(/{(.*?)}/g) || [] as match}
+                            {match.replace(/[{}]/g, '')}
+                        {/each}
+                    </p>
+                {/if}
+            </button>
+        </li>
+    {/each}
+</ul>