Agenda: Accordion Titel mit Icons
- Icons werden anhand des ausgewählten Sessiontypes (falls dazu hinterlegt) angezeigt.
Dazu gibt es im Kopf der Agenda ein Javascript-Objekt (Bild 1)jQuery(document).ready(function()
{
console.log(„JS-Code im Kopf der Agenda“);//Definition der Icons mit Klassen aus FontAwesome https://fontawesome.com/icons
var icon_imbiss = ‚<i class=“px-awesome fa-sharp fa-solid fa-french-fries“ aria-hidden=“true“></i>‘;
var icon_mpause = ‚<i class=“px-awesome fa-sharp fa-solid fa-plate-utensils“ aria-hidden=“true“></i>‘;
var icon_kpause = ‚<i class=“px-awesome fa-sharp fa-solid fa-mug-hot“ aria-hidden=“true“></i>‘;//Zuordnung der Icons zu den Sessiontype->Headlines
jQuery(‚div.imbiss .eael-accordion-tab-title‘).append(icon_imbiss);
jQuery(‚div.mittagspause .eael-accordion-tab-title‘).append(icon_mpause);
jQuery(‚div.kaffeepause .eael-accordion-tab-title‘).append(icon_kpause);//für die Klasse px-awesome Abstand 10px nach links und #0000ff ist blaue Farbe
jQuery(‚.px-awesome‚).css(‚margin-left‚,’10px‘).css(‚color‚,’#0000ff‚);});
- Wählt man wie in Bild 2 angezigt den Session-Typ imbiss aus, wird dort beim Laden der Seite ein HTML-Objekt <i></i> mit bestimmten Klassen erstellt und in das div-Objekt der Headline des Accordions Imbiss eingebettet und es erscheinen die Pommes frites.
<div class=“eael-accordion-tab-title“>Imbiss<i class=“px-awesome fa-sharp fa-solid fa-french-fries“ aria-hidden=“true“ style=“margin-left: 10px; color: rgb(0, 0, 255);“></i></div>
- Möchte man einen neuen Sessiontyp bzw. ein weiteren Pausentyp mit einem Icon definieren, so ergänzt man links im Menü unter Individuelle Felder (unter der Feldgruppe Session ->siehe Bild 3) im Feld Session Type die Auswahl-Option . Hier: treffpunkt (Bild 4)
- Jetzt ruft man auf der Webseite von FontAwesome (siehe oben) das gewünschte Icon auf (Bild 5+6) und kopiert dort die Klassen und setzt sie in das Javascript-Objekt (siehe Punkt 1 oben) ein.
Dazu kopiert man eine icon_xxxx-Variable und benamt sie um icon_imbiss zu icon_treffpunkt
und erstezt die Klasse fa-french-fries zu fa-users-rays:var icon_treffpunkt = ‚<i class=“px-awesome fa-sharp fa-solid fa-users-rays“ aria-hidden=“true“></i>‘;
jQuery(‚div.treffpunkt .eael-accordion-tab-title‘).append(icon_treffpunkt); - Egal, ob man jetzt in der Agenda einem Agenda-Punkt/-Objekt den Session-.Typ treffpunkt zuweist oder vor Definition unter Punkt 4. Sobald es wie in Punkt 4 definiert wurde , wird nun das neu Icon angezeigt. (siehe Bild 8)
- Falls Icons in unterschiedlichen Farben dargestellt werden sollten, so müsste man im entsprechenden Icon-Objekt anstelle der px-awesome-Klasse einen weiteren (Farb-)Klassen-Namen definieren und im Javascript-Objekt in der letzten Zeile dieses duplizieren und entsprechend anpassen.
var icon_treffpunkt = ‚<i class=“px-neuerKlassenname fa-sharp fa-solid fa-users-rays“ aria-hidden=“true“></i>‘;
jQuery(‚.px-neuerKlassenname‚).css(‚margin-left‚,’10px‘).css(‚color‚,’#00ffff‚);
