Der Editor ermöglicht es Ihnen im JSON Format Eingabe-Felder zu definieren. z.B. kann der Kunden eine Farbe oder eine Bild-Datei auswählen. Diese Auswahl wird dann automatisch in eine CSS-Klasse geschrieben, die z.B. die Smartbox definiert.

Die Grund-Syntax ist wie folgt:

im JSON Format immer mit einer geschweiften Klammern starten, dann erstellen Sie einen Eintrag für jede Klasse, die Sie dann brauchen (in unserem Fall: "colorsection"), innerhalb diesem Bereich erstellen Sie weitere Sub-Bereich für jeden CSS-Parameter mit den entsprechenden Editor-Einstellungen:

• Klasse
  • Eigenschaft (CSS-Parameter, z.B. background-color)
    • Konfiguration für Editor

Sie können so viele Klassen und Eigenschaften definieren, wie Sie möchten.

{

   "colorsection": { /* CSS Klassen-Name */

      "background-color": { /* CSS Eigenschaft */

         "inputType": "colorfield", /* Editor Typ: Farbauswahl */

         "allowBlank": true /* Wert muss nicht zwingend gewählt werden */

         /* weiter Editor Einstellungen */

      },

      "background-image": { /* CSS Eigenschaft */

         "inputType": "filefield" /* Editor Typ: Dateiauswahl */

      }

   }

}

Alle Editor Konfigurationen

inputType

Das Eingaben-Element mit dem der Endkunde einen Wert eingeben kann. Mögliche Elemente:

text: einfaches Textfeld

numberfield: nur numerische Eingabe

colorfield: Farbwähler

filefield: Datei-Auswahl (für Hintergundbilder, Favicons, usw..)

select: Auswahl-Feld

Je nach Eingabe-Type (inputType) können noch weitere Optionen definiert werden:

Alle Eingabe-Typen (inputType):

allowBlank (true,false): definiert ob das Feld leer sein darf

value: Standard-Wert

Nur Eingabe-Typ numberfield

minValue: mindest Wert der Eingabe-Zahl

maxValue: maximal Wert der Eingabe-Zahl

outputType: Ausgabe-Typ - falls nicht definiert, wird der Wert als "px" ausgegeben. Mögliche Werte "%", "em" oder "" falls es 1:1 ausgegeben werden soll.

Nur Eingabe-Typ colorfield

showAlpha (true,false): Definiert ob es einen Balken für die Transparenz geben soll.

Nur Eingabe-Type select

options: die auswählbaren Elemente

Beispiel - statt, dass der Endkunde jede Farbe frei wählen kann, geben wir ihm eine Auswahl von 3 Farben:

{

   "colorsection": { /* CSS Klassen-Name */

      "background-color": { /* CSS Eigenschaft */

         "inputType": "select", /* Editor Typ: Auswahl-Feld */

         "options": {

            "#ff0000": "Rot",

            "#00ff00": "Grün",

            "#0000ff": "Blau"

         }

      }

   }

}

Falls gesetzt auf "true" wird der Wert nicht dem CSS hinzugefügt. Es wird stattdessen nach einem Platzhalter im HTML Code gesucht in geschweiften Klammern. Wenn der Eigenschafts-Name "cls" ist, kann also {CLS} als Platzhalter benutzt werden im HTML Code.

Fixierte Werte

Anstatt dass man ein Objekt-Konfiguration braucht im Editor kann man Werte auch direkt eingeben, welche dann nicht editierbar sind aber dem CSS direkt hinzugefügt werden. Z.B: “border”: “1px solid black”.

Es empfiehlt sich allerdings diese fixierten CSS Werte direkt im CSS Bereich der SmartBox zu definieren und nicht umständlich im Editor.

Spezielle Werte

Es gibt einige reservierte Eigenschaften mit speziellen Bedeutungen:

• _label (string): gibt dem Feldsatz ein benutzerdefiniertes Label

Wie erstellt man eine SmartBox mit Konfigurations-Optionen für Endkunden (Schritt für Schritt)

Wenn Sie als einfaches Beispiel nur die Hintergund-Farbe für den Endkunden konfigurierbar hinterlegen möchten, ohne dass der Endkunde CSS-Code anpassen muss, dann können Sie den SmartBox-Editor verwenden.

Wichtig: der SmartBox Editor ist nur ersichtlich solange den "Experten-Modus" SmartBox aktiv ist!

(Hier wird ein sehr einfaches Beispiel zur Veranschaulichung verwendet.)

1. Wir erstellen eine neue SmartBox

Name: Colorselection

HTML: <div class="colorselection">%CONTENT%</div>

2. Im Editor definieren wir nun, dass es eine CSS-Klasse gibt, die "colorselection" heisst. Diese wiederum hat einen Parameter "background-color" welcher mittels einem Farb-Wähler definiert werden kann

{

   "colorselection": {

      "background-color": {

         "inputType": "colorfield"

      }

   }

}

3. Speicher und schliessen Sie diese SmartBox

4. Wenn Sie diese SmartBox erneut öffnen, dann werden Sie sehen, dass die Hintergrundfarbe nun auswählbar ist:

