improvements in toc filter in docs

OpenLiberty · Jul 31, 2024 · 4f139e6 · 4f139e6
1 parent e8b2a29
commit 4f139e6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 0 deletions.
diff --git a/src/main/content/antora_ui/src/js/01-nav.js b/src/main/content/antora_ui/src/js/01-nav.js
@@ -71,6 +71,12 @@ var navigation = (function(){
       if (e.detail > 1) e.preventDefault();
     });
 
+    $('#filter_titles').on('keyup', filterNavTitles);
+
+    $('#clear_filter').on("click", function () {
+      $('#filter_titles').val('');
+      filterNavTitles();
+    })
   };
 
   $('.components .versions li a').on('click', function(e){

diff --git a/src/main/content/antora_ui/src/partials/nav-menu-filter.hbs b/src/main/content/antora_ui/src/partials/nav-menu-filter.hbs
@@ -0,0 +1,9 @@
+<div class="nav-menu-filter" >
+    <input type="text" id="filter_titles" aria-label="Filter titles" placeholder="Filter titles...">
+    <button
+    id="clear_filter"
+    type="reset"
+    tabindex="0"
+    aria-label="Clear filter search"
+    >X</button>
+</div>
diff --git a/src/main/content/antora_ui/src/partials/nav-menu.hbs b/src/main/content/antora_ui/src/partials/nav-menu.hbs
@@ -1,6 +1,9 @@
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu" aria-label="Navigation menu for Open Liberty docs">
     <h3 class="title"><a href="{{relativize page.componentVersion.url}}">{{page.component.title}}</a></h3>
+    <div class="no-results-container">
+      <b>No titles match</b> 
+    </div>
     {{#if page.navigation}}
     {{> nav-tree navigation=page.navigation}}
     {{/if}}

diff --git a/src/main/content/antora_ui/src/partials/nav.hbs b/src/main/content/antora_ui/src/partials/nav.hbs
@@ -2,6 +2,7 @@
   <aside class="nav" aria-label="Navigation table of contents">
     <div class="panels">
       {{> nav-explore}}
+      {{> nav-menu-filter}}
       {{> nav-menu}}
     </div>
   </aside>

diff --git a/src/main/content/antora_ui/src/sass/nav.scss b/src/main/content/antora_ui/src/sass/nav.scss
@@ -475,3 +475,32 @@ html.is-clipped--nav {
   white-space: nowrap;
   display: inline-block;
 }
+
+.nav-menu-filter{
+  margin: 0 19px 20px;
+  color: #5d6a8e;
+  position:relative;
+  #filter_titles{
+    background-color: #eeeff3;
+    border: 0;
+    border-radius: 3px;
+    padding: 4px 22px 4px 0.5rem;
+    width: 100%;
+  }
+  #clear_filter{
+    position: absolute;
+    right: 0;
+    background-color: transparent;
+    border: 0;
+    top: 3px;
+    display: none;
+  }
+}
+
+.no-results-container{
+  display: none;
+  font-size: 14px;
+  color: #5d6a8e;
+  margin: 0 19px 20px;
+  letter-spacing: 0.2px;
+}