Migrate faq element

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -21,6 +21,7 @@ import watchlistButton from './components/watchlist-button'
 import collapse from './components/collapse'
 import fbpixel from './components/fbpixel'
 import ajaxContent from './components/ajax-content'
+import faq from './components/faq'
 
 // Executed on document ready
 document.addEventListener('DOMContentLoaded', () => {
@@ -41,6 +42,7 @@ document.addEventListener('DOMContentLoaded', () => {
     Alpine.data('collapse', collapse)
     Alpine.data('fbpixel', fbpixel)
     Alpine.data('ajaxContent', ajaxContent)
+    Alpine.data('faq', faq)
     Alpine.start()
 
     Glightbox({

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/faq.js

@@ -0,0 +1,24 @@
+import { debounce } from './throttle-debounce'
+
+export default () => ({
+    query: '',
+    init() {
+        this.entries = this.$el.querySelectorAll('[x-data="collapse"]')
+        this.$watch('query', debounce(value => {
+            if (value.length < 3) {
+                this.entries.forEach(entry => {
+                    entry.classList.remove('hidden')
+                })
+                return
+            }
+            const pattern = new RegExp(value, 'i')
+            this.entries.forEach(entry => {
+                const question = entry.childNodes[0].textContent
+                const answer = entry.childNodes[1].textContent
+                if (!question.match(pattern) && !answer.match(pattern)) {
+                    entry.classList.add('hidden')
+                }
+            })
+        }, 200))
+    },
+})

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

@@ -1,37 +0,0 @@
-import { Controller } from 'stimulus'
-
-export default class extends Controller {
-
-    static targets = [ 'entry' ]
-
-    toggle(e) {
-        e.preventDefault()
-        const selectedEntry = e.target.parentNode
-        selectedEntry.dataset.expanded = "1"
-        selectedEntry.children[1].classList.remove('hidden')
-        this.entryTargets.forEach(entry => {
-            if (entry !== selectedEntry) {
-                entry.dataset.expanded = "0"
-                entry.children[1].classList.toggle('hidden', true)
-            }
-        })
-    }
-
-    filter(e) {
-        const query = e.target.value
-        if (query.length < 3) {
-            this.entryTargets.forEach(entry => {
-                entry.classList.remove('hidden')
-            })
-            return
-        }
-        const pattern = new RegExp(query, 'i')
-        this.entryTargets.forEach(entry =>  {
-            const question = entry.childNodes[0].textContent
-            const answer = entry.childNodes[1].textContent
-            if (!question.match(pattern) && !answer.match(pattern)) {
-                entry.classList.add('hidden')
-            }
-        });
-    }
-}

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

@@ -3,20 +3,20 @@
         <div class="container-fluid ep-disturber faq">
             <div>
                 <div>
-                    <div class="container" data-controller="faq">
+                    <div class="container" x-data="faq">
                         <span class="headline headline--3 headline--disturber">Häufig gestellte Fragen</span>
                         <f:if condition="{filter}">
                             <div class="faq-filter">
-                                <input type="text" data-action="faq#filter" class="form-control faq-filter__field" placeholder="Suchbegriff">
+                                <input type="text" x-model="query" class="form-control faq-filter__field" placeholder="Suchbegriff">
                             </div>
                         </f:if>
                         <div class="panel-group">
                             <f:for each="{faqs}" as="faq" iteration="iteration">
-                                <div class="panel panel-default" data-faq-target="entry" data-expanded="{f:if(condition: iteration.isFirst, then: '1', else: '0')}">
+                                <div class="panel panel-default" x-data="collapse" data-collapsed>
-                                    <a class="headline headline--4" role="button" data-action="faq#toggle" href="#">
+                                    <a class="headline headline--4" role="button" href="#" x-bind="trigger">
                                         {faq.question}
                                     </a>
-                                    <div{f:if(condition: iteration.isFirst, else: ' class="hidden"')} role="tabpanel" data-collapse-target="container">
+                                    <div role="tabpanel" x-bind="container" x-transition.opacity x-cloak>
                                         {faq.answer -> f:format.html()}
                                     </div>
                                 </div>
@@ -24,7 +24,8 @@
                         </div>
                         <f:if condition="{settings.infoPageUid}">
                             <div class="text-right">
-                                <i class="fa fa-info-circle" aria-hidden="true"></i><a href="{f:uri.typolink(parameter: settings.infoPageUid)}">
+                                <i class="fa fa-info-circle" aria-hidden="true"></i>
+                                <a href="{f:uri.typolink(parameter: settings.infoPageUid)}">
                                     <small>Weitere Reiseinfos findet ihr <u>hier</u></small>
                                 </a>
                             </div>