https://tovik.app/TovikLanguageElement.js

1import db from './TovikDb.js';
2import TovikEngine from './TovikEngine.js';
3export default class TovikLanguageElement extends HTMLElement {
4    constructor() {
5        super();
6    }
7    connectedCallback() {
8        this.getLanguages();
9    }
10    getLanguages() {
11        db.languages.toArray().then(languages => {
12            if (languages.length > 0) {
13                this.renderLanguages(languages);
14            }
15            else {
16                TovikEngine.getLanguages().then(languages => {
17                    this.renderLanguages(languages);
18                    db.languages.bulkPut(languages);
19                });
20            }
21        });
22    }
23    renderLanguages(languages) {
24        this.innerHTML = '';
25        let select = document.createElement('select');
26        select.translate = false;
27        languages.forEach(lang => {
28            const option = document.createElement('option');
29            option.value = lang.id;
30            option.textContent = lang.nativeName;
31            if (lang.id === TovikEngine.userLang) {
32                option.selected = true;
33            }
34            select.appendChild(option);
35        });
36        document.addEventListener('tovik-language-set', async (event) => {
37            // select the language if it exists in the select options
38            if (languages.some(lang => lang.id === event.detail))
39                select.value = event.detail;
40        });
41        select.addEventListener('change', () => {
42            document.dispatchEvent(new CustomEvent('tovik-user-language-changed', { detail: select.value }));
43        });
44        this.appendChild(select);
45    }
46}
47//# sourceMappingURL=TovikLanguageElement.js.map