I have read the documentation.
I have tried the sample code.
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>Table of content</title>
<script src="http://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script src="toc.js"></script>
<!-- config for the table of cntent -->
<script>
class handlers extends Paged
.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
beforeParsed(content) {
createToc({content: content, tocElement: '#toc', titleElements: ['h1']});
}
}
Paged
.registerHandlers(handlers);
</script>
<style>
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px black;
margin: 2em auto;
}
}
@media print {
#toc li a::after {
content: target-counter(attr(href), page);
float: right;
}
section {
break-before: right;
}
}
</style>
</head>
<body>
<section id="toc">Table of content will be added here: if you see a toc, it works</section>
<section class="chapter">
<h1 class="title">title of the chapter 1 </h1>
</section>
<section class="chapter">
<h1 class="title">title of the chapter 2 </h1>
</section>
<section class="chapter">
<h1 class="title">title of the chapter 3 </h1>
</section>
<section class="chapter">
<h1 class="title">title of the chapter 4 </h1>
</section>
<section class="chapter">
<h1 class="title">title of the chapter 5</h1>
</section>
</body>
</html>
And the toc.js file is:
function createToc(config){
const content = config.content;
const tocElement = config.tocElement;
const titleElements = config.titleElements;
let tocElementDiv = content.querySelector(tocElement);
let tocUl = document.createElement("ul");
tocUl.id = "list-toc-generated";
tocElementDiv.appendChild(tocUl);
// add class to all title elements
let tocElementNbr = 0;
for(var i= 0; i < titleElements.length; i++){
let titleHierarchy = i + 1;
let titleElement = content.querySelectorAll(titleElements[i]);
titleElement.forEach(function(element) {
// add classes to the element
element.classList.add("title-element");
element.setAttribute("data-title-level", titleHierarchy);
// add id if doesn't exist
tocElementNbr++;
idElement = element.id;
if(idElement == ''){
element.id = 'title-element-' + tocElementNbr;
}
let newIdElement = element.id;
});
}
// create toc list
let tocElements = content.querySelectorAll(".title-element");
for(var i= 0; i < tocElements.length; i++){
let tocElement = tocElements[i];
let tocNewLi = document.createElement("li");
// Add class for the hierarcy of toc
tocNewLi.classList.add("toc-element");
tocNewLi.classList.add("toc-element-level-" + tocElement.dataset.titleLevel);
// Keep class of title elements
let classTocElement = tocElement.classList;
for(var n= 0; n < classTocElement.length; n++){
if(classTocElement[n] != "title-element"){
tocNewLi.classList.add(classTocElement[n]);
}
}
// Create the element
tocNewLi.innerHTML = '<a href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
tocUl.appendChild(tocNewLi);
}
}
The command I used to generate the TOC is pagedjs-cli index.html -o index.pdf
The pages and TOC both do not have page numbers.
What might be the solution here.