61 lines
2.0 KiB
JavaScript
61 lines
2.0 KiB
JavaScript
(function () {
|
|
var cal = document.querySelector(".diary-cal");
|
|
if (!cal) return;
|
|
|
|
var toggle = document.createElement("button");
|
|
toggle.type = "button";
|
|
toggle.className = "diary-cal-toggle";
|
|
toggle.textContent = "Kalender";
|
|
toggle.setAttribute("aria-expanded", "false");
|
|
toggle.addEventListener("click", function () {
|
|
var open = cal.classList.toggle("is-open");
|
|
toggle.setAttribute("aria-expanded", open ? "true" : "false");
|
|
});
|
|
|
|
var main = document.querySelector("main");
|
|
if (main) {
|
|
main.parentNode.insertBefore(toggle, main);
|
|
main.parentNode.insertBefore(cal, main);
|
|
}
|
|
|
|
// Wire up month/year dropdowns inside the calendar.
|
|
var drops = cal.querySelectorAll(".diary-cal-drop");
|
|
drops.forEach(function (drop) {
|
|
var trigger = drop.querySelector("button");
|
|
var menu = drop.querySelector(".dropdown-menu");
|
|
if (!trigger || !menu) return;
|
|
trigger.addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
drops.forEach(function (other) {
|
|
if (other !== drop) {
|
|
other.querySelector(".dropdown-menu").classList.remove("is-open");
|
|
}
|
|
});
|
|
menu.classList.toggle("is-open");
|
|
});
|
|
});
|
|
document.addEventListener("click", function (e) {
|
|
drops.forEach(function (drop) {
|
|
if (!drop.contains(e.target)) {
|
|
drop.querySelector(".dropdown-menu").classList.remove("is-open");
|
|
}
|
|
});
|
|
});
|
|
document.addEventListener("keydown", function (e) {
|
|
if (e.key !== "Escape") return;
|
|
drops.forEach(function (drop) {
|
|
drop.querySelector(".dropdown-menu").classList.remove("is-open");
|
|
});
|
|
});
|
|
|
|
var pageHeader = document.querySelector("header");
|
|
function updateTop() {
|
|
if (!pageHeader || getComputedStyle(cal).position !== "fixed") return;
|
|
var rect = pageHeader.getBoundingClientRect();
|
|
cal.style.top = Math.max(8, rect.bottom + 8) + "px";
|
|
}
|
|
window.addEventListener("scroll", updateTop, { passive: true });
|
|
window.addEventListener("resize", updateTop);
|
|
updateTop();
|
|
})();
|