From 9436241f6147f444fbfd96bc1f553fa2499c8896 Mon Sep 17 00:00:00 2001
From: Motormary <122404204+Motormary@users.noreply.github.com>
Date: Fri, 12 Apr 2024 10:40:57 +0200
Subject: [PATCH] Animated search bar working + search function + placeholder
 search results in index.html (#439)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jesús Alberola Herrero <127695115+Whisperpiano@users.noreply.github.com>
---
 index.html                      |  15 +-
 js/search.mjs                   | 239 ++++++++++++++++++++++++++++++++
 pages/about-page.html           |   5 +-
 pages/contact-page.html         |   3 +-
 pages/event.html                |   4 +-
 pages/gallery-page.html         |   4 +-
 pages/news-post.html            |   4 +-
 pages/news.html                 |   4 +-
 pages/our-work.html             |   4 +-
 pages/privacy-policy.html       |   4 +-
 pages/support-page.html         |   3 +-
 pages/terms-and-conditions.html |   3 +-
 12 files changed, 278 insertions(+), 14 deletions(-)
 create mode 100644 js/search.mjs

diff --git a/index.html b/index.html
index b61c2b0..b88e5f3 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
     <script type="module" src="js/displayPosts.js"></script>
     <script type="module" src="js/calendar.mjs"></script>
     <script type="module" src="js/events-list.mjs"></script>
+    <script type="module" src="js/search.mjs"></script>
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
@@ -60,7 +61,8 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          aria-expanded="false"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-all duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
@@ -68,9 +70,10 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
             <div
               class="w-full max-w-lg mx-auto border border-black bg-gray-100 flex items-center"
             >
-              <form class="flex flex-grow">
+              <form class="relative flex flex-grow">
                 <label for="Search-Drawer" class="sr-only">Search Site</label>
                 <input
+                  tabindex="-1"
                   type="search"
                   class="search-drawer_input flex-grow bg-transparent focus:outline-none p-2 text-sm"
                   id="Search-Drawer"
@@ -78,6 +81,7 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
                   autocomplete="off"
                 />
                 <button
+                  tabindex="-1"
                   type="submit"
                   class="search-drawer_submit p-2 text-gray-500 flex items-center justify-center"
                 >
@@ -88,10 +92,14 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
                     alt="Search Now Button"
                   />
                 </button>
+                <!--! PLACEHOLDER TO DISPLAY SEARCH RESULTS - "SEARCH.MJS" - DELETE/REPLACE ME -->
+                <div hidden id="search-results" class="absolute w-96 top-10 bg-white border rounded-sm"></div>
+                <!--! PLACEHOLDER TO DISPLAY SEARCH RESULTS - "SEARCH.MJS" - DELETE/REPLACE ME  -->
               </form>
             </div>
             <!-- Close button ready for JS. Should also close on outside-click, not just by close button itself -->
             <button
+              tabindex="-1"
               id="closeSearchBarDrawer"
               class="search-drawer_close text-sm pr-5"
             >
@@ -198,7 +206,7 @@ <h2 class="font-sans text-white text-3xl">
       </section>
       <!-- End Section 1-->
       <!--Main Content Section 2-->
-      <div class="flex justify-center my-[100px]">
+      <div id="history" class="flex justify-center my-[100px]">
         <div class="max-w-[960px] flex flex-col items-center">
           <h2 class="text-center text-6xl mb-6">History of MMF</h2>
           <div class="max-h-20 overflow-hidden">
@@ -533,6 +541,7 @@ <h3 id="home-section4-heading" class="text-[32px] font-semibold">
       <!-- End Main Content Section 5 -->
       <!-- Section 6 -->
       <section
+        id="events"
         class="grid gap-y-12 grid-rows-1 grid-cols-6 relative mx-28 font-normal my-10"
       >
         <!-- Events -->
diff --git a/js/search.mjs b/js/search.mjs
new file mode 100644
index 0000000..41e1587
--- /dev/null
+++ b/js/search.mjs
@@ -0,0 +1,239 @@
+// PLACEHOLDER
+const websiteContent = [
+  {
+    title: "Events",
+    description: "Upcoming events",
+    tags: [
+      "mmf annual charity concert",
+      "run for music 5k charity race",
+      "mmf culture and arts festival",
+      "back-to-school fundraiser gala",
+      "holiday giving campaign kickoff",
+      "may",
+      "june",
+      "july",
+      "august",
+      "november",
+    ],
+    href: "/index.html#events",
+    thumbnail: "", // image href
+    alt: "img",
+  },
+  {
+    title: "History",
+    description: "The MMF's journey",
+    tags: [
+      "Foundation",
+      "burning passion",
+      "local community",
+      "free music lessons to children",
+    ],
+    href: "/index.html#history",
+    thumbnail: "", // image href
+    alt: "img",
+  },
+  {
+    title: "News",
+    description: "Latest news about MMF",
+    tags: [
+      "charity",
+      "happening",
+      "upcoming",
+      "donation",
+      "donate",
+      "support",
+      "children",
+    ],
+    href: "/pages/news.html",
+    thumbnail: "", // image href
+    alt: "img",
+  },
+  {
+    title: "About us",
+    description: "MMF introduction",
+    tags: [
+      "Mozika Manova Fiainana",
+      "school",
+      "music",
+      "children",
+      "provide",
+      "provition",
+      "underprivileged",
+      "food",
+      "scarcity",
+      "learning",
+      "clothing",
+      "charity",
+      "work",
+      "education",
+      "staff",
+      "teachers",
+      "community",
+      "st. johannes menighet stavanger",
+      "foreningen musikk gir liv kristiansand",
+      "buffet crampon paris",
+    ],
+    href: "/pages/about-page.html",
+    thumbnail: "", // image href
+    alt: "img",
+  },
+  {
+    title: "Eline Rodtvelt Hansen",
+    description: "Violinist and teacher",
+    tags: [
+      "antsirabe",
+      "dina",
+      "sandnes",
+      "grieg academy",
+      "norwegian board mmf",
+    ],
+    href: "/pages/about-page.html#eline",
+    thumbnail: "", // image href
+    alt: "img",
+  },
+]
+// ---------------------------------------------
+
+const openSearchDrawerBtn = document.querySelector("button#openSearchBarDrawer")
+const closeSearchDrawerBtn = document.querySelector(
+  "button#closeSearchBarDrawer"
+)
+const searchDrawer = document.querySelector("div#search-drawer-from-header")
+const searchInput = document.querySelector("input#Search-Drawer")
+const submitSearchBtn = document.querySelector("button.search-drawer_submit")
+const searchResultsContainer = document.querySelector("div#search-results")
+
+// Makes sure the user cannot tab to the hidden search field
+searchInput.setAttribute("tabindex", "-1")
+submitSearchBtn.setAttribute("tabindex", "-1")
+closeSearchDrawerBtn.setAttribute("tabindex", "-1")
+searchDrawer.setAttribute("aria-expanded", "false")
+
+// QoL - Close drawer if user clicks outside search drawer
+function handleClickedOutsideSearchField(e) {
+  const isClickedInsideDrawer = searchDrawer.contains(e.target)
+  if (!isClickedInsideDrawer) closeSearch()
+}
+
+function openSearch(e) {
+  e.stopPropagation() // Stops the event from bubbling up to the document event listener which will fire the closeSearch function (manual loop)
+
+  // ARIA-attributes
+  searchInput.removeAttribute("tabindex") // Remove tabindex -1
+  submitSearchBtn.removeAttribute("tabindex") // Remove tabindex -1
+  closeSearchDrawerBtn.removeAttribute("tabindex") // Remove tabindex -1
+  searchDrawer.setAttribute("aria-expanded", "true")
+  // -----
+
+  searchDrawer.classList.replace("-translate-y-full", "translate-y-0") // Opens the drawer
+  searchInput.focus() // Auto-focus the search field
+
+  // Events
+  openSearchDrawerBtn.removeEventListener("click", openSearch) // Remove the open drawer EL (event listener)
+  closeSearchDrawerBtn.addEventListener("click", closeSearch) // Add close drawer EL to close-btn
+  openSearchDrawerBtn.addEventListener("click", closeSearch) // Add close drawer EL to search-btn
+  document.addEventListener("click", handleClickedOutsideSearchField) // EL for if the user clicks outside the search drawer - Closes the drawer
+  searchInput.addEventListener("keyup", handleSearch) // EL to handle search input
+  // -----
+}
+
+function closeSearch() {
+  // ARIA-attributes
+  // Makes sure the user cannot tab to the hidden search field
+  searchInput.setAttribute("tabindex", "-1")
+  submitSearchBtn.setAttribute("tabindex", "-1")
+  closeSearchDrawerBtn.setAttribute("tabindex", "-1")
+  searchDrawer.setAttribute("aria-expanded", "false")
+  //-----
+
+  searchDrawer.classList.replace("translate-y-0", "-translate-y-full") // Retracts the drawer
+  if (searchResultsContainer) searchResultsContainer.setAttribute("hidden", "true") // !Placeholder container for search results - delete me - here and in index.html
+  searchInput.value = ""
+
+  // Events
+  closeSearchDrawerBtn.removeEventListener("click", closeSearch)
+  openSearchDrawerBtn.removeEventListener("click", closeSearch)
+  openSearchDrawerBtn.addEventListener("click", openSearch)
+  document.removeEventListener("click", handleClickedOutsideSearchField)
+  searchInput.removeEventListener("keyup", handleSearch)
+  // -----
+}
+
+openSearchDrawerBtn.addEventListener("click", openSearch)
+
+function handleSearch(e) {
+  const searchValue = e.currentTarget.value.toLowerCase() // Set search value to lowercase for failsafe
+  // if no value -> empty and hide the placeholder search results container
+  if (!searchValue) {
+    handleNoResults()
+    return
+  }
+
+  // Filter search value against the placeholder content - Replace variable and the content.properties which are checked
+  const searchResults = websiteContent.filter((content) => {
+    return (
+      content.title.toLowerCase().includes(searchValue) ||
+      content.description.toLowerCase().includes(searchValue) ||
+      content.tags.some((tag) => tag.toLowerCase().includes(searchValue)) // Map over tags and check if any return as true
+    )
+  })
+
+  // Do something with searchResults ....
+  if (!searchResultsContainer) {
+    console.log(searchResults)
+    return
+  }
+  generateSearchResults(searchResults.slice(0, 5)) // !PLACEHOLDER FUNCTION FOR PLACEHOLDER SEARCH RESULTS!
+}
+
+// !PLACEHOLDER FUNCTION FOR PLACEHOLDER SEARCH RESULTS!
+// Generate html based on search results
+function generateSearchResults(results) {
+  if (!results?.length) {
+    searchResultsContainer.innerHTML = "<p class='p-2'>No results.</p>"
+    return
+  }
+  searchResultsContainer.removeAttribute("hidden")
+  searchResultsContainer.innerHTML = ""
+  results.forEach((result) => {
+    const linkElement = document.createElement("a")
+    linkElement.href = result.href
+    linkElement.classList.add(
+      "w-96",
+      "flex",
+      "items-center",
+      "gap-3",
+      "border-b",
+      "p-2"
+    )
+
+    const container = document.createElement("div")
+
+    const thumbnail = document.createElement("img")
+    thumbnail.classList.add(
+      "w-16",
+      "rounded-full",
+      "border",
+      "bg-frost-blue",
+      "p-5"
+    )
+    thumbnail.src = result.thumbnail
+    thumbnail.alt = result.alt
+
+    const titleElement = document.createElement("p")
+    titleElement.textContent = result.title
+
+    const descriptionElement = document.createElement("p")
+    descriptionElement.textContent = result.description
+
+    container.append(titleElement, descriptionElement)
+    linkElement.append(thumbnail, container)
+    searchResultsContainer.appendChild(linkElement)
+  })
+}
+
+// Empty and hide the search results container
+function handleNoResults() {
+  searchResultsContainer.innerHTML = ""
+  searchResultsContainer.setAttribute("hidden", true)
+}
diff --git a/pages/about-page.html b/pages/about-page.html
index 225f053..e868a5e 100644
--- a/pages/about-page.html
+++ b/pages/about-page.html
@@ -18,6 +18,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -48,7 +49,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
@@ -342,7 +343,7 @@ <h2 class="font-justAnotherHand text-[150px] text-white">Our Staff</h2>
             </div>
           </div>
           <!-- Profile Content -->
-          <div class="text-center">
+          <div id="eline" class="text-center">
             <h3 class="font-justAnotherHand text-[70px] pt-[40px] pb-3">Eline Rodtvelt Hansen</h3>
             <p class="text-[18px] mr-[67px] pl-[87px]">Eline is a violinist and violin teacher, educated at the Grieg Academy in Bergen. Originally from Sandnes in Rogaland, she has traveled extensively around the world, playing with musicians on several continents and in various genres.</p><br>
             <p class="text-[18px] mr-[67px] pl-[87px]">Additionally, she is a dedicated violin teacher. With two violins, she went to Madagascar with a desire to start a music school to help children out of poverty.</p><br>
diff --git a/pages/contact-page.html b/pages/contact-page.html
index 3c64491..e53b5c7 100644
--- a/pages/contact-page.html
+++ b/pages/contact-page.html
@@ -22,6 +22,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
   </head>
 
   <body>
@@ -53,7 +54,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/event.html b/pages/event.html
index edaf02c..0984f5d 100644
--- a/pages/event.html
+++ b/pages/event.html
@@ -22,6 +22,8 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
+
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -52,7 +54,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/gallery-page.html b/pages/gallery-page.html
index 4050cd3..39cb308 100644
--- a/pages/gallery-page.html
+++ b/pages/gallery-page.html
@@ -23,6 +23,8 @@
       referrerpolicy="no-referrer"
     />
     <script type="module" src="../js/gallery-slider.mjs"></script>
+    <script type="module" src="../js/search.mjs"></script>
+
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -53,7 +55,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/news-post.html b/pages/news-post.html
index f32df85..e558765 100644
--- a/pages/news-post.html
+++ b/pages/news-post.html
@@ -22,6 +22,8 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
+
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -52,7 +54,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/news.html b/pages/news.html
index 5ee1de3..8743e1d 100644
--- a/pages/news.html
+++ b/pages/news.html
@@ -22,6 +22,8 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
+
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -52,7 +54,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/our-work.html b/pages/our-work.html
index 2884367..5a91b02 100644
--- a/pages/our-work.html
+++ b/pages/our-work.html
@@ -24,6 +24,8 @@
     />
     <script defer type="module" src="/js/ourWork.mjs"></script>
     
+    <script type="module" src="../js/search.mjs"></script>
+
   </head>
   <body>
 
@@ -56,7 +58,7 @@
           <!-- Search Bar Overlay, hidden initially. -->
           <div
             id="search-drawer-from-header"
-            class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+            class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
             aria-label="search-bar"
           >
             <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/privacy-policy.html b/pages/privacy-policy.html
index 0f93d92..1799b64 100644
--- a/pages/privacy-policy.html
+++ b/pages/privacy-policy.html
@@ -22,6 +22,8 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
+
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -52,7 +54,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/support-page.html b/pages/support-page.html
index 3f3a652..8d80e15 100644
--- a/pages/support-page.html
+++ b/pages/support-page.html
@@ -22,6 +22,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
     <script  type="module" src="/js/modals.mjs"></script>
   </head>
   <body>
@@ -53,7 +54,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>
diff --git a/pages/terms-and-conditions.html b/pages/terms-and-conditions.html
index 9c1134c..03d0135 100644
--- a/pages/terms-and-conditions.html
+++ b/pages/terms-and-conditions.html
@@ -22,6 +22,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script type="module" src="../js/search.mjs"></script>
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -52,7 +53,7 @@
         <!-- Search Bar Overlay, hidden initially. -->
         <div
           id="search-drawer-from-header"
-          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50 hidden"
+          class="fixed border border-black top-0 right-0 w-full h-16 bg-white transform -translate-y-full transition-transform duration-500 ease-out z-50"
           aria-label="search-bar"
         >
           <h2 id="search-label" class="sr-only">Search Bar</h2>