feat: add multi-language select and fix minor issues

fix: navbar icon should use home relative link

fix: copy code for raw <code> element

fix: missing breadcrumb hover style

fix: tabs typo preventing loading the script
This commit is contained in:
Xin
2023-08-13 22:18:20 +01:00
parent 3d7a4b7c99
commit 7a2cca9181
12 changed files with 120 additions and 32 deletions

View File

@ -1,10 +1,16 @@
document.querySelectorAll('.code-copy-btn').forEach(function (button) {
button.addEventListener('click', function (e) {
const targetId = e.target.getAttribute('data-clipboard-target');
e.preventDefault();
const targetId = button.getAttribute('data-clipboard-target');
const target = document.querySelector(targetId);
const codeElements = target.querySelectorAll('code');
// Select the last code element in case line numbers are present
const codeElement = codeElements[codeElements.length - 1];
let codeElement;
if (target.tagName === 'CODE') {
codeElement = target;
} else {
// Select the last code element in case line numbers are present
const codeElements = target.querySelectorAll('code');
codeElement = codeElements[codeElements.length - 1];
}
if (codeElement) {
// Replace double newlines with single newlines in the innerText
// as each line inside <span> has trailing newline '\n'

28
assets/js/lang.js Normal file
View File

@ -0,0 +1,28 @@
(function () {
const languageSwitchers = document.querySelectorAll('.language-switcher');
languageSwitchers.forEach((switcher) => {
switcher.addEventListener('click', (e) => {
e.preventDefault();
switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open';
const optionsElement = switcher.nextElementSibling;
optionsElement.classList.toggle('hidden');
// Calculate position of language options element
const switcherRect = switcher.getBoundingClientRect();
const translateY = switcherRect.top - window.innerHeight - 15;
optionsElement.style.transform = `translate3d(${switcherRect.left}px, ${translateY}px, 0)`;
optionsElement.style.minWidth = `${Math.max(switcherRect.width, 50)}px`;
});
});
// Dismiss language switcher when clicking outside
document.addEventListener('click', (e) => {
if (e.target.closest('.language-switcher') === null) {
languageSwitchers.forEach((switcher) => {
switcher.dataset.state = 'closed';
const optionsElement = switcher.nextElementSibling;
optionsElement.classList.add('hidden');
});
}
});
})();