Spaces:
Sleeping
Sleeping
File size: 2,580 Bytes
036b3a6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
document.addEventListener("DOMContentLoaded", function () {
const tabButtons = document.querySelectorAll(".toggle-button");
const codeContainers = document.querySelectorAll(".code-container");
const tabList = document.getElementById("tab-list");
const tabListRect = tabList.getBoundingClientRect();
// The first button container is our reference, since the highlighter
// is initialized there. Any translations happen over this position.
const firstButtonContainer = document.querySelector(".button-container");
tabButtons.forEach((button) => {
button.addEventListener("click", () => {
const currentButtonContainer = button.parentElement;
const currentButtonContainerRect =
currentButtonContainer.getBoundingClientRect();
// Scroll the tab list to the clicked button
// Try to center it, go as far as possible
const offset =
currentButtonContainerRect.left -
tabListRect.left +
currentButtonContainerRect.width / 2 -
tabListRect.width / 2;
tabList.scrollBy({ left: offset, behavior: "smooth" });
// Make highlighter follow the clicked button
const highlighter = document.getElementById("highlighter");
// Remove 'active' class from all button containers
codeContainers.forEach((container) => {
container.style.display = "none";
});
tabButtons.forEach((btn) => {
btn.parentElement.ariaSelected = false;
btn.parentElement.classList.remove("active");
btn.parentElement.classList.add("text-white/80");
btn.parentElement.classList.add("hover:text-white");
btn.parentElement.classList.remove("text-white");
});
// Add 'active' class to the clicked button
const activeCodeContainer = document.getElementById(
button.dataset.target
);
activeCodeContainer.style.display = "flex";
currentButtonContainer.ariaSelected = true;
currentButtonContainer.classList.add("active");
currentButtonContainer.classList.add("text-white");
currentButtonContainer.classList.remove("text-white/80");
// Move highlighter to the clicked button
const buttonRect = currentButtonContainer.getBoundingClientRect();
const firstButtonContainerRect =
firstButtonContainer.getBoundingClientRect();
const translateX = buttonRect.x - firstButtonContainerRect.x;
highlighter.style.transform = `translateX(${translateX}px)`;
});
});
tabButtons.forEach((button) => {
button.addEventListener("click", () => {});
});
});
|