93 lines
3.0 KiB
JavaScript
93 lines
3.0 KiB
JavaScript
export async function loadEvents() {
|
|
const body = document.getElementById("qm-body-events");
|
|
if (!body) return;
|
|
|
|
/* ================================
|
|
CSS einmalig laden
|
|
================================ */
|
|
if (!document.querySelector('link[href="/css/events.css"]')) {
|
|
const link = document.createElement("link");
|
|
link.rel = "stylesheet";
|
|
link.href = "/css/events.css";
|
|
document.head.appendChild(link);
|
|
}
|
|
|
|
/* ================================
|
|
Event-Daten (hier später befüllen)
|
|
================================ */
|
|
const events = [
|
|
{ id: 1, img: "/images/items/runenhaufen.png", label: "Textzeile 1" },
|
|
{ id: 2, img: "/images/items/runenhaufen.png", label: "Textzeile 2" },
|
|
{ id: 3, img: "/images/items/runenhaufen.png", label: "Textzeile 3" },
|
|
{ id: 4, img: "/images/items/runenhaufen.png", label: "Textzeile 4" },
|
|
{ id: 5, img: "/images/items/runenhaufen.png", label: "Textzeile 5" },
|
|
];
|
|
|
|
/* ================================
|
|
Haupt-HTML injizieren
|
|
================================ */
|
|
body.innerHTML = `
|
|
<!-- 5er Event-Grid -->
|
|
<div class="events-grid">
|
|
${events
|
|
.map(
|
|
(ev) => `
|
|
<div class="event-card" data-event-id="${ev.id}">
|
|
<div class="event-card-img-wrap">
|
|
<img src="${ev.img}" alt="${ev.label}" draggable="false">
|
|
</div>
|
|
<span class="event-card-label">${ev.label}</span>
|
|
</div>`
|
|
)
|
|
.join("")}
|
|
</div>
|
|
|
|
<!-- Detail-Popup -->
|
|
<div id="event-detail-overlay">
|
|
<div id="event-detail-popup">
|
|
<button class="edp-close" id="edp-close-btn">✕</button>
|
|
<img class="edp-img" id="edp-img" src="" alt="">
|
|
<div class="edp-title" id="edp-title"></div>
|
|
<div class="edp-body" id="edp-body">Inhalt folgt...</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
/* ================================
|
|
Event-Karten klickbar machen
|
|
================================ */
|
|
|
|
const overlay = body.querySelector("#event-detail-overlay");
|
|
const edpImg = body.querySelector("#edp-img");
|
|
const edpTitle = body.querySelector("#edp-title");
|
|
const edpBody = body.querySelector("#edp-body");
|
|
|
|
body.querySelectorAll(".event-card").forEach((card) => {
|
|
card.addEventListener("click", () => {
|
|
const id = Number(card.dataset.eventId);
|
|
const ev = events.find((e) => e.id === id);
|
|
if (!ev) return;
|
|
|
|
edpImg.src = ev.img;
|
|
edpImg.alt = ev.label;
|
|
edpTitle.textContent = ev.label;
|
|
edpBody.textContent = "Inhalt folgt..."; // hier später befüllen
|
|
|
|
overlay.classList.add("active");
|
|
});
|
|
});
|
|
|
|
/* Detail-Popup schließen */
|
|
body.querySelector("#edp-close-btn").addEventListener("click", () => {
|
|
overlay.classList.remove("active");
|
|
});
|
|
|
|
overlay.addEventListener("click", (e) => {
|
|
if (e.target === overlay) overlay.classList.remove("active");
|
|
});
|
|
|
|
document.addEventListener("keydown", function edpEsc(e) {
|
|
if (e.key === "Escape") overlay.classList.remove("active");
|
|
});
|
|
}
|