Commit a6b2b5ae authored by Julie Blanc's avatar Julie Blanc

table-of-content initial

parent 03f4880c
# Table of content
A script to generate a table of content.
### Use the script with paged.js
Add the main script :
```html
<script async type="text/javascript" src="js/createToc.js"></script>
```
With paged.js, the table of content need to be generated before that paged.js fragmented the content into pages. You need to the hook `before` to call the script.
Add this code in the `head` of you html document:
```html
<script>
window.PagedConfig = {
before: function () {
createToc({
tocElement: '#my-toc-content',
titleElements: [ 'h1', 'h2', 'h3' ]
});
}
};
</script>
```
Additionnaly, add the `async` property to the paged.js script:
```html
<script async src="http://localhost:9090/dist/paged.polyfill.js"></script> <!-- if you use paged.js with npm -->
<script async src="http://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> <!-- if you use the online script of paged.js -->
```
The folder contain also a minimal stylesheet to add the corresponding page numbers with paged.js and add some style to the toc list:
```html
<link rel="stylesheet" type="text/css" href="css/table-of-content.css">
```
### Configuring the script
`tocElement`: define the id element where the toc list will be create
`titleElements`: array of the title element you want in the toc list. You can add as many as you want and the elements can be classes like `.title-1` or `.my-content h1`
## Use the script without paged.js
The script can be used without paged.js
```html
<script>
window.PagedConfig = {
before: function () {
createToc({
tocElement: '#my-toc-content',
titleElements: [ 'h1', 'h2', 'h3' ]
});
}
};
</script>
```
\ No newline at end of file
/* To define how the book look on the screen: */
@media screen {
body {
background-color:whitesmoke;
}
.pagedjs_pages {
display: flex;
width: var(--width);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 2px #888;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
#pagedjs_interface_header{
position: fixed;
background-color: #888;
width: 100vw;
height: 30px;
top: 0;
left: 0;
}
}
\ No newline at end of file
body{ counter-reset: titleLevel1; }
h2{
counter-increment: titleLevel1;
counter-reset: titleLevel2;
}
h2::before{ content: counter(titleLevel1) ". "; }
h3{ counter-increment: titleLevel2; }
h3::before{ content: counter(titleLevel1) ". " counter(titleLevel2) ". "; }
@media print{
@page{
size: A4;
@bottom-right{
content: counter(page);
}
}
#table-of-content{ break-after: page; }
h2{ break-before: page; }
}
@media print{
#list-toc-generated{ list-style: none;}
#list-toc-generated .toc-element a::after{
content: "p. " target-counter(attr(href), page);
float: right;
}
#list-toc-generated .toc-element-level-1{
margin-top: 25px;
font-weight: bold;
}
#list-toc-generated .toc-element-level-2{
margin-left: 25px;
}
/* target-text(attr(href), before) doesn't work for now, replace with counters (see below)*/
#list-toc-generated .toc-element a::before{
content: target-text(attr(href), before);
}
/* counters */
#list-toc-generated{
counter-reset: counterTocLevel1;
}
#list-toc-generated .toc-element-level-1{
counter-increment: counterTocLevel1;
counter-reset: counterTocLevel2;
}
#list-toc-generated .toc-element-level-1::before{
content: counter(counterTocLevel1) ". ";
}
#list-toc-generated .toc-element-level-2{
counter-increment: counterTocLevel2;
}
#list-toc-generated .toc-element-level-2::before{
content: counter(counterTocLevel1) ". " counter(counterTocLevel2) ". ";
}
}
\ No newline at end of file
This diff is collapsed.
function createToc(config){
const tocElement = config.tocElement;
const titleElements = config.titleElements;
let tocElementDiv = document.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 = document.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 = document.getElementsByClassName("title-element");
for(var i= 0; i < tocElements.length; i++){
let tocElement = tocElements[i];
let tocNewLi = document.createElement("li");
tocNewLi.classList.add("toc-element");
tocNewLi.classList.add("toc-element-level-" + tocElement.dataset.titleLevel);
tocNewLi.innerHTML = '<a href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
tocUl.appendChild(tocNewLi);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment