266 lines
7.4 KiB
YAML
266 lines
7.4 KiB
YAML
x-column-preview: &column-preview
|
|
eval: |
|
|
//js
|
|
(async () => {
|
|
const {ColumnsColumn, getRenderedElement} = await import($projectBase + "_/assets/dist/admin.mjs?t=" + $project?.updateTime)
|
|
let c = ColumnsColumn
|
|
const container = getRenderedElement(c, {
|
|
props: {
|
|
column: Object.assign({}, $this, {
|
|
}),
|
|
apiBase: $projectBase,
|
|
},
|
|
addCss: [
|
|
$projectBase + "_/assets/dist/index.css",
|
|
$projectBase + "_/assets/dist/admin.css",
|
|
],
|
|
})
|
|
let style = "background-color: white;"
|
|
style += "width: 600px;"
|
|
// if (!$this?.aktiv) {
|
|
// style += "opacity: 0.5;"
|
|
// }
|
|
container.style = style
|
|
return container
|
|
})()
|
|
//!js
|
|
|
|
name: columns
|
|
type: object[]
|
|
meta:
|
|
label:
|
|
de: Spalten
|
|
en: columns
|
|
dependsOn:
|
|
eval: $parent.type == 'columns'
|
|
pathStep:
|
|
title: Spalten
|
|
direction: horizontal
|
|
widget: previewBasedObjectArray
|
|
preview: *column-preview
|
|
folding:
|
|
previewFolded: *column-preview
|
|
previewUnfolded:
|
|
eval: |
|
|
"<div style=\"padding-left: 30px;\">" + ($this.type == "image" ? "Bild" : "Text") + "-Spalte (Breite: " + ($this.colWidth ? $this.colWidth + "/12" : "automatisch" ) + ")</div>"
|
|
raw: true
|
|
defaultValue:
|
|
eval: |
|
|
[{type: "text", colWidth: 0}]
|
|
metaElements:
|
|
- type
|
|
- colWidth
|
|
- verticalAlign
|
|
subFields:
|
|
- name: type
|
|
type: string
|
|
meta:
|
|
label:
|
|
de: Typ
|
|
en: Type
|
|
widget: select
|
|
defaultValue: text
|
|
choices:
|
|
- name:
|
|
de: Text
|
|
en: Text
|
|
id: text
|
|
|
|
- name:
|
|
de: Bild
|
|
en: Image
|
|
id: image
|
|
|
|
- name:
|
|
de: CTA
|
|
en: CTA
|
|
id: cta
|
|
containerProps:
|
|
layout:
|
|
size:
|
|
default: "col-4"
|
|
small: "col-12"
|
|
large: "col-4"
|
|
- name: colWidth
|
|
type: number
|
|
meta:
|
|
widget: select
|
|
label:
|
|
de: Spaltenbreite
|
|
en: Column width
|
|
choices:
|
|
- id: -1
|
|
name:
|
|
de: automatische Breite
|
|
en: auto
|
|
- id: 6
|
|
name:
|
|
de: 1/2
|
|
en: 1/2
|
|
- id: 4
|
|
name:
|
|
de: 1/3
|
|
en: 1/3
|
|
defaultValue: -1
|
|
containerProps:
|
|
layout:
|
|
size:
|
|
default: "col-4"
|
|
small: "col-12"
|
|
large: "col-4"
|
|
- name: verticalAlign
|
|
type: string
|
|
meta:
|
|
widget: select
|
|
label:
|
|
de: vertikale Ausrichtung
|
|
en: vertical alignment
|
|
choices:
|
|
- id: top
|
|
name:
|
|
de: oben
|
|
en: top
|
|
- id: middle
|
|
name:
|
|
de: mittig
|
|
en: middle
|
|
- id: bottom
|
|
name:
|
|
de: unten
|
|
en: bottom
|
|
defaultValue: top
|
|
containerProps:
|
|
layout:
|
|
size:
|
|
default: "col-4"
|
|
small: "col-12"
|
|
large: "col-4"
|
|
- name: text
|
|
type: string
|
|
meta:
|
|
label:
|
|
de: Text
|
|
en: text
|
|
widget: richtext
|
|
dependsOn:
|
|
eval: $parent.type == 'text'
|
|
|
|
- name: images
|
|
type: string[]
|
|
meta:
|
|
label:
|
|
de: Bild
|
|
en: Image
|
|
widget: foreignKey
|
|
foreign:
|
|
collection: medialib
|
|
id: id
|
|
subNavigation: 0
|
|
render: !include ../../lib/foreignMediaRender.yml
|
|
dependsOn:
|
|
eval: $parent.type == 'image'
|
|
|
|
- name: imageMobileBackground
|
|
type: boolean
|
|
meta:
|
|
label:
|
|
de: Bild auf Mobilgeräten in hintergrund
|
|
en: Image on mobile devices in background
|
|
dependsOn:
|
|
eval: $parent.type == 'image'
|
|
- name: forceFullHeight
|
|
type: boolean
|
|
meta:
|
|
label:
|
|
de: volle Bildhöhe erzwingen
|
|
en: full Force image height
|
|
dependsOn:
|
|
eval: $parent.type == 'image'
|
|
|
|
- name: imageHoverEffect
|
|
type: boolean
|
|
meta:
|
|
label:
|
|
de: Bild hover effekt
|
|
en: Image hover effect
|
|
dependsOn:
|
|
eval: $parent.type == 'image'
|
|
- name: links
|
|
type: object[]
|
|
meta:
|
|
label:
|
|
de: Links
|
|
en: Links
|
|
folding:
|
|
force: true
|
|
previewFolded:
|
|
eval: |
|
|
"<div style=\"padding-left: 30px;\">Link: <b>" + ($this.text || "") + "</b></div>"
|
|
raw: true
|
|
dependsOn:
|
|
eval: $parent.type == 'text'
|
|
subFields:
|
|
- name: text
|
|
type: string
|
|
meta:
|
|
label:
|
|
de: Text
|
|
en: Text
|
|
- name: url
|
|
type: string
|
|
meta:
|
|
label:
|
|
de: URL
|
|
en: URL
|
|
- name: target
|
|
type: string
|
|
meta:
|
|
label:
|
|
de: Ziel
|
|
en: Target
|
|
widget: select
|
|
choices:
|
|
- name:
|
|
de: im gleichen Fenster
|
|
en: in the same window
|
|
id: _self
|
|
- name:
|
|
de: in einem neuen Fenster
|
|
en: in a new window
|
|
id: _blank
|
|
- name: style
|
|
type: string
|
|
meta:
|
|
label:
|
|
de: Stil
|
|
en: Style
|
|
widget: select
|
|
defaultValue: primary
|
|
choices:
|
|
- name:
|
|
de: primär (roter Hintergrund)
|
|
en: primary (red background)
|
|
id: primary
|
|
|
|
- name:
|
|
de: sekundär (rote Schrift)
|
|
en: secondary (red text)
|
|
id: secondary
|
|
|
|
- id: tertiary
|
|
name:
|
|
de: normaler Link (graue Schrift)
|
|
en: normal link (grey text)
|
|
|
|
- name:
|
|
de: externer Link (Icon links)
|
|
en: external link (icon left)
|
|
id: external
|
|
|
|
- name:
|
|
de: Download Link (Icon links)
|
|
en: download link (icon left)
|
|
id: download
|
|
|
|
- !include ./CTACol.yml
|