Allow to pick language unlogged and format fallback messages

Closes #479

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-11-30 17:57:08 +01:00
parent 2141f92a30
commit 005fb90556
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 52 additions and 4 deletions

View file

@ -2,6 +2,17 @@
<footer class="footer" ref="footer">
<img :src="`/img/pics/footer_${random}.jpg`" alt="" />
<ul>
<li>
<b-select
v-if="$i18n"
v-model="locale"
:placeholder="$t('Select a language')"
>
<option v-for="(language, lang) in langs" :value="lang" :key="lang">
{{ language }}
</option>
</b-select>
</li>
<li>
<router-link :to="{ name: RouteName.ABOUT }">{{
$t("About")
@ -38,17 +49,40 @@
</footer>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Vue, Watch } from "vue-property-decorator";
import { saveLocaleData } from "@/utils/auth";
import { loadLanguageAsync } from "@/utils/i18n";
import RouteName from "../router/name";
import langs from "../i18n/langs.json";
@Component
export default class Footer extends Vue {
RouteName = RouteName;
locale: string | null = this.$i18n.locale;
langs: Record<string, string> = langs;
// eslint-disable-next-line class-methods-use-this
get random(): number {
return Math.floor(Math.random() * 4) + 1;
}
@Watch("locale")
// eslint-disable-next-line class-methods-use-this
async updateLocale(locale: string): Promise<void> {
if (locale) {
await loadLanguageAsync(locale);
saveLocaleData(locale);
}
}
@Watch("$i18n.locale", { deep: true })
updateLocaleFromI18n(locale: string): void {
if (locale) {
this.locale = locale;
}
}
}
</script>
<style lang="scss" scoped>
@ -92,5 +126,10 @@ footer.footer {
text-decoration: underline;
text-decoration-color: $secondary;
}
::v-deep span.select select {
background: $background-color;
color: $white;
}
}
</style>

View file

@ -32,6 +32,10 @@ export function saveLocaleData(locale: string): void {
localStorage.setItem(USER_LOCALE, locale);
}
export function getLocaleData(): string | null {
return localStorage.getItem(USER_LOCALE);
}
export function saveActorData(obj: IPerson): void {
localStorage.setItem(AUTH_USER_ACTOR_ID, `${obj.id}`);
}

View file

@ -1,26 +1,30 @@
import Vue from "vue";
import VueI18n from "vue-i18n";
import { DateFnsPlugin } from "@/plugins/dateFns";
import { USER_LOCALE } from "@/constants";
import en from "../i18n/en_US.json";
import langs from "../i18n/langs.json";
import { getLocaleData } from "./auth";
const DEFAULT_LOCALE = "en_US";
let language =
localStorage.getItem(USER_LOCALE) ||
(document.documentElement.getAttribute("lang") as string);
getLocaleData() || (document.documentElement.getAttribute("lang") as string);
console.log("lang1", language);
language =
language ||
((window.navigator as any).userLanguage || window.navigator.language).replace(
/-/,
"_"
);
console.log("language2", language);
export const locale =
language && Object.prototype.hasOwnProperty.call(langs, language)
? language
: language.split("-")[0];
console.log("lang3", locale);
Vue.use(VueI18n);
export const i18n = new VueI18n({
@ -29,6 +33,7 @@ export const i18n = new VueI18n({
// @ts-ignore
messages: en, // set locale messages
fallbackLocale: DEFAULT_LOCALE,
formatFallbackMessages: true,
});
const loadedLanguages = [DEFAULT_LOCALE];