From 0b1410ec83cd4ee00d600a50653dd363d653ab61 Mon Sep 17 00:00:00 2001 From: Anonymous Contributor Date: Fri, 15 Sep 2023 14:31:14 +0200 Subject: [PATCH] Add page modules --- blueprints/modular/autoslideshow.yaml | 18 ++++++++ blueprints/modular/boxlist.yaml | 24 ++++++++++ blueprints/modular/slideshowext.yaml | 27 ++++++++++++ blueprints/modular/textbg.yaml | 46 +++++++++++++++++++ templates/modular.html.twig | 9 ++++ templates/modular/autoslideshow.html.twig | 25 +++++++++++ templates/modular/boxlist.html.twig | 20 +++++++++ templates/modular/slideshowext.html.twig | 54 +++++++++++++++++++++++ templates/modular/textbg.html.twig | 13 ++++++ 9 files changed, 236 insertions(+) create mode 100644 blueprints/modular/autoslideshow.yaml create mode 100644 blueprints/modular/boxlist.yaml create mode 100644 blueprints/modular/slideshowext.yaml create mode 100644 blueprints/modular/textbg.yaml create mode 100644 templates/modular.html.twig create mode 100644 templates/modular/autoslideshow.html.twig create mode 100644 templates/modular/boxlist.html.twig create mode 100644 templates/modular/slideshowext.html.twig create mode 100644 templates/modular/textbg.html.twig diff --git a/blueprints/modular/autoslideshow.yaml b/blueprints/modular/autoslideshow.yaml new file mode 100644 index 0000000..1f1899a --- /dev/null +++ b/blueprints/modular/autoslideshow.yaml @@ -0,0 +1,18 @@ +title: AutoSlideshow +extends@: + type: module + context: blueprints://pages +form: + validation: loose + fields: + header.duration: + type: text + label: Anzeigedauer (s) + help: Zeit in Sekunden bis zum Bildwechsel + default: 10 + validate: + required: true + type: int + header.media: + type: pagemedia + label: PLUGIN_ADMIN.PAGE_MEDIA \ No newline at end of file diff --git a/blueprints/modular/boxlist.yaml b/blueprints/modular/boxlist.yaml new file mode 100644 index 0000000..13ee00e --- /dev/null +++ b/blueprints/modular/boxlist.yaml @@ -0,0 +1,24 @@ +title: BoxList +extends@: + type: default + context: blueprints://pages +form: + validation: loose + fields: + header.boxes: + type: list + style: vertical + label: Einträge + fields: + .image: + type: pagemediaselect + label: Bild + .url: + type: text + label: Link + .title: + type: text + label: Titel + .description: + type: text + label: Beschreibung \ No newline at end of file diff --git a/blueprints/modular/slideshowext.yaml b/blueprints/modular/slideshowext.yaml new file mode 100644 index 0000000..473c726 --- /dev/null +++ b/blueprints/modular/slideshowext.yaml @@ -0,0 +1,27 @@ +title: SlideshowExt +extends@: + type: default + context: blueprints://pages +form: + validation: loose + fields: + header.slides: + type: list + style: vertical + label: Slides + fields: + .image: + type: pagemediaselect + label: Bild + .title: + type: text + label: Titel + .description: + type: markdown + label: Beschreibung + .btn: + type: text + label: Button-Text (optional) + .url: + type: text + label: Button-Link (optional) \ No newline at end of file diff --git a/blueprints/modular/textbg.yaml b/blueprints/modular/textbg.yaml new file mode 100644 index 0000000..63b021a --- /dev/null +++ b/blueprints/modular/textbg.yaml @@ -0,0 +1,46 @@ +title: TextBG +extends@: + type: default + context: blueprints://pages +form: + validation: loose + fields: + header.textstyle: + type: text + label: CSS für Textblock + help: 'Zusätzliche Inline-CSS-Regeln, die den ganzen Textblock betreffen' + default: '' + validate: + required: false + header.bgcolor: + type: text + label: Hintergrundfarbe + help: 'Als CSS-Parameter, z.B. Hex, rgb() oder rgba()' + default: '' + validate: + required: false + header.bgimage: + type: pagemediaselect + label: Hintergrundbild + default: '' + validate: + required: false + header.bgimgstyle: + type: text + label: CSS für Hintergrundbild + help: 'Zusätzliche Inline-CSS-Regeln, die für das Hintergrundbild gelten.' + default: '' + validate: + required: false + header.fullwidth: + type: toggle + label: Volle Breite + help: 'Aktiviert die Nutzung der vollen Bildschirmbreite für dieses Modul' + highlight: 1 + default: 0 + options: + 1: PLUGIN_ADMIN.ENABLED + 0: PLUGIN_ADMIN.DISABLED + validate: + required: true + type: bool \ No newline at end of file diff --git a/templates/modular.html.twig b/templates/modular.html.twig new file mode 100644 index 0000000..43c0059 --- /dev/null +++ b/templates/modular.html.twig @@ -0,0 +1,9 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + {% for module in page.collection() %} + + {{ module.content|raw }} + + {% endfor %} +{% endblock %} \ No newline at end of file diff --git a/templates/modular/autoslideshow.html.twig b/templates/modular/autoslideshow.html.twig new file mode 100644 index 0000000..9b34f14 --- /dev/null +++ b/templates/modular/autoslideshow.html.twig @@ -0,0 +1,25 @@ +{% set slides = page.media.images %} + +{% block custom_stylesheets %} + {% do assets.addCss('theme://css/autoslideshow.css', 90) %} + {% set slideStyle %} + .auto-slideshow img { + animation-duration: {{ page.header.duration * 3 }}s; + } + {% for image in slides %} + .auto-slideshow img:nth-child({{ loop.index }}) { animation-delay: {{ loop.index0 * page.header.duration }}s } + {% endfor %} + {% endset %} + {% do assets.addInlineCss(slideStyle, 90) %} +{% endblock %} +
+
+
+
+ {% for image in slides %} + Slide + {% endfor %} +
+
+
+
\ No newline at end of file diff --git a/templates/modular/boxlist.html.twig b/templates/modular/boxlist.html.twig new file mode 100644 index 0000000..aed175d --- /dev/null +++ b/templates/modular/boxlist.html.twig @@ -0,0 +1,20 @@ +{% block custom_stylesheets %} + {% do assets.addCss('theme://css/boxlist.css', 90) %} +{% endblock %} + +

