appbuilder-pwa/src/lib/components/IconCard.svelte at 9fd34bb2de1e707d0a38e4cc1c39f3cf1ac872d7 · sillsdev/appbuilder-pwa · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!--
@component
A card for annotations in the notes and bookmarks pages.
TODO:
- handle the book and collection specific styles
-->
<script lang="ts">
    import { base } from '$app/paths';
    import config, { scriptureConfig } from '$assets/config';
    import { direction, refs } from '$lib/data/stores';
    import CardMenu from './CardMenu.svelte';

    let {
        docSet = '',
        collection = '',
        book = '',
        chapter = '',
        verse = '',
        reference = '',
        text = '',
        date = '',
        actions = [''],
        src = '',
        alt = '',
        icon,
        menuaction,
        href = `${base}/#/text`
    } = $props();

    const bc = scriptureConfig.bookCollections?.find((x) => x.id === collection);
    const textDirection = bc?.style?.textDirection;
    const justifyEnd = $derived(textDirection?.toLowerCase() === 'rtl' && $direction === 'ltr');
</script>

<div class="annotation-item-block dy-card">
    <div class="icon-card">
        <div class="self-center">
            {#if src !== '' && alt !== ''}
                <span><img {src} {alt} /></span>
            {:else}
                {@render icon()}
            {/if}
        </div>
        <div
            class="annotation-item-reference justify-self-start self-center"
            class:justify-self-end={justifyEnd}
        >
            <a
                style="text-decoration:none;"
                {href}
                onclick={() => refs.set({ docSet, book, chapter, verse })}
            >
                {reference}
            </a>
        </div>
        <div class="self-center justify-self-end"><CardMenu {menuaction} {actions} /></div>

        <div
            class="annotation-item-text col-start-2 col-end-3 justify-self-start"
            class:justify-self-end={justifyEnd}
        >
            <a
                style="text-decoration:none;"
                {href}
                onclick={() => refs.set({ docSet, book, chapter, verse })}
            >
                {text}
            </a>
        </div>

        <div class="annotation-item-date col-span-3 justify-self-end">{date}</div>
    </div>
</div>

<style>
    .icon-card {
        display: grid;
        gap: 0.25rem;
        grid-auto-columns: 2rem auto 2rem;
        grid-column: 3;
        grid-row: 2;
        margin-inline-start: 0.5rem;
        margin-inline-end: 0.5rem;
    }
</style>