Hallo,
mit $ markieren wir in der TPP-Api Variablen, die ein HTMLElement enthalten. $slot enthält also den Knoten im DOM-Baum der mit Content befüllt und von der TPP-Api dekoriert/eingerahmt werden soll.
Mit CREATE_SIBLING_SECTION kannst du zu einer bestehenden Section eine Geschwister-Element anlegen. D.h. du brauchst bereits mindestens eine existierenden Section. Von so einer Section brauchst du die previewId, nicht den namen des Inhaltsbereiches ('main'). Diese Methode ist dazu da, jede einzelne Section eines Inhaltbereiches jeweils mit einem eigenen Rahmen auszustatten. So kann an jeder Stelle einer Liste von Sections eine weitere Section hinzugefügt werden.
(fs-tpp-api 1.0.0 | Documentation)
Korrigiertes Beispiel:
* //1. Assume you have given a list of section
* <div data-slot="abc">
* <div class="slot-entry" data-preview-id="..."/>
* <div class="slot-entry" data-preview-id="..."/>
* </div>
*
*
* //2. Decorate each slot entry with a create sibling button.
* var createSiblingSection = Decorate.CREATE_SIBLING_SECTION
* .context({
* sectionName : 'new_section', // name of the new section
* position: 'BEFORE' // optional. Default is AFTER.
* })
* .getOptions(
* [
* {id: 'section_template_uid_1', label : 'Basic Section'},
* {id: 'section_template_uid_2', label : 'Advanced Section'}
* ]
* );
* var $slotEntries = document.querySelectorAll('.slot-entry');
* [].forEach.call($slotEntries, function($entry){
* Decorate.element($entry).addButton(createSiblingSection);
* })
Die Struktur passend zum Beispiel aus dem Api Doc sieht hier so aus:
Page
+ body:abc
+*section: 'new_section' -> wird neu angelegt. context.sectionName bestimmt den Namen
+ section: slot_entry_a -> hier von nehmen wird die previewId
+ section: slot_entry_b -> der entsprechenden Knoten kann ebenfalls dekoriert werden
Wenn du initial eine erste Section anlegen willst, musst du CREAT_CHILD_SECTION verwenden. Hier muss die previewId einer Seite verwendet werden. Der Inhaltsbereich wird im context über das Feld body festgelegt. Diese Methode ist dazu da, einen ganzen Bereich auf einer Seite mit einem Rahmen auszustatten.
(fs-tpp-api 1.0.0 | Documentation)
Korrigiertes Beispiel:
* //1. the previewId of the current page it given
* var previewId = ...
*
* //2. a content slot to create the sections in is given
* var $slot = ...
*
* //3. decorate the content slot with a border
* var createChildSection = Decorate.CREATE_CHILD_SECTION
* .context({
* body: 'slot_name', // the slot will be matched to a page body
* sectionName: 'new_section', // initial name of the section
* position: 'FIRST' // optional. Default is LAST
* })
* .getOptions(
* [
* {id: 'section_template_uid_1', label : 'Basic Section'},
* {id: 'section_template_uid_2', label : 'Advanced Section'}
* ]
* );
*
* var decorate = Decorate.element($slot, previewId).addButton(createChildSection);
Die Struktur passend zum Beispiel aus dem Api Doc sieht hier so aus:
Page -> (hier von nehmen wir previewId)
+ body: 'slot_name' -> context.body
+ *section: 'new_section' -> wird neu angelegt. context.sectionName bestimmt den Namen
(In beiden Fällen ergibt sich die uid des verwendeten Section Templates aus dem id Feld der ausgewählten Option.)
Der Name muss vorgegeben werden. Es gibt intern keinen Default Wert und das Feld ist verpflichtend. Um dem Redakteur eine Auswahl zu geben, wäre es denkbar über eine Executable zu arbeiten und einen Dialog vorzuschalten.
Zur besseren Diagnose könntest du uns die verwendete previewId (als Text nicht als Bild) pasten.
Alternativ kannst du auch in der Developer-Konsole im Browser folgenden Befehl ausführen:
TPP_API.Debug.parsePreviewId('$die_verwendte_previewId$')
und die Ausgabe davon hier posten.
(Ja die { Klammern im Beispiel sind falsch. Wir haben ein Ticket dafür angelegt. )
