Banner-Slider auf der Startseite
Komponente banner-slider liest data/banners.json; banner.js übernimmt Autoplay/Pause/Steuerung (progressive enhancement). Slider sitzt zwischen Hero und Instagram-Feed. Bilder vorerst als Platzhalter-SVGs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
This commit is contained in:
68
app/components/banner-slider.php
Normal file
68
app/components/banner-slider.php
Normal file
@@ -0,0 +1,68 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* Werbe-/Sponsoren-Banner-Slider. Daten: data/banners.json (Single Source of Truth).
|
||||
* Layout je Slide: 2/3 Titel + Text + CTA, 1/3 Firmenlogo.
|
||||
* Auto-Rotation + Fortschritts-Indikatoren übernimmt assets/js/banner.js
|
||||
* (pausiert bei Hover/Fokus, respektiert prefers-reduced-motion).
|
||||
* Ohne JS: nur der erste Banner ist sichtbar (Graceful Degradation).
|
||||
*/
|
||||
$bannerData = json_load('banners');
|
||||
$banners = $bannerData['banners'] ?? [];
|
||||
if ($banners === []) {
|
||||
return;
|
||||
}
|
||||
$heading = $bannerData['heading'] ?? null;
|
||||
$subline = $bannerData['subline'] ?? null;
|
||||
$total = count($banners);
|
||||
?>
|
||||
<section class="section ad-banner" id="anzeigen" aria-roledescription="Karussell" aria-label="Anzeigen unserer Sponsoren und Partner" data-banner>
|
||||
<div class="container">
|
||||
<?php if ($heading !== null): ?>
|
||||
<h2><?= e($heading) ?></h2>
|
||||
<?php else: ?>
|
||||
<h2 class="visually-hidden">Anzeigen unserer Sponsoren & Partner</h2>
|
||||
<?php endif; ?>
|
||||
<?php if ($subline !== null): ?>
|
||||
<p class="text-muted ad-banner__subline"><?= e($subline) ?></p>
|
||||
<?php endif; ?>
|
||||
<ul class="ad-banner__track" id="ad-banner-track" aria-live="off">
|
||||
<?php foreach ($banners as $i => $banner): ?>
|
||||
<?php $bg = $banner['background'] ?? null; ?>
|
||||
<li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?>"<?= $bg ? ' style="--banner-bg: url(' . e(asset($bg)) . ')"' : '' ?> data-banner-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
|
||||
<div class="ad-banner__content">
|
||||
<span class="ad-banner__tag">Anzeige</span>
|
||||
<p class="ad-banner__title"><?= e($banner['title']) ?></p>
|
||||
<p class="ad-banner__text"><?= e($banner['text']) ?></p>
|
||||
<?php if (!empty($banner['cta']['url']) && !empty($banner['cta']['label'])): ?>
|
||||
<a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>" target="_blank" rel="noopener sponsored"><?= e($banner['cta']['label']) ?><span class="visually-hidden"> (öffnet in neuem Tab)</span></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="ad-banner__logo">
|
||||
<img src="<?= e(asset($banner['logo'])) ?>" alt="<?= e($banner['company'] ?? $banner['title']) ?>" loading="lazy" decoding="async">
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php if ($total > 1): ?>
|
||||
<?php /* Ohne JS verborgen (Steuerung wäre funktionslos); banner.js blendet sie ein. */ ?>
|
||||
<div class="ad-banner__controls" data-banner-controls hidden>
|
||||
<?php /* Explizite Pause/Play-Taste — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
|
||||
<button class="ad-banner__toggle" type="button" data-banner-toggle aria-pressed="false" aria-controls="ad-banner-track" hidden>
|
||||
<?= icon('pause-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--pause') ?>
|
||||
<?= icon('play-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--play') ?>
|
||||
<span class="visually-hidden" data-banner-toggle-label>Automatischen Wechsel pausieren</span>
|
||||
</button>
|
||||
<div class="ad-banner__indicators" role="group" aria-label="Anzeige wählen">
|
||||
<?php foreach ($banners as $i => $banner): ?>
|
||||
<button class="ad-banner__dot" type="button" data-banner-dot aria-controls="ad-banner-track" aria-label="Anzeige <?= ($i + 1) ?> von <?= $total ?>: <?= e($banner['company'] ?? $banner['title']) ?>">
|
||||
<span class="ad-banner__progress" aria-hidden="true"></span>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
@@ -13,10 +13,11 @@ $meta = [
|
||||
'title' => 'Fußball & Turnen in Kulmbach – TSV 08 Kulmbach',
|
||||
'title_absolute' => true,
|
||||
'description' => 'Dein Sportverein für Fußball und Turnen in Kulmbach: Jugend-, Herren- und Damenfußball, Turnen und Trampolin – seit 1908 im Katzbachtal. Jetzt Mitglied werden!',
|
||||
'scripts' => ['form.js'],
|
||||
'scripts' => ['form.js', 'banner.js'],
|
||||
];
|
||||
|
||||
component('hero', ['hero' => $home['hero']]);
|
||||
component('banner-slider');
|
||||
component('instagram-feed');
|
||||
|
||||
foreach ($home['sections'] as $section) {
|
||||
|
||||
28
data/banners.json
Normal file
28
data/banners.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"heading": "Unsere Werbepartner",
|
||||
"subline": "Diese Unternehmen aus Kulmbach und der Region unterstützen den TSV 08 – ein herzliches Dankeschön!",
|
||||
"banners": [
|
||||
{
|
||||
"company": "Musterfirma GmbH",
|
||||
"title": "Ihre Werbung beim TSV 08 Kulmbach",
|
||||
"text": "Erreichen Sie tausende sportbegeisterte Kulmbacherinnen und Kulmbacher – als Sponsor unseres Vereins direkt auf der Startseite.",
|
||||
"logo": "img/banners/placeholder-1.svg",
|
||||
"cta": { "label": "Jetzt Partner werden", "url": "https://example.com" }
|
||||
},
|
||||
{
|
||||
"company": "Beispiel Handwerk AG",
|
||||
"title": "Regional. Verlässlich. Mittendrin.",
|
||||
"text": "Wir unterstützen den Vereinssport im Katzbachtal – und freuen uns, Teil der TSV-08-Familie zu sein.",
|
||||
"logo": "img/banners/placeholder-2.svg",
|
||||
"background": "img/banners/bg-sample.svg",
|
||||
"cta": { "label": "Mehr erfahren", "url": "https://example.com" }
|
||||
},
|
||||
{
|
||||
"company": "Sponsor Sport & Freizeit",
|
||||
"title": "Ausrüstung für echte Teamplayer",
|
||||
"text": "Vom Trikot bis zum Trainingsplatz – unser Partner für alles rund um den Sport in der Region Kulmbach.",
|
||||
"logo": "img/banners/placeholder-3.svg",
|
||||
"cta": { "label": "Zum Angebot", "url": "https://example.com" }
|
||||
}
|
||||
]
|
||||
}
|
||||
15
public/assets/img/banners/bg-sample.svg
Normal file
15
public/assets/img/banners/bg-sample.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Platzhalter-Hintergrund">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#2a2a2a"/>
|
||||
<stop offset="0.55" stop-color="#3a1417"/>
|
||||
<stop offset="1" stop-color="#e20612"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1200" height="400" fill="url(#g)"/>
|
||||
<g fill="#ffffff" fill-opacity="0.05">
|
||||
<circle cx="980" cy="90" r="160"/>
|
||||
<circle cx="1120" cy="320" r="220"/>
|
||||
<circle cx="760" cy="360" r="120"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 613 B |
5
public/assets/img/banners/placeholder-1.svg
Normal file
5
public/assets/img/banners/placeholder-1.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
|
||||
<rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
|
||||
<text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
|
||||
<text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 1</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 543 B |
5
public/assets/img/banners/placeholder-2.svg
Normal file
5
public/assets/img/banners/placeholder-2.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
|
||||
<rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
|
||||
<text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
|
||||
<text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 2</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 543 B |
5
public/assets/img/banners/placeholder-3.svg
Normal file
5
public/assets/img/banners/placeholder-3.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 110" role="img" aria-label="Platzhalter-Logo">
|
||||
<rect x="2" y="2" width="256" height="106" rx="14" fill="none" stroke="#ffffff" stroke-opacity="0.4" stroke-dasharray="7 7"/>
|
||||
<text x="130" y="52" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="26" font-weight="700" fill="#ffffff">IHR LOGO</text>
|
||||
<text x="130" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#ffffff" fill-opacity="0.6">Sponsor 3</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 543 B |
115
public/assets/js/banner.js
Normal file
115
public/assets/js/banner.js
Normal file
@@ -0,0 +1,115 @@
|
||||
/* Werbe-/Sponsoren-Banner-Slider: Auto-Rotation über die Fortschrittsanimation
|
||||
des aktiven Indikators (animationend → nächste Folie).
|
||||
|
||||
Barrierefreiheit:
|
||||
- explizite Pause/Play-Taste (WCAG 2.2.2 „Pause, Stop, Hide"),
|
||||
- zusätzlich Pause bei Hover/Fokus (Komfort),
|
||||
- aria-live: im Autoplay "off" (kein Vorlese-Spam), bei Pause/manuell "polite",
|
||||
- bei prefers-reduced-motion läuft keine Animation → keine Auto-Rotation;
|
||||
Indikatoren bleiben per Klick bedienbar, die Pause-Taste entfällt. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var root = document.querySelector('[data-banner]');
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
var track = root.querySelector('#ad-banner-track');
|
||||
var slides = Array.prototype.slice.call(root.querySelectorAll('[data-banner-slide]'));
|
||||
var dots = Array.prototype.slice.call(root.querySelectorAll('[data-banner-dot]'));
|
||||
var controls = root.querySelector('[data-banner-controls]');
|
||||
var toggle = root.querySelector('[data-banner-toggle]');
|
||||
var toggleLabel = root.querySelector('[data-banner-toggle-label]');
|
||||
if (slides.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var index = 0;
|
||||
var hoverPaused = false;
|
||||
var userPaused = false;
|
||||
|
||||
function syncPaused() {
|
||||
// Bei reduzierter Bewegung gilt jeder Wechsel als manuell → ansagen.
|
||||
var paused = hoverPaused || userPaused || reduce;
|
||||
root.classList.toggle('is-paused', paused);
|
||||
if (track) {
|
||||
track.setAttribute('aria-live', paused ? 'polite' : 'off');
|
||||
}
|
||||
}
|
||||
|
||||
function activate(i) {
|
||||
index = (i % slides.length + slides.length) % slides.length;
|
||||
slides.forEach(function (slide, n) {
|
||||
slide.hidden = n !== index;
|
||||
});
|
||||
dots.forEach(function (dot, n) {
|
||||
var on = n === index;
|
||||
dot.classList.toggle('is-active', on);
|
||||
if (on) {
|
||||
dot.setAttribute('aria-current', 'true');
|
||||
} else {
|
||||
dot.removeAttribute('aria-current');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Sobald die Fortschrittsanimation des aktiven Indikators durchgelaufen ist,
|
||||
// zur nächsten Folie wechseln. (Beim Wechsel wird die alte Animation
|
||||
// abgebrochen → 'animationcancel', nicht 'animationend' → kein Doppelsprung.)
|
||||
root.addEventListener('animationend', function (event) {
|
||||
if (event.animationName === 'ad-progress') {
|
||||
activate(index + 1);
|
||||
}
|
||||
});
|
||||
|
||||
// Pause bei Hover/Fokus.
|
||||
root.addEventListener('mouseenter', function () {
|
||||
hoverPaused = true;
|
||||
syncPaused();
|
||||
});
|
||||
root.addEventListener('mouseleave', function () {
|
||||
hoverPaused = false;
|
||||
syncPaused();
|
||||
});
|
||||
root.addEventListener('focusin', function () {
|
||||
hoverPaused = true;
|
||||
syncPaused();
|
||||
});
|
||||
root.addEventListener('focusout', function (event) {
|
||||
if (!root.contains(event.relatedTarget)) {
|
||||
hoverPaused = false;
|
||||
syncPaused();
|
||||
}
|
||||
});
|
||||
|
||||
dots.forEach(function (dot, n) {
|
||||
dot.addEventListener('click', function () {
|
||||
activate(n);
|
||||
});
|
||||
});
|
||||
|
||||
// Steuerung einblenden (ohne JS bleibt sie verborgen, da funktionslos).
|
||||
if (controls) {
|
||||
controls.hidden = false;
|
||||
}
|
||||
|
||||
// Pause/Play nur anbieten, wenn überhaupt automatisch rotiert wird.
|
||||
if (toggle && !reduce) {
|
||||
toggle.hidden = false;
|
||||
toggle.addEventListener('click', function () {
|
||||
userPaused = !userPaused;
|
||||
toggle.setAttribute('aria-pressed', String(userPaused));
|
||||
if (toggleLabel) {
|
||||
toggleLabel.textContent = userPaused
|
||||
? 'Automatischen Wechsel fortsetzen'
|
||||
: 'Automatischen Wechsel pausieren';
|
||||
}
|
||||
syncPaused();
|
||||
});
|
||||
}
|
||||
|
||||
activate(0);
|
||||
syncPaused();
|
||||
})();
|
||||
Reference in New Issue
Block a user