Bestellungen-Drawer mit Backdrop

This commit is contained in:
2026-06-16 18:41:24 +02:00
parent eee2b87a48
commit dd8184c2b9
3 changed files with 51 additions and 9 deletions
+21 -7
View File
@@ -162,6 +162,7 @@ function auth_render_bestellungen_large_table(array $bestellungenTable): string
$html[] = '</article>';
$html[] = '</section>';
$html[] = '<div class="sg-card-list-page-drawer-backdrop" aria-hidden="true" data-bestellungen-drawer-backdrop="true" data-open="false"></div>';
$html[] = '<aside class="sg-card-list-page-drawer" aria-label="Bestell-Details" aria-hidden="true" data-bestellungen-drawer="true" data-open="false">';
$html[] = '<div class="sg-card-list-page-drawer__header">';
$html[] = '<h2 class="sg-heading-h2 sg-card-list-page-drawer__title" data-order-drawer-title>Bestellung</h2>';
@@ -551,17 +552,25 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " wrap.setAttribute('data-has-value', String(hasValue));";
echo " wrap.dataset.componentState = hasValue ? 'active' : 'inactive-selectable';";
echo " };";
echo " const getDrawer = () => contentRoot.querySelector('[data-bestellungen-drawer]');";
echo " const getDrawerBackdrop = () => contentRoot.querySelector('[data-bestellungen-drawer-backdrop]');";
echo " const setDrawerState = (open) => {";
echo " const drawer = getDrawer();";
echo " const backdrop = getDrawerBackdrop();";
echo " if (!drawer || !backdrop) { return; }";
echo " drawer.dataset.open = String(open);";
echo " drawer.setAttribute('aria-hidden', String(!open));";
echo " backdrop.dataset.open = String(open);";
echo " backdrop.setAttribute('aria-hidden', String(!open));";
echo " };";
echo " const closeDrawer = () => {";
echo " const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
echo " if (!drawer) { return; }";
echo " drawer.dataset.open = 'false';";
echo " drawer.setAttribute('aria-hidden', 'true');";
echo " setDrawerState(false);";
echo " contentRoot.querySelectorAll('[data-order-drawer-open]').forEach((trigger) => {";
echo " trigger.setAttribute('aria-expanded', 'false');";
echo " });";
echo " };";
echo " const openDrawer = (trigger) => {";
echo " const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
echo " const drawer = getDrawer();";
echo " if (!drawer) { return; }";
echo " const drawerTitle = drawer.querySelector('[data-order-drawer-title]');";
echo " const drawerOrderNumber = drawer.querySelector('[data-order-drawer-order-number]');";
@@ -580,8 +589,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " const country = trigger.dataset.orderCountry || '';";
echo " const streetLine = [street, houseNumber].filter((part) => part && part.length > 0).join(' ').trim();";
echo " const cityLine = [zip, city].filter((part) => part && part.length > 0).join(' ').trim();";
echo " drawer.dataset.open = 'true';";
echo " drawer.setAttribute('aria-hidden', 'false');";
echo " setDrawerState(true);";
echo " if (drawerTitle) { drawerTitle.textContent = orderNumber !== '' ? 'Bestellung ' + orderNumber : 'Bestellung'; }";
echo " if (drawerOrderNumber) { drawerOrderNumber.textContent = orderNumber; }";
echo " if (drawerOrderDate) { drawerOrderDate.textContent = orderDate; }";
@@ -684,6 +692,12 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " closeDrawer();";
echo " return;";
echo " }";
echo " const backdrop = event.target.closest('[data-bestellungen-drawer-backdrop]');";
echo " if (backdrop) {";
echo " event.preventDefault();";
echo " closeDrawer();";
echo " return;";
echo " }";
echo " const sortButton = event.target.closest('[data-bestellungen-sort-button]');";
echo " if (sortButton) {";
echo " event.preventDefault();";