Add "active" classes to Book Table of Contents

Created on 30 September 2023, about 1 year ago
Updated 9 October 2023, about 1 year ago

Problem/Motivation

I have long book structures and would like to highlight the current page to help orient the user. While the Book Table of Contents block is otherwise good, it's missing an "active" class so I have no selector to use in CSS to make the item bold, for example.

For example
<li class="menu-item li-2" data-once="ul">
could be
<li class="menu-item li-2 active" data-once="ul">

✨ Feature request
Status

Fixed

Version

1.11

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom adam_b

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @adam_b
  • Assigned to bwong
  • πŸ‡ΊπŸ‡ΈUnited States bwong

    This may be a little harder to do because the Book module's function is used to generate the table of contents. Figuring out which element is the current page make require replicating and reworking that function. I am looking at what needs to be done to see what is required.

  • πŸ‡¬πŸ‡§United Kingdom adam_b

    Thanks for responding, bwong

    If it's any help, the core "Book navigation" block does provide this:
    <li class="menu-item menu-item--active-trail li-2" data-once="ul">

    And just to give you an idea why it's needed, I've uploaded a partial screenshot of one book menu

    • d56ca596 committed on 8.x.-1.x
      Added enchancement #3390812. Highlight current page in TOC
  • πŸ‡ΊπŸ‡ΈUnited States bwong

    For some reason that does not follow through so I added my own. Probably need to go back and figure out how they did it but 1.12 does this. The class is book-blocks-active.

  • Status changed to Fixed about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States bwong
  • πŸ‡¦πŸ‡ΊAustralia kualee

    Hi @bwong thanks for this great little module. It helps me saving tons of hours in reinventing the wheels.
    I would like to check about version 1.12 and the new class "book-blocks-active", is this meant to show on child page of a book?
    I installed the module and dropped TOC block in my content but I cant see this new class in my menu at all.
    Greatly appreciate your help!

  • πŸ‡ΊπŸ‡ΈUnited States bwong

    1.13 has the support in TOC. I had only implemented it in the Edit block TOC.

  • πŸ‡¦πŸ‡ΊAustralia kualee

    @bwong you are a truly legend! It's all working as intended

  • πŸ‡¬πŸ‡§United Kingdom adam_b

    Thanks bwong, that's a big help

Production build 0.71.5 2024