{{ page.title }}

+ +
+ {% for box in page.header.boxes %} +
+
+ {{ box.title }} + {% if box.url != '' %}Zur
Webseite{% endif %} +
+
+
{{ box.title }}
+ {{ box.description }} +
+
+ {% endfor %} +
\ No newline at end of file diff --git a/templates/modular/slideshowext.html.twig b/templates/modular/slideshowext.html.twig new file mode 100644 index 0000000..ed384ed --- /dev/null +++ b/templates/modular/slideshowext.html.twig @@ -0,0 +1,54 @@ +{% set slides = page.header.slides %} + +{% block custom_stylesheets %} + {% do assets.addCss('theme://css/slideshowext.css', 90) %} + {% set slideStyle %} + {% for image in slides %} + #slide{{ loop.index }}:checked ~ #slide-content{{ loop.index }} { + opacity: 1; + visibility: visible; + transition: visibility 0s 2s, opacity 2s 2s linear; + } + {% endfor %} + {% for image in slides %} + .slideshow-ext > input:nth-of-type({{ loop.index }}):checked ~ .slideshow-controls > label:nth-of-type({{ loop.index0 }}){% if loop.index < slides|length %},{% endif %} + {% endfor %}{ + display: block; + left: 0; + right: auto; + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + {% for image in slides %} + .slideshow-ext > input:nth-of-type({{ loop.index }}):checked ~ .slideshow-controls > label:nth-of-type({{ loop.index + 1 }}){% if loop.index < slides|length %},{% endif %} + {% endfor %}{ + display: block; + right: 0; + left: auto; + -moz-transform: rotate(225deg); + -ms-transform: rotate(225deg); + -o-transform: rotate(225deg); + -webkit-transform: rotate(225deg); + transform: rotate(225deg); + } + {% endset %} + {% do assets.addInlineCss(slideStyle, 90) %} +{% endblock %} +
+
+
+
+ {% for image in slides %} + + {% endfor %} + {% for image in slides %}
{{ image.title }}

{{ image.description|markdown }}

{% if image.url != '' %}{{ image.btn }}{% endif %}
Slide
{% endfor %} +
+ {% for image in slides %}{% endfor %} +
+
+
+
+
\ No newline at end of file diff --git a/templates/modular/textbg.html.twig b/templates/modular/textbg.html.twig new file mode 100644 index 0000000..ba54d40 --- /dev/null +++ b/templates/modular/textbg.html.twig @@ -0,0 +1,13 @@ +{% block custom_stylesheets %} + {% do assets.addCss('theme://css/text.css', 10) %} + {% if page.header.bgimage != '' %}{% do assets.addInlineCss("#textbg-#{ page.id } { z-index: 1; position: relative; } #textbg-#{ page.id }::before { content: ''; background-image: url(#{ page.media[page.header.bgimage].url }); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-position: center top; background-size: cover; background-repeat: no-repeat; #{ page.header.bgimgstyle } }", 10) %}{% endif %} + {% if page.header.bgcolor != '' %}{% do assets.addInlineCss("#textbg-#{ page.id } { background-color: #{ page.header.bgcolor } }") %}{% endif %} + {% if page.header.textstyle != '' %}{% do assets.addInlineCss("#textbg-#{ page.id } { #{ page.header.textstyle } }") %}{% endif %} +{% endblock %} +
+
+
+
{{ page.content|raw }}
+
+
+
\ No newline at end of file