README

Inhaltselemente für Contao, die Inhalte hinter einer anklickbaren Überschrift verbergen und per Klick aufklappen. Die Elemente sind dem Akkordeon des Contao-Kerns nachempfunden, kommen aber ohne JavaScript aus: Sie geben die HTML-Elemente details und summary aus, die jeder aktuelle Browser von sich aus auf- und zuklappt.

Es gibt drei Elemente in der Gruppe Spoiler:

Element	Zweck
Einzelelement	Ein Spoiler mit Überschrift und einem Text aus dem Rich-Text-Editor.
Umschlag Anfang	Öffnet einen Spoiler, in dem alle folgenden Inhaltselemente liegen.
Umschlag Ende	Schließt den Spoiler wieder.

Mit dem Umschlag lassen sich beliebige Inhaltselemente verbergen, etwa Bilder, Tabellen oder Downloads. Das Backend rückt die eingeschlossenen Elemente in der Liste ein, wie beim Akkordeon.

Voraussetzungen

Contao 4.13 oder Contao 5
PHP 7.4 oder neuer (geprüft mit PHP 8.4)

Installation

Über den Contao Manager nach „Spoiler" suchen, oder auf der Konsole:

composer require schachbulle/contao-spoiler-bundle

Danach die Datenbank aktualisieren (Contao Manager oder contao:migrate), damit die beiden neuen Spalten in tl_content angelegt werden.

Bedienung

Im Artikel ein neues Inhaltselement anlegen und in der Gruppe Spoiler den Typ wählen.

Überschrift ist der immer sichtbare Text, mit dem sich der Spoiler öffnet und schließt. Das Feld ist Pflicht und darf einfaches HTML enthalten, etwa <em>.
Anfangs geöffnet zeigt den Spoiler beim Laden der Seite bereits aufgeklappt.

Beim Einzelelement kommt darunter das Textfeld mit dem Rich-Text-Editor. Beim Umschlag folgen zwischen „Umschlag Anfang" und „Umschlag Ende" die Inhaltselemente, die verborgen werden sollen.

Markup

Einzelelement:

<details class="ce_spoilerSingle ce_spoiler block" open>
  <summary>Überschrift</summary>
  <div class="spoiler_content">
    <p>Text</p>
  </div>
</details>

Umschlag (der Inhalt dazwischen stammt aus den eingeschlossenen Elementen):

<details class="ce_spoilerStart ce_spoiler block">
  <summary>Überschrift</summary>
  <div class="spoiler_content">
    <div class="ce_text block">…</div>
  </div>
</details>

Das Attribut open erscheint nur, wenn „Anfangs geöffnet" gesetzt ist. Eine unter „Experteneinstellungen" vergebene ID oder Klasse landet am details-Element.

Gestaltung

Das Bundle liefert bewusst kein Stylesheet mit; Browser stellen details und summary ohne weiteres Zutun bedienbar dar. Für das Theme genügt meist:

.ce_spoiler > summary {
  cursor: pointer;
  font-weight: bold;
}

.ce_spoiler > .spoiler_content {
  padding: 0.5em 1em;
}

Wer anderes Markup braucht, legt eigene Fassungen der Templates ce_spoilerSingle.html5, ce_spoilerStart.html5 und ce_spoilerStop.html5 im Template-Verzeichnis der Installation ab oder wählt sie je Element unter „Template". Die Templates kennen die Variablen $this->summary (Überschrift), $this->open (Anfangszustand) und beim Einzelelement $this->text.

Prüfstand

tests/pruefstand.php bootet eine vorhandene Contao-Installation, in der das Bundle eingebunden ist, prüft Anmeldung, Paletten und Beschriftungen und rendert die drei Elemente im Frontend- und im Backend-Kontext:

php tests/pruefstand.php /pfad/zur/contao-installation

Das Skript ist gegen Contao 4.13.58 und Contao 5.7.7 mit PHP 8.4.24 gelaufen.

Lizenz

LGPL-3.0-or-later — siehe LICENSE.

Autor

Frank Hoppe, schachbulle.de

schachbulle / contao-spoiler-bundle

Package info

Security

Statistics