feat: replace system confirmation modal

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)) {
+        if (this.hasTextValue) {
-            return
+            this.teaserPopupModalOutlet.titleTarget.innerText = this.titleValue
+            this.teaserPopupModalOutlet.contentTarget.innerHTML = this.textValue
+            this.teaserPopupModalOutlet.buttonTarget.href = this.element.href
+            this.teaserPopupModalOutlet.open()
         }
 
         e.preventDefault()

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')
+    }
+}

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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"

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>