Shorter css paths in navigation

config/jsdoc/api/template/static/scripts/main.js

@@ -54,12 +54,13 @@ $(function () {
 
   const search = (function () {
     const $nav = $('.navigation');
-    const $navList = $nav.find('.list');
+    const $navList = $nav.find('.navigation-list');
+    const navListNode = $navList.get(0);
     let $classItems;
     let $members;
     let stateClass = (function () {
-      $nav.removeClass('search-started searching');
+      $navList.removeClass('search-started searching');
-      $nav.addClass('search-empty');
+      $navList.addClass('search-empty');
       return 'search-empty';
     })();
     let manualToggles = {};
@@ -72,7 +73,6 @@ $(function () {
       .replace(/-/g, '~');
     const $currentItem = $navList.find('.item[data-longname="' + longname + '"]:eq(0)');
     $currentItem.prependTo($navList);
-    $currentItem.addClass('item-current toggle-manual-show');
     return {
       $nav: $nav,
       $navList: $navList,
@@ -87,9 +87,8 @@ $(function () {
       },
       changeStateClass: function (newClass) {
         if (newClass !== stateClass) {
-          const navNode = $nav.get(0);
+          navListNode.classList.remove(stateClass);
-          navNode.classList.remove(stateClass);
+          navListNode.classList.add(newClass);
-          navNode.classList.add(newClass);
           stateClass = newClass;
         }
       },
@@ -238,9 +237,7 @@ $(function () {
 
   // Search Items
   searchInput.addEventListener('input', queueSearch);
-  if (searchInput.value) {
+  doSearch(searchInput.value);
-    doSearch(searchInput.value);
-  }
 
   // Toggle when click an item element
   search.$nav.on('click', '.toggle', function (e) {
@@ -264,7 +261,7 @@ $(function () {
     var height = $(window).height();
     var $el = $('.navigation');
 
-    $el.height(height).find('.list').height(height - 133);
+    $el.height(height).find('.navigation-list').height(height - 133);
   };
 
   $(window).on('resize', _onResize);

config/jsdoc/api/template/static/styles/jaguar.css

@@ -124,7 +124,7 @@ li {
   color: #fff;
   border-color: #555;
 }
-.navigation .list {
+.navigation .navigation-list {
   padding: 10px 15px 0 15px;
   position: relative;
   overflow: auto;
@@ -195,37 +195,33 @@ li {
 
 /* search state */
 /* show all classes when search is empty */
-.navigation.search-empty li.item {
+.navigation-list.search-empty .item {
   display: block;
 }
 /* hide all members by default when search is empty */
-.navigation.search-empty li.item .member-list {
+.navigation-list.search-empty .item .member-list {
   display: none;
 }
-/* expand all members when one character is entered in the search field */
+/* expand all members when input in search field available but too short to search */
-.navigation.search-started li.item,
+.navigation-list.search-started li,
-.navigation.search-started .member-list,
+.navigation-list.search-started .member-list {
-.navigation.search-started .member-list li {
   display: block;
 }
-/* when more than one character is entered hide everything that is not a match */
+/* when searching hide everything that is not a match */
-.navigation.searching li.item,
+.navigation-list.searching li,
-.navigation.searching .member-list,
+.navigation-list.searching .member-list {
-.navigation.searching .member-list li {
   display: none;
 }
-.navigation.searching li.item.match,
+.navigation-list.searching .match {
-.navigation.searching .member-list.match,
-.navigation.searching .member-list li.match {
   display: block;
 }
 /* allow user to hide / show members */
-.navigation .item.toggle-manual-show .member-list,
+.navigation-list .item.toggle-manual-show li,
-.navigation .item.toggle-manual-show li {
+.navigation-list .item.toggle-manual-show .member-list {
   display: block!important;
 }
-.navigation:not(.searching) .item.toggle-manual-hide .member-list,
+.navigation-list:not(.searching) .item.toggle-manual-hide li,
-.navigation:not(.searching) .item.toggle-manual-hide li {
+.navigation-list:not(.searching) .item.toggle-manual-hide .member-list {
     display: none!important;
 }
 

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -36,11 +36,11 @@ function listContent(item, title, listItemPrinter) {
     }
 }
 ?>
-<div class="navigation search-empty">
+<div class="navigation">
     <div class="search">
         <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
     </div>
-    <ul class="list"><?js
+    <ul class="navigation-list search-empty"><?js
         this.nav.forEach(function (item) { ?>
         <li class="item" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
             <span class="title">