80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
/* ============================================================
|
||
public/js/quickmenu/bazaar.js
|
||
Marktplatz – Tab-Layout (wie Gaststätte)
|
||
============================================================ */
|
||
|
||
let baz_initialized = false;
|
||
|
||
export async function loadBazaar() {
|
||
const body = document.getElementById("qm-body-basar");
|
||
if (!body) return;
|
||
|
||
if (baz_initialized) return;
|
||
baz_initialized = true;
|
||
|
||
/* CSS einmalig laden */
|
||
if (!document.querySelector('link[href="/css/bazaar.css"]')) {
|
||
const link = document.createElement("link");
|
||
link.rel = "stylesheet";
|
||
link.href = "/css/bazaar.css";
|
||
document.head.appendChild(link);
|
||
}
|
||
|
||
body.innerHTML = `
|
||
<div class="mp-wrap">
|
||
|
||
<!-- Linke Tab-Leiste -->
|
||
<aside class="mp-tabs" id="mp-tabs">
|
||
<button class="mp-tab mp-tab-active" data-tab="mp-content-1">
|
||
<span class="mp-tab-dot"></span>
|
||
<span>Händler</span>
|
||
</button>
|
||
<button class="mp-tab" data-tab="mp-content-2">
|
||
<span class="mp-tab-dot"></span>
|
||
<span>Auktionen</span>
|
||
</button>
|
||
<button class="mp-tab" data-tab="mp-content-3">
|
||
<span class="mp-tab-dot"></span>
|
||
<span>Tauschbörse</span>
|
||
</button>
|
||
</aside>
|
||
|
||
<!-- Inhalts-Bereich -->
|
||
<div class="mp-content">
|
||
|
||
<div class="mp-panel active" id="mp-content-1">
|
||
<div class="mp-col-header">Händler</div>
|
||
<div class="mp-body">
|
||
<span class="mp-coming-soon">Demnächst verfügbar…</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mp-panel" id="mp-content-2">
|
||
<div class="mp-col-header">Auktionen</div>
|
||
<div class="mp-body">
|
||
<span class="mp-coming-soon">Demnächst verfügbar…</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mp-panel" id="mp-content-3">
|
||
<div class="mp-col-header">Tauschbörse</div>
|
||
<div class="mp-body">
|
||
<span class="mp-coming-soon">Demnächst verfügbar…</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
/* Tab-Klick */
|
||
body.querySelectorAll(".mp-tab").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
body.querySelectorAll(".mp-tab").forEach((t) => t.classList.remove("mp-tab-active"));
|
||
body.querySelectorAll(".mp-panel").forEach((p) => p.classList.remove("active"));
|
||
btn.classList.add("mp-tab-active");
|
||
document.getElementById(btn.dataset.tab)?.classList.add("active");
|
||
});
|
||
});
|
||
}
|