xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/ananas. learn multiple languages at once
ananas.xcc.es
use languages not countries
author
Morgan
date
(Aug 9, 2024, 7:20 AM +0200)
commit
7761183d
7761183da6bb009ebfed05cdd9dfe685d2694632
parent
018b8737
018b87373e49df614e8002010beb2c51468e7adf
+35
-31
+35
-31
src/jibs/LanguagePicker.svelte
+35
-31
src/jibs/LanguagePicker.svelte
···
2
2
import { onMount } from 'svelte';
3
3
import { Checkbox } from '$lib/components/ui/checkbox';
4
4
import * as Collapsible from "$lib/components/ui/collapsible";
5
-
import { countries } from 'countries-list';
5
+
import { languages } from 'countries-list';
6
6
7
7
let { translate_languages = [] } = $props();
8
8
···
24
24
localStorage.setItem('translate_languages', JSON.stringify(translate_languages));
25
25
}
26
26
27
-
const availableLanguages = Object.values(countries).reduce((acc, country) => {
28
-
if (country.languages) {
29
-
country.languages.forEach(lang => {
30
-
if (!acc.has(lang)) {
31
-
acc.set(lang, country.emoji);
32
-
}
33
-
});
34
-
}
35
-
return acc;
36
-
}, new Map());
37
-
38
27
let sortedLanguages = $derived(
39
-
Array.from(availableLanguages)
40
-
.sort((a, b) => {
41
-
const nameA = new Intl.DisplayNames(['en'], { type: 'language' }).of(a[0]);
42
-
const nameB = new Intl.DisplayNames(['en'], { type: 'language' }).of(b[0]);
43
-
return nameA.localeCompare(nameB);
44
-
})
45
-
.sort((a, b) => {
46
-
const aSelected = translate_languages.includes(a[0]);
47
-
const bSelected = translate_languages.includes(b[0]);
48
-
return bSelected - aSelected;
49
-
}));
50
-
28
+
Object.entries(languages)
29
+
.sort((a, b) => a[1].name.localeCompare(b[1].name))
30
+
);
31
+
51
32
</script>
52
33
34
+
<div class="selected-languages">
35
+
<ul>
36
+
{#each translate_languages as langCode}
37
+
<li>
38
+
{new Intl.DisplayNames(['en'], { type: 'language' }).of(langCode)}
39
+
</li>
40
+
{/each}
41
+
</ul>
42
+
</div>
43
+
53
44
<Collapsible.Root>
54
45
<Collapsible.Trigger>Select Languages</Collapsible.Trigger>
55
46
<Collapsible.Content>
56
47
<div class="language-picker">
57
-
{#each sortedLanguages as [langCode, flag]}
58
-
<label class="language-item">
59
-
<Checkbox checked={translate_languages.includes(langCode)} onCheckedChange={(checked)=>
60
-
handleLanguageToggle(langCode, checked)}
48
+
{#each sortedLanguages as [langCode, langInfo]}
49
+
<label class="language-item">
50
+
<Checkbox
51
+
checked={translate_languages.includes(langCode)}
52
+
onCheckedChange={(checked) => handleLanguageToggle(langCode, checked)}
61
53
/>
62
-
<span class="flag">{flag}</span>
63
-
<span class="lang-name">{new Intl.DisplayNames(['en'], { type: 'language' }).of(langCode)}</span>
64
-
</label>
54
+
<span class="lang-name">{langInfo.name} ({langInfo.native})</span>
55
+
</label>
65
56
{/each}
66
57
</div>
67
58
</Collapsible.Content>
···
88
79
89
80
.lang-name {
90
81
font-size: 0.9em;
82
+
}
83
+
84
+
.selected-languages {
85
+
margin-bottom: 20px;
86
+
}
87
+
88
+
.selected-languages ul {
89
+
list-style-type: none;
90
+
padding: 0;
91
+
}
92
+
93
+
.selected-languages li {
94
+
margin-bottom: 5px;
91
95
}
92
96
</style>