From fb1cbb1c4edab01a1b9a5fc1846746c7edb2fa56 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves@ygat.es>
Date: Wed, 1 Dec 2021 15:54:48 +0100
Subject: [PATCH] tag search

---
 src/_includes/layouts/base.njk       |  1 +
 src/_includes/layouts/team.njk       | 11 +++++++----
 src/js/components/search.js          | 14 ++++++++++++++
 src/scss/components/_search-bar.scss | 16 ++++++++++++++++
 src/scss/global.scss                 |  1 +
 5 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/js/components/search.js
 create mode 100644 src/scss/components/_search-bar.scss

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index 59f59b6..da14395 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -21,6 +21,7 @@
   {% block foot %}
   {% endblock %}
   <script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
+  <script type="text/javascript" src="/js/components/search.js" async defer></script>
   <script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script>
   <script>
     if ('serviceWorker' in navigator) {
diff --git a/src/_includes/layouts/team.njk b/src/_includes/layouts/team.njk
index 7fb8daf..0718aae 100644
--- a/src/_includes/layouts/team.njk
+++ b/src/_includes/layouts/team.njk
@@ -7,10 +7,13 @@
     <div class="[ wrapper ]">
       <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
       {{ content | safe }}
-      <h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
-      <ul class="tag-list mt-3">
+      <div class="search-bar">
+        <label for="site-search">Filtrer par mots-clés :</label>
+        <input type="search" id="searchInput" name="q" aria-label="Filtrer par mots-clés" oninput="doSearch()">
+      </div>
+      <ul class="tag-list mt-3" id="tagList">
         {% for skill in collections.skillsList %}
-          <li class="tag-item"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
+          <li class="tag-item visually-hidden"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
         {% endfor %}
       </ul>
     </div>
@@ -18,5 +21,5 @@
     {% include "partials/components/map.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
-  
+
 {% endblock %}
diff --git a/src/js/components/search.js b/src/js/components/search.js
new file mode 100644
index 0000000..1fd1e15
--- /dev/null
+++ b/src/js/components/search.js
@@ -0,0 +1,14 @@
+function doSearch() {
+  const searchStr = document.getElementById('searchInput').value;
+  const tagList = document.getElementById('tagList').getElementsByClassName('tag-item');
+  
+  for (const tag of tagList) {
+      const value = tag.querySelector('a').innerHTML;
+     
+      if (searchStr.length && value.toLowerCase().match(searchStr.toLowerCase())) {
+          tag.classList.remove('visually-hidden');
+      } else {
+          tag.classList.add('visually-hidden');
+      }
+  }
+}
diff --git a/src/scss/components/_search-bar.scss b/src/scss/components/_search-bar.scss
new file mode 100644
index 0000000..35c930e
--- /dev/null
+++ b/src/scss/components/_search-bar.scss
@@ -0,0 +1,16 @@
+.search-bar {
+  display: flex;
+  align-items: center;
+  // justify-content: flex-end;
+  margin-top: 3rem;
+
+  label {
+    // flex-grow: 1;
+  }
+
+  input[type=search] {
+    width: auto;
+    margin: 0 0 0 1rem;
+    background-color: var(--color-light-gray);
+  }
+}
\ No newline at end of file
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 7d43cc2..5c99c82 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -76,5 +76,6 @@ img {
 @import 'components/partner';
 @import 'components/skip-link';
 @import 'components/video-player';
+@import 'components/search-bar';
 @import 'components/tags';
 @import 'utilities/responsive';