Add font selection (#397)

* Add font store based on current col/book
* Set font based on first available font if not in choices
* Show font choices in Text Appearance
* Add FontSelector

scripts/convertConfig.ts

@@ -32,6 +32,7 @@ type BookCollection = {
         section: string; // Pentateuch
         chapters: number;
         chaptersN: string; // 1-34
+        fonts: string[];
         file: string;
         audio: BookCollectionAudio[];
         styles?: {
@@ -50,6 +51,7 @@ type BookCollection = {
         numeralSystem: string;
         verseNumbers: string;
     };
+    fonts: string[];
     languageCode: string;
     languageName?: string;
     footer?: HTML; //
@@ -441,13 +443,20 @@ function convertConfig(dataDir: string, verbose: number) {
             }
             const bkStyles = book.querySelector('styles');
             const styles = bkStyles ? parseStyles(bkStyles, verbose) : undefined;
+            const fontChoiceTag = book.querySelector('font-choice');
+            const fonts = fontChoiceTag
+                ? Array.from(fontChoiceTag.getElementsByTagName('font-choice-family')).map(
+                      (x) => x.innerHTML
+                  )
+                : [];
 
             books.push({
                 chapters: parseInt(
                     book.getElementsByTagName('ct')[0].attributes.getNamedItem('c')!.value
                 ),
                 chaptersN: book.getElementsByTagName('cn')[0].attributes.getNamedItem('value')!
                     .value,
+                fonts,
                 id: book.attributes.getNamedItem('id')!.value,
                 type: book.attributes.getNamedItem('type')?.value,
                 name: book.getElementsByTagName('n')[0]?.innerHTML,
@@ -465,12 +474,16 @@ function convertConfig(dataDir: string, verbose: number) {
             ? collectionNameTags[0].innerHTML
             : undefined;
         if (verbose >= 2) console.log(`.. collectionName: `, collectionName);
-        data.traits['has-glossary'] =
-            data.bookCollections.filter(
-                (bc) => bc.books.filter((b) => b.type === 'glossary').length > 0
-            ).length > 0;
         const stylesTag = tag.getElementsByTagName('styles-info')[0];
         if (verbose >= 3) console.log(`.... styles: `, JSON.stringify(stylesTag));
+        const fontChoiceTag = tag.getElementsByTagName('font-choice')[0];
+        if (verbose >= 3) console.log(`.... fontChoice: `, JSON.stringify(fontChoiceTag));
+        const fonts = fontChoiceTag
+            ? Array.from(fontChoiceTag.getElementsByTagName('font-choice-family')).map(
+                  (x) => x.innerHTML
+              )
+            : [];
+
         const writingSystem = tag.getElementsByTagName('writing-system')[0];
         if (verbose >= 3) console.log(`.... writingSystem: `, JSON.stringify(writingSystem));
         if (!writingSystem) {
@@ -509,6 +522,7 @@ function convertConfig(dataDir: string, verbose: number) {
             collectionDescription,
             features,
             books,
+            fonts,
             languageCode,
             languageName,
             footer,
@@ -539,6 +553,11 @@ function convertConfig(dataDir: string, verbose: number) {
         });
         if (verbose >= 3) console.log(`.... collection: `, JSON.stringify(data.bookCollections[0]));
     }
+    // After all the book collections have been parsed, we can determine some traits
+    data.traits['has-glossary'] =
+        data.bookCollections.filter(
+            (bc) => bc.books.filter((b) => b.type === 'glossary').length > 0
+        ).length > 0;
     if (verbose)
         console.log(
             `Converted ${data.bookCollections.length} book collections with [${data.bookCollections

src/lib/components/FontSelector.svelte

@@ -0,0 +1,68 @@
+<!--
+@component
+Font Selector component.
+-->
+<script>
+    import Modal from './Modal.svelte';
+    import config from '$lib/data/config';
+    import {
+        convertStyle,
+        currentFont,
+        fontChoices,
+        monoIconColor,
+        s,
+        t,
+        themeColors
+    } from '$lib/data/stores';
+
+    const modalId = 'fontSelector';
+    let modal;
+    let selectedFont;
+
+    export function showModal() {
+        selectedFont = $currentFont;
+        modal.showModal();
+    }
+    function handleClick(font) {
+        selectedFont = font;
+    }
+    function handleOk() {
+        $currentFont = selectedFont;
+    }
+</script>
+
+<Modal bind:this={modal} id={modalId} useLabel={false}>
+    <svelte:fragment slot="content">
+        <ul class="dy-menu">
+            {#each $fontChoices as font}
+                <!-- svelte-ignore a11y-missing-attribute -->
+                <li style:font-family={font} style:font-size="large">
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <a
+                        on:click={() => handleClick(font)}
+                        style:background-color={font === selectedFont
+                            ? $themeColors['ButtonSelectedColor']
+                            : ''}
+                        style:color={$monoIconColor}
+                        style:font-famly={font}
+                    >
+                        {config.fonts.find((x) => x.family === font).name}
+                    </a>
+                </li>
+            {/each}
+        </ul>
+        <div class="flex w-full justify-between dy-modal-action">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <button
+                style={convertStyle($s['ui.dialog.button'])}
+                class="dy-btn dy-btn-sm dy-btn-ghost no-animation">{$t['Button_Cancel']}</button
+            >
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <button
+                style={convertStyle($s['ui.dialog.button'])}
+                class="dy-btn dy-btn-sm dy-btn-ghost no-animation"
+                on:click={() => handleOk()}>{$t['Button_OK']}</button
+            >
+        </div>
+    </svelte:fragment>
+</Modal>

src/lib/components/ScriptureViewSofria.svelte

@@ -35,6 +35,7 @@ TODO:
     export let selectedVerses: any;
     export let verseLayout: any;
     export let viewShowVerses: boolean;
+    export let font: string;
     export let proskomma: Proskomma;
 
     let container: HTMLElement;
@@ -1303,6 +1304,7 @@ TODO:
         id="content"
         bind:this={bookRoot}
         class:hidden={loading}
+        style:font-family={font}
         style:font-size={fontSize}
         style:line-height={lineHeight}
         class="single"

src/lib/components/TextAppearanceSelector.svelte

@@ -8,22 +8,25 @@ The navbar component. We have sliders that update reactively to both font size a
     import Slider from './Slider.svelte';
     import { TextAppearanceIcon, ImageIcon } from '$lib/icons';
     import {
+        bodyFontSize,
+        bodyLineHeight,
+        currentFont,
+        fontChoices,
         language,
         languages,
-        theme,
+        modal,
         monoIconColor,
+        theme,
+        themeColors,
         themes,
-        bodyFontSize,
-        bodyLineHeight,
-        direction,
-        themeColors
+        MODAL_FONT
     } from '$lib/data/stores';
     import config from '$lib/data/config';
 
     let modalId = 'textAppearanceSelector';
-    let modal;
+    let modalThis;
     export function showModal() {
-        modal.showModal();
+        modalThis.showModal();
     }
 
     export let vertOffset = '1rem'; //Prop that will have the navbar's height (in rem) passed in
@@ -34,11 +37,13 @@ The navbar component. We have sliders that update reactively to both font size a
         'rem; inset-inline-end:1rem;';
     $: barColor = $themeColors['SliderBarColor'];
     $: progressColor = $themeColors['SliderProgressColor'];
+    $: showFonts = $fontChoices.length > 1;
 
     const showFontSize = config.mainFeatures['text-font-size-slider'];
     const showLineHeight = config.mainFeatures['text-line-height-slider'];
     const showThemes = themes.length > 1;
-    const showTextAppearence = showFontSize || showLineHeight || showThemes;
+
+    $: showTextAppearence = showFontSize || showLineHeight || showThemes || showFonts;
 
     // TEMP: Use TextAppearance button to rotate through languages to test i18n
     const arrayRotate = (arr) => {
@@ -94,7 +99,7 @@ The navbar component. We have sliders that update reactively to both font size a
 
 <!-- TextAppearanceSelector -->
 {#if showTextAppearence}
-    <Modal bind:this={modal} id={modalId} useLabel={false} addCSS={positioningCSS}
+    <Modal bind:this={modalThis} id={modalId} useLabel={false} addCSS={positioningCSS}
         ><!--addCSS is a prop for injecting CSS into the modal-->
         <svelte:fragment slot="content">
             <div class="grid gap-4">
@@ -129,6 +134,20 @@ The navbar component. We have sliders that update reactively to both font size a
                         </div>
                     </div>
                 {/if}
+                {#if showFonts}
+                    <div class="grid gap-4 items-center range-row m-2">
+                        <ImageIcon.FontChoice color={$monoIconColor} size="1.5rem" />
+                        <button
+                            class="dy-btn-sm col-span-2 rounded"
+                            style:border="1px dotted"
+                            style:font-family={$currentFont}
+                            style:font-size="large"
+                            style:color={$monoIconColor}
+                            on:click={() => modal.open(MODAL_FONT)}
+                            >{config.fonts.find((x) => x.family === $currentFont).name}</button
+                        >
+                    </div>
+                {/if}
                 <!-- Theme Selction buttons-->
                 {#if showThemes}
                     <div

src/lib/data/stores/scripture.js

@@ -1,5 +1,5 @@
 import { referenceStore } from './store-types';
-import { writable, get } from 'svelte/store';
+import { writable, get, derived } from 'svelte/store';
 import { setDefaultStorage } from './storage';
 import { pk } from './pk';
 import config from '../config';
@@ -109,6 +109,24 @@ export async function getVerseText(item) {
     return block.text;
 }
 
+export const currentFont = writable(config.fonts[0].family);
+export const fontChoices = derived(refs, ($refs) => {
+    const bookFonts = config.bookCollections
+        .find((x) => x.id === $refs.collection)
+        .books.find((x) => x.id === $refs.book).fonts;
+    const colFonts = config.bookCollections.find((x) => x.id === $refs.collection).fonts;
+    const allFonts = [...new Set(config.fonts.map((x) => x.family))];
+    const currentFonts =
+        bookFonts.length > 0 ? bookFonts : colFonts.length > 0 ? colFonts : allFonts;
+    currentFont.update((current) => {
+        if (currentFonts.indexOf(current) === -1) {
+            return currentFonts[0];
+        }
+        return current;
+    });
+    return currentFonts;
+});
+
 function createSelectedVerses() {
     const external = writable([]);
 

src/lib/data/stores/view.js

@@ -23,6 +23,7 @@ export const layout = writable(singleLayout);
 export const MODAL_COLLECTION = 'collection';
 export const MODAL_NOTE = 'note';
 export const MODAL_TEXT_APPERANCE = 'text-appearance';
+export const MODAL_FONT = 'font';
 
 function createModal() {
     const { subscribe, set } = writable([]);

src/routes/+layout.svelte

@@ -9,13 +9,15 @@
         MODAL_COLLECTION,
         MODAL_NOTE,
         MODAL_TEXT_APPERANCE,
-        NAVBAR_HEIGHT
+        NAVBAR_HEIGHT,
+        MODAL_FONT
     } from '$lib/data/stores';
     import { base } from '$app/paths';
     import '$lib/app.css';
     import TextAppearanceSelector from '$lib/components/TextAppearanceSelector.svelte';
     import CollectionSelector from '$lib/components/CollectionSelector.svelte';
     import NoteDialog from '$lib/components/NoteDialog.svelte';
+    import FontSelector from '$lib/components/FontSelector.svelte';
 
     $: $modal, showModal();
 
@@ -33,6 +35,9 @@
                     case MODAL_TEXT_APPERANCE:
                         textAppearanceSelector.showModal();
                         break;
+                    case MODAL_FONT:
+                        fontSelector.showModal();
+                        break;
                 }
             });
             modal.clear();
@@ -41,6 +46,7 @@
 
     let textAppearanceSelector;
     let collectionSelector;
+    let fontSelector;
     let noteDialog;
 </script>
 
@@ -62,6 +68,8 @@
 
     <!-- Collection Selector Menu -->
     <CollectionSelector bind:this={collectionSelector} vertOffset={NAVBAR_HEIGHT} />
+
+    <FontSelector bind:this={fontSelector} />
 </div>
 
 <Sidebar on:showModal={showModal}>

src/routes/+page.svelte

@@ -10,9 +10,11 @@
         bodyLineHeight,
         bookmarks,
         convertStyle,
+        currentFont,
         direction,
         firstLaunch,
         footnotes,
+        fontChoices,
         highlights,
         mainScroll,
         audioHighlightElements,
@@ -141,6 +143,7 @@
         selectedVerses: selectedVerses,
         verseLayout: $userSettings['verse-layout'],
         viewShowVerses: $userSettings['verse-numbers'],
+        font: $currentFont,
         proskomma: $page.data?.proskomma
     };