add maquette-tests

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

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

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

@@ -0,0 +1,114 @@
+# Plugin for sidenotes
+
+This plugin proposes a script for sidenotes in Paged.js.
+
+The plugin creates sidenotes from `span` elements in the text flow. It can be combined with 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.
+
+Note: The plugin moves notes if they overlap or if the last note overflows at the end of the page.
+
+## How to use the plugin
+
+
+Add this folder to `csspageweaver/plugins/`.
+
+Call the plugin in `csspageweaver/manifest.json`:
+
+```json
+	"plugins": [
+        "sidenotes",
+        // other plugins ...
+	],
+```
+
+## Configuration
+
+In `manifest.json`, you can modify/add some parameters:
+
+```json
+    "plugins":{
+        "sidenotes"
+    },
+    "pluginsParameters":{
+        "sidenotes": {
+            "selector": ".sidenote",
+            "position": "outside",
+            "reset": ".chapter",
+            "align": ".chapter p:first-of-type"
+        }
+    },
+ ```
+
+
+All the parameters are optional.
+
+- `selector` → CSS selector for the note element (must be inline in the HTML), default is `.sidenote`
+- `position` → Specifies the position of sidenotes relative to the main text: options are "outside", "inside", "left", "right".
+    - 'outside': the left pages notes positonned on the margin left and the right pages notes on the margin right. This is the default value.
+    - 'inside': the left pages notes positonned on the margin right and the right pages notes on the margin left.
+    - 'left': the notes of both pages are positinoned on the margin left.
+    - 'right': the notes of both pages are positinoned on the margin left.
+- `reset` → CSS selector where you want reset note counter
+- `align` →  Element to align the first note of the page to, if present on the 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="sidenote">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 sidenotes plugin in the `manifest.json`:
+
+
+```json
+	"plugins": [
+        "inline_notes",
+        "sidenotes",
+        // other plugins ...
+	],
+```
+
+
+
+## Styling notes
+
+By default, the width of the notes is set on the corresponding margin where the notes are positioned. You can change this width by adjusting the `padding-left` and `padding-right` of your note elements.
+
+To apply specific style depending on the left or right pages, uses the following CSS (where `sidenote` is the class of your notes):
+
+```CSS
+.pagedjs_left_page .sidenote {
+    padding-left: 40px;
+    padding-right: 20px;
+}
+.pagedjs_right_page .sidenote {
+    padding-left: 20px;
+    padding-right: 40px;
+}
+```
+
+It's possible to change the styles of call notes and marker notes directly in your stylesheet like in the following code:
+
+```CSS
+.pagedjs_sidenote_call{
+    color: blue; 
+}
+.pagedjs_sidenote_marker{
+    color: violet; 
+}
+```
+
+
+## Possible improvement
+
+
+Currently, there is no way to break a note element across two pages in Paged.js. If all the sidenotes on a page don't fit, the overflowing sidenotes are pushed to the next page. Implementing a feature to split notes across pages would enhance the layout flexibility.

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

@@ -0,0 +1,8 @@
+{
+	"name": "Sidenotes",
+	"description": "Create sidenotes with call & markers",
+	"author": ["Julie Blanc"],
+	"licence": "MIT",
+	"version": "1.0",
+	"hook": "sidenotes.js"
+}

maquette-tests/csspageweaver/plugins/sidenotes/sidenotes.js

