36 lines
2.3 KiB
JavaScript
36 lines
2.3 KiB
JavaScript
const root = document.documentElement;
|
|
const systemDark = matchMedia("(prefers-color-scheme: dark)");
|
|
const currentTheme = () => root.dataset.theme || (systemDark.matches ? "dark" : "light");
|
|
const themeButton = document.getElementById("theme-toggle");
|
|
function labelTheme() { themeButton.setAttribute("aria-label", `Включить ${currentTheme() === "dark" ? "светлую" : "тёмную"} тему`); }
|
|
labelTheme();
|
|
themeButton.addEventListener("click", () => {
|
|
root.dataset.theme = currentTheme() === "dark" ? "light" : "dark";
|
|
try { localStorage.setItem("ytdl-site-theme", root.dataset.theme); } catch { /* Session-only theme. */ }
|
|
labelTheme();
|
|
});
|
|
systemDark.addEventListener("change", labelTheme);
|
|
|
|
for (const button of document.querySelectorAll("[data-screenshot]")) button.addEventListener("click", () => {
|
|
const theme = button.dataset.screenshot;
|
|
const screenshot = document.getElementById("menu-screenshot");
|
|
screenshot.src = `assets/menu-${theme}.png`;
|
|
screenshot.alt = `Меню YouTubeDL в ${theme === "dark" ? "тёмной" : "светлой"} теме: качество видео, звук, формат, кодек и папка сохранения`;
|
|
for (const peer of document.querySelectorAll("[data-screenshot]")) peer.setAttribute("aria-pressed", String(peer === button));
|
|
});
|
|
|
|
let copyTimer;
|
|
for (const button of document.querySelectorAll("[data-copy]")) button.addEventListener("click", async () => {
|
|
const status = document.getElementById("copy-status");
|
|
try { await navigator.clipboard.writeText(button.dataset.copy); status.textContent = `Скопировано: ${button.dataset.copy}`; }
|
|
catch { status.textContent = `Скопируйте адрес вручную: ${button.dataset.copy}`; }
|
|
status.hidden = false;
|
|
clearTimeout(copyTimer); copyTimer = setTimeout(() => { status.hidden = true; }, 5500);
|
|
});
|
|
|
|
// Content stays visible if JavaScript or IntersectionObserver is unavailable.
|
|
if ("IntersectionObserver" in window && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
const observer = new IntersectionObserver(entries => { for (const entry of entries) if (entry.isIntersecting) { entry.target.classList.add("shown"); observer.unobserve(entry.target); } }, { threshold: 0.07 });
|
|
for (const element of document.querySelectorAll(".reveal")) { element.classList.add("will-reveal"); observer.observe(element); }
|
|
}
|