Der Adventskalender für's LFV-Website-Kit

Wir stellen euch hier unser Adventskalender-Skript zur Verfügung! Damit könnt auch ihr eure Webseite ganz einfach zur festlichen Jahreszeit aufwerten. Das Skript wurde für den Einsatz im LFV-Website-Kit entwickelt und erfordert keine tiefgehenden Programmierkenntnisse. Im Github Repository findet ihr den Programm-Code für den Einbau auf einer "normalen" Webseite.

Skript-Tester: So sieht der Adventskalender aus

Hier könnt ihr den Adventskalender in Aktion sehen – genau so, wie er aussieht, wenn ihr den Code ohne Anpassungen einfügt. Mit dem Skript-Tester könnt ihr jeden beliebigen Tag im Dezember auswählen und testen, wie der Kalender reagiert. Bei Fragen oder Problemen schreibt eine E-Mail an mario.fliegner@feuerwehr-gruenwald.de oder kippt es als Issue im Github-Repo ein.
Viel Spaß beim Testen und Personalisieren!

Skript-Tester

Tester aktivieren:

Setze Tag im Dezember (simulatedDayInDecember):

Popup auch für vergangene Türchen (showPopupForPastDoors):

Bilder hinter vergangenen Türchen anzeigen (showPreviewImagesForPastDoors):

Highlights & Features

Der Adventskalender wurde für Webseiten entwickelt, die auf dem LFV-Website-Kit basieren. Die Anpassungen erfordern keine tiefen Programmierkentnisse.

Desktop-Ansicht: Standardmäßig werden die Türchen in einer Darstellung mit sechs Türchen pro Reihe und insgesamt vier Zeilen angezeigt. Für die Hintergrundbilder wird ein 4:3-Format empfohlen, um eine optimale Darstellung sicherzustellen.
Mobile Ansicht: Auf Mobilgeräten passen sich die Türchen automatisch an und werden in drei Türchen pro Reihe dargestellt, wodurch die Übersichtlichkeit auch auf kleineren Bildschirmen gewährleistet bleibt.

Folgende Features hat der Kalender (Details zur Verwendung/Anpassung weiter unten):

Anzeige von Bild oder Video (.mp4 bzw. YouTube)
Optionale Beschreibung unter jedem Bild oder Video möglich (HTML-Tags erlaubt)
Optionaler Link zu beliebiger URL möglich
Flexible Türchenanordnung
Interaktive Türchen - Status basierend auf aktuellem Datum (offen, geschlossen oder aktiv)
Barrierefrei (aria-Attribute zur Unterstützung von Screenreadern)
Responsive Design
Testmodus, um das Verhalten zu simulieren: Perfekt, um sicherzustellen, dass alles wie gewünscht funktioniert, bevor ihr den Kalender live schaltet! ;-)

So bindet ihr den Adventskalender in eine Seite des LFV-Website-Kit ein:

1) Seite öffnen und HTML Snippets hinzufügen
Öffnet die gewünschte Seite im Editiermodus. Im Bereich Inhalt (auf der Startseite ist das der Bereich "Inhalt Startseite") fügt ihr vier HTML Snippets untereinander hinzu. Benennt die Snippets wie folgt, um die Übersichtlichkeit zu gewährleisten (auf die Namen wird sich weiter unten auch bezogen:

CSS + JavaScript
Daten (Bilder)
HTML
JavaScript Logik

Im LFV-Website-Kit sollte das so aussehen:

Struktur im LFV-Website-Kit

2) Code einfügen
Kopiert den passenden HTML-Code aus den vorgegebenen Textfeldern unten und fügt ihn in die entsprechenden HTML-Snippets ein.

3) HTML Snippet JavaScript Logik richtig positionieren
Wenn eure Seite weitere Elemente enthält, auf der der Adventskalender eingebunden wird, positioniert das HTML-Snippet JavaScript Logik ganz unten. Es sollte das letzte Element in der gesamten Seitenstruktur sein, um eine reibungslose Funktion des Kalenders sicherzustellen.

HTML Snippet: CSS + JavaScript

Kopiert dieses Snippet 1:1 und fügt es unverändert ein, um die korrekte Darstellung des Adventskalenders sicherzustellen. Es enthält folgende zentrale Funktionen:

Styling und Grid-Layout

Das Snippet definiert die CSS-Styling-Angaben für den Adventskalender. Es legt unter anderem das Grid-Layout der Türchen fest, einschließlich der Anzahl der Türchen, die je nach Bildschirmgröße nebeneinander angezeigt werden. So passt sich der Kalender automatisch an Desktop- und Mobilgeräte an.

