tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-23 13:45:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Smarter language auto-detection

Browse Source
This commit is contained in:
Alicia Sykes 2021-09-11 01:14:23 +01:00
parent e7fb8e2d01
commit 15b38cc6ac
1 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/App.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div id="dashy"> <div id="dashy">
<LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash()" /> <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
<Header :pageInfo="pageInfo" /> <Header :pageInfo="pageInfo" />
<router-view /> <router-view />
<Footer :text="getFooterText()" v-if="visibleComponents.footer" /> <Footer :text="footerText" v-if="visibleComponents.footer" />
</div> </div>
</template> </template>
<script> <script>
@ -14,6 +14,7 @@ import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
import { componentVisibility } from '@/utils/ConfigHelpers'; import { componentVisibility } from '@/utils/ConfigHelpers';
import ConfigAccumulator from '@/utils/ConfigAccumalator'; import ConfigAccumulator from '@/utils/ConfigAccumalator';
import { welcomeMsg } from '@/utils/CoolConsole'; import { welcomeMsg } from '@/utils/CoolConsole';
import ErrorHandler from '@/utils/ErrorHandler';
import { import {
localStorageKeys, localStorageKeys,
splashScreenTime, splashScreenTime,
@ -45,53 +46,64 @@ export default {
visibleComponents, visibleComponents,
}; };
}, },
methods: { computed: {
/* If the user has specified custom text for footer - get it */ /* If the user has specified custom text for footer - get it */
getFooterText() { footerText() {
if (this.pageInfo && this.pageInfo.footerText) { return this.pageInfo && this.pageInfo.footerText ? this.pageInfo.footerText : '';
return this.pageInfo.footerText;
}
return '';
},
/* Injects the users custom CSS as a style tag */
injectCustomStyles(usersCss) {
const style = document.createElement('style');
style.textContent = usersCss;
document.head.append(style);
}, },
/* Determine if splash screen should be shown */ /* Determine if splash screen should be shown */
shouldShowSplash() { shouldShowSplash() {
return (this.visibleComponents || defaultVisibleComponents).splashScreen return (this.visibleComponents || defaultVisibleComponents).splashScreen
|| !localStorage[localStorageKeys.HIDE_WELCOME_BANNER]; || !localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
}, },
},
methods: {
/* Injects the users custom CSS as a style tag */
injectCustomStyles(usersCss) {
const style = document.createElement('style');
style.textContent = usersCss;
document.head.append(style);
},
/* Hide splash screen, either after 2 seconds, or immediately based on user preference */ /* Hide splash screen, either after 2 seconds, or immediately based on user preference */
hideSplash() { hideSplash() {
if (this.shouldShowSplash()) { if (this.shouldShowSplash) {
setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1500); setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1500);
} else { } else {
this.isLoading = false; this.isLoading = false;
} }
}, },
/* Checks local storage, then appConfig, and if a custom language is specified, its applied */
applyLanguage() {
let language = defaultLanguage; // Language to apply
const availibleLocales = this.$i18n.availableLocales; // All available locales
// If user has specified a language, locally or in config, then check and apply it /* Auto-detects users language from browser/ os, when not specified */
const usersLang = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language; autoDetectLanguage(availibleLocales) {
if (usersLang && availibleLocales.includes(usersLang)) { const isLangSupported = (languageList, userLang) => languageList
language = usersLang; .map(lang => lang.toLowerCase()).find((lang) => lang === userLang.toLowerCase());
} else {
// Otherwise, attempt to apply language automatically, based on their system language
const usersBorwserLang1 = window.navigator.language || ''; // e.g. en-GB or or '' const usersBorwserLang1 = window.navigator.language || ''; // e.g. en-GB or or ''
const usersBorwserLang2 = usersBorwserLang1.split('-')[0]; // e.g. en or undefined const usersBorwserLang2 = usersBorwserLang1.split('-')[0]; // e.g. en or undefined
if (availibleLocales.includes(usersBorwserLang1)) { const usersSpairLangs = window.navigator.languages; // e.g [en, en-GB, en-US]
language = usersBorwserLang1; return isLangSupported(availibleLocales, usersBorwserLang1)
} else if (availibleLocales.includes(usersBorwserLang2)) { || isLangSupported(availibleLocales, usersBorwserLang2)
language = usersBorwserLang2; || usersSpairLangs.find((spair) => isLangSupported(availibleLocales, spair))
|| defaultLanguage;
},
/* Get users language, if not available then call auto-detect */
getLanguage() {
const availibleLocales = this.$i18n.availableLocales; // All available locales
const usersLang = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language;
if (usersLang) {
if (availibleLocales.includes(usersLang)) {
return usersLang;
} else {
ErrorHandler(`Unsupported Language: '${usersLang}'`);
} }
} }
// Apply Language return this.autoDetectLanguage(availibleLocales);
},
/* Fetch or detect users language, then apply it */
applyLanguage() {
const language = this.getLanguage();
this.$i18n.locale = language; this.$i18n.locale = language;
document.getElementsByTagName('html')[0].setAttribute('lang', language); document.getElementsByTagName('html')[0].setAttribute('lang', language);
}, },