implement mobile view search

src/layouts/index.html

@@ -94,7 +94,12 @@
 <!-- Style for Swiper -->
 
 <style>
-
+  .swiper-package-display{
+    display:block;
+  }
+  .grid-package-display{
+    display:none;
+  }
   @media only screen and (min-width: 576px) {
 
       .grid-package-display{
@@ -105,51 +110,6 @@
         display:none;
       }
   }
-
-@media only screen and (max-width: 576px) {
-
-    .grid-package-display{
-      display:none;
-    }
-
-    .swiper-package-display{
-      display:block;
-    }
-}
-
-  .swiper {
-    width: 100%;
-    height: 100%;
-    margin-bottom: 1vw !important;
-    margin-top: 1vw;
-  }
-
-  .swiper-slide {
-    text-align: center;
-    font-size: 18px;
-
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-  }
-
-  .swiper-slide figure > img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
 </style>
 
 <!-- Package CTA Section -->

src/layouts/partials/footer.html

@@ -39,7 +39,6 @@
   </div>
 </section>
 
-<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
 
 <!-- JavaScript Bundle with Popper -->
 
@@ -146,19 +145,6 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     rdt('track', 'ViewContent');
   </script>
 
-  <script>
-    var swiper = new Swiper(".mySwiper", {
-      slidesPerView: 1.5,
-      spaceBetween: 10,
-      freeMode: true,
-      loop: true,
-      pagination: {
-        el: ".swiper-pagination",
-        clickable: true,
-      },
-    });
-  </script>
-
   <script>
 
     const url = 'https://tea.breezy.hr/json?verbose=true';

src/layouts/partials/package-grid.html

@@ -1,7 +1,6 @@
 <!-- Package Grid -->
 
 <section>
-
   <!-- Package Grid Header -->
   <hr>
     <div class="container package-grid-header two-boxes">
@@ -12,20 +11,7 @@
     </div>
   <hr>
 
-  <section>
+  {{- partial "search-menu.html" "searchTermDesktop" -}}
-      <div class="button-container">
-        <div id="searchBar">
-          <div style="display:flex; align-items:center;">
-            <div class="icon">
-              <i class="icon-search-icon"></i>
-            </div>
-            <input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
-          </div>
-          {{- partial "sort-dropdown.html" -}}
-        </div>
-      </div>
-  </section>
-
   <hr>
 
   <div class="package-grid">
@@ -105,43 +91,6 @@
     border: 0px;
     overflow: hidden;
   }
-
-  .icon-search-icon{
-    font-size: 30px;
-    color: #949494;
-    margin-right: 20px;
-    position: relative;
-    top: 2px;
-  }
-
-  #searchBar {
-    padding: 0px;
-    height: 150px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  #searchBar .sorting-container {
-    min-width: 260px;
-  }
-  #searchBar input {
-    font-size: 32px;
-    font-family: "pp-neue-machina", sans-serif;
-    color:#00ffd0;
-    text-transform:uppercase;
-    margin-bottom: -5px;
-    min-width: 60%;
-    padding: 0px;
-    background-color: #1a1a1a !important;
-    border: none;
-    color: #00ffd0;
-    outline: none;
-    border-radius: 0px;
-  }
-  #searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: #949494;
-    opacity: 1; /* Firefox */
-  }
 </style>
 <script async src="https://unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
 <script language="javascript" type="text/javascript">
