Events

Ein Event bestimmt das Verhalten eines oder mehrerer vorausgehendender Elemente, die mit targetId adressiert werden und i.d.R. ausgeführt werden, nachdem die Eigenschaft des aufrufenden Elements im Expertenmodus geändert wurde. Der Wert für die Eigenschaft wird in Abhängigkeit zur Position/Größe des aufrufenden Elements angegeben. Das aufrufende Element liegt in derselben Layoutgruppe unter den Zielelementen.

Einheit: Elemente mit Events sollten in Punkt angelegt werden.

Aufbau eines Events:

{
    "Eventfunktionen": [
        {
            "aktion": "Aktionsname",
            "targetId": "ID des Element, für das die Anpassung gelten soll",
            "options": {
               "Optionsname": Wert
            }
        }
    ]
}

Mehrere Angaben JSON-konform mit Komma trennen, letzte ohne Komma.

Eventfunktionen

Bestimmt die auslösende Eigenschaft des aufrufenden Elements.

• size: Anpassung wir ausgeführt, wenn Breite oder Höhe sich ändern.
• width: Anpassung wir ausgeführt, wenn Breite sich ändert
• height: Anpassung wir ausgeführt, wenn Höhe sich ändert
• position: Anpassung wir ausgeführt, wenn X- oder Y-Position sich ändert
• xPosition: Anpassung wir ausgeführt, wenn X-Position sich ändert
• yPosition: Anpassung wir ausgeführt, wenn y-Position sich ändert
• top:
• textWidth: Zielobjekt wird an die Breite des Textinhaltes angepasst
• imageWidth: Zielobjekt wird an die Breite des Bilds im ImageElement angepasst

Aktionen

size - Höhe und/oder Breite des Ziel-Elements ändern sich

{
"aktion": "size",
"targetId": "xyz",
 "options":  {
      "offsetHeight": 10,
      "offsetWidth": 10
}

width - Breite des Ziel-Elements ändert sich

{
"aktion": "width",
"targetId": "xyz",
 "options":  {
      "offsetWidth": 10
}

height - Höhe des Ziel-Elements ändert sich

{
"aktion": "height",
"targetId": "xyz",
 "options":  {
      "offsetHeight": 10
}

position - vertikale und horizontale Position des Ziel-Elements ändern sich

{
"aktion": "position",
"targetId": "xyz",
 "options": {
                "offsetX": {
                    "b": 0
                },
                "offsetY": {
                    "b": 0
                }
}

"b" steht für beide Seiten; Alternativ: "l" für linke Seite, "r" für rechte Seite

yPosition - vertikale Position Position des Ziel-Elements ändert sich

{
"aktion": "yPosition",
"targetId": "xyz",
 "options": {
                "offsetY": {
                    "b": 0
                }
   }

xPosition - horizontale Position des Ziel-Elements ändert sich

{
"aktion": "xPosition",
"targetId": "xyz",
 "options": {
                "offsetX": {
                    "b": 0
                }
   }

bottom / toTop - Element hinter den unteren Rand schieben, wenn Ausmaße sich ändern

"bottom": [
        {
            "aktion": "yPosition",
            "targetId": "403278",
            "options": {
                "offsetY": {
                    "b": -5,
                    "toTop": true
                }
            }
        }
    ]

toTop kann auch bei "size" oder "height" angewendet werden.

imageWidth - Ziel-Element(e) orientier(en) sich an der Breite des Bildes

Füllt ein Bild nicht die ganze Breite des imageElements aus, passt sich die Breite des Ziel-Elements automatisch der Breite des Bildes an. Geeigneter Einsatz: Text unter einem Bild

{
    "imageWidth": [
        {
            "aktion": "width",
            "targetId": "403934",
            "options": {
                "offsetWidth": 0
            }
        }
    ]
}

textWidth/imageWidth - Zielelemente orientieren sich an der Breite des Textes oder Bildes

Füllt ein Text nicht die ganze Breite eines textElements, passt sich die Breite des Ziel-Elements automatisch der Breite des Textes an. Geeigneter Einsatz: Hintergrund-Grafik

{
    "textWidth": [
        {
            "aktion": "width",
            "targetId": "403934",
            "options": {
                "offsetWidth": 0
            }
        },
        {
            "aktion": "width",
            "targetId": "404069",
            "options": {
                "offsetWidth": 0
            }
        }
    ]
}