Fix top-level active link (#1015)

* Fix top-level active link

Fixes #1014

1.  Reverse the order of `page.parent == node.title or page.grand_parent == node.title`. This makes no difference.
2.  Replace `page.parent == node.title` by `page.parent == node.title  and page.grand_parent == nil`. The condition is evaluated first because it is rightmost.
    We have `node in first_level_pages`.
    The old condition holds not only when `page` is a child of `node`,
    but also when `page` is a grandchild of a *different* top-level page and its parent happens to have the same title as `node`.
    The new condition never holds for a grandchild.

This change has been tested locally: in v0.4.0.rc3, when the 3rd-level page `G` was selected, the link to the top-level page `F` was active, and the link to its child `G` was shown; after making the change, it is no longer active, so the link to its child `G` is not shown.

* Update nav.html

Add a comment to clarify just when top-level nodes are active.
This commit is contained in:
Peter Mosses 2022-10-30 21:19:47 +01:00 committed by GitHub
parent 5a0bbcda2f
commit 063acaca15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -130,12 +130,36 @@
{%- comment -%}
The order of sibling pages in `pages_list` determines the order of display of
links to them in lists of navigation links and in auto-generated TOCs.
Note that Liquid evaluates conditions from right to left (and it does not allow
the use of parentheses). Some conditions are not so easy to express clearly...
For example, consider the following condition:
C: page.collection = = include.key and
page.url = = node.url or
page.grand_parent = = node.title or
page.parent = = node.title and
page.grand_parent = = nil
Here, `node` is a first-level page. The last part of the condition
-- namely: `page.parent = = node.title and page.grand_parent = = nil` --
is evaluated first; it holds if and only if `page` is a child of `node`.
The condition `page.grand_parent = = node.title or ...` holds when
`page` is a grandchild of node, OR `...` holds.
The condition `page.url = = node.url or ...` holds when
`page` is `node`, OR `...` holds.
The condition C: `page.collection = = include.key and ...` holds when we are
generating the nav links for a collection that includes `page`, AND `...` holds.
{%- endcomment -%}
<ul class="nav-list">
{%- for node in first_level_pages -%}
{%- unless node.nav_exclude -%}
<li class="nav-list-item{% if page.collection == include.key and page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
<li class="nav-list-item{% if page.collection == include.key and page.url == node.url or page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil %} active{% endif %}">
{%- if node.has_children -%}
<a href="#" class="nav-list-expander" aria-label="toggle links in {{ node.title }} category">
<svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>