Initial commit

assets/csspageweaver/plugins/tableOfContent/.gitignore

@@ -0,0 +1 @@
+.DS_Store

assets/csspageweaver/plugins/tableOfContent/README.md

@@ -0,0 +1,90 @@
+---
+name: tableOfContent
+tags: recommended, stable
+description: A script to generate a table of content. 
+---
+
+# Table of content
+
+A script to generate a table of content. 
+
+See pagedjs.org post: [Build a Table of Contents from your HTML](https://pagedjs.org/post/toc/)
+
+**tags**: recommended, stable
+
+## Parameters
+
+The plugin contain also a minimal stylesheet to add the corresponding page numbers with paged.js and add some style to the toc list.
+
+In `manifest.json`, you can modify/add some parameters:
+
+```json
+    "plugins":{
+        "tableOfContent"
+    },
+    "pluginsParameters":{
+        "tableOfContent": {
+            "tocContainer": "#toc_container",
+            "tocTitles": ["h1", "h2"]
+        }
+    },
+ ```
+
+- `tocElement` → define the id element where the toc list will be create (by default: `#toc`)
+- `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:not(.unlisted)`. (by default: `["h1", "h2"]`) 
+- `beforePageNumber` (optional) → if you want to add some text before the page number ("page ", "p. ", ...) 
+- `position`  → put the page number before or after the toc element, create `::before` or `::after` pseudo-element (by default: `after`)
+
+
+## Stylesheet
+
+This plugin have a minimal stylesheet 
+
+```CSS
+#list-toc-generated{
+    --before-page: ""; 
+}
+```
+
+`--before-page` refers to the text before the page number ("page ", "p. ", ...), you can change it directly here or in the config.json 
+
+
+If the page number is positionned after the toc element (`"position": "after"` in config.json), this style apply: 
+
+```CSS
+.toc-element a.toc-page-after::after{
+    content: var(--before-page) target-counter(attr(href), page); /* This line create the page number */
+    float: right;  /* put number at the right of the page */
+}
+```
+
+If the page number is positionned before the toc element (`"position": "before"` in config.json), this style apply: 
+
+```CSS
+.toc-element a.toc-page-before::before{
+    content: var(--before-page) target-counter(attr(href), page);
+    margin-right: 1ch; /* space after number */
+}
+
+```
+
+
+
+## How to install
+
+### Download 
+
+1. Download the ZIP archive via Code > Download ZIP.
+2. Unzip the archive.
+3. Rename the extracted folder by removing the branch name suffix: `tableOfContent-main` → `tableOfContent`
+4. Move the folder into the `csspageweaver/plugins/` directory.
+5. Add the required parameters to `manifest.json` (see above).
+
+
+### Git clone 
+
+1. Use git clone 
+2. Move the folder into the `csspageweaver/plugins/` directory.
+3. Add the required parameters to `manifest.json` (see above).
+
+

assets/csspageweaver/plugins/tableOfContent/config.json

@@ -0,0 +1,9 @@
+{
+	"name": "Table of content",
+	"description": "A script to generate a table of content",
+	"author": ["Julie Blanc", "Julien Taquet"],
+	"licence": "MIT",
+	"version": "1.0",
+	"hook": "tableOfContent.js",
+	"stylesheet": "tableOfContent.css"
+}

assets/csspageweaver/plugins/tableOfContent/tableOfContent.css

@@ -0,0 +1,13 @@
+#list-toc-generated{
+    --before-page: "";
+}
+
+.toc-element a.toc-page-after::after{
+    content: var(--before-page) target-counter(attr(href), page);
+    float: right;  /* put number at the right of the page */
+}
+
+.toc-element a.toc-page-before::before{
+    content: var(--before-page) target-counter(attr(href), page);
+    margin-right: 1ch; /* space after number */
+}

assets/csspageweaver/plugins/tableOfContent/tableOfContent.js

@@ -0,0 +1,121 @@
+/**
+ * @name Table of content
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/table_of_content/ }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+export default class tableOfContent extends Handler {
+
+  constructor(chunker, polisher, caller) {
+    super(chunker, polisher, caller);
+    this.tocContainer = cssPageWeaver.features.tableOfContent.parameters?.tocContainer || "#toc_container"; 
+    this.tocTitles = cssPageWeaver.features.tableOfContent.parameters?.tocTitles || ["h1", "h2"]; 
+    this.beforePageNumber = cssPageWeaver.features.tableOfContent.parameters?.beforePageNumber; 
+    this.position = cssPageWeaver.features.tableOfContent.parameters?.position; 
+  }
+
+  beforeParsed(content) {
+    createToc({
+      content: content,
+      container: this.tocContainer, 
+      titleElements: this.tocTitles,
+      position: this.position
+    });
+
+  }
+}
+
+
+
+function createToc(config) {
+
+  const content = config.content;
+  const tocElement = config.container;
+  const titleElements = config.titleElements;
+
+  let tocElementDiv = content.querySelector(tocElement)
+  if(!tocElementDiv) return console.warn('couldn’t start the toc')
+  tocElementDiv.innerHTML = ''
+  let tocUl = document.createElement('ul')
+  tocUl.id = 'list-toc-generated'
+
+
+  if(config.before){
+    tocUl.style.setProperty('--before-page', '"' + config.before + '"');
+  }
+
+
+  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) {
+      // check if shouldbe shown
+      if (
+        !element.classList.contains('toc-ignore') || 
+        !element.classList.contains('toc-ignore')
+      ) {
+        // add classes to the element
+        element.classList.add('title-element')
+        element.setAttribute('data-title-level', titleHierarchy)
+
+        // add an id if doesn't exist
+        tocElementNbr++
+
+        if (element.id == '') {
+          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)
+
+    let classes = [
+      ...(tocElement.className ? tocElement.className.split(' ') : []),
+      ...(tocElement.closest('section')?.className ? tocElement.closest('section')?.className.split(' ') : []),
+    ];
+    
+    classes.forEach((meta) => {
+      if (!meta || meta === 'title-element') return;
+      tocNewLi.classList.add(`toc-${meta}`);
+    });
+
+    //get the exisiting class
+    // 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])
+      }
+    }
+
+    if(config.position && config.position === "before"){
+      tocNewLi.innerHTML =
+      '<a class="toc-page-before" href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
+    }else{
+      tocNewLi.innerHTML =
+      '<a class="toc-page-after" href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
+    }
+
+
+    tocUl.appendChild(tocNewLi)
+ }
+}