added product page

This commit is contained in:
Felix Klement committed 2026-09-18 16:56:44 +02:00
1 parent 4cda1ca41b
commit d97f541738
27 files changed
+1004 -69

No files matched your search

+3 -27
View File
@@ -61,7 +61,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
loading="lazy"
decoding="async"
class="sectors__img img-doc"
pictureAttributes={{ class: 'sectors__picture sectors__picture--stage', 'data-image': String(i), 'data-active': i === 0 ? '' : undefined }}
pictureAttributes={{ class: 'sectors__picture sectors__picture--stage', 'data-stage-item': '', 'data-active': i === 0 ? '' : undefined }}
/>
))}
</div>
@@ -136,31 +136,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
</style>
<script>
import { initTabs } from '../../scripts/tabs';
const root = document.querySelector<HTMLElement>('[data-sectors]');
if (root) {
const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
const panels = tabs.map((t) => document.getElementById(t.getAttribute('aria-controls')!)!);
const images = Array.from(root.querySelectorAll<HTMLElement>('[data-image]'));
const select = (index: number, focus = false) => {
tabs.forEach((tab, i) => {
const on = i === index;
tab.setAttribute('aria-selected', String(on));
if (on) tab.removeAttribute('tabindex'); else tab.setAttribute('tabindex', '-1');
if (on) panels[i].setAttribute('data-open', ''); else panels[i].removeAttribute('data-open');
if (on) images[i]?.setAttribute('data-active', ''); else images[i]?.removeAttribute('data-active');
});
if (focus) tabs[index].focus();
};
tabs.forEach((tab, i) => {
tab.addEventListener('click', () => select(i));
tab.addEventListener('keydown', (e) => {
const n = tabs.length;
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { e.preventDefault(); select((i + 1) % n, true); }
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { e.preventDefault(); select((i - 1 + n) % n, true); }
if (e.key === 'Home') { e.preventDefault(); select(0, true); }
if (e.key === 'End') { e.preventDefault(); select(n - 1, true); }
});
});
select(0);
}
if (root) initTabs(root);
</script>