From d8aac9b27290bd5a21f48b27c756110b101110e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 16 Aug 2018 15:38:20 +0200
Subject: [PATCH] Implement faq filter

---
 .../Resources/Private/Assets/js/app.js        | 19 +++++++++++++++++++
 .../Resources/Private/Assets/scss/main.scss   |  1 +
 .../Private/Assets/scss/main_boarderweek.scss |  1 +
 .../Private/Assets/scss/main_snowzone.scss    |  1 +
 .../Private/Assets/scss/main_unichamp.scss    |  1 +
 .../Private/Assets/scss/remix/_faq.scss       | 15 +++++++++++++++
 .../Resources/Private/Partials/Faq.html       | 17 ++++++++++++-----
 .../Private/Templates/Faq/Detail.html         |  2 +-
 8 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_faq.scss

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
index 53d2d721..f8ca0495 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
+++ b/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();
         });
     }
 });
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
index 63b90c85..27de4353 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+++ b/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";
 
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_boarderweek.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_boarderweek.scss
index 92f1f76f..fa38c320 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_boarderweek.scss
+++ b/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";
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_snowzone.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_snowzone.scss
index 4051f644..cbe08673 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_snowzone.scss
+++ b/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";
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_unichamp.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_unichamp.scss
index c6ae9697..a5b20bc3 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main_unichamp.scss
+++ b/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";
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_faq.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_faq.scss
new file mode 100644
index 00000000..78ceb053
--- /dev/null
+++ b/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));
+}
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
index 2efab8e3..44bd09c0 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
+++ b/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>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Faq/Detail.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Faq/Detail.html
index 545f83dd..a027350b 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Faq/Detail.html
+++ b/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>