Add page modules

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

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

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)

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

templates/modular.html.twig

@@ -0,0 +1,9 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+    {% for module in page.collection() %}
+        <!-- MODULE START -->
+        {{ module.content|raw }}
+        <!-- MODULE END -->
+    {% endfor %}
+{% endblock %}

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 %}
+<div class="page-cell">
+    <div class="text-tab-content grid-prop current-tab">
+        <div class="text-inner">
+            <div class="auto-slideshow">
+                {% for image in slides %}
+                    <img loading="lazy" src="{{ image.url }}" alt="Slide">
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>

templates/modular/boxlist.html.twig

@@ -0,0 +1,20 @@
+{% block custom_stylesheets %}
+    {% do assets.addCss('theme://css/boxlist.css', 90) %}
+{% endblock %}
+
+<h1 class="page-cell">{{ page.title }}</h1>
+
+<div class="img-box-list page-cell">
+    {% for box in page.header.boxes %}
+    <div class="img-box">
+        <div class="animated-image">
+            <img loading="lazy" alt="{{ box.title }}" style="position: relative; left: 0px; top: 0px; user-select: none" draggable="false" unselectable="on" src="{{ page.media[box.image].url|e }}">
+            {% if box.url != '' %}<a href="{{ box.url }}" target="_blank">Zur<br/>Webseite</a>{% endif %}
+        </div>
+        <div class="img-box-caption">
+            <h6>{{ box.title }}</h6>
+            <span>{{ box.description }}</span>
+        </div>
+    </div>
+    {% endfor %}
+</div>

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 %}
+<div class="page-cell-fullwidth">
+    <div class="text-tab-content grid-prop current-tab">
+        <div class="text-inner">
+            <div class="slideshow-ext">
+                {% for image in slides %}
+                    <input type="radio" name="slide" id="slide{{ loop.index }}"{% if loop.index == 1 %} checked{% endif %} />
+                {% endfor %}
+                {% for image in slides %}<div id="slide-content{{ loop.index }}" class="slide-content"><div><h6>{{ image.title }}</h6><p>{{ image.description|markdown }}</p>{% if image.url != '' %}<a href="{{ image.url }}">{{ image.btn }}</a>{% endif %}</div><img loading="lazy" src="{{ page.media[image.image].url|e }}" alt="Slide"></div>{% endfor %}
+                <div class="slideshow-controls">
+                    {% for image in slides %}<label for="slide{{ loop.index }}"></label>{% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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 %}
+<div id="textbg-{{ page.id }}" class="page-cell{% if page.header.fullwidth == 1 %}-fullwidth{% endif %}">
+<div class="page-content-wrapper">
+    <div class="page-text-wrapper">
+        <div class="text-inner">{{ page.content|raw }}</div>
+    </div>
+</div>
+</div>