feat: replace system confirmation modal

This commit is contained in:
Björn Fromme
2024-11-13 17:06:28 +01:00
parent f852edb2e1
commit 7eff9773d9
14 changed files with 62 additions and 4 deletions
@@ -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()
@@ -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')
}
}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -21,5 +21,4 @@
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="Config" arguments="{_all}" />
</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"
@@ -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>