From 7eff9773d910d139f304a4a4981df0505e01ac53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 13 Nov 2024 17:06:28 +0100
Subject: [PATCH] feat: replace system confirmation modal

---
 .../js/controllers/teaser_popup_controller.js | 16 ++++++++++---
 .../teaser_popup_modal_controller.js          | 14 +++++++++++
 .../Private/Layouts/Page/Detail.html          |  1 +
 .../Private/Layouts/Page/Frontpage.html       |  1 +
 .../Private/Layouts/Page/FrontpageEvent.html  |  1 +
 .../Private/Layouts/Page/Search.html          |  1 +
 .../Private/Layouts/Page/Subpage.html         |  1 +
 .../Layouts/Page/SubpageSidebarLeft.html      |  1 +
 .../Layouts/Page/SubpageSidebarLeftEvent.html |  1 +
 .../Layouts/Page/SubpageSidebarRight.html     |  1 +
 .../Page/SubpageSidebarRightEvent.html        |  1 +
 .../Private/Layouts/Page/Travelinfo.html      |  1 -
 .../Private/Partials/Product/Teaser.html      |  2 ++
 .../Private/Partials/TeaserPopup.html         | 24 +++++++++++++++++++
 14 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_modal_controller.js
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserPopup.html

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_controller.js
index 77193dd5..3478af55 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_controller.js
@@ -2,11 +2,21 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
 
-    static values = { text: String }
+    static outlets = ['teaser-popup-modal']
+    static values = {
+        title: {
+            type: String,
+            default: 'Hinweis',
+        },
+        text: String,
+    }
 
     open(e) {
-        if (this.hasTextValue && confirm(this.textValue)) {
-            return
+        if (this.hasTextValue) {
+            this.teaserPopupModalOutlet.titleTarget.innerText = this.titleValue
+            this.teaserPopupModalOutlet.contentTarget.innerHTML = this.textValue
+            this.teaserPopupModalOutlet.buttonTarget.href = this.element.href
+            this.teaserPopupModalOutlet.open()
         }
 
         e.preventDefault()
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_modal_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_modal_controller.js
new file mode 100644
index 00000000..17e72ad3
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_modal_controller.js
@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static targets = ['title', 'content', 'button']
+
+    open() {
+        this.element.classList.remove('hidden')
+    }
+
+    close() {
+        this.element.classList.add('hidden')
+    }
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html
index ac0416cb..b526450a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html
@@ -13,5 +13,6 @@
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Search/MobileSearch" arguments="{_all}"/>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
index ce4df0b2..b6dca80b 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html
@@ -19,5 +19,6 @@
             <f:render partial="Search/MobileSearch" arguments="{_all}"/>
         </f:else>
     </f:if>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html
index 0f32426d..5cf3690c 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html
@@ -10,5 +10,6 @@
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html
index c7511022..49e225d0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html
@@ -8,5 +8,6 @@
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
index 9b04e84f..4cd24fb5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
@@ -21,5 +21,6 @@
             <f:render partial="Search/MobileSearch" arguments="{_all}"/>
         </f:else>
     </f:if>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
index 8fed5a6b..7570d257 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html
@@ -25,5 +25,6 @@
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Search/MobileSearch" arguments="{_all}"/>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html
index 2561d283..3591feea 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html
@@ -19,5 +19,6 @@
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
index 4c50d5d7..fe1c9dd5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
@@ -25,5 +25,6 @@
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
     <f:render partial="Search/MobileSearch" arguments="{_all}"/>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html
index 56266e55..3b5e30f9 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html
@@ -19,5 +19,6 @@
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" section="Main" arguments="{_all}"/>
+    <f:render partial="TeaserPopup" arguments="{_all}" />
     <f:render partial="Config" arguments="{_all}" />
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Travelinfo.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Travelinfo.html
index c5b1711c..c10e89b5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Travelinfo.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Travelinfo.html
@@ -21,5 +21,4 @@
     <f:render section="Content"/>
     <f:render partial="Footer" arguments="{_all}"/>
     <f:render partial="Config" arguments="{_all}" />
-
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
index 1e5cfaab..c2d803f5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
@@ -17,6 +17,7 @@
                <f:if condition="{concept.popupText}">
                data-controller="teaser-popup"
                data-teaser-popup-text-value="{concept.popupText}"
+               data-teaser-popup-teaser-popup-modal-outlet="#teaser-popup-modal"
                data-action="teaser-popup#open"
                </f:if>
                title="{region.name} {product.name} Details und Buchen">
@@ -81,6 +82,7 @@
             <f:if condition="{concept.popupText}">
                 data-controller="teaser-popup"
                 data-teaser-popup-text-value="{concept.popupText}"
+                data-teaser-popup-teaser-popup-modal-outlet="#teaser-popup-modal"
                 data-action="teaser-popup#open"
             </f:if>
            title="{region.name} {product.name} Details und Buchen"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserPopup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserPopup.html
new file mode 100644
index 00000000..8eecfd9c
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserPopup.html
@@ -0,0 +1,24 @@
+<div class="hidden fixed inset-0 w-full h-full z-50"
+     id="teaser-popup-modal"
+     data-controller="teaser-popup-modal">
+    <div class="absolute inset-0 w-full h-full bg-black/85 z-25"
+         data-action="click->teaser-popup-modal#close"></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
+        <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
+            <span class="text-xl font-bold" data-teaser-popup-modal-target="title"></span>
+            <button type="button"
+                    class="inline-block"
+                    data-action="teaser-popup-modal#close">
+                <svg class="w-8 h-8">
+                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-close"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="p-4 bg-white rounded-b" data-rte-content>
+            <p data-teaser-popup-modal-target="content"></p>
+            <a href="#" class="button bg-button" data-teaser-popup-modal-target="button">
+                Ok
+            </a>
+        </div>
+    </div>
+</div>