From cee1f78fa951aa1214c375cf40d272473f4908c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 22 Oct 2024 11:35:54 +0200
Subject: [PATCH] feat: auto-collapse teasers on travel info pages

---
 .../js/controllers/autocollapse_controller.js | 44 +++++++++++++++++++
 .../Private/Templates/Travelinfo/Index.html   | 41 +++++++++++++----
 2 files changed, 77 insertions(+), 8 deletions(-)
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js
new file mode 100644
index 00000000..f7a0bbbb
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js
@@ -0,0 +1,44 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static targets = [ 'sizer', 'container', 'button' ]
+
+    static values = {
+        offset: {
+            type: Number,
+            default: 0,
+        },
+        expanded: {
+            type: Boolean,
+            default: true,
+        }
+    }
+
+    connect() {
+        // Determine height of element controlling max height
+        this.maxHeight = this.sizerTarget.offsetHeight
+        // Determine rendered height of element holding content
+
+        this.contentHeight = this.containerTarget.offsetHeight
+
+        // Determine height of collapsed content element considering
+        // potential offset for button
+        this.collapsedHeight = this.maxHeight - this.offsetValue
+
+        // Set initial expanded/collapsed status and button visibility
+        this.expandedValue = this.contentHeight < this.maxHeight
+        this.buttonTarget.classList.toggle('hidden', this.expandedValue)
+    }
+
+    toggle() {
+        this.expandedValue = !this.expandedValue
+    }
+
+    expandedValueChanged(expanded) {
+        this.containerTarget.style.height = expanded ? 'auto' : `${this.collapsedHeight}px`
+        this.containerTarget.style.overflowY = expanded ? 'none' : 'hidden'
+        this.buttonTarget.classList.toggle('toggle-more', false === expanded)
+        this.buttonTarget.classList.toggle('toggle-less', expanded)
+    }
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html
index 994afc45..83d29d01 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html
@@ -97,8 +97,10 @@
 
         <div class="container px-8 lg:px-24 flex flex-col space-y-16 pb-16">
             <f:for each="{travelinfo.teasers}" as="teaser">
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-x-8">
-                    <div class="relative self-start">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-x-8"
+                     data-controller="autocollapse"
+                     data-autocollapse-offset-value="64">
+                    <div class="relative self-start" data-autocollapse-target="sizer">
                         <f:image image="{teaser.image}" width="640" alt="" class="block w-full h-auto" />
                         <div class="absolute top-0 left-0 inset-0 bg-ep-primary/25 flex items-center justify-center">
                             <div class="w-32 h-32 xl:w-48 xl:h-48 text-white">
@@ -106,12 +108,24 @@
                             </div>
                         </div>
                     </div>
-                    <div class="md:col-span-2 relative p-4 md:p-0 md:pb-4 border border-gray-300 md:border-none" data-rte-content>
-                        <h2 class="headline--primary">
-                            {teaser.title}
-                        </h2>
-                        {teaser.bodytext -> f:format.html()}
-                        <div class="absolute left-0 bottom-0 bg-ep-primary w-full md:w-1/2 h-1"></div>
+                    <div class="md:col-span-2 relative p-4 md:p-0 md:pb-4 border border-gray-300 md:border-none">
+                        <div class="pb-8"
+                             data-autocollapse-target="container"
+                             data-rte-content>
+                            <h2 class="headline--primary">
+                                {teaser.title}
+                            </h2>
+                            {teaser.bodytext -> f:format.html()}
+                        </div>
+                        <div class="absolute left-0 bottom-0 w-full bg-white">
+                            <button type="button"
+                                    data-autocollapse-target="button"
+                                    data-action="autocollapse#toggle"
+                                    class="hidden text-ep-primary w-12 h-12 group toggle-more">
+                                <f:render section="Icon" arguments="{icon: 'toggle'}" />
+                            </button>
+                            <div class="bg-ep-primary w-full md:w-1/3 h-1"></div>
+                        </div>
                     </div>
                 </div>
             </f:for>
@@ -253,6 +267,17 @@
                     </g>
                 </svg>
             </f:case>
+            <f:case value="toggle">
+                <svg viewBox="0 0 184 185" xmlns="http://www.w3.org/2000/svg" stroke="none" fill="currentColor">
+                    <g>
+                        <path d="M92,0C41.2,0 0,41.2 0,92.1C0,143 41.2,184.1 92,184.1C142.8,184.1 184,142.9 184,92.1C184,41.3 142.8,0 92,0ZM92,173.1C47.3,173.1 11,136.8 11,92.1C11,47.4 47.3,11.1 92,11.1C136.7,11.1 173,47.4 173,92.1C173,136.8 136.7,173.1 92,173.1Z"/>
+                        <path d="M134.2,92.1C134.2,93.6 133.7,95 132.6,96C131.5,97.1 130.3,97.6 128.7,97.6L55.3,97.6C53.8,97.6 52.4,97.1 51.4,96C50.3,94.9 49.8,93.7 49.8,92.1C49.8,90.5 50.3,89.2 51.4,88.2C52.5,87.1 53.7,86.6 55.3,86.6L128.6,86.6C130.1,86.6 131.5,87.1 132.5,88.2C133.6,89.3 134.1,90.5 134.1,92.1"/>
+                    </g>
+                    <g class="group-[.toggle-less]:hidden">
+                        <path d="M97,128.7C97,130.2 96.5,131.6 95.4,132.6C94.3,133.7 93.1,134.2 91.5,134.2C89.9,134.2 88.6,133.7 87.6,132.6C86.5,131.5 86,130.3 86,128.7L86,55.4C86,53.9 86.5,52.5 87.6,51.5C88.7,50.4 89.9,49.9 91.5,49.9C93.1,49.9 94.4,50.4 95.4,51.5C96.5,52.6 97,53.8 97,55.4L97,128.7Z"/>
+                    </g>
+                </svg>
+            </f:case>
             <f:defaultCase>
                 <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" stroke="none" fill="currentColor">
                     <g>