rvtr/wiki
1
Fork 0
mirror of https://github.com/rvtr/wiki.git synced 2025-10-31 06:31:13 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Some language alert improvements

Browse Source 
- Get language and rtl lists from liquid so that there's only one place to update
- Don't show the popup if the current language is a fallback
- Use the lang property on the element to ensure the correct character forms and such
- Use the dir property instead of CSS
This commit is contained in:
Pk11 2021-03-08 03:32:16 -06:00
parent 3131f2fc0a
commit 28d311bdb2
2 changed files with 50 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/style.scss
View File

@ -382,14 +382,6 @@ kbd.face {
padding-bottom: 0.25rem;
}
.direction-ltr {
direction: ltr;
}
.direction-rtl {
direction: rtl;
}
// Details
:not(li) > details {
margin-bottom: 1rem;

74
assets/js/language-alert.js
View File

@ -1,31 +1,57 @@
const languages = ["da-DK", "de-DE", "en-US", "es-ES", "fr-FR", "hu-HU", "he-IL", "ic-IC", "it-IT", "ja-JP", "ko-KR", "no-NO", "pl-PL", "pt-PT", "ru-RU", "sv-SE", "tr-TR", "uk-UA", "zh-CN", "zh-TW"];
const rtl = ["he-IL"];
let languageID = document.documentElement.lang == "ic-IC" ? document.documentElement.lang : `${window.navigator.language.substr(0, 2)}-${window.navigator.language.substr(3, 3).toUpperCase()}`;
if(!languages.includes(languageID)) {
languageID = languages.filter(r => r.includes(languageID))?.[0];
}
---
---
if(languageID && !sessionStorage?.languageAlertDismissed) {
for(let language of document.getElementById("language-dropdown").children) {
if((language.children[0].dataset.languageId == languageID && !language.children[0].classList.contains("active")) || languageID == "ic-IC") {
let languageAlert = document.getElementById("language-alert");
languageAlert.classList.remove("d-none");
languageAlert.classList.add(rtl.includes(languageID) ? "direction-rtl" : "direction-ltr");
let a = document.createElement("a");
a.href = `${languageID == "en-US" ? "" : ("/" + languageID)}${window.location.pathname.replace(/[a-z][a-z]-[A-Z][A-Z]\//, "")}`;
languageAlert.prepend(a);
if(!sessionStorage.languageAlertDismissed) {
// Have liquid insert the language info
const languages = [{% for collection in site.collections %}"{{ collection.label }}"{% unless forloop.last %}, {% endunless %}{% endfor %}];
const rtl = [{% for lang in site.data.rtl %}"{{ lang }}"{% unless forloop.last %}, {% endunless %}{% endfor %}];
import(`./i18n/${languageID}.js`).then(obj => {
a.innerHTML = obj.default.pageIsInYourLanguage;
}).catch(() => a.innerHTML = "This page is available in your language!");
// Find which language the popup should be for, if any
let languageID = null;
// Crowdin In-Context, keep as is
if(document.documentElement.lang == "ic-IC"){
languageID = "ic-IC";
// If the current language isn't in the browser's allowed languages, show the popup for the first language that has a page
} else if(!window.navigator.languages.find(r => document.documentElement.lang.toLowerCase().includes(r.toLowerCase()))) {
for(let wl of window.navigator.languages) {
let l = languages.find(r => r.substr(0, 2) == wl.substr(0, 2));
if(l) {
languageID = `${l.substr(0, 2)}-${l.substr(3, 3).toUpperCase()}`;
break;
}
}
}
// Save dismissal to session storage on close
languageAlert.addEventListener("closed.bs.alert", () => {
if(sessionStorage)
sessionStorage.languageAlertDismissed = true;
});
break;
// If a language was found, show the popup
if(languageID) {
for(let language of document.getElementById("language-dropdown").children) {
if(language.children[0].dataset.languageId == languageID) {
// Unhide language alert and set text direction
let languageAlert = document.getElementById("language-alert");
languageAlert.classList.remove("d-none");
languageAlert.dir = rtl.includes(languageID) ? "rtl" : "ltr";
// Create link to make in the preferred language
let a = document.createElement("a");
a.href = `${languageID == "en-US" ? "" : ("/" + languageID)}${window.location.pathname.replace(/[a-z][a-z]-[A-Z][A-Z]\//, "")}`;
languageAlert.prepend(a);
// Set text from language file if it exists
import(`./i18n/${languageID}.js`).then(obj => {
a.innerHTML = obj.default.pageIsInYourLanguage;
}).catch(() => a.innerHTML = "This page is available in your language!");
// Set lang of the element so the correct forms of characters are used (mainly for Chinese characters)
languageAlert.lang = languageID;
// Save dismissal to session storage on close
languageAlert.addEventListener("closed.bs.alert", () => {
if(sessionStorage)
sessionStorage.languageAlertDismissed = true;
});
break;
}
}
}
}