5. Wird der "Experten-Modus" SmartBox wieder unter "Allgemeine Einstellungen" entfernt, so sieht man den JSON-Editor nicht mehr, sondern kann lediglich die Änderungen vornehmen, die erlaubt wurden

6. Falls die Klasse "colorselection" weitere CSS-Einstellungen braucht, dann kann dies im CSS Eingabe-Feld innerhalb der SmartBox getan werden.

Beispiele

SmartFlexi

HTML:

<div class="smartflexi">%CONTENT%</div>

CSS:

.smartflexi label,
.smartflexi button,
.smartflexi p,
.smartflexi h1,
.smartflexi h2,
.smartflexi h3,
.smartflexi h4,
.smartflexi h5 {
 color: inherit !important; 
}

Editor:

{
    "smartflexi": {
        "_label": "SmartFlexi",
        "color": {
            "label": "Font Color",
            "inputType": "colorfield",
            "showAlpha": true  
        },
        "background-color": {
            "label": "Background Color",
            "inputType": "colorfield",
            "showAlpha": true 
        },
        "border": {
            "label": "border",
            "fields": {
                "border-style": {
                    "label": "Style",
                    "inputType": "select",
                    "options": {
                        "solid": "Solid",
                        "dashed": "Dashed",
                        "dotted": "Dotted"  
                    },
                    "value": "solid"  
                },
                "border-width": {
                    "label": "Width",
                    "inputType": "numberfield",
                    "value": "1"  
                },
                "border-color": {
                    "label": "Color",
                    "inputType": "colorfield",
                    "value": ""  
                },
                "border-radius": {
                    "label": "Radius",
                    "inputType": "numberfield",
                    "value": "5"  
                }  
            }  
        },
        "padding": {
            "label": "Padding (px)",
            "fields": {
                "padding-top": {
                    "label": "Top",
                    "inputType": "numberfield",
                    "value": "20"  
                },
                "padding-bottom": {
                    "label": "Bottom",
                    "inputType": "numberfield",
                    "value": "20"  
                },
                "padding-left": {
                    "label": "Left",
                    "inputType": "numberfield",
                    "value": "20"  
                },
                "padding-right": {
                    "label": "Right",
                    "inputType": "numberfield",
                    "value": "20"  
                }  
            }  
        }  
    }
}

<div class="smart-box smart-main {CLS}">
    <div class="smart-box-container smartbox-main-inner">
        %CONTENT%
    </div>
</div>

#main,.ym-column{padding-top:0;padding-bottom:0;}
.smart-mask{
  position: absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}
.smart-box-container{position:relative;}

{
  "smartbox-main-inner": {
    "_label": "SmartBox",
    "cls": {
      "label": "Full Width",
      "inputType": "checkbox",
      "checkedValue": "fullwidth",
      "uncheckedValue": "",
      "html": true
    },
    "padding":{
      "label": "Padding (px)",
      "fields": {
        "padding-top":{
          "label": "Top",
          "value": "0",
          "inputType": "numberfield"
        },
        "padding-bottom":{
          "label": "Bottom",
          "value": "0",
          "inputType": "numberfield"
        },
        "padding-left":{
          "label": "Left",
          "value": "0",
          "inputType": "numberfield"
        },
        "padding-right":{
          "label": "Right",
          "value": "0",
          "inputType": "numberfield"
        }
      }
    }
  },
  "smart-main": {
    "_label": "Background",
    "background-color":{
      "label": "Color",
      "inputType": "colorfield",
      "value": ""
    },
    "background-image": {
      "label": "Image",
      "inputType": "filefield"
    },
    "background-size": {
      "label": "Image Size",
      "inputType": "select",
      "options":{
        "auto": "Auto",
        "cover": "Cover",
        "contain": "Contain"
      },
      "value": "auto"
    },
    "background-repeat": {
      "label": "Image Repeat",
      "inputType": "select",
      "options":{
        "repeat": "Repeat",
        "no-repeat": "No repeat",
        "repeat-x": "Horizontal repeat",
        "repeat-y": "Vertical repeat"
      },
      "value": "no-repeat"
    },
    "background-position": {
      "label": "Image Position",
      "fields": {
        "background-position-x": {
          "inputType": "select",
          "label": "X-Axis",
          "options":{
            "left": "Left",
            "center": "Center",
            "right": "Right"
          },
          "value": "center",
          "width": "227"
        },
        "background-position-y": {
          "inputType": "select",
          "label": "Y-Axis",
          "options":{
            "top": "Top",
            "center": "Center",
            "bottom": "Bottom"
          },
          "value": "center",
          "width": "227"
        }
      }
    },
    "background-attachment": {
      "label": "Image Parallax",
      "inputType": "checkbox",
      "checkedValue": "fixed",
      "uncheckedValue": "scroll"
    }
  },
  "smart-mask": {
    "_label": "Mask",
    "background-color":{
      "label": "Color",
      "inputType": "colorfield",
      "value": "",
      "showAlpha": true
    }
  }
}