Revert Hiding Namespace Items on Non-Searching Navigation (#47)

Co-authored-by: Baz Utsahajit <[email protected]>
pixijs · Mar 4, 2024 · 2689141 · 2689141
1 parent 080e107
commit 2689141
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/src/static/index.ts b/src/static/index.ts
@@ -56,23 +56,64 @@ $(() =>
 
     if ($currentItem.length)
     {
-    // if a child then show the top level parent and highlight the
-    // current item.
+        // if a child then show the top level parent and highlight the
+        // current item.
         if ($currentItem.parents('.children').length)
         {
             $currentItem.addClass('current');
             // need to make all children not current
             $currentItem.find('li.item').addClass('notCurrent');
             $currentItem = $currentItem.parents('ul.list>li.item');
         }
-        $currentItem.remove().prependTo($list).addClass('current');
+        $currentItem.addClass('current');
     }
 
     const $search = $('.search');
     const $items = $nav.find('.item');
 
-    // Store the original ordering of the items
-    const originalOrder = $items.toArray();
+    // Store the original ordering of the items with the namespace items sorted alphabetically.
+    const originalOrder = $items.toArray().sort((a, b) =>
+    {
+        const isACurrent = a.classList.contains('current');
+        const isBCurrent = b.classList.contains('current');
+
+        // 'current' or active item should come first.
+        if (isACurrent && !isBCurrent)
+        {
+            return -1;
+        }
+        else if (!isACurrent && isBCurrent)
+        {
+            return 1;
+        }
+
+        // Sort the namespace items alphabetically.
+        const isANamespaceItem = a.classList.contains('namespaceItem');
+        const isBNamespaceItem = b.classList.contains('namespaceItem');
+
+        if (isANamespaceItem && isBNamespaceItem)
+        {
+            const nameA = a.getAttribute('data-name')?.split('.').pop() ?? '';
+            const nameB = b.getAttribute('data-name')?.split('.').pop() ?? '';
+
+            return nameA.localeCompare(nameB);
+        }
+        // Prioritize namespace items.
+        else if (isANamespaceItem)
+        {
+            return 1;
+        }
+        else if (isBNamespaceItem)
+        {
+            return -1;
+        }
+
+        return 0;
+    });
+
+    // Apply the sorted original order.
+    $('.list').empty().append(originalOrder);
+
     const searchInput = document.getElementById('search') as HTMLInputElement;
 
     // Search input

diff --git a/src/static/styles/navigation.scss b/src/static/styles/navigation.scss
@@ -143,9 +143,10 @@
     .item {
       display: block;
 
-      &.namespaceItem {
-        display: none;
-      }
+      // -- Enable to hide namespace members from the list while not searching --
+      // &.namespaceItem {
+      //   display: none;
+      // }
 
       &.current {
         display: block;

diff --git a/tmpl/components/container-navigation.tmpl b/tmpl/components/container-navigation.tmpl
@@ -16,9 +16,8 @@ var canStyleAsNamespace = function(item) {
     <?js
     const process = (item) => {
         const isNamespace = canStyleAsNamespace(item);
-        const isNamespaceItem = item.path.includes(".");
     ?>
-        <li class="item <?js= isNamespaceItem ? 'namespaceItem' : ''?>" data-name="<?js= (item.type === 'tutorial' ? 'tutorial-' : '') + item.path ?>">
+        <li class="item <?js= !isNamespace ? 'namespaceItem' : ''?>" data-name="<?js= (item.type === 'tutorial' ? 'tutorial-' : '') + item.path ?>">
             <span class="title <?js if (isNamespace) { ?>namespace<?js } ?> <?js if (item.deprecated) { ?>status-deprecated<?js } ?>">
                 <?js if (isNamespace) { ?>
                 <span class="namespaceTag">