layout-4

maquette-tests/csspageweaver/plugins/footnotesFix/.gitignore

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

maquette-tests/csspageweaver/plugins/footnotesFix/README.md

@@ -0,0 +1,95 @@
+# Plugin to fix footnotes reset issue
+
+This plugin fix the issue of footnote reset.
+
+You can use the current method to declare footnotes:
+
+```CSS
+@page {
+    @footnote {
+      float: bottom;
+    }
+  }
+  
+.pagedjs_footnote { 
+  float: footnote; 
+}
+```
+
+This style is also added to the default stylesheet `footnotes.css` of this plugin. You can delete it if you have already declared footnotes in your own stylesheet (don't forget to remove it from the `config.json` as well).
+
+
+## How to use the plugin
+
+Add this folder to `csspageweaver/plugins/`.
+
+Call the plugin in `csspageweaver/manifest.json`:
+
+```json
+	"plugins": [
+        "footnotesFix",
+        // other plugins ...
+	],
+```
+
+## Configuration
+
+In `manifest.json`, you can modify/add some parameters:
+
+```json
+    "plugins":{
+        "footnotesFix"
+    },
+    "pluginsParameters":{
+        "footnotesFix": {
+            "selector": ".footnote",
+            "reset": ".chapter"
+        }
+    },
+```
+
+All the parameters are optional.
+
+- `selector` → CSS selector for the note element (must be inline in the HTML), by default is `.footnote`
+- `reset` → CSS selector where you want reset note counter. If you want to reset on the page: `page`
+
+
+## Notes in HTML
+
+In your HTML, the note must be a `<span>` inserted in the text, like this:
+
+```HTML
+Donec tincidunt, odio vel vestibulum sollicitudin, nibh dolor tempor sapien, ac laoreet 
+sem felis ut purus.&#8239;<span class=".footnote">Vestibulum neque ex, ullamcorper sit 
+amet diam sed, pharetra laoreet sem.</span> Morbi cursus bibendum consectetur. Nullam vel 
+lacus congue nibh pulvinar maximus sit amet eu risus. Curabitur semper odio mauris, nec 
+imperdiet velit pharetra non. Aenean accumsan nulla ac ex iaculis interdum.
+```
+
+You can use the [inline_notes` plugin](https://gitlab.com/csspageweaver/plugins/inline_notes) to create these span elements from listed notes, which are more common in conversion tools like Pandoc.
+
+The inline_notes plugin should be called before the footnotes plugin in the `manifest.json`:
+
+
+```json
+	"plugins": [
+        "inline_notes",
+        "footnotes_fix",
+        // other plugins ...
+	],
+```
+
+## Styling call & footer
+
+It's possible to change the styles of call notes and marker notes directly in your stylesheet like in the following code:
+
+```CSS
+::footnote-call{
+    font-weight: bold;
+}
+
+::footnote-marker{
+    font-weight: bold;
+}
+```
+

maquette-tests/csspageweaver/plugins/footnotesFix/config.json

@@ -0,0 +1,9 @@
+{
+	"name": "Footnotes",
+	"description": "Fix footnote reset",
+	"author": ["Julie Blanc"],
+	"licence": "MIT",
+	"version": "1.0",
+	"hook": "footnotes.js",
+	"stylesheet": "footnotes.css"
+}

maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.css

@@ -0,0 +1,9 @@
+@page {
+    @footnote {
+      float: bottom;
+    }
+  }
+  
+.pagedjs_footnote { 
+  float: footnote; 
+}

maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.js

@@ -0,0 +1,84 @@
+/**
+ * @name Footnotes
+ * @file Reset the way footnote are counted
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/footnotesFix/ }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+export default class footnotes extends Handler {
+
+  constructor(chunker, polisher, caller) {
+    super(chunker, polisher, caller);
+    this.parameters = cssPageWeaver.features.footnotesFix.parameters;
+    this.reset = this.parameters?.reset ; 
+    this.counter = 0;
+    this.selector = this.parameters?.selector || ".footnote";
+  }
+
+  beforeParsed(content) {
+   
+
+    let notes = content.querySelectorAll(this.selector);
+    notes.forEach(function (note, index) {
+      note.classList.add("pagedjs_footnote");
+    });
+
+
+   
+    if(this.reset){
+      let elems = content.querySelectorAll(this.reset);        
+      elems.forEach(function (elem, index) {
+          var span = document.createElement('span');
+          span.classList.add("reset-fix-footnote");
+          span.style.position = "absolute";
+          elem.insertBefore(span, elem.firstChild);
+      });
+    }else{
+      console.log("[footnotesFix] no reset")
+    }
+   
+  }
+
+
+  afterPageLayout(pageElement, page, breakToken){
+
+    if(this.reset){
+
+      // reset on pages
+      if(this.reset === "page"){
+          this.counter = 0;  
+      }
+
+      // reset on specific element
+      let newchapter = pageElement.querySelector('.reset-fix-footnote');
+      if(newchapter){
+          this.counter = 0;        
+      }
+
+      let footnotes = pageElement.querySelectorAll(".pagedjs_footnote_content [data-note]");
+    
+      let callnotes = pageElement.querySelectorAll('a.pagedjs_footnote');
+      callnotes.forEach((call, index) => {
+
+          this.counter = this.counter + 1; // increment
+          let num = this.counter - 1;
+
+          // update data-counter for call
+          call.setAttribute('data-counter-footnote-increment', num);
+          call.style.counterReset = "footnote " + num;
+
+          // update data-counter for marker
+          let footnote = footnotes[index];
+          let dataCounter = num + 1;
+          footnote.setAttribute('data-counter-note', dataCounter);
+          footnote.style.counterReset = "footnote-marker " + num;
+
+      });
+    }
+  }
+
+
+
+}