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

🎨 refactor: format JS with Prettier (#240)

Browse Source
This commit is contained in:
Óscar
2024-01-03 01:44:31 +01:00
committed by GitHub
parent 39fc4ece61
commit b6a89e6370
12 changed files with 93 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
static/js/copyCodeToClipboard.js
View File

@@ -3,45 +3,45 @@ const initCopyText = document.getElementById('copy-init').textContent;
const changeIcon = (copyDiv, className) => {
copyDiv.classList.add(className);
copyDiv.setAttribute("aria-label", copiedText);
copyDiv.setAttribute('aria-label', copiedText);
setTimeout(() => {
copyDiv.classList.remove(className);
copyDiv.setAttribute("aria-label", initCopyText);
copyDiv.setAttribute('aria-label', initCopyText);
}, 2500);
};
const addCopyEventListenerToDiv = (copyDiv, block) => {
copyDiv.addEventListener("click", () => copyCodeAndChangeIcon(copyDiv, block));
copyDiv.addEventListener('click', () => copyCodeAndChangeIcon(copyDiv, block));
};
const copyCodeAndChangeIcon = async (copyDiv, block) => {
const code = block.querySelector('table') ? getTableCode(block) : getNonTableCode(block);
const code = block.querySelector('table')
? getTableCode(block)
: getNonTableCode(block);
try {
await navigator.clipboard.writeText(code);
changeIcon(copyDiv, "checked");
changeIcon(copyDiv, 'checked');
} catch (error) {
changeIcon(copyDiv, "error");
changeIcon(copyDiv, 'error');
}
};
const getNonTableCode = (block) => {
return [...block.querySelectorAll('code')]
.map(code => code.textContent)
.join('');
return [...block.querySelectorAll('code')].map((code) => code.textContent).join('');
};
const getTableCode = (block) => {
return [...block.querySelectorAll('tr')]
.map(row => row.querySelector('td:last-child')?.innerText ?? '')
.map((row) => row.querySelector('td:last-child')?.innerText ?? '')
.join('');
};
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";
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);
});

6
static/js/decodeMail.js
View File

@@ -11,16 +11,16 @@
const byteString = atob(encodedString);
// Convert byteString to an array of char codes.
const charCodes = [...byteString].map(char => char.charCodeAt(0));
const charCodes = [...byteString].map((char) => char.charCodeAt(0));
// Use TypedArray.prototype.set() to copy the char codes into a Uint8Array.
const bytes = new Uint8Array(charCodes.length);
bytes.set(charCodes);
const decoder = new TextDecoder("utf-8");
const decoder = new TextDecoder('utf-8');
return decoder.decode(bytes);
} catch (e) {
console.error("Failed to decode Base64 string: ", e);
console.error('Failed to decode Base64 string: ', e);
return null;
}
}

6
static/js/giscus.js
View File

@@ -55,7 +55,8 @@ function initGiscus() {
}
// Choose the correct theme based on the current theme of the document.
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
const currentTheme =
document.documentElement.getAttribute('data-theme') || 'light';
const selectedTheme = currentTheme === 'dark' ? darkTheme : lightTheme;
script.setAttribute('data-theme', selectedTheme);
@@ -69,7 +70,8 @@ function initGiscus() {
// Listen for theme changes and update the Giscus theme when they occur.
window.addEventListener('themeChanged', (event) => {
const selectedTheme = event.detail.theme === 'dark' ? darkTheme : lightTheme;
const selectedTheme =
event.detail.theme === 'dark' ? darkTheme : lightTheme;
setGiscusTheme(selectedTheme);
});
}

3
static/js/hyvortalk.js
View File

