Implement faq filter

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js

@@ -304,6 +304,24 @@ new Vue({
                 alert('aha');
             });
         },
+        initFaqFilter () {
+            const $entries = $('[data-faq-entry]');
+            $('[data-faqfilter]').on('keyup', function () {
+                const query = $(this).val();
+                if (query.length < 3) {
+                    $entries.fadeIn();
+                } else {
+                    const pattern = new RegExp(query, 'i');
+                    $entries.each(function () {
+                        const question = $(this).children('[data-faq-question]').text();
+                        const answer = $(this).children('[data-faq-answer]').text();
+                        if (!question.match(pattern) && !answer.match(pattern)) {
+                            $(this).fadeOut();
+                        }
+                    });
+                }
+            });
+        },
         initListeners () {
             $window.on('resize', () => {
                 this.setMobileMode();
@@ -363,6 +381,7 @@ new Vue({
             this.initImageLazyLoading();
             this.initDropdownMenuBehavior();
             this.initPartnerIdSelect();
+            this.initFaqFilter();
         });
     }
 });

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss

@@ -35,6 +35,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/blog";
 @import "remix/forms";
 @import "remix/contactnav";
+@import "remix/faq";
 
 @import "remix/destination-pulldown";
 

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_boarderweek.scss

@@ -32,6 +32,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/product";
 @import "remix/socialmedia";
 @import "remix/contactnav";
+@import "remix/faq";
 
 // core config
 @import "variables";

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_snowzone.scss

@@ -32,6 +32,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/product";
 @import "remix/socialmedia";
 @import "remix/contactnav";
+@import "remix/faq";
 
 // core config
 @import "variables";

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_unichamp.scss

@@ -32,6 +32,7 @@ $output-bourbon-deprecation-warnings: false;
 @import "remix/product";
 @import "remix/socialmedia";
 @import "remix/contactnav";
+@import "remix/faq";
 
 // core config
 @import "variables";

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_faq.scss

@@ -0,0 +1,15 @@
+.faq-filter {
+
+}
+
+.faq-filter__field {
+  border-color: rgba(white, 0.5);
+  color: white;
+  background-color: transparent;
+  box-shadow: none;
+  outline: none;
+  &:focus {
+    outline: none;
+  }
+  @include inputPlaceholderColor(rgba(white, 0.5));
+}

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

@@ -1,17 +1,24 @@
 <f:if condition="{faqs}">
     <div>
-        <div class="container-fluid ep-disturber">
+        <div class="container-fluid ep-disturber faq">
             <div>
                 <div>
-                    <div class="container ">
+                    <div class="container">
                         <span class="headline headline--3 headline--disturber">Häufig gestellte Fragen</span>
+                        <f:if condition="{filter}">
+                            <div class="faq-filter">
+                                <input type="text" data-faqfilter class="form-control faq-filter__field" placeholder="Suchbegriff">
+                            </div>
+                        </f:if>
                         <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                             <f:for each="{faqs}" as="faq" iteration="iteration">
-                                <div class="panel panel-default">
+                                <div class="panel panel-default" data-faq-entry>
                                     <a class="headline headline--4{f:if(condition: iteration.isFirst, else: ' collapsed')}"
-                                       role="button" data-toggle="collapse" data-parent="#accordion"
+                                       role="button" data-toggle="collapse" data-parent="#accordion" data-faq-question
                                        href="#faq-{faq.uid}" {f:if(condition: iteration.isFirst, then: 'aria-expanded="true" ')}aria-controls="faq-{faq.uid}">{faq.question}</a>
-                                    <div id="faq-{faq.uid}" class="panel-collapse collapse{f:if(condition: iteration.isFirst, then: ' in')}" role="tabpanel">{faq.answer -> f:format.html()}</div>
+                                    <div id="faq-{faq.uid}" class="panel-collapse collapse{f:if(condition: iteration.isFirst, then: ' in')}" role="tabpanel" data-faq-answer>
+                                        {faq.answer -> f:format.html()}
+                                    </div>
                                 </div>
                             </f:for>
                         </div>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Faq/Detail.html

@@ -7,7 +7,7 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <f:render partial="Faq" arguments="{_all}"/>
+        <f:render partial="Faq" arguments="{settings: settings, faqs: faqs, filter: 1}"/>
     </f:section>
 
 </html>