diff --git a/_sass/base.scss b/_sass/base.scss
index 99e1ebcb..5d5776f6 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -541,8 +541,8 @@ a.footnote::after {
.tab-link {
border: 1px solid $borders;
+ border-bottom-width: 0;
padding: 0.5rem 1rem;
- margin-bottom: -1px;
transition: 150ms ease;
}
.tab-link:not(:first-of-type) {
diff --git a/assets/js/language-alert.js b/assets/js/language-alert.js
index 3603ad0a..4f230b8a 100644
--- a/assets/js/language-alert.js
+++ b/assets/js/language-alert.js
@@ -1,22 +1,28 @@
---
---
+// 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 %}];
+
+let languageID = null;
+
+function updateLanguageAlert() {
+ if(languageID)
+ document.getElementById("language-alert-link").href = (languageID == "en-US" ? "" : ("/" + languageID)) + window.location.pathname.replace(/[a-z]{2}-[A-Z]{2}\//, "") + (window.location.search ?? "") + (window.location.hash ?? "");
+}
+
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 %}];
-
// 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"){
+ 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()}`;
+ } else if(!window.navigator.languages.find(function(lang) { return document.documentElement.lang.toLowerCase().includes(lang.toLowerCase()); })) {
+ for(let windowLang of window.navigator.languages) {
+ let lang = languages.find(lang => lang.substr(0, 2) == windowLang.substr(0, 2));
+ if(lang) {
+ languageID = lang.substr(0, 2) + "-" + lang.substr(3, 3).toUpperCase();
break;
}
}
@@ -27,21 +33,10 @@ if(!sessionStorage.languageAlertDismissed) {
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");
+ const 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]\//, "")}`;
- a.accessKey = "l";
- 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;
@@ -50,8 +45,21 @@ if(!sessionStorage.languageAlertDismissed) {
if(sessionStorage)
sessionStorage.languageAlertDismissed = true;
});
+
+ const langAlertLink = document.getElementById("language-alert-link");
+
+ // Set text from language file if it exists
+ import(`./i18n/${languageID}.js`).then(function(obj) {
+ langAlertLink.innerHTML = obj.default.pageIsInYourLanguage;
+ }).catch(function() {
+ langAlertLink.innerHTML = "This page is available in your language!";
+ });
+
+ updateLanguageAlert();
break;
}
}
}
}
+
+window.addEventListener("hashchange", updateLanguageAlert);
diff --git a/assets/js/tabs.js b/assets/js/tabs.js
index 78fd2ded..82383b02 100644
--- a/assets/js/tabs.js
+++ b/assets/js/tabs.js
@@ -14,8 +14,10 @@ function setTab(tab) {
url = url.replace(/(?=#|$)/, "?tab=" + tab);
}
- if(url != window.location.href) // Don't update if not changed
+ if(url != window.location.href) { // Don't update if not changed
history.pushState({}, "", encodeURI(url));
+ if(typeof updateLanguageAlert != "undefined") updateLanguageAlert(); // Language alert requires modern JS
+ }
}
function findTab(tabGroup, tabName) {