Revert Hiding Namespace Items on Non-Searching Navigation

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

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;

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">