initial commit

public/csspageweaver/plugins/inlineNotes/.gitignore

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

public/csspageweaver/plugins/inlineNotes/README.md

@@ -0,0 +1,77 @@
+---
+name: InlineNotes
+tags: recommended, stable
+description: This script moves listed notes to inline elements at the place of the call.
+
+---
+
+# Inline notes 
+
+To move notes in the correct place in the page, Paged.js needs to have the note element in the flow. But in convert tools like Pandoc, it’s common to have the notes elements presented in a list with link elements in the flow pointing to the correponding note.
+
+This script moves listed notes to inline elements at the place of the call.
+
+
+
+## How to use
+
+Add this folder in `csspageweaver/plugins/`.
+
+Call the plugin in `csspageweaver/manifest.json`:
+
+```json
+	"plugins": [
+        "inlineNotes",
+        // other plugins ...
+	],
+```
+
+## Config.json
+
+In `manifest.json`, you can modify/add some parameters:
+
+```
+ "pluginsParameters": {
+        // parameters of other plugins ...
+        "inlineNotes": {
+            "input": ".footnote-ref",
+            "containerNotes": ".footnotes"
+        }
+    },
+```
+
+- `input` → CSS selector of the original call element (by default: `.footnote-ref`)
+- `containerNotes` → CSS selector of the original container of the footnote list, this container is deleted after moving notes (by default: `#footnotes`)
+- `` → Class of the new span created for the note
+
+
+## Exemple
+
+Before :
+
+```HTML
+<p>Gutenberg  in 1439 was the first European to use movable type.
+Among his many contributions to printing are: the invention of
+a process for mass-producing movable type; the use of oil-based
+ink for printing books; <a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a> adjustable molds; mechanical movable type; and the use  of a wooden printing press similar to the agricultural  screw presses of the period.</p>
+<aside id="#footnotes">
+    <hr>
+    <ol>
+        <li id="fn1">Soap, Sex, and Cigarettes: A Cultural History of American Advertising By Juliann Sivulka, page 5</li>
+    </ol>
+</aside>
+
+```
+
+
+After (wiht the plugin):
+
+```HTML
+<p>Gutenberg  in 1439 was the first European to use movable type.
+Among his many contributions to printing are: the invention of
+a process for mass-producing movable type; the use of oil-based
+ink for printing books; <span class="inline-note" data-counter-note="1">Soap, Sex, and Cigarettes: A Cultural History of American Advertising By Juliann Sivulka, page 5</span>
+adjustable molds; mechanical movable type; and the use 
+of a wooden printing press similar to the agricultural 
+screw presses of the period.</p>
+```

public/csspageweaver/plugins/inlineNotes/config.json

@@ -0,0 +1,8 @@
+{
+	"name": "Inline notes",
+	"description": "This script moves listed notes to inline elements at the place of the call",
+	"author": ["Julie Blanc"],
+	"license": "MIT License",
+	"version": "1.0",
+	"hook": "inlineNotes.js"
+}

public/csspageweaver/plugins/inlineNotes/inlineNotes.js

@@ -0,0 +1,140 @@
+/**
+ * @name Inline Notes
+ * @author Julien Bidoret
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/inlineNotes }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+export default class inlineNotes extends Handler {
+
+  constructor(chunker, polisher, caller) {
+    super(chunker, polisher, caller);
+    this.input = cssPageWeaver.features.inlineNotes.parameters?.input || ".footnote-ref"; // ← CSS selector of the call element 
+    this.containerNotes = cssPageWeaver.features.inlineNotes.parameters?.containerNotes || "#footnotes"; // ← CSS selector of the container of the footnote
+    this.newClass = cssPageWeaver.features.inlineNotes.parameters?.newClass || "inline-note"; // ← Class of the span create for the note
+  }
+
+  beforeParsed(content) {
+
+   // ---- HUGO SPECIFIC // Correction des ids et href 'fn:' en 'fn-' ----
+   // 1. Tous les éléments avec un id commençant par "fn:"
+   content.querySelectorAll('[id^="fn:"]').forEach(el => {
+      el.id = el.id.replace(/:/g, '-');
+   });
+
+   // 2. Tous les éléments avec un id commençant par "fnref:"
+   content.querySelectorAll('[id^="fnref:"]').forEach(el => {
+      el.id = el.id.replace(/:/g, '-');
+   });
+
+   // 3. Tous les éléments avec un href commençant par "#fn:"
+   content.querySelectorAll('[href^="#fn:"]').forEach(el => {
+      el.href = el.href.replace(/:/g, '-');
+   });
+
+   // 4. Tous les éléments avec un href commençant par "#fnref:"
+   content.querySelectorAll('[href^="#fnref:"]').forEach(el => {
+      el.href = el.href.replace(/:/g, '-');
+   });
+
+   // 5. (optionnel) Tous les 'for' dans labels, si jamais (pas typique)
+   content.querySelectorAll('[for^="fn:"]').forEach(el => {
+      el.htmlFor = el.htmlFor.replace(/:/g, '-');
+   });
+
+
+
+    inlineNotesHandler({
+        content: content,
+        input: this.input,
+        containerNotes: this.containerNotes,
+        type: this.newClass
+    });
+
+  }
+}
+
+
+
+function inlineNotesHandler(params){
+
+  let content = params.content;
+  let input = params.input;
+  let type = params.type;
+  let container = params.containerNotes;
+  
+  createNotes(content, input, type, container);
+
+   // let noteContainer = content.querySelector(params.containerNotes);
+   // if(noteContainer){
+   //    noteContainer.remove();
+   // }
+
+}
+
+
+function getBlocks(element){
+   return element.querySelectorAll('div,p,blockquote,section,article,h1,h2,h3,h4,h5,h6,figure');
+}
+
+// get only inline-level tags
+function unwrapBlockChildren(element) {
+   let blocks = getBlocks(element);
+   
+   blocks.forEach(block => {
+       block.insertAdjacentHTML("beforebegin", block.innerHTML);
+       block.remove();
+   });
+   let remainingblocks = getBlocks(element);
+   if(remainingblocks.length) unwrapBlockChildren(element);
+   return element;
+}
+
+
+function createNotes(content, input, type, container){
+
+   let containers = content.querySelectorAll(container);
+
+   containers.forEach(function (container, index) {
+      let section = container.parentNode;
+   
+      let calls = section.querySelectorAll(input);
+      calls.forEach( (call, index) => {
+    
+         let href = call.getAttribute('href');
+         let hashIndex = href.indexOf('#');
+         let selector = href.slice(hashIndex);
+
+         let note = section.querySelector(selector);
+         if (!note) {
+            console.warn('Note non trouvée pour', selector);
+            return;
+         }
+
+         let back = note.querySelector(".footnote-back");
+         if(back){
+            back.remove();
+         }
+
+
+         
+         let inline_note = document.createElement('span');
+         inline_note.className = type;
+         let num = index + 1;
+         inline_note.dataset.counterNote = num;
+         inline_note.dataset.chapter = section.id;
+
+         inline_note.innerHTML = unwrapBlockChildren(note).innerHTML;
+         call.after(inline_note);
+         
+         call.parentElement.removeChild(call);
+
+
+      })
+
+      container.remove();
+   });
+
+}