feat: added toc dropup like in Kiwix-PWA

[heropj]

fix #1212

• Implemented a fully functional TOC drop-up, inspired by Kiwix-PWA and PR add ToC as in kiwix pwa #1241

• When user clicks on drop-up button, TOC List is set up and displayed as drop-up menu.

• It is closed when drop-up button loses focus or when a section is clicked.

• Clicking a section scrolls the view to that section.

[Jaifroid]

@heropj Many thanks for this PR. I'm just running tests, and then will do some manual testing.

[Jaifroid]

Thanks for this PR. I've done some manual testing, and I noticed these issues:

• It works in Wikipedia, but the ToC closes as soon as the user jumps to a heading. It should stay open until the user clicks out of the ToC, in case the user wants to jump around i the article. Alternatively, you should make sure that the header and footer remain visible after the jump, so that users can easily re-open the ToC. Otherwise it's difficult, ergonomically, to re-open it after a jump.
• I tried it with a Gutenberg ZIM, and although the headings showed, I got a console error when clicking on one of the headings. After that error, the ToC wouldn't close any more. See screenshot.

[Jaifroid]

Please see previous comment for some issues you need to address. Please test the UI fully with different ZIM types and focus on useability. Thanks!

[heropj]

hello @Jaifroid, Thank-you for reviewing and highlighting these issues.

fix:

• For the first ux related issue, The TOC will now close only when user clicks outside of it, For this I have added 'click' event listener on the iframe, which is applicable as the iframe content is same-origin with respect to the parent page. I found that scrolling down and then up, to make TOC and Header visible after a jump, inconsistent many times. Hence, I think keeping the TOC on-screen until the user clicks out of it is a better choice. Also, the background changes for a short amount of time to highlight the section the user has scrolled to.
• The second issue occurred because the Gutenberg ZIM didn't have an id set to its headings, it worked for Wikipedia because all heading tags in Wikipedia had a unique id. To tackle this, I have modified the getHeadingObjects function. It now generates a unique id, if it doesn't already exist, and assigns it to the fetched headings.

[Jaifroid]

Thank you, will test!