@@ -0,0 +1,181 @@
+/**
+ * @name Sidenotes 
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/sidenotes/ }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+export default class sidenotes extends Handler {
+
+  constructor(chunker, polisher, caller) {
+    super(chunker, polisher, caller);
+    this.parameters = cssPageWeaver.features.sidenotes.parameters;
+    this.notesClass = this.parameters?.selector || ".sidenote";
+    this.position = this.parameters?.position || "outside";   
+    this.reset = this.parameters?.reset; 
+    this.align = this.parameters?.align; 
+    this.sidenoteOverflow = new Set();
+  }
+
+  beforeParsed(content) {
+
+    console.log("floatnotes");
+
+    let newNotesClass = "pagedjs_floatnote";
+    resetCounter(content, this.reset, this.notesClass);
+    createCallandMarker(content, this.notesClass, newNotesClass);
+
+    // let notes = content.querySelectorAll(this.notesClass);
+    // notes.forEach(function (note, index) {
+    //   note.style.position = "absolute";
+    //   note.style.top = "0px";
+    //   note.style.left = "0px";  
+    // }); 
+
+  
+  }
+
+
+ 
+}
+
+
+
+
+
+/// FUNCTIONS -----------------------------------------------------
+
+
+// RESET COUNTER
+
+function resetCounter(content, reset, notesClass){
+
+  if(reset && reset != ""){
+    const elements = content.querySelectorAll(reset + ", " + notesClass);
+    let resetEligible = false;
+    elements.forEach(element => {
+        if (element.matches(reset)) {
+            resetEligible = true;
+        } else if (resetEligible && element.matches(notesClass)) {
+            element.dataset.resetCounterSidenote = true;
+            resetEligible = false;
+        }
+    });
+  }
+
+}
+
+
+// CALL & MARKER
+function createCallandMarker(content, notesClass, newNotesClass){
+
+  let notes = content.querySelectorAll(notesClass);
+  let resetNum = 0;
+
+  notes.forEach(function (note, index) {
+
+      if (note.dataset.resetCounterSidenote === "true") {
+          resetNum = index;
+      }
+      let num = index + 1 - resetNum;
+
+      note.classList.add(newNotesClass);
+      note.dataset.counterNote = num;
+
+      // call
+      let ref_note = document.createElement('span');
+      ref_note.className = newNotesClass + "_call";
+      ref_note.dataset.counterNote = num;
+      ref_note.innerHTML = num;
+      note.after(ref_note);
+
+      // marker + content note wrapped in body_note
+      let marker_note = document.createElement('span');
+      marker_note.className = newNotesClass + "_marker";
+      marker_note.innerHTML = num + ". ";
+
+      let body_note = document.createElement('div');
+      body_note.className = 'body_note';
+      while (note.firstChild) {
+          body_note.appendChild(note.firstChild);
+      }
+      body_note.prepend(marker_note);
+      note.appendChild(body_note);
+
+  });  
+
+  }
+
+
+
+
+
+
+// MARGINS
+
+function marginNoteTop(elem) {
+  let marginTop = parseInt(window.getComputedStyle(elem).marginTop, 10)
+  return marginTop;
+}
+
+function marginNoteBottom(elem) {
+  let marginBottom = parseInt(window.getComputedStyle(elem).marginBottom, 10)
+  return marginBottom;
+}
+
+function biggestMargin(a, b) {
+  let margin;
+  let marginBottom = marginNoteBottom(a);
+  let marginTop = marginNoteTop(b);
+  if (marginBottom > marginTop) {
+      margin = marginBottom;
+  } else {
+      margin = marginTop;
+  }
+  return margin;
+}
+
+
+
+function checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container) {
+  let notes = pageElement.querySelectorAll(notesClass);
+ 
+  let notesHeightAll = [];
+
+  for (let n = 0; n < notes.length; ++n) {
+
+      // Add height of the notes to array notesHeightAll 
+      let noteHeight = notes[n].offsetHeight;
+      notesHeightAll.push(noteHeight);
+      // Add margins of the notes to array notesHeightAll 
+      if (n >= 1) {
+          let margins = biggestMargin(notes[n - 1], notes[n]);
+          notesHeightAll.push(margins);
+      }
+  }
+
+  // If notes on page
+  if (notesHeightAll.length > 0) {
+
+      // Calculate if all notes fit on the page;
+      let reducer = (accumulator, currentValue) => accumulator + currentValue;
+      let allHeight = notesHeightAll.reduce(reducer);
+      let paddingTop = getComputedStyle(container).paddingTop;
+      let paddingContainer = parseInt(paddingTop);
+           
+      let totalHeight = allHeight + paddingContainer;
+
+      if (totalHeight > maxHeight) {
+
+          let lastNote = notes[notes.length - 1];
+          arrayOverflow.add(lastNote);
+          lastNote.remove();
+
+          checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container);
+
+      }
+
+
+  }
+}