Merge branch 'dev' into feature/callout-tailwind

This commit is contained in:
ZhenShuo Leo
2025-12-23 01:21:40 +08:00
58 changed files with 1719 additions and 923 deletions

View File

@@ -2,39 +2,35 @@ var scriptBundle = document.getElementById("script-bundle");
var copyText = scriptBundle?.getAttribute("data-copy") || "Copy";
var copiedText = scriptBundle?.getAttribute("data-copied") || "Copied";
function createCopyButton(highlightDiv) {
function createCopyButton(highlightWrapper) {
const button = document.createElement("button");
button.className = "copy-button";
button.type = "button";
button.ariaLabel = copyText;
button.innerText = copyText;
button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
highlightDiv.insertBefore(button, highlightDiv.firstChild);
const wrapper = document.createElement("div");
wrapper.className = "highlight-wrapper";
highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
wrapper.appendChild(highlightDiv);
button.addEventListener("click", () => copyCodeToClipboard(button, highlightWrapper));
highlightWrapper.insertBefore(button, highlightWrapper.firstChild);
}
async function copyCodeToClipboard(button, highlightDiv) {
const codeToCopy = getCodeText(highlightDiv);
async function copyCodeToClipboard(button, highlightWrapper) {
const codeToCopy = getCodeText(highlightWrapper);
function fallback(codeToCopy, highlightDiv) {
function fallback(codeToCopy, highlightWrapper) {
const textArea = document.createElement("textArea");
textArea.contentEditable = "true";
textArea.readOnly = "false";
textArea.className = "copy-textarea";
textArea.value = codeToCopy;
highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
highlightWrapper.insertBefore(textArea, highlightWrapper.firstChild);
const range = document.createRange();
range.selectNodeContents(textArea);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
textArea.focus();
textArea.setSelectionRange(0, 999999);
document.execCommand("copy");
highlightDiv.removeChild(textArea);
highlightWrapper.removeChild(textArea);
}
try {
@@ -42,10 +38,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
if (result.state == "granted" || result.state == "prompt") {
await navigator.clipboard.writeText(codeToCopy);
} else {
fallback(codeToCopy, highlightDiv);
fallback(codeToCopy, highlightWrapper);
}
} catch (_) {
fallback(codeToCopy, highlightDiv);
fallback(codeToCopy, highlightWrapper);
} finally {
button.blur();
button.innerText = copiedText;
@@ -55,7 +51,10 @@ async function copyCodeToClipboard(button, highlightDiv) {
}
}
function getCodeText(highlightDiv) {
function getCodeText(highlightWrapper) {
const highlightDiv = highlightWrapper.querySelector(".highlight");
if (!highlightDiv) return "";
const codeBlock = highlightDiv.querySelector("code");
const inlineLines = codeBlock?.querySelectorAll(".cl"); // linenos=inline
const tableCodeCell = highlightDiv?.querySelector(".lntable .lntd:last-child code"); // linenos=table
@@ -75,5 +74,5 @@ function getCodeText(highlightDiv) {
}
window.addEventListener("DOMContentLoaded", (event) => {
document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));
document.querySelectorAll(".highlight-wrapper").forEach((highlightWrapper) => createCopyButton(highlightWrapper));
});

View File

@@ -0,0 +1,41 @@
function initTabs() {
tabClickHandler = (event) => {
const button = event.target.closest(".tab__button");
if (!button) return;
const container = button.closest(".tab__container");
const tabIndex = parseInt(button.dataset.tabIndex);
activateTab(container, tabIndex);
};
document.addEventListener("click", tabClickHandler);
}
function activateTab(container, activeIndex) {
const buttons = container.querySelectorAll(".tab__button");
const panels = container.querySelectorAll(".tab__panel");
buttons.forEach((btn, index) => {
if (index === activeIndex) {
btn.classList.add("tab--active");
btn.setAttribute("aria-selected", "true");
} else {
btn.classList.remove("tab--active");
btn.setAttribute("aria-selected", "false");
}
});
panels.forEach((panel, index) => {
if (index === activeIndex) {
panel.classList.add("tab--active");
} else {
panel.classList.remove("tab--active");
}
});
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initTabs);
} else {
initTabs();
}