JavaScript für den <head>-Bereich

Am Ende des Snippets befindet sich ein JavaScript, das die CSS-Angaben dynamisch in den <head>-Bereich der HTML-Seite einfügt. Dieser Schritt ist notwendig, um ein valides HTML-Dokument zu erzeugen.
Hintergrund: Im LFV-Website-Kit gibt es keinen direkten Zugriff auf den<head>-Bereich. Das JavaScript umgeht diese Einschränkung und stellt sicher, dass die CSS-Definitionen korrekt angewendet werden.

HTML:

HTML Snippet: Daten (Bilder)

In diesem Snippet steckt der größte Arbeitsaufwand für euch! Hier legt ihr fest, welche Bilder oder Videos hinter den Türchen angezeigt werden. Zusätzlich könnt ihr Texte und Links hinterlegen, die im Popup erscheinen. Kopiert den Code aus diesem Snippet am besten erst in einen Texteditor (z. B. Visual Studio Code, Notepad++), nehmt die Änderungen vor und fügt den Code dann erst in das HTML Snippet Daten (Bilder) auf der Seite ein.

Hinweis: Achtet unbedingt darauf, dass ihr in den Texten keine doppelten Anführungszeichen (") verwendet! Verwendet stattdessen das entsprechende HTML-Entity: "

Der Aufbau des dataObject ist wie folgt:


Parameter	Beschreibung	Beispielwert
defaultVideoThumbnail	Default-Bild für bereits geöffnete Türen, wenn dahinter ein Video angezeigt werden soll und bei diesem kein thumbnailImage angegeben wurde.
defaultLinkText	Default-Text für die Schaltfläche unter einem Bild, falls nicht explizit angegeben.
backgroundImage	Legt die Hintergrundbilder für den Kalender fest. Es lässt sich sowohl ein Bild für die Anzeige auf Desktop-PC/Laptop (large) als auch eins für mobile Endgeräte (small) angeben.
texte	Definiert Überschrift und Text des Popup-Fensters, welches angezeigt wird, wenn vergangene Türchen nicht mehr geöffnet werden dürfen (showPopupForPastDoors = false im HTML Snippet JavaScript Logik).
1 .. 24	Die Zahlen definieren die einzelnen Kalendertüren, also Tür Nummer 1 = 1. Dezember, ..., Tür Nummer 24 = 24. Dezember. Verfügbare Einstellungen in nächster Tabelle.

Für jedes einzelne Türchen sind folgende Einstellungen verfügbar:


Parameter	Beschreibung	Beispiel
image	Vollständige URL (inkl. https://) zum Bild, welches hinter dem Türchen angezeigt werden soll.	https://feuerwehren.bayern/media/bild.jpg
video	Definiert das Video, was hinter dem Türchen angezeigt werden soll - verfügbare Parameter in nächster Tabelle. Ist dieser Parameter gesetzt, wird image nicht berücksichtigt.
text	Beschreibung, die unter dem Bild (oder Video) angezeigt werden soll. HTML-Tags sind erlaubt.	<strong>Frohe Weihnachten!</strong><br/>Wir wünschen allen Besuchern ein Frohes Fest.
link	URL zu einer beliebigen Webseite (muss mit https:// beginnen). Wenn angegeben, wird automatisch eine Schaltfläche unter dem Bild (oder Video) und unter dem text, falls vorhanden) angezeigt. Der Link wird in einem neuen Fenster öffnet.	https://feuerwehren.bayern
linkText	Ein Text für die Schaltfläche des Links. Wird kein Wert angegeben, aber link wurde gesetzt, wird der Text für die Schaltfläche aus defaultLinkText (siehe oben) verwendet.	Zur LFV Website-Kit Homepage

Beschreibung für den video Parameter:


Parameter	Beschreibung	Beispiel
source	Definiert die Quelle des Videos. Verfügbare Werte: mp4oder youtube.	youtube
url	Wenn source = mp4 muss die vollständige URL zu dem MP4-Video angegeben werden (inkl. https://). Wenn ein Youtube-Video abgespielt werden soll, also source = youtube, dann muss nur die 11-stellige Video-ID des Youtube-Videos angegeben werden.	mp4: https://feuerwehren.bayern/video/feuerwehr.mp4 youtube: dQw4w9WgXcQ
thumbnailImage	Der Pfad zu einem Bild, welches anstatt des defaultVideoThumbnail (siehe oben) hinter der Tür angezeigt werden soll.	https://feuerwehren.bayern/image/video.jpg
controls	Wenn true werden die Steuerelemente zum Abspielen angezeigt (Play/Pause, Lautstärke, Zeitleiste).	true oder false
loop	Wenn true erfolgt eine Endloswiedergabe des Videos.	true oder false
width	Überschreibt die Anzeigebreite des Videos (bei Youtube standardmäßig 560px). Um das Video in voller Breite des Popups anzuzeigen, den Wert "100%" (in doppelten Anführungszeichen) angeben.	"560px" oder "100%" (jeweils in doppelten Anführungszeichen)
height	Überschreibt die Anzeigehöhe des Videos (bei Youtube standardmäßig 315px).	"560px" oder "100%"

HTML:

HTML Snippet: HTML

Hier könnt ihr die Anordnung der Kalendertürchen ändern. Dieses Snippet enthält eine HTML Struktur mit der Anordnung der Türchen. Falls ihr die Anordnung ändern möchtet, braucht ihr nur die jeweilgen Zeilen mit den Tagen an eine andere Stelle kopieren. Außerdem enthält das Snippet die HTML Struktur der Popup-Fenster, die beim Klick auf ein Türchen öffnen - das sollte aber nicht angepasst werden.

HTML:

<div class="advent-calendar">
  
  <div class="day" data-day="17" id="day-17" role="button" aria-labelledby="day-17">17</div>
  <div class="day" data-day="3" id="day-3" role="button" aria-labelledby="day-3">3</div>
  <div class="day" data-day="16" id="day-16" role="button" aria-labelledby="day-16">16</div>
  <div class="day" data-day="8" id="day-8" role="button" aria-labelledby="day-8">8</div>
  <div class="day" data-day="14" id="day-14" role="button" aria-labelledby="day-14">14</div>
  <div class="day" data-day="5" id="day-5" role="button" aria-labelledby="day-5">5</div>
  <div class="day" data-day="19" id="day-19" role="button" aria-labelledby="day-19">19</div>
  <div class="day" data-day="1" id="day-1" role="button" aria-labelledby="day-1">1</div>
  <div class="day" data-day="21" id="day-21" role="button" aria-labelledby="day-21">21</div>
  <div class="day" data-day="6" id="day-6" role="button" aria-labelledby="day-6">6</div>
  <div class="day" data-day="13" id="day-13" role="button" aria-labelledby="day-13">13</div>
  <div class="day" data-day="10" id="day-10" role="button" aria-labelledby="day-10">10</div>
  <div class="day" data-day="22" id="day-22" role="button" aria-labelledby="day-22">22</div>
  <div class="day" data-day="9" id="day-9" role="button" aria-labelledby="day-9">9</div>
  <div class="day" data-day="4" id="day-4" role="button" aria-labelledby="day-4">4</div>
  <div class="day" data-day="24" id="day-24" role="button" aria-labelledby="day-24">24</div>
  <div class="day" data-day="11" id="day-11" role="button" aria-labelledby="day-11">11</div>
  <div class="day" data-day="20" id="day-20" role="button" aria-labelledby="day-20">20</div>
  <div class="day" data-day="18" id="day-18" role="button" aria-labelledby="day-18">18</div>
  <div class="day" data-day="2" id="day-2" role="button" aria-labelledby="day-2">2</div>
  <div class="day" data-day="7" id="day-7" role="button" aria-labelledby="day-7">7</div>
  <div class="day" data-day="23" id="day-23" role="button" aria-labelledby="day-23">23</div>
  <div class="day" data-day="12" id="day-12" role="button" aria-labelledby="day-12">12</div>
  <div class="day" data-day="15" id="day-15" role="button" aria-labelledby="day-15">15</div>
</div>

<div class="modal fade" id="notTimeModal" tabindex="-1" role="dialog" aria-labelledby="notTimeModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="notTimeModalLabel">Noch etwas Geduld</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body" id="notTimeModalBody">
        
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="imageModalLabel">Adventskalender</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="modalVideoContainer" style="display: none;" aria-hidden="true"></div>
        <div id="modalImageContainer" style="display: none;" aria-hidden="true"></div>
        <div id="modalText"></div>
        <a id="modalLink" href="#" target="_blank" title="Link in neuem Fenster öffnen" rel="noopener noreferrer" class="btn btn-primary" role="button" style="display: none;"></a>
      </div>
    </div>
  </div>
</div>

HTML Snippet: JavaScript Logik

Hier könnt ihr das Verhalten der Türchen anpassen und den TESTMODUS aktivieren!

Die folgenden Parameter könnt ihr anpassen um das Verhalten der Türchen zu steuern:

simulatedDayInDecember
Mit der Angabe einer Zahl zwischen 1 und 24 lässt sich ein beliebiger Tag im Dezember simulieren. Wenn ihr bspw. 5 angebt, dann verhält sich der Kalender so, als wäre es heute der 5. Dezember. Zahlen zwischen 25 und 31 öffnen alle Kalendertürchen.
Mögliche Werte: 0 (=Testmodus aus) bis 31
showPopupForPastDoors
Steuert, ob das Popup auch noch für vergangene Türchen angezeigt werden soll. Wenn es auf false steht, erscheint eine Meldung, dass man vergangene Türchen nicht öffnen kann.
Mögliche Werte: true oder false.
showPreviewImagesForPastDoors
Steuert, ob die Vorschaubilder für vergangene Türchen leicht transparent angezeigt werden sollen.
Mögliche Werte: true oder false.

HTML:

// Steuert, ob das Popup für vergangene Türchen angezeigt werden soll.
  let showPopupForPastDoors = true;

// Zeigt Vorschaubilder für vergangene Türchen an, wenn "true".
  let showPreviewImagesForPastDoors = true;

/***** AB HIER KEINE ÄNDERUNGEN NÖTIG *****/

const monthNamesGerman = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];

document.addEventListener('DOMContentLoaded', () => {
      const basePath = '';
      if (typeof simulatedDayInDecember === 'undefined') {
          simulatedDayInDecember = 0;
      }
      let currentDate = simulatedDayInDecember || new Date().getDate();
      let selectedMonth = simulatedDayInDecember ? 11 : new Date().getMonth();
      const currentYear = new Date().getFullYear();
      const imageModalElement = document.getElementById('imageModal');
      const modalImageContainer = document.getElementById('modalImageContainer');
      const modalVideoContainer = document.getElementById('modalVideoContainer');
      const modalText = document.getElementById('modalText');
      const modalLink = document.getElementById('modalLink');
      const modalTitle = document.getElementById('imageModalLabel');
      const notTimeModal = $('#notTimeModal');
      const notTimeModalLabel = document.getElementById('notTimeModalLabel');
      const notTimeModalBody = document.getElementById('notTimeModalBody');
      const adventCalendar = document.querySelector('.advent-calendar');

const backgroundImageLarge = dataObject.backgroundImage.large;
      const backgroundImageSmall = dataObject.backgroundImage.small;
      const defaultVideoThumbnail = dataObject.defaultVideoThumbnail || 'https://www.feuerwehr-gruenwald.de/media/filer_public/e0/84/e084b23e-7f02-4029-8e28-f0fd3ba418e4/videoplayer.png';
      const defaultTagImage = 'https://www.feuerwehr-gruenwald.de/media/filer_public/8d/f9/8df940f3-37d8-405d-a534-ff9d8c2b101b/defaulttag.jpg';
      const defaultLinkText = dataObject.defaultLinkText || "Weitere Informationen...";

function setCalendarBackground() {
          const windowWidth = window.innerWidth;
          adventCalendar.style.backgroundImage = windowWidth >= 992
              ? `url('${backgroundImageLarge}')`
              : `url('${backgroundImageSmall}')`;
      }

window.addEventListener('DOMContentLoaded', setCalendarBackground);
      window.addEventListener('resize', setCalendarBackground);

const days = document.querySelectorAll('.day');
      const isDecember = selectedMonth === 11;
      let activeDay = null;

function getThumbnail(dayInfo) {
          if (dayInfo.video) {
              return dayInfo.video.thumbnailImage || defaultVideoThumbnail;
          }
          return dayInfo.image ? `${basePath}${dayInfo.image}` : defaultTagImage;
      }

days.forEach((day) => {
          const dayNumber = parseInt(day.getAttribute('data-day'), 10);
          const dayInfo = dataObject[dayNumber];

if (!dayInfo) return;

if (isDecember && showPreviewImagesForPastDoors && dayNumber < currentDate) {
              setDayBackground(day, dayInfo);
              day.classList.add('opened');
          } else if (isDecember && dayNumber === currentDate) {
              day.classList.add('current');
              day.style.backgroundColor = 'transparent';
              day.style.border = '2px dashed black';
          } else {
              day.classList.add('closed');
              day.style.backgroundColor = 'transparent';
          }

day.addEventListener('click', () => {
              if (selectedMonth <= 10) {
                  notTimeModalBody.innerHTML = `Heute ist der ${currentDate}. ${monthNamesGerman[selectedMonth]} ${currentYear}! Die Türchen lassen sich erst ab dem 1. Dezember öffnen...`;
                  notTimeModal.modal('show');
              } else if (selectedMonth === 11 && currentDate > 31) {
                  notTimeModalBody.innerHTML = `Wusstest du...!? Der Dezember hat nur 31 Tage ;-) Bitte den Wert für <em>simulatedDayInDecember</em> ändern.`;
                  notTimeModal.modal('show');
              } else if (isDecember && dayNumber < currentDate && !showPopupForPastDoors) {
                  notTimeModalLabel.innerHTML = dataObject.texte?.popupHeader_showPopupForPastDoors_false || "Türchen nicht mehr verfügbar";
                  notTimeModalBody.innerHTML = dataObject.texte?.popupText_showPopupForPastDoors_false || "Zu spät, dieses Türchen kann nicht mehr geöffnet werden.";
                  notTimeModal.modal('show');
              } else if (isDecember && dayNumber <= currentDate) {
                  setActiveDay(day);
                  setDayBackground(day, dayInfo);
                  day.classList.add('opened');
                  showModal(dayNumber, dayInfo);
              } else {
                  const daysUntilOpen = dayNumber - currentDate;
                  notTimeModalBody.innerHTML = daysUntilOpen === 1
                      ? "Dieses Türchen kannst du erst morgen öffnen!"
                      : `Dieses Türchen kann erst in ${daysUntilOpen} Tagen, am ${dayNumber}. Dezember ${currentYear}, geöffnet werden.`;
                  notTimeModal.modal('show');
              }
          });
      });

const linkText = dayInfo.linkText || defaultLinkText;
  modalLink.href = dayInfo.link || "#";
  modalLink.innerText = linkText;
  modalLink.style.display = dayInfo.link ? 'inline-block' : 'none';

// Reset Video- und Bildcontainer
  modalImageContainer.innerHTML = '';
  modalVideoContainer.innerHTML = '';

if (dayInfo.video) {
      // Video-Konfiguration
      const { source, url, controls = true, loop = false, width = 560, height = 315 } = dayInfo.video;
     if (source === "youtube") {
          // YouTube iFrame mit data-url
          modalVideoContainer.innerHTML = `
              <iframe id="youtubeFrame" 
                      width="${width}" 
                      height="${height}" 
                      allowfullscreen
                      data-url="https://www.youtube.com/embed/${url}?enablejsapi=1&controls=${controls ? 1 : 0}">
              </iframe>`;
          const iframe = modalVideoContainer.querySelector('iframe');
          iframe.src = iframe.getAttribute('data-url'); // Setze das data-url-Attribut
      } else if (source === "mp4" || source === "mov") {
          // HTML5 Video mit data-url
          modalVideoContainer.innerHTML = `
              <video id="html5Video" 
                     width="${width}" 
                     height="${height}" 
                     class="img-fluid" 
                     ${controls ? "controls" : ""} 
                     ${loop ? "loop" : ""}>
                  <source data-url="${url}" type="video/${source}">
              </video>`;
          const sourceElement = modalVideoContainer.querySelector('source');
          sourceElement.src = sourceElement.getAttribute('data-url'); // Setze das data-url-Attribut
      }
      modalVideoContainer.style.display = 'block';
      modalImageContainer.style.display = 'none'; // Bildcontainer ausblenden
  } else {
      // Bild-Konfiguration
      modalImageContainer.innerHTML = `<img alt="Adventsbild" class="img-fluid" onerror="this.src='${defaultTagImage}'">`;
      const imgElement = modalImageContainer.querySelector('img');
      imgElement.src = getThumbnail(dayInfo); // Setze das `src` direkt
      modalImageContainer.style.display = 'block';
      modalVideoContainer.style.display = 'none'; // Videocontainer ausblenden
  }

// Modal mit jQuery anzeigen
  $('#imageModal').modal('show');

// Event-Listener für das Schließen des Modals, um Videos zu stoppen
  $('#imageModal').on('hidden.bs.modal', stopVideoPlayback);
}

function stopVideoPlayback() {
          const youtubeFrame = document.getElementById('youtubeFrame');
          const html5Video = document.getElementById('html5Video');

if (youtubeFrame) {
              youtubeFrame.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
          }
          if (html5Video) {
              html5Video.pause();
          }
      }
  });
</script>
<script data-url="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js" integrity="sha512-ubuT8Z88WxezgSqf3RLuNi5lmjstiJcyezx34yIU2gAHonIi27Na7atqzUZCOoY4CExaoFumzOsFQ2Ch+I/HCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Fragen bitte ausschließlich an mario.fliegner@feuerwehr-gruenwald.de oder Probleme als Issue im Github-Repo.