alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

♿️ fix: improve accessibility and i18n (#183)

Browse Source
This commit is contained in:
Óscar Fernández
2023-10-02 18:08:57 +02:00
committed by GitHub
parent 28fb52581f
commit 2c6ac293ad
25 changed files with 214 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/js/copyCodeToClipboard.js
View File

@@ -1,6 +1,13 @@
const copiedText = document.getElementById('copy-success').textContent;
const initCopyText = document.getElementById('copy-init').textContent;
const changeIcon = (copyDiv, className) => {
copyDiv.classList.add(className);
setTimeout(() => copyDiv.classList.remove(className), 2500);
copyDiv.setAttribute("aria-label", copiedText);
setTimeout(() => {
copyDiv.classList.remove(className);
copyDiv.setAttribute("aria-label", initCopyText);
}, 2500);
};
const addCopyEventListenerToDiv = (copyDiv, block) => {
@@ -31,6 +38,9 @@ const getTableCode = (block) => {
document.querySelectorAll("pre").forEach((block) => {
const copyDiv = document.createElement("div");
copyDiv.setAttribute("role", "button");
copyDiv.setAttribute("aria-label", initCopyText);
copyDiv.setAttribute("title", initCopyText);
copyDiv.className = "copy-code";
block.prepend(copyDiv);
addCopyEventListenerToDiv(copyDiv, block);

2
static/js/copyCodeToClipboard.min.js vendored
View File

@@ -1 +1 @@
const changeIcon=(e,t)=>{e.classList.add(t),setTimeout(()=>e.classList.remove(t),2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(e,t)=>{let o=t.querySelector("table")?getTableCode(t):getNonTableCode(t);try{await navigator.clipboard.writeText(o),changeIcon(e,"checked")}catch(c){changeIcon(e,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{let t=document.createElement("div");t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});
const copiedText=document.getElementById("copy-success").textContent,initCopyText=document.getElementById("copy-init").textContent,changeIcon=(e,t)=>{e.classList.add(t),e.setAttribute("aria-label",copiedText),setTimeout(()=>{e.classList.remove(t),e.setAttribute("aria-label",initCopyText)},2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"checked")}catch(e){changeIcon(t,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{var t=document.createElement("div");t.setAttribute("role","button"),t.setAttribute("aria-label",initCopyText),t.setAttribute("title",initCopyText),t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});

6
static/js/themeSwitcher.js
View File

@@ -8,6 +8,8 @@ let currentTheme = localStorage.getItem("theme") || document.documentElement.get
function setTheme(theme, saveToLocalStorage = false) {
document.documentElement.setAttribute("data-theme", theme);
currentTheme = theme;
let togglePressed = theme === "dark" ? "true" : "false";
themeSwitcher.setAttribute("aria-pressed", togglePressed);
if (saveToLocalStorage) {
localStorage.setItem("theme", theme);
@@ -29,6 +31,10 @@ function switchTheme() {
// Initialize the theme switcher button.
themeSwitcher.addEventListener("click", switchTheme, false);
themeSwitcher.setAttribute("role", "button");
themeSwitcher.setAttribute("aria-label", "Toggle dark mode");
let togglePressed = currentTheme === "dark" ? "true" : "false";
themeSwitcher.setAttribute("aria-pressed", togglePressed);
// Update the theme based on system preference if the user hasn't manually changed the theme.
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {

2
static/js/themeSwitcher.min.js vendored
View File

@@ -1 +1 @@
const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e,t&&localStorage.setItem("theme",e);t=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(t)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")});
const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e);var r="dark"===(currentTheme=e)?"true":"false",r=(themeSwitcher.setAttribute("aria-pressed",r),t&&localStorage.setItem("theme",e),new CustomEvent("themeChanged",{detail:{theme:e}}));window.dispatchEvent(r)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),themeSwitcher.setAttribute("role","button"),themeSwitcher.setAttribute("aria-label","Toggle dark mode");let togglePressed="dark"===currentTheme?"true":"false";themeSwitcher.setAttribute("aria-pressed",togglePressed),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")});