appbuilder-pwa/src/lib/components/BottomNavigationBar.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!--
@component
-->
<script>
    import { base } from '$app/paths';
    import config from '$assets/config';
    import contents from '$lib/data/contents';
    import { language, languageDefault, refs, s, theme } from '$lib/data/stores';
    import { gotoRoute } from '$lib/navigate';

    const menuIcons = import.meta.glob('./*', {
        import: 'default',
        eager: true,
        query: '?url',
        base: '/src/gen-assets/icons/menu-items'
    });

    let { barType = undefined } = $props();

    const bottomNavBarItems = config?.bottomNavBarItems;

    const barBackgroundColor = $derived($s['ui.bottom-navigation.']['background-color']);
    const barTextColor = $derived($s['ui.bottom-navigation.item.text']['color']);
    const barTextSelectedColor = $derived($s['ui.bottom-navigation.item.text.selected']['color']);

    const showContents = contents.screens?.length > 0;
    const showSearch = config.mainFeatures['search'];
    const showPlans = config.plans?.plans.length > 0;

    function showButton(buttonType) {
        let value = true;
        switch (buttonType) {
            case 'contents':
                value = showContents;
                break;
            case 'plans':
                value = showPlans;
                break;
            case 'search':
                value = showSearch;
                break;
            default:
                value = true;
        }
        return value;
    }
    function selectedLink(buttonType, link) {
        let value = buttonType === barType;
        if (buttonType === 'book') {
            // Don't highlight link for specific book
            if (link && link !== '') {
                value = false;
            }
        }
        return value;
    }
    function gridColumns() {
        let value = 'grid-cols-5';
        if (bottomNavBarItems) {
            switch (bottomNavBarItems.length) {
                case 2:
                    value = 'grid-cols-2';
                    break;
                case 3:
                    value = 'grid-cols-3';
                    break;
                case 4:
                    value = 'grid-cols-4';
                    break;
                default:
                    value = 'grid-cols-5';
            }
        }
        return value;
    }
    function handleClick(buttonType, link) {
        switch (buttonType) {
            case 'contents': {
                let gotoLink = link && link !== '' ? link : '1';
                gotoRoute(`/contents/${gotoLink}`);
                break;
            }
            case 'about':
                gotoRoute(`/about`);
                break;
            case 'book':
                if (link && link !== '') {
                    const [bc, book] = link.split('|');
                    const refBc = config.bookCollections.find((x) => x.id === bc);
                    let refDocSet = '';
                    if (refBc) {
                        refDocSet = refBc.languageCode + '_' + refBc.id;
                    } else {
                        // Invalid collection
                        return;
                    }
                    refs.set({
                        docSet: refDocSet,
                        book: book,
                        chapter: '1',
                        verse: '1'
                    });
                }
                gotoRoute(`/text`);
                break;
            case 'plans':
                gotoRoute(`/plans`);
                break;
            case 'search':
                gotoRoute(`/search/${$refs.collection}`);
                break;
            case 'settings':
                gotoRoute(`/settings`);
                break;
            default:
                console.log(
                    'BottomNavigation Bar: Unknown NavBar button type pressed: ',
                    buttonType
                );
                break;
        }
    }
</script>

<div class="h-16" style:background-color={barBackgroundColor}>
    <div class="mx-auto max-w-screen-md">
        <div class="grid {gridColumns()} justify-items-center">
            <!-- Controls -->
            {#if bottomNavBarItems}
                {#each bottomNavBarItems as item}
                    {#if showButton(item.type)}
                        <button
                            class="dy-btn dy-btn-ghost flex-col gap-1 my-2"
                            onclick={() => handleClick(item.type, item.link['default'])}
                        >
                            <picture class:invert={$theme === 'Dark'}>
                                <!-- Image Icon -->
                                <img
                                    src={menuIcons[`./${item.images[0].file}`]}
                                    alt=""
                                    class={selectedLink(item.type, item.link['default'])
                                        ? 'opacity-100'
                                        : 'opacity-50'}
                                />
                            </picture>
                            <!-- Text -->
                            <span
                                class="text-center"
                                style="color: {selectedLink(item.type, item.link['default'])
                                    ? barTextSelectedColor
                                    : barTextColor}"
                            >
                                {item.title[$language] || item.title[languageDefault]}
                            </span>
                        </button>
                    {/if}
                {/each}
            {/if}
        </div>
    </div>
</div>