@@ -25,7 +25,8 @@ function initHyvorTalk() {
comments.setAttribute('page-author', pageAuthor);
// Choose the correct theme based on the current theme of the document.
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
const currentTheme =
document.documentElement.getAttribute('data-theme') || 'light';
comments.setAttribute('colors', currentTheme);
// Add the Hyvor Talk comments tag to the div.

5
static/js/initializeTheme.js
View File

@@ -17,6 +17,9 @@
} else {
// If no theme is found in local storage and no default theme is set, use user's system preference.
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', isSystemDark ? 'dark' : 'light');
document.documentElement.setAttribute(
'data-theme',
isSystemDark ? 'dark' : 'light'
);
}
})();

6
static/js/isso.js
View File

@@ -4,13 +4,13 @@ function initIsso() {
const commentsDiv = document.querySelector('.comments');
if (commentsDiv) {
// Get the lazy-loading setting from the div.
const lazyLoading = commentsDiv.getAttribute('data-lazy-loading') === "true";
const lazyLoading = commentsDiv.getAttribute('data-lazy-loading') === 'true';
// If lazy-loading is enabled, create an Intersection Observer and use it.
if (lazyLoading) {
const observer = new IntersectionObserver(entries => {
const observer = new IntersectionObserver((entries) => {
// Loop over the entries.
entries.forEach(entry => {
entries.forEach((entry) => {
// If the element is in the viewport, initialize Isso.
if (entry.isIntersecting) {
loadIsso(commentsDiv);

30
static/js/sortTable.js
View File

@@ -1,6 +1,6 @@
// Select the table and table headers.
var table = document.querySelector("#sitemapTable");
var headers = Array.from(table.querySelectorAll("th"));
var table = document.querySelector('#sitemapTable');
var headers = Array.from(table.querySelectorAll('th'));
// Create and append the live region for accessibility announcements.
var liveRegion = document.createElement('div');
@@ -37,11 +37,11 @@ function initializeHeaders() {
header.sortDirection = 'asc'; // Default sort direction.
var sortAttribute = index === 0 ? 'ascending' : 'none';
header.setAttribute('aria-sort', sortAttribute);
header.addEventListener("click", function () {
header.addEventListener('click', function () {
sortTable(index);
});
header.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
header.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
sortTable(index);
}
@@ -51,14 +51,15 @@ function initializeHeaders() {
function announceSort(header, direction) {
var columnTitle = header.querySelector('.columntitle').textContent;
liveRegion.textContent = 'Column ' + columnTitle + ' is now sorted in ' + direction + ' order';
liveRegion.textContent =
'Column ' + columnTitle + ' is now sorted in ' + direction + ' order';
}
function sortTable(index) {
var header = headers[index];
var direction = header.sortDirection === 'asc' ? 'desc' : 'asc';
var tbody = table.querySelector("tbody");
var rows = Array.from(tbody.querySelectorAll("tr"));
var tbody = table.querySelector('tbody');
var rows = Array.from(tbody.querySelectorAll('tr'));
sortRows(rows, index, direction);
refreshTableBody(tbody, rows);
updateHeaderAttributes(header, direction);
@@ -67,9 +68,11 @@ function sortTable(index) {
function sortRows(rows, index, direction) {
rows.sort(function (rowA, rowB) {
var cellA = rowA.querySelectorAll("td")[index].textContent;
var cellB = rowB.querySelectorAll("td")[index].textContent;
return direction === 'asc' ? cellA.localeCompare(cellB) : cellB.localeCompare(cellA);
var cellA = rowA.querySelectorAll('td')[index].textContent;
var cellB = rowB.querySelectorAll('td')[index].textContent;
return direction === 'asc'
? cellA.localeCompare(cellB)
: cellB.localeCompare(cellA);
});
}
@@ -96,7 +99,10 @@ function updateHeaderAttributes(header, direction) {
// Update screen reader text for sorting.
function updateAnnounceText(header) {
var span = header.querySelector('.visually-hidden');
span.textContent = 'Click to sort in ' + (header.sortDirection === 'asc' ? 'descending' : 'ascending') + ' order';
span.textContent =
'Click to sort in ' +
(header.sortDirection === 'asc' ? 'descending' : 'ascending') +
' order';
}
// Add text for screen readers regarding sort order.

45
static/js/themeSwitcher.js
View File

@@ -1,30 +1,33 @@
// Get the theme switcher button elements.
const themeSwitcher = document.querySelector(".theme-switcher");
const themeResetter = document.querySelector(".theme-resetter");
const themeSwitcher = document.querySelector('.theme-switcher');
const themeResetter = document.querySelector('.theme-resetter');
const defaultTheme = document.documentElement.getAttribute('data-default-theme');
function getSystemThemePreference() {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
// Determine the initial theme.
let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme') || getSystemThemePreference();
let currentTheme =
localStorage.getItem('theme') ||
document.documentElement.getAttribute('data-theme') ||
getSystemThemePreference();
function setTheme(theme, saveToLocalStorage = false) {
document.documentElement.setAttribute("data-theme", theme);
document.documentElement.setAttribute('data-theme', theme);
currentTheme = theme;
themeSwitcher.setAttribute("aria-pressed", theme === "dark");
themeSwitcher.setAttribute('aria-pressed', theme === 'dark');
if (saveToLocalStorage) {
localStorage.setItem("theme", theme);
themeResetter.classList.add("has-custom-theme");
localStorage.setItem('theme', theme);
themeResetter.classList.add('has-custom-theme');
} else {
localStorage.removeItem("theme");
themeResetter.classList.remove("has-custom-theme");
localStorage.removeItem('theme');
themeResetter.classList.remove('has-custom-theme');
}
// Dispatch a custom event for comment systems.
window.dispatchEvent(new CustomEvent("themeChanged", { detail: { theme } }));
window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } }));
}
function resetTheme() {
@@ -33,22 +36,24 @@ function resetTheme() {
// Function to switch between dark and light themes.
function switchTheme() {
setTheme(currentTheme === "dark" ? "light" : "dark", true);
setTheme(currentTheme === 'dark' ? 'light' : 'dark', true);
}
// Initialize the theme switcher button.
themeSwitcher.addEventListener("click", switchTheme);
themeResetter.addEventListener("click", resetTheme);
themeSwitcher.addEventListener('click', switchTheme);
themeResetter.addEventListener('click', resetTheme);
// Update the theme based on system preference if necessary.
if (!defaultTheme) {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
setTheme(e.matches ? "dark" : "light");
});
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => {
setTheme(e.matches ? 'dark' : 'light');
});
}
// Set initial ARIA attribute and custom theme class.
themeSwitcher.setAttribute("aria-pressed", currentTheme === "dark");
if (localStorage.getItem("theme")) {
themeResetter.classList.add("has-custom-theme");
themeSwitcher.setAttribute('aria-pressed', currentTheme === 'dark');
if (localStorage.getItem('theme')) {
themeResetter.classList.add('has-custom-theme');
}

8
static/js/utterances.js
View File

@@ -1,6 +1,6 @@
function setUtterancesTheme(newTheme) {
// Get the frame with class "utterances-frame".
const frame = document.querySelector(".utterances-frame");
const frame = document.querySelector('.utterances-frame');
if (frame) {
// If the iframe exists, send a message to set the theme.
@@ -34,7 +34,8 @@ function initUtterances() {
script.setAttribute('label', label);
// Set the initial theme.
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
const currentTheme =
document.documentElement.getAttribute('data-theme') || 'light';
const selectedTheme = currentTheme === 'dark' ? darkTheme : lightTheme;
script.setAttribute('theme', selectedTheme);
@@ -51,7 +52,8 @@ function initUtterances() {
// Listen for themeChanged event to update the theme.
window.addEventListener('themeChanged', (event) => {
// Determine the new theme based on the event detail.
const selectedTheme = event.detail.theme === 'dark' ? darkTheme : lightTheme;
const selectedTheme =
event.detail.theme === 'dark' ? darkTheme : lightTheme;
// Set the new theme.
setUtterancesTheme(selectedTheme);
});