diff --git a/assets/js/cityRotator.js b/assets/js/cityRotator.js new file mode 100644 index 00000000..a23a1601 --- /dev/null +++ b/assets/js/cityRotator.js @@ -0,0 +1,29 @@ +(function() { + function initializeCityRotator() { + const rotatorElement = document.querySelector('.o-footer__city-rotator'); + if (!rotatorElement) return; + + const cities = JSON.parse(rotatorElement.getAttribute('data-cities')); + if (!cities || cities.length <= 1) return; + + let currentIndex = 0; + + function cycleCities() { + rotatorElement.style.opacity = '0'; + + setTimeout(() => { + currentIndex = (currentIndex + 1) % cities.length; + rotatorElement.textContent = cities[currentIndex]; + rotatorElement.style.opacity = '1'; + }, 300); + } + + setInterval(cycleCities, 3000); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeCityRotator); + } else { + initializeCityRotator(); + } +})(); diff --git a/assets/js/main.js b/assets/js/main.js index 09dcb987..66feb60c 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -4,3 +4,4 @@ import './resizeObserver.js'; import './mediaqueries.js'; import './highlightHeadline.js'; import './anchorlinks.js'; +import './cityRotator.js'; diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss index 0f6c44a4..e0431f0e 100644 --- a/assets/sass/footer.scss +++ b/assets/sass/footer.scss @@ -36,3 +36,9 @@ justify-content: space-between; flex-wrap: wrap; } + +.o-footer__city-rotator { + display: inline-block; + transition: opacity 0.3s ease; + min-width: 1ch; +} diff --git a/i18n/de.yaml b/i18n/de.yaml index e6d5f75e..e9a7188b 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -22,7 +22,11 @@ countryselection: Länderauswahl editPage: Seite bearbeiten footer-love: aria-label: Made with love in Frankfurt & Köln - text: Made with ♥️ in Frankfurt & Köln + cities: + '0': Frankfurt + '1': Köln + '2': Aachen + text: Made with ♥️ in general: Übergreifendes highlight: important: Wichtige Information diff --git a/i18n/en.yaml b/i18n/en.yaml index e1638ee7..6393de32 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -21,7 +21,11 @@ countryselection: choose country editPage: Edit page footer-love: aria-label: Made with love in Frankfurt & Cologne - text: Made with ♥️ in Frankfurt & Cologne + cities: + '0': Frankfurt + '1': Cologne + '2': Aachen + text: Made with ♥️ in general: general highlight: important: Important Information diff --git a/layouts/partials/footer-love.html b/layouts/partials/footer-love.html new file mode 100644 index 00000000..cd2428af --- /dev/null +++ b/layouts/partials/footer-love.html @@ -0,0 +1,12 @@ +{{ $cities := slice }} +{{ $i := 0 }} +{{ range seq 10 }} + {{ $city := T (printf "footer-love.cities.%d" $i) }} + {{ if ne $city "" }} + {{ $cities = $cities | append $city }} + {{ end }} + {{ $i = add $i 1 }} +{{ end }} +
+ {{ T "footer-love.text"}} {{ index $cities 0 }} +
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e2f7572f..47174a28 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,9 +1,7 @@