Changed search-filter to search

brettchalupa · Dec 19, 2024 · 995df4f · 995df4f
1 parent 83f209c
commit 995df4f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss b/lib/graphql-docs/layouts/assets/_sass/_sidebar.scss
@@ -69,7 +69,7 @@
       }
     }
   }
-  #search-filter {
+  #search {
     display: flex;
     position: relative;
     align-items: center;

diff --git a/lib/graphql-docs/layouts/default.html b/lib/graphql-docs/layouts/default.html
@@ -20,15 +20,19 @@
 
       // Add listener for search filter input
       const sidebarDiv = document.getElementById('sidebar');
-      const searchFilterDiv = sidebarDiv.querySelector('#search-filter')
-      const searchFilterInput = searchFilterDiv.querySelector('input');
+      const searchDiv = sidebarDiv.querySelector('#search')
 
-      const listener = debounce((event) => {
-        const searchValue = event.target.value;
-        applySearchFilter(sidebarDiv, searchValue)
-      }, 500);
+      if (searchDiv) {
+        const searchInput = searchDiv.querySelector('input');
+        const menuElements = sidebarDiv.querySelectorAll('ul.menu-root');
 
-      searchFilterInput.addEventListener('input', listener);
+        const listener = debounce((event) => {
+          const searchValue = event.target.value;
+          applySearchFilter(searchValue, menuElements)
+        }, 500);
+
+        searchInput.addEventListener('input', listener);
+      }
     });
 
     function debounce(func, wait) {
@@ -45,10 +49,9 @@
       };
     }
 
-    function applySearchFilter(sidebarDiv, searchValue) {
-      const menuRootElements = sidebarDiv.querySelectorAll('ul.menu-root');
-      menuRootElements.forEach(menuRootElement => {
-        const listElements = menuRootElement.getElementsByTagName('li');
+    function applySearchFilter(searchValue, menuElements) {
+      menuElements.forEach(menuElement => {
+        const listElements = menuElement.getElementsByTagName('li');
         let hasVisibleElements = false;
         Array.from(listElements).forEach(listElement => {
           let contains = true
@@ -67,8 +70,8 @@
         });
 
         // Hide the entire menu if none of the list items are visible
-        const parentElement = menuRootElement.closest('li')
-        parentElement.style.display = hasVisibleElements ? '' : 'none';
+        const menuParentElement = menuElement.closest('li')
+        menuParentElement.style.display = hasVisibleElements ? '' : 'none';
       });
     }
     </script>

diff --git a/lib/graphql-docs/layouts/includes/sidebar.html b/lib/graphql-docs/layouts/includes/sidebar.html
@@ -1,5 +1,5 @@
-<div id="search-filter">
-  <img src="assets/images/search.svg">
+<div id="search">
+  <img src="<%= base_url %>/assets/images/search.svg">
   <input autocomplete="off" placeholder="Search" />
 </div>
 <ul class="categories">