Matchcenter: Spielplan, Ergebnisse & Tabellen (eigene Seite statt BFV-Widget)
Neue Unterseite /matchcenter ersetzt die alten BFV-Widget-Embeds (verstoßen
gegen CSP) durch eine self-hostete Lösung: Cron-Scraper holt die Daten aus der
öffentlichen BFV-Widget-JSON-API, schreibt data/matchcenter.json und lädt die
Vereinswappen lokal — Besucher kontaktieren nur unsere Domain.
- bin/matchcenter-sync.php: CLI/Cron-Scraper (Muster wie instagram-sync), JSON-API
team/{id}/matches + competition/{compoundId}/table, Wappen via getLogo lokal,
atomarer Write, Fail-safe. Auto-Saison: Tabellen-compoundId wird aus der
Matches-API abgeleitet (team_id ist saison-stabil). Per-Team-Cache-Fallback bei
Fetch-Fehlern, damit Sektionen nie leeren.
- Seite app/pages/matchcenter.php + Route + Nav-Eintrag (unter Fußball).
- Komponenten: match-slider (nächste Spiele), match-card, match-row, league-table
(mit Auf-/Abstiegszonen), matchcenter-section (kicker-Layout: Tabelle 2/3 +
Spiele 1/3), matchcenter-empty, crest (weißes Chip + Initialen-Fallback).
- carousel.js: banner.js zum generischen [data-carousel]-Antrieb verallgemeinert
(Banner- und Match-Slider teilen ihn); crest.js: Logo-Fallback im Browser.
- helpers.php: sportsevent_nodes() für SportsEvent-JSON-LD.
- Icons calendar-event; config.example + .gitignore + CLAUDE.md ergänzt.
- Responsive geprüft (kein Seiten-Overflow 360–1280, Tabelle scrollt in der Karte).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0192vTfGmGpoWeyUse4TuQFj
This commit is contained in:
@@ -1,123 +0,0 @@
|
||||
/* 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) {
|
||||
// Sichtbarkeit per Klasse → CSS blendet über (siehe .is-enhanced).
|
||||
slide.classList.toggle('is-active', 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();
|
||||
});
|
||||
}
|
||||
|
||||
// Crossfade aktivieren: Slides stapeln (CSS) und Sichtbarkeit per Klasse
|
||||
// steuern. Vorher gesetzte hidden-Attribute (No-JS-Fallback) entfernen.
|
||||
root.classList.add('is-enhanced');
|
||||
slides.forEach(function (slide) {
|
||||
slide.hidden = false;
|
||||
});
|
||||
|
||||
activate(0);
|
||||
syncPaused();
|
||||
})();
|
||||
131
public/assets/js/carousel.js
Normal file
131
public/assets/js/carousel.js
Normal file
@@ -0,0 +1,131 @@
|
||||
/* Generischer Karussell-Antrieb für alle [data-carousel]-Elemente
|
||||
(Werbe-/Sponsoren-Banner und Matchcenter „Nächste Spiele"). Auto-Rotation über
|
||||
die Fortschrittsanimation des aktiven Indikators (animationend → nächste Folie).
|
||||
|
||||
Erwartete Hooks je Wurzel:
|
||||
[data-carousel] Wurzel
|
||||
[data-carousel-track] Folien-Container (bekommt aria-live)
|
||||
[data-carousel-slide] einzelne Folie
|
||||
[data-carousel-controls] Steuerleiste (ohne JS hidden)
|
||||
[data-carousel-toggle] Pause/Play-Taste
|
||||
[data-carousel-toggle-label] visually-hidden Beschriftung
|
||||
[data-carousel-dot] Indikator-Button
|
||||
[data-carousel-progress] Fortschritts-Element im aktiven Dot (treibt den Wechsel)
|
||||
|
||||
Barrierefreiheit:
|
||||
- explizite Pause/Play-Taste (WCAG 2.2.2 „Pause, Stop, Hide"),
|
||||
- zusätzlich Pause bei Hover/Fokus,
|
||||
- aria-live: im Autoplay "off", 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.
|
||||
Ohne JS ist nur die erste Folie sichtbar (Graceful Degradation). */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function initCarousel(root) {
|
||||
var track = root.querySelector('[data-carousel-track]');
|
||||
var slides = Array.prototype.slice.call(root.querySelectorAll('[data-carousel-slide]'));
|
||||
var dots = Array.prototype.slice.call(root.querySelectorAll('[data-carousel-dot]'));
|
||||
var controls = root.querySelector('[data-carousel-controls]');
|
||||
var toggle = root.querySelector('[data-carousel-toggle]');
|
||||
var toggleLabel = root.querySelector('[data-carousel-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() {
|
||||
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.classList.toggle('is-active', 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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fortschrittsanimation des aktiven Indikators durchgelaufen → nächste Folie.
|
||||
// (Beim Wechsel bricht die alte Animation ab → 'animationcancel' statt
|
||||
// 'animationend' → kein Doppelsprung.)
|
||||
root.addEventListener('animationend', function (event) {
|
||||
if (event.target && event.target.matches && event.target.matches('[data-carousel-progress]')) {
|
||||
activate(index + 1);
|
||||
}
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
// Crossfade aktivieren: Slides stapeln (CSS) und Sichtbarkeit per Klasse
|
||||
// steuern. Vorher gesetzte hidden-Attribute (No-JS-Fallback) entfernen.
|
||||
root.classList.add('is-enhanced');
|
||||
slides.forEach(function (slide) {
|
||||
slide.hidden = false;
|
||||
});
|
||||
|
||||
activate(0);
|
||||
syncPaused();
|
||||
}
|
||||
|
||||
Array.prototype.slice.call(document.querySelectorAll('[data-carousel]')).forEach(initCarousel);
|
||||
})();
|
||||
39
public/assets/js/crest.js
Normal file
39
public/assets/js/crest.js
Normal file
@@ -0,0 +1,39 @@
|
||||
/* Vereinswappen-Fallback: lädt ein <img class="crest"> nicht (404, kaputtes Bild),
|
||||
wird es durch den Initialen-Kreis ersetzt — kein kaputtes Bild-Icon. Progressive
|
||||
Enhancement; ohne JS bleibt höchstens das (alt="") leere Bild. */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function initials(name) {
|
||||
var parts = (name || '').split(/[\s.\-]+/);
|
||||
var out = '';
|
||||
for (var i = 0; i < parts.length && out.length < 2; i++) {
|
||||
if (parts[i]) {
|
||||
out += parts[i].charAt(0);
|
||||
}
|
||||
}
|
||||
return (out || '?').toUpperCase();
|
||||
}
|
||||
|
||||
function replace(img) {
|
||||
var span = document.createElement('span');
|
||||
span.className = 'crest crest--initials';
|
||||
span.setAttribute('aria-hidden', 'true');
|
||||
span.textContent = initials(img.getAttribute('data-club'));
|
||||
if (img.parentNode) {
|
||||
img.parentNode.replaceChild(span, img);
|
||||
}
|
||||
}
|
||||
|
||||
var imgs = document.querySelectorAll('img.crest');
|
||||
Array.prototype.forEach.call(imgs, function (img) {
|
||||
// Bereits fehlgeschlagen, bevor JS lief?
|
||||
if (img.complete && img.naturalWidth === 0) {
|
||||
replace(img);
|
||||
return;
|
||||
}
|
||||
img.addEventListener('error', function () {
|
||||
replace(img);
|
||||
});
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user