diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index aa1eda40..22868565 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -14,8 +14,6 @@ import Alpine from 'alpinejs'
import parseAppConfig from './components/appconfig'
import initSliders from './components/sliders'
import appendPaCode from './components/pacode'
-import watchlistToggle from './components/watchlist-toggle'
-import watchlistButton from './components/watchlist-button'
import watchlist from './components/watchlist'
import productDetail from './components/product-detail'
import daytripDateSelect from './components/daytrip-date-select'
@@ -23,30 +21,10 @@ import searchBar from './components/search-bar'
import calendar from './components/calendar'
import contactForm from './components/contact-form'
-import defaultFilterSettings from './_filtersettings'
-import defaultFilterOptions from './_filteroptions'
-
const appConfig = parseAppConfig()
-const storedWatchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
appendPaCode(appConfig)
initSliders()
Alpine.store('appconfig', appConfig)
-Alpine.store('show', {
- searchBox: false,
- mobileNav: false,
- modal: null,
- toggleMobileNav() {
- this.mobileNav = !this.mobileNav
- },
- toggleSearchBox() {
- this.searchBox = !this.searchBox
- }
-})
-Alpine.store('watchlist', storedWatchlist)
-Alpine.store('filterSettings', defaultFilterSettings)
-Alpine.store('filterOptions', defaultFilterOptions)
-Alpine.data('watchlistToggle', watchlistToggle)
-Alpine.data('watchlistButton', watchlistButton)
Alpine.data('watchlist', watchlist)
Alpine.data('productDetail', productDetail)
Alpine.data('daytripDateSelect', daytripDateSelect)
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist-button.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist-button.js
deleted file mode 100644
index 50301c8b..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist-button.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default () => ({
- show() {
- return this.$store.watchlist.length > 0
- },
- label() {
- return `Merkliste (${this.$store.watchlist.length})`
- }
-})
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist-toggle.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist-toggle.js
deleted file mode 100644
index 01a78b1c..00000000
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/watchlist-toggle.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default uid => ({
- uid,
- trigger: {
- ['@click.prevent']() {
- const watchlistIndex = this.$store.watchlist.indexOf(this.uid)
- if (-1 !== watchlistIndex) {
- this.$store.watchlist.splice(watchlistIndex, 1)
- } else {
- this.$store.watchlist.push(this.uid)
- }
- sessionStorage.setItem('myep-watchlist', JSON.stringify(this.$store.watchlist))
- }
- },
- onList() {
- return -1 !== this.$store.watchlist.indexOf(this.uid)
- },
- label() {
- return this.onList() ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
- },
-})
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/overlay_toggle_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/overlay_toggle_controller.js
new file mode 100644
index 00000000..4da88690
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/overlay_toggle_controller.js
@@ -0,0 +1,32 @@
+import { Controller } from 'stimulus'
+import { useDispatch } from 'stimulus-use'
+
+export default class extends Controller {
+
+ static values = {
+ id: String,
+ show: Boolean
+ }
+
+ static targets = [ 'overlay' ]
+
+ initialize() {
+ useDispatch(this)
+ }
+
+ invokeToggle() {
+ this.dispatch('toggle', this.idValue)
+ }
+
+ toggle(e) {
+ if (e.detail === this.idValue) {
+ this.showValue = !this.showValue
+ }
+ }
+
+ showValueChanged() {
+ if (this.hasOverlayTarget) {
+ this.overlayTarget.classList.toggle('hidden', this.showValue === false)
+ }
+ }
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js
index ef83b10b..59f6f4dc 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js
@@ -23,9 +23,19 @@ export default class extends Controller {
}
filter() {
+ this.load({
+ method: 'POST',
+ body: new FormData(this.formTarget)
+ })
+ }
+
+ reset() {
+ this.load({ method: 'POST' })
+ }
+
+ load(options) {
this.loadingValue = true
- let data = new FormData(this.formTarget)
- fetch(this.uriValue, { method: 'POST', body: data })
+ fetch(this.uriValue, options)
.then(this.checkStatus)
.then(this.parseHTML)
.then(html => {
@@ -37,10 +47,6 @@ export default class extends Controller {
})
}
- reset() {
- this.filter()
- }
-
selectDateRange(e) {
this.dateFromTarget.value = e.detail.from
this.dateToTarget.value = e.detail.to
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_label_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_label_controller.js
new file mode 100644
index 00000000..194a2ef5
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_label_controller.js
@@ -0,0 +1,34 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+
+ static values = { count: Number }
+
+ static targets = [ 'label' ]
+
+ connect() {
+ this.watchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
+ this.countValue = this.watchlist.length
+ }
+
+ update(e) {
+ let key = e.detail.key
+ let index = this.watchlist.indexOf(key)
+ if (-1 !== index) {
+ this.watchlist.splice(index, 1)
+ } else {
+ this.watchlist.push(key)
+ }
+ this.countValue = this.watchlist.length
+ sessionStorage.setItem('myep-watchlist', JSON.stringify(this.watchlist))
+ }
+
+ countValueChanged() {
+ if (0 === this.countValue) {
+ this.element.classList.add('hidden')
+ } else {
+ this.element.classList.remove('hidden')
+ this.labelTarget.innerText = `Merkliste (${this.watchlist.length})`
+ }
+ }
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js
new file mode 100644
index 00000000..5b61720a
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js
@@ -0,0 +1,34 @@
+import { Controller } from 'stimulus'
+import { useDispatch } from 'stimulus-use'
+
+export default class extends Controller {
+
+ static values = {
+ key: String,
+ onList: Boolean
+ }
+
+ static targets = [ 'label', 'icon' ]
+
+ initialize() {
+ useDispatch(this)
+ }
+
+ connect() {
+ let watchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
+ this.onListValue = -1 !== watchlist.indexOf(this.keyValue)
+ }
+
+ toggle() {
+ this.onListValue = !this.onListValue
+ this.dispatch('toggle', {
+ key: this.keyValue,
+ onList: this.onListValue,
+ })
+ }
+
+ onListValueChanged() {
+ this.labelTarget.setAttribute('aria-label', true === this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen')
+ this.iconTarget.setAttribute('href', true === this.onListValue ? '#icon-minus-circle' : '#icon-plus-circle')
+ }
+}
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 e35c3823..a280a432 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
@@ -18,6 +18,7 @@
+