contentbuilder docs

docs/README.md

@@ -16,6 +16,7 @@
         - [fields](projektkonfig/collections/fields.md)
             - [Datentypen](projektkonfig/collections/fields/datentypen.md)
             - [Admin Widgets](projektkonfig/collections/fields/widgets.md)
+                - [· ContentBuilder](projektkonfig/collections/fields/widgets/contentbuilder.md)
         - [indexes](projektkonfig/collections/indexes.md)
         - [hooks](projektkonfig/collections/hooks.md)
         - [imageFilter](projektkonfig/collections/imageFilter.md)

docs/projektkonfig/collections/fields.md

@@ -10,6 +10,12 @@ Zunächst folgt der grundlegende Aufbau des Feld-Objektes:
 
 ## validator Objekt
 
+<video width="100%" controls muted autoplay loop>
+  <source src="validator.webm" type="video/webm">
+</video>
+
+Wie im Beispiel von **fields/date.yml** unter `validator` zu sehen ist, wird dort ein Datum nach dem aktuellen erwartet. Wie der Validator sich auf die UI auswirkt, ist im obigen Video zu sehen.
+
 Das `validator` Objekt wird *tibi-server* seitig genutzt um die Daten zu validieren. Da das `validator` Objekt dem *tibi-admin* ebenso zur Verfügung steht, kann vorab eine client-seitige Validierung zusätzlich durchgeführt werden.
 
 Attribute des Objektes:
@@ -43,6 +49,53 @@ Sollte der `eval` Code im *tibi-admin* nicht lauffähig sein (nicht abgefangene
 
 ## dependsOn
 
+<video width="100%" controls muted autoplay loop>
+  <source src="dependsOn.webm" type="video/webm">
+</video>
+
+Obige Darstellung wie im Video wird beispielsweise durch folgende Feld-Konfiguration erreicht:
+
+```yaml
+# in einer Kollektions-Konfiguration
+fields:
+  - name: type
+    type: string
+    meta:
+        label:
+            de: Typ
+            en: Type
+        widget: select
+        choices:
+            - name: 
+                de: Standardseite
+                en: Standard page
+            id: page
+            - name: 
+                de: News
+                en: News
+            id: news
+
+  - name: title
+    type: string
+    meta:
+        label:
+            de: Titel
+            en: Title
+
+  - name: date
+    type: date
+    meta:
+        label:
+            de: Titel
+            en: title
+        widget: date
+        defaultValue:
+            eval: new Date()
+        dependsOn:
+            eval: $parent?.type == "news"
+
+```
+
 `meta.dependsOn` kann als Objekt mit `eval`-Attribut für Javascript oder als `string` mit dem Feldnamen (Punktschreibweise, z.B. `"additionalData.author"`) angegeben werden.
 
 Wird der Feldname verwendet wird nur geprüft, ob das Feld belegt ist. TODO
@@ -60,6 +113,7 @@ Die Rückgabe des Javascript-Codes beeinflusst die Einblendung des betroffenen F
 | `true` | Das Feld wird angezeigt |
 | `false` | Das Feld wird ausgeblendet |
 
+
 ## defaultValue
 
 Für die Vorlegung neu anzulegender Datensätze kann in `field.meta.defaultValue` direkt der Standardwert hinterlegt werden, oder über `field.meta.defaultValue.eval` ein Javascript-Code angegeben werden, der den Wert ermittelt. Die Rückgabe des Javascript-Codes, sowie auch die direkte Vergabe des Wertes muss dem Datentyp des Feldes entsprechen.

docs/projektkonfig/collections/fields/widgets.md

@@ -34,4 +34,6 @@ Nicht jedes Widget kann mit jedem Datentyp umgehen, die möglichen Datentypen we
 
 ## tabs
 
-## contentbuilder
+## contentbuilder
+
+siehe: [ContentBuilder](./widgets/contentbuilder.md)

docs/projektkonfig/collections/fields/widgets/contentbuilder.md

@@ -0,0 +1,31 @@
+# contentbuilder
+
+> Der ContentBuilder ist ein Drittanbieter-Produkt und steht nicht in jeder Lizenz zur Verfügung. Bitte kontaktieren Sie uns, wenn Sie Interesse an diesem Widget haben.
+
+Für die Gestaltung von HTML-Inhalten ist der ContentBuilder eine einfache und intuitive Lösung. Es sind Layout-Hilfmittel wie Spalten und Zeilen ebenso verfügbar, wie die Möglichkeit Dateien (Bilder, Video, Downloads) direkt in den HTML-Code einzubinden.
+
+Wie der ContentBuilder an einem Feld konfiguriert wird verdeutlicht folgendes Beispiel:
+
+!!!include(api/collections/fields/content.yml)!!!
+
+## Mediathek Kollektion
+
+Wie aus der obigen Definition unterhalb von z.B. "imageSelect" zu lesen, bedarf es einer eigenen Kollektion für Bilder und andere Dateien. Diese Kollektion könnte wie folgt aussehen:
+
+> Die Bedeutung der nicht beschriebenen Eigenschaften ist unter [collections](./../../../collections.md) beschrieben.
+
+!!!include(api/collections/medialib.yml)!!!
+
+## Module (customTags)
+
+Die Einbindung des konfigurierten Beispiel-Moduls aus obiger Definition erfolgt im ContentBuilder wie im folgenden Video zu sehen ist:
+
+<video width="100%" controls autoplay muted loop>
+  <source src="contentbuilder-module.webm" type="video/webm">
+</video>
+
+Wie oben schon erwähnt, sind die `placeholder` frei wählbar. Eine HTML5-Schreibweise bietet sich aber sowohl für das Styling, als auch für die spätere Einbindung in ein Frontend an.
+
+In unserem Beispiel hier wurden zusättzlich zum eigentlichen Modul-Tag noch Attribute (`title` und `description`) definiert. Diese können dann im Frontend das eigentliche Modul beeinflussen.
+
+Im Frontend könnte ein Modul dann später als "Custom Element" implementiert werden oder es wird ein HTML-Parser verwendet, der die Tags durch eigene Komponenten ersetzt, wie er im Anhang [TODO] zu finden ist.