# Der Name des Feldes ist natürlich beliebig wählbar.
name: content

# "string" als Datentyp ist zwingend.
type: string

meta:
    label:
        de: Inhalt
        en: content

    # Die Bezeichnung des ContentBuilder-Widgets ist "contentbuilder".
    widget: contentbuilder

    # Die Anzeige des ContentBuilder im tibi-admin geschieht innerhalb
    # eines iframes. Das ist notwendig, da der ContentBuilder eigene 
    # Styles mitbringet, die sich nicht mit den Styles des tibi-admin
    # vermischen sollten.

    # Via "baseHref" wird der <base>-Tag im iframe gesetzt.
    # somit können alle relativen Pfade im ContentBuilder (z.B. Bilder)
    # aufgelöst werden.
    # Wie man hier sieht, ist die Angabe via "eval" mittels möglich.
    # Der Kontext ist auf Feldebene, wie bei "dependsOn" und "defaultValue".
    # Alternativ kann die Angabe auch direkt als String erfolgend.
    # Dann natürlich ohne die Evaluierung der Variable "$projectBase", wie hier.
    baseHref:
        eval: $projectBase

    # Sollen weitere CSS-Datei in das iframe geladen werden, können diese
    # hier aufgelistet werden.
    # Die Angabe kann direkt als Array erfolgen oder via "eval", dessen
    # Code das Array der Strings mit den Dateipfaden zurückgibt.
    # Auch zu beachten ist hier die relative Angabe. Da "baseHref" gesetzt
    # ist, wird der Pfad relativ zu dieser Projekt-Basis innerhalb des
    # tibi-server aufgelöst.
    # Die Auslieferung der CSS-Dateien direkt über den tibi-server kann
    # nur funktionieren, wenn "_dist_" in der "assets" Konfiguration der
    # "config.yml" definiert ist.
    cssHref:
        - _/assets/_dist_/index.css

    # Um eine Kollektion stellvertretend als Mediathek anzubinden, sind die 
    # Angaben unter "imageSelect", "fileSelect" und "videoSelect" zu tätigen.
    # "imageSelect" betrifft die Einbindung von Bildern, "fileSelect" die
    # Einbindung von Dateien, "videoSelect" die Einbindung von Videos.
    imageSelect:

        # Die Angabe "collection" ist zwingend. Hier wird die Kollektion
        # definiert, die als Sammlung für die Bilder/Datei dient.
        # Der Aufbau der Kollektion ist dabei frei, solange ein Upload-Feld
        # für die Dateien existiert, welches die URL zur Datei zurückgibt.
        collection: medialib

        # Optional kann ein Filter und View für die Einbindung der Bilder/Dateien
        # definiert werden. Dies geschieht über einen "subNavigation" 
        # Eintrag innerhalb des "meta.subNavigation" Arrays, der Kollektion
        # (hier bei "medialib").
        # Die Angabe hier ist die auszuwählende Navigation per Index des Arrays.
        subNavigation: 0

    fileSelect:
        collection: medialib
        subNavigation: 0
    videoSelect:
        collection: medialib
        subNavigation: 0

    # "customTags" des ContentBuilder können verwendet werden um die Einbindung
    # von Modulen ins HTML zu ermöglichen.
    # Die folgende Auflistung ist dabei ein Beispiel für ein Modul.
    customTags:

        - # Der Platzhalter wird 1:1 ins HTML übernommen und ist dabei frei
          # definierbar.
          # Die eigentliche Funktion eines Modul-Systems muss dann später
          # im Frontend implementiert werden.
          placeholder: "<my-module class='tibi-module' title='Titel' description='Beschreibung'>Mein Modul</my-module>"

          # Die Benennung für die UI des ContentBuilder geschieht über die
          # "label" Angabe, die mehrsprachig erfolgen kann.
          label: 
            de: "Mein Modul"
            en: "My Module"

    # Um direkt Style-Angaben in das iframe des ContentBuilder zu übernehmen,
    # werden diese hier angegeben.
    # Natürlich ist auch hier wieder die Angabe via "eval" möglich.
    # Nachfolgendes Beispiel erzeugt im ContentBuilder eine deutliche Darstellung
    # des eingebundenen Moduls.
    style: |
        /*css*/
        .is-builder {
            max-width: 1200px;
            margin: 0 auto;
        }
        .tibi-module {
            padding: 10px;
            border: 3px dashed #c4c4c4;
            display: block;
            text-align: center;
            font-size: 14px;
            color: black;
        }
        .tibi-module::before {
            content: "\1F5BD  ";
            font-size: 16px;
            color: black;
        }
        .tibi-module::after {
            content: "  title=\"" attr(title) "\" description=\"" attr(description) "\"";
            font-size: 10px;
            color: #555;
            display: block;
            padding-top: 5px;
        }
        /*!css*/