55 lines
2.1 KiB
JavaScript
55 lines
2.1 KiB
JavaScript
// Language toggle for soleprint docs
|
|
// Include this script and add: <div id="lang-toggle"></div> in header
|
|
|
|
(function () {
|
|
function setLang(lang) {
|
|
localStorage.setItem("spr-docs-lang", lang);
|
|
document.documentElement.lang = lang;
|
|
document.querySelectorAll(".lang-toggle button").forEach((btn) => {
|
|
btn.classList.toggle("active", btn.dataset.lang === lang);
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const currentLang = localStorage.getItem("spr-docs-lang") || "en";
|
|
|
|
// Inject toggle HTML
|
|
const container = document.getElementById("lang-toggle");
|
|
if (container) {
|
|
container.className = "lang-toggle";
|
|
|
|
const btnEn = document.createElement("button");
|
|
btnEn.textContent = "EN";
|
|
btnEn.dataset.lang = "en";
|
|
btnEn.addEventListener("click", () => setLang("en"));
|
|
|
|
const btnEs = document.createElement("button");
|
|
btnEs.textContent = "ES";
|
|
btnEs.dataset.lang = "es";
|
|
btnEs.addEventListener("click", () => setLang("es"));
|
|
|
|
container.appendChild(btnEn);
|
|
container.appendChild(btnEs);
|
|
}
|
|
|
|
setLang(currentLang);
|
|
});
|
|
|
|
// Inject styles
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
.lang-toggle { position: absolute; top: 1.5rem; right: 2rem; display: flex; border: 1px solid #888; border-radius: 4px; overflow: hidden; }
|
|
.lang-toggle button { background: #1a1a1a; border: none; color: #888; padding: 0.4rem 0.8rem; font-family: inherit; font-size: 0.75rem; cursor: pointer; }
|
|
.lang-toggle button:first-child { border-right: 1px solid #888; }
|
|
.lang-toggle button:hover { background: #0a0a0a; color: #fff; }
|
|
.lang-toggle button.active { background: var(--accent, #b91c1c); color: #fff; }
|
|
header { position: relative; }
|
|
.lang-en, .lang-es { display: none; }
|
|
html[lang="en"] .lang-en { display: block; }
|
|
html[lang="es"] .lang-es { display: block; }
|
|
html[lang="en"] span.lang-en { display: inline; }
|
|
html[lang="es"] span.lang-es { display: inline; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
})();
|