feat: replace system confirmation modal
This commit is contained in:
+13
-3
@@ -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()
|
||||
|
||||
+14
@@ -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>
|
||||
|
||||
+1
@@ -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>
|
||||
|
||||
+1
@@ -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>
|
||||
Reference in New Issue
Block a user