Add Table of Contents dropup like in Kiwix PWA

[ramko93]

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Kiwix extension chrome rendering zim article without subtopic menu and hyperlink for the same

[Jaifroid]

@ramko93 It's true there is currently no Table of Contents in the Chrome or Firefox extension versions. However, you could try out the PWA: https://pwa.kiwix.org where there is a ToC feature (not a sidebar, but a popup menu at the bottom of the screen).

We have a related issue to backport this (amongst other things): #523.

[Greeshmanth1909]

@Jaifroid Would filtering the headings <h1>, <h2> ...<h6> in the htmlArticle parameter of displayArticleContentInIframe function and displaying them as a list, like <a href="#idOfHeading">Heading</a> at the bottom if the iframe work?

[Jaifroid]

@Greeshmanth1909 Yes, that's more or less the solution I made for the PWA. Did you look at the implementation? Go to https://pwa.kiwix.org, open a Wikipedia ZIM (can be a small one, like Ray Charles), and see how it works.

I think the code there is a bit clunky, not something I'm proud of, but it gives an idea of what could be done. The code is split between uiUtil.js (here) and app.js (here). You have to set it up once the article is loaded, and then you have to add event listeners to each heading.

Edit: You also have to handle tearing it down at some point in the code.

[Greeshmanth1909]

Nice, I'd like to take up this issue.
Wouldn't it be better to put the TOC at the side to increase its visibility?

[Jaifroid]

Nice, I'd like to take up this issue. Wouldn't it be better to put the TOC at the side to increase its visibility?

Well, we currently only have two UI options, top and bottom bars. We don't have a sidebar. It would be a much more complex thing to implement taking into account how to activate it, how to integrate it with the current UI, etc.

So, I think it would be best to implement it like in Kiwix PWA: it will be much easier for you to prototype and integrate.

[D3V-D]

@Jaifroid Is this issue still relevant? I may be interested in picking it up; I quite like Wikipedia's current implementation of it when on smaller screens.

[D3V-D]

Here's a video of what I mean:
https://github.com/user-attachments/assets/f9f3fd03-1664-4b24-b27f-be66937939e8

[Jaifroid]

@D3V-D Apologies for the slow reply. The issue is indeed still relevant. In fact, a user just emailed me to ask:

I can't see any way to find a list of the sections in the current
wikipedia page. How is that supposed to work? Is there a way to move
forward or back to the next section?

Your suggested solution is interesting, but it does appear to involve altering the HTML of the articles by injecting the ToC, and it might not be possible to do that in a generic way for all ZIMs with <h2>-style headers (not just Wikipedia). Another solution was that adopted in #1241, which was unfortunately abandoned very close the finishing line. That involved adding a "ToC" button (or other icon) to the current app UI, which is the solution also adopted and available in the PWA (https://pwa.kiwix.org).

I'm open to suggestions re the UI. If you wanted to work on this, it would be very welcome.

[D3V-D]

@Jaifroid would it not be possible to have the ToC as a floating HTML element above the current article, not necessarily in the article? Though I do see the argument for a more out-of-the-way implementation.

If I'm being honest, the bottom bar isn't my favorite UI/UX wise - if I were to choose, I'd probably emulate how modern browsers look, with the back/forward arrows in the top left corner, zoom in the top right, either side of search bar. Back-to-top button perhaps is the only element I'd keep in the bottom. I do get why though, you already have a decent number of elements in the top-bar due to the different Kiwix app pages.

Past that, though, I think it'd be interesting to have ToC in top bar, like top-left, and have a sidebar pop-out (on a higher z than the main page, like your example) with the contents, instead of coming from the bottom.

Let me know your thoughts