79 lines
3.4 KiB
JavaScript
79 lines
3.4 KiB
JavaScript
|
(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
// Farbschema umschalten (hell/dunkel) und merken
|
||
|
|
var toggle = document.querySelector('.theme-toggle');
|
||
|
|
if (toggle) {
|
||
|
|
toggle.addEventListener('click', function () {
|
||
|
|
var dark = document.documentElement.getAttribute('data-theme') !== 'dark';
|
||
|
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
||
|
|
try { localStorage.setItem('theme', dark ? 'dark' : 'light'); } catch (e) {}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Menü auf kleinen Bildschirmen auf-/zuklappen
|
||
|
|
var navToggle = document.querySelector('.nav-toggle');
|
||
|
|
var nav = document.getElementById('site-nav');
|
||
|
|
if (navToggle && nav) {
|
||
|
|
navToggle.addEventListener('click', function () {
|
||
|
|
var open = nav.classList.toggle('is-open');
|
||
|
|
navToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Aufklappmenüs per Klick/Tippen auf den Pfeil (mit der Maus öffnen sie auch beim Überfahren)
|
||
|
|
var submenuToggles = document.querySelectorAll('.nav-submenu-toggle');
|
||
|
|
var closeSubmenus = function (except) {
|
||
|
|
Array.prototype.forEach.call(document.querySelectorAll('.nav-has-children.is-open'), function (item) {
|
||
|
|
// Der Eintrag selbst und seine Oberpunkte bleiben offen
|
||
|
|
if (except && (item === except || item.contains(except))) return;
|
||
|
|
item.classList.remove('is-open');
|
||
|
|
item.querySelector(':scope > .nav-submenu-toggle').setAttribute('aria-expanded', 'false');
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Array.prototype.forEach.call(submenuToggles, function (button) {
|
||
|
|
button.addEventListener('click', function (event) {
|
||
|
|
event.stopPropagation();
|
||
|
|
var item = button.parentNode;
|
||
|
|
closeSubmenus(item);
|
||
|
|
var open = item.classList.toggle('is-open');
|
||
|
|
button.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
document.addEventListener('click', function (event) {
|
||
|
|
if (!event.target.closest('.nav-has-children')) closeSubmenus(null);
|
||
|
|
});
|
||
|
|
document.addEventListener('keydown', function (event) {
|
||
|
|
if (event.key === 'Escape') closeSubmenus(null);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Bildanzeige: Klick auf ein Bild im Beitrag zeigt es groß
|
||
|
|
var content = document.querySelector('.gh-content');
|
||
|
|
if (content) {
|
||
|
|
var lightbox = document.createElement('div');
|
||
|
|
lightbox.className = 'lightbox';
|
||
|
|
lightbox.hidden = true;
|
||
|
|
lightbox.innerHTML = '<button class="lightbox__close" type="button" aria-label="Close">×</button><img alt="">';
|
||
|
|
document.body.appendChild(lightbox);
|
||
|
|
var lightboxImage = lightbox.querySelector('img');
|
||
|
|
|
||
|
|
var close = function () {
|
||
|
|
lightbox.hidden = true;
|
||
|
|
lightboxImage.removeAttribute('src');
|
||
|
|
};
|
||
|
|
|
||
|
|
content.addEventListener('click', function (event) {
|
||
|
|
var img = event.target.closest('.kg-image-card img, .kg-gallery-image img');
|
||
|
|
// Bilder, die selbst ein Link sind, behalten ihr Linkziel
|
||
|
|
if (!img || img.closest('a')) return;
|
||
|
|
lightboxImage.src = img.currentSrc || img.src;
|
||
|
|
lightboxImage.alt = img.alt || '';
|
||
|
|
lightbox.hidden = false;
|
||
|
|
});
|
||
|
|
lightbox.addEventListener('click', close);
|
||
|
|
document.addEventListener('keydown', function (event) {
|
||
|
|
if (event.key === 'Escape' && !lightbox.hidden) close();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})();
|