@@ -168,10 +117,9 @@
   }
 
   const onSearch = debounce(() => {
-    const searchInput = document.getElementById('searchTerm');
+    const searchInput = document.getElementById('searchTermDesktop');
     if (searchInput.value) {
       const term = searchInput.value;
-      // refreshDisplayedPackages(searchInput.value);
       const packages = getPackageThumbs();
       const sortedPackages = packages.sort((a, b) => {
         const aScore = getMatchScore(term, a.dataset);
@@ -182,7 +130,7 @@
       grid.textContent = '';
       for(const sp of sortedPackages) {
         const score = getMatchScore(term, sp.dataset);
-        if (score > 5) {
+        if (score > 20) {
           sp.classList.remove('hidden');
         } else {
           sp.classList.add('hidden');
@@ -194,6 +142,11 @@
     }
   }, 300);
 
+  const searchInputDesktop = document.getElementById('searchTermDesktop');
+  searchInputDesktop.addEventListener("search", onSearch);
+  searchInputDesktop.addEventListener("change", onSearch);
+  searchInputDesktop.addEventListener("keyup", onSearch);
+
   function getPackageThumbs() {
     // const grid = document.getElementById('packageGrid');
     return packagesCache;

src/layouts/partials/search-menu.html

@@ -0,0 +1,53 @@
+<section>
+    <div class="button-container">
+        <div class="searchBar">
+            <div style="display:flex; align-items:center;">
+                <div class="icon">
+                <i class="icon-search-icon"></i>
+                </div>
+                <input id="{{- . -}}" type="search" placeholder="search_" />
+            </div>
+            {{- partial "sort-dropdown.html" -}}
+        </div>
+    </div>
+</section>
+
+<style>
+
+  .icon-search-icon{
+    font-size: 30px;
+    color: #949494;
+    margin-right: 20px;
+    position: relative;
+    top: 2px;
+  }
+
+  .searchBar {
+    padding: 0px;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .searchBar .sorting-container {
+    min-width: 260px;
+  }
+  .searchBar input {
+    font-size: 32px;
+    font-family: "pp-neue-machina", sans-serif;
+    color:#00ffd0;
+    text-transform:uppercase;
+    margin-bottom: -5px;
+    min-width: 60%;
+    padding: 0px;
+    background-color: #1a1a1a !important;
+    border: none;
+    color: #00ffd0;
+    outline: none;
+    border-radius: 0px;
+  }
+  .searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #949494;
+    opacity: 1; /* Firefox */
+  }
+</style>

src/layouts/partials/sort-dropdown.html

@@ -1,6 +1,13 @@
 <style>
     .sorting-container{
-      display:inline-block;
+        display:none;
+    }
+    @media only screen and (min-width: 576px) {
+        .sorting-container{
+            display: inline-block;
+        }
+    }
+    .sorting-container{
       font-family: "pp-neue-machina", sans-serif;
       background-color: #1a1a1a;
       border: 1px solid #ffffff;

src/layouts/partials/swiper.html

@@ -5,12 +5,14 @@
   </div>
 <hr>
 
+{{- partial "search-menu.html" "searchTermMobile" -}}
+<hr>
 <!-- Slider main container -->
 
-  <div class="row" style="margin-bottom: 2vw !important;">
+<div class="row" style="margin-bottom: 2vw !important;">
   <div class="col">
     <div class="swiper mySwiper">
-        <div class="swiper-wrapper">
+      <div id="parentSwiper" class="swiper-wrapper">
         {{ range $.Site.Data.packages }}
           <div class="swiper-slide">
             {{- partial "package-thumbnail.html" .}}
@@ -20,4 +22,93 @@
       <!--<div class="swiper-pagination"></div>-->
     </div>
   </div>
-  </div>
+</div>
+<style>
+  .swiper {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 1vw !important;
+    margin-top: 1vw;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+
+  .swiper-slide figure > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
+<script>
+  let swipeyPackagesCache;
+  const swiper = new Swiper(".mySwiper", {
+    slidesPerView: 1.5,
+    spaceBetween: 10,
+    freeMode: true,
+    loop: false,
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    on: {
+      afterInit: () => {
+        const swiperParent = document.getElementById('parentSwiper');
+        swipeyPackagesCache = Array.from(swiperParent.children)
+          .filter((e) => e.childNodes[0].dataset.popularity)
+          .map((e) => {
+            e.classList = ['swiper-slide'];
+            return e;
+          });
+      }
+    }
+  });
+
+
+  const onSearchMobile = debounce(async () => {
+    const searchInput = document.getElementById('searchTermMobile');
+    if (searchInput.value) {
+      const term = searchInput.value;
+      const packages = [...swipeyPackagesCache];
+      const sortedPackages = packages.sort((a, b) => {
+        const aScore = getMatchScore(term, a.childNodes[0].dataset);
+        const bScore = getMatchScore(term, b.childNodes[0].dataset);
+        return bScore - aScore;
+      });
+      swiper.removeAllSlides();
+      for(const sp of sortedPackages) {
+        const score = getMatchScore(term, sp.childNodes[0].dataset);
+        if (score > 20) {
+          swiper.addSlide(1, sp);
+        }
+      }
+    } else {
+      const recache = [...swipeyPackagesCache];
+      await swiper.removeAllSlides();
+      swiper.appendSlide(recache);
+    }
+  }, 300);
+
+  const searchInputMobile = document.getElementById('searchTermMobile');
+  searchInputMobile.addEventListener("search", onSearchMobile);
+  searchInputMobile.addEventListener("change", onSearchMobile);
+  searchInputMobile.addEventListener("keyup", onSearchMobile);
+</script>