table-of-content initial

table-of-content/README.md

+
+# 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

table-of-content/css/interface.css

+
+
+/* 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

table-of-content/css/style.css

+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; }
+
+
+} 
+

table-of-content/css/table-of-content.css

+@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

table-of-content/js/createToc.js

+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);  
+    }
+
+}
+