earshinov/tocit

A bookmarklet that displays a table of contents

TOCit!

A bookmarklet that displays a table of contents.

Installation

• Drag the following link into your bookmarks bar: TOCit!

• Alternatively, manually add a bookmark with an arbitrary title (preferable "TOCit!") and with the following code as the link address (URL):

javascript:(function(){function%20loadScript(a){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0];d.appendChild(c)}loadScript('https://earshinov.github.io/tocit/tocit.js')})();

Usage

In order to see the table of contents on a page, just keep the page open and activate the bookmark. If there are any recognisable headings, the table of contents will appear, collapsed by default, at the bottom of page.

Please note that the bookmarket may not work on some pages which impose security restrictions on running third-party scripts.

In most cases, using the bookmarklet requires Internet connection.

Credit

This is based on Rune Skaug's AutoTOC (here, license), enhanced to track page scrolling and accordingly update the item selected in the TOC.

tocit's Issues

[FIXED] X to close TOC only

When I click X, focus is changed to #, which is beginning of the page.
Expected behaviour is to close TOC panel only.
Could you be so kind to enhance the bookmarklet thus?

Display headings of all levels

Now the bookmarklet shows headings of levels 1..4 only. For this reason, on the example page not all headings are displayed. See screenshots: TOC by this bookmarklet and by HTML5 Outliner.

Original comment: #1 (comment)

Add bookmarklet to the readme

It would be nice to have on the home page a link that can be easily drag-and-dropped to browser's bookmarks bar instead of forcing users to add the bookmark manually as it is now.

Extract headings from <span class="h1"> <span class="h2"> etc

On some pages that have headings visually, tocit does not seem to "see" them. The most notable is example are the official rfc pages from IETF, like https://datatracker.ietf.org/doc/html/rfc7230 which is the rfc for http 1.1. Looking at the html source, the rfc pages don't use <h1> <h2> etc, instead the html uses <span class="h1"> <span class="h2"> etc. I'm thinking that this is why tocit does not extract headings.

I'm thinking about working on this myself, but though I'd also open an issue in case someone else wants to take a look.

"Installation" relies on rawgit.com, which is end of life

The "Installation" section of the README.md relies on rawgit.com. According to the rawgit.com homepage:

RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end.

They recommend some other alternatives. Seems like the Installation section should be updated before rawgit.com is shutdown for real?