Global search (#268)

Global search

Co-authored-by: Dirk Kelly <github@dirkkelly.com>

data/videos/meanstv/8uaInDOjYyw.yml

@@ -3,6 +3,6 @@ title: "Capitalism and Me"
 channel: meanstv
 description: "Mond Sankara explains what alienation of labor is and why it makes you feel like shit all the time.
 
-We need your help to build entertainment for all of us. We can't do it without you. SUPPORT: https://actionnetwork.org/fundraising/lets-build-means-tv"
+We need your help to build entertainment for all of us. We can't do it without you."
 series:
 source: youtube

layouts/_default/baseof.html

@@ -13,5 +13,6 @@
       {{ end }}
     </main>
     {{ partial "base/footer.html" . }}
+    {{ partial "search/code.html" . }}
   </body>
 </html>

layouts/channels/list.html

@@ -1,9 +1,5 @@
 {{ define "main" }}
-  <div class="header-action" style="margin-top: 10px">
-    {{ partial "search/bar.html" . }}
-  </div>
   {{ partial "channels/row.html" . }}
-  {{ partial "search/code.html" . }}
   <div class="header-action" style="margin-top: 10px">
     <a href="/channels/new/" class="header-add">Add Channel</a>
   </div>

layouts/partials/base/navigation.html

@@ -1,8 +1,11 @@
 <nav class="nav">
+  <div class="header-action" style="margin-top: 10px">
+    {{ partial "search/bar.html" . }}
+  </div>
   <ul class="nav-list plain-list">
     {{- $currentPage := . -}}
     {{ range .Site.Menus.main -}}
-      <li>
+      <li class="nav-item">
         <a href="{{ .URL | absLangURL }}" class="nav-link {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} is-active{{ end }}">{{ .Name }}</a>
       </li>
     {{- end }}

layouts/partials/playlists/row.html

@@ -1,4 +1,4 @@
-<h2 class="list-heading">
+<h2 class="list-heading heading">
   <a href="{{ .Permalink }}">{{ .Title }}</a>
 </h2>
 {{ partial "playlists/videos.html" . }}

layouts/partials/search/bar.html

@@ -1,4 +1,4 @@
 <div>
-  <label for="search" class="visually-hidden">Search Channels</label>
-  <input id="search" type="search" placeholder="Search Channels" class="header-search" autofocus />
+  <label for="search" class="visually-hidden">Search</label>
+  <input id="search" type="search" placeholder="Search" class="header-search" autofocus />
 </div>

layouts/partials/search/code.html

@@ -8,7 +8,20 @@
       'description': {{ .description }},
     },
   {{ end }}
-]
+].concat([
+  {{- range $channelSlug, $videos := .Site.Data.videos -}}
+    {{- range $videoID, $video := $videos -}}
+      {
+        'name': "{{ $video.title }}",
+        'slug': "{{ $video.id }}",
+        'tags': {{ $video.tags }},
+        'channel': "{{ $video.channel }}",
+        'description': {{ $video.description }},
+      },
+    {{- end -}}
+  {{ end }}
+])
+
 var options = {
   shouldSort: true,
   threshold: 0.4,
@@ -18,26 +31,30 @@
   minMatchCharLength: 1,
   id: "slug",
   keys: [
-    "name", "slug", "tags", "description"
+    "name", "slug", "tags", "channel", "description"
   ]
 };
 var fuse = new Fuse(list, options);
 var search = document.getElementById("search");
-var list = document.getElementsByClassName("list")[0];
-var items = list.children;
+var lists = document.getElementsByClassName("list");
 
 function listSearch(query) {
-  list.classList.toggle('searching', query.length > 0);
+  if(search.value.length == 0) {
+    search.value = query.replace("%20"," ");
+  }
 
   window.location.hash = 'search:' + query.toLowerCase();;
   var results = fuse.search(query);
-  for (var i = 0; i < items.length; i++) {
-    var item = items[i];
-    item.classList.toggle('found', results.indexOf(item.id) > -1);
-  }
 
-  if(search.value.length == 0) {
-    search.value = query.replace("%20"," ");
+  for (var i = 0; i < lists.length; i++) {
+    var list = lists[i];
+    var items = list.children;
+    list.classList.toggle('searching', query.length > 0);
+
+    for (var j = 0; j < items.length; j++) {
+      var item = items[j];
+      item.classList.toggle('found', results.indexOf(item.id) > -1);
+    }
   }
 }
 
@@ -46,6 +63,17 @@
   listSearch(query);
 });
 
+var navlinks = document.getElementsByClassName("nav-link");
+
+/* Persist search in nav links */
+for (var i = 0; i < navlinks.length; i++) {
+  var link = navlinks[i];
+  link.addEventListener("click", function(event) {
+    event.preventDefault();
+    window.location = event.target.href + location.hash;
+  });
+}
+
 if(window.location.hash && window.location.hash.indexOf('search') > -1) {
   listSearch(window.location.hash.replace("#search:",""));
 }

layouts/partials/videos/card.html

@@ -1,5 +1,5 @@
 {{ if .videoIframe }}
-<li class="channel-video">
+<li id="{{ .video.id }}" class="channel-video list-item">
   <ul>
     <li class="video">
       <div class="video-item">
@@ -18,7 +18,7 @@
   </ul>
 </li>
 {{ else }}
-<li class="video-item">
+<li id="{{ .video.id }}" class="video-item list-item">
   <div class="video">
     <div class="video-link-container">
       <div class="video-image">