2

I'm trying to build an interactive ebook as a single page application. Everything works fine till now, except that I couldn't find a way to create a dynamic table of contents.

My initial idea was to use the same file and specify a different hash for each chapter, like this:

<nav epub:type="toc">
    <ol>
        <li><a href="page.xhtml#chapter1">Chapter 1</a></li>
        <li><a href="page.xhtml#chapter2">Chapter 2</a></li>
    </ol>
</nav>

Inside page.xhtml I have 2 anchors with id chapter1 and chapter2. Clicking on the chapters from the TOC will jump to the correct anchor.

But the JavaScript code inside page.xhtml cannot get the fragment information from window.location how I expect it. This is what I get with Calibre Viewer:

{
  "origin": "https://calibre-internal.invalid",
  "hash": "",
  "href": "https://calibre-internal.invalid/OEBPS/page.xhtml",
  "pathname": "/OEBPS/page.xhtml",
  "ancestorOrigins": {
    "length": 0
  },
  "hostname": "calibre-internal.invalid",
  "protocol": "https:",
  "port": "",
  "host": "calibre-internal.invalid",
  "search": ""
}

I don't know why the host is calibre-internal.invalid, that would also be interesting to fix.

You can find the sample project at this location: https://github.com/kenjiru/epub-location-test

Here's a sample epub file: https://github.com/kenjiru/epub-location-test/files/1307404/sample.epub.zip

kenjiru
  • 123
  • 5
  • I'm not sure I understand what your goal for using JS is. FYI, the file validates and renders fine in Adobe DE for Windows. The navigation works fine too. (nothing in epub spec forbids you from using anchors in a single file as the TOC items). – idiotprogrammer Sep 16 '17 at 13:31
  • In Adobe DE, the js output is more normal: localhost, port 5001, http. One more thing. You probably already know this, but single HTML file ebooks can take a long while to load on some reading systems. – idiotprogrammer Sep 16 '17 at 13:44
  • For what it's worth, if your goal is to hide/expand navigation items, the book EPUB3 Best Practices by Matt Garrish and Markus Gylling has some nice examples using javascript – idiotprogrammer Sep 16 '17 at 13:45
  • I want to have a dynamic TOC, where each entry is a different fragment. I want to read this fragment in the JavaScript code and display a different chapter of the book. This way I avoid loading a new html page for each chapter. – kenjiru Sep 20 '17 at 10:43

0 Answers0