Finalize watchlist migration

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactbar_controller.js

@@ -2,9 +2,29 @@ import { Controller } from 'stimulus'
 
 export default class extends Controller {
 
-    static targets = [ 'watchlist' ]
+    static targets = [ 'watchlist', 'watchlistLabel' ]
+    static values = { watchlist: Array }
 
-    updateWatchlist(e) {
+    connect() {
-        this.watchlistTarget.style.display = e.detail.length ? 'block' : 'none'
+        const initialList = JSON.parse(sessionStorage.getItem('myep-watchlist'))
+        this.watchlistValue = initialList ? initialList : []
+    }
+
+    toggleWatchlist(e) {
+        const uid = e.detail
+        const currentList = this.watchlistValue
+        const listIndex = currentList.indexOf(uid)
+        if (-1 === listIndex) {
+            currentList.push(uid)
+        } else {
+            currentList.splice(listIndex, 1)
+        }
+        this.watchlistValue = currentList
+        sessionStorage.setItem('myep-watchlist', JSON.stringify(currentList))
+    }
+
+    watchlistValueChanged() {
+        this.watchlistTarget.style.display = this.watchlistValue.length > 0 ? 'block' : 'none'
+        this.watchlistLabelTarget.textContent = `Merkliste (${this.watchlistValue.length})`
     }
 }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js

@@ -12,18 +12,9 @@ export default class extends Controller {
 
     toggle(e) {
         e.preventDefault()
-        const list = this.getCurrentList()
+        this.onListValue = !this.onListValue
-        const listIndex = list.indexOf(this.uidValue)
+        window.dispatchEvent(new CustomEvent('watchlist-toggle', {
-        if (-1 === listIndex) {
+            detail: this.uidValue
-            list.push(this.uidValue)
-            this.onListValue = true
-        } else {
-            list.splice(listIndex, 1)
-            this.onListValue = false
-        }
-        sessionStorage.setItem('myep-watchlist', JSON.stringify(list))
-        window.dispatchEvent(new CustomEvent('watchlist-update', {
-            detail: list
         }))
     }
 

public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html

@@ -1,9 +1,9 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
-<div class="ep-contactnav" data-controller="contactbar" data-action="watchlist-update@window->contactbar#updateWatchlist">
+<div class="ep-contactnav" data-controller="contactbar" data-action="watchlist-toggle@window->contactbar#toggleWatchlist">
     <a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}" class="bg-red watchlist"
        data-contactbar-target="watchlist" rel="nofollow">
         <span class="fa fa-list" aria-hidden="true"></span>
-        <div>Merkliste ({{ $store.getters.watchlistCount }})</div>
+        <div data-contactbar-target="watchlistLabel"></div>
     </a>
     <a href="tel:{settings.phoneNumberLink}" class="bg-red phone" title="Telefonische Beratung" rel="nofollow">
         <span class="fa fa-phone" aria-hidden="true"></span>