figures simples + outdoor computer club

assets/css/figures.css

@@ -5,12 +5,27 @@ figure{
 }
 
 figcaption{
-	font-size: 0.8em;
+  margin-top: calc(var(--baseline)*0.25);
-	margin-top: 0.5em;
+}
+
+figcaption::before{
+  content: "/";
+   font-family: var(--sign-family);
+   display: block;
+   text-align: center;
 }
 
 figcaption p{
 	margin: 0;
+  text-indent: 0!important;
+    text-align: center!important;
+        font-size: var(--fs-notes);
+    line-height: 14px;
+    font-weight: 500;
+}
+
+figcaption p::before{
+  display: none;
 }
 
 figure[data-ratio] {
@@ -33,7 +48,6 @@ figure[data-crop="false"] img {
 }
 
 
-<<<<<<< HEAD
 /* --- INTERPAGE ---- */
 .interpage figure {
   /*background-color: var(--copper);*/
@@ -43,8 +57,40 @@ figure[data-crop="false"] img {
 .interpage figure img {
   filter: grayscale(100%);
   mix-blend-mode: screen;
-=======
+}
-#f4c52433-bf53-4933-b207-b845153ad93d{
+
-  background-color: red;
+
->>>>>>> af9785e4361ed41252a42b30a658359475f05d7b
+
+/* SPECIFIC */
+
+#fig-outdoor-computer-club-1{
+  margin: 0;
+  width: calc(var(--unit) * 5);
+  break-before: page;
+  break-after: page;
+  position: absolute;
+  bottom: 2px;
+}
+
+
+#fig-outdoor-computer-club-2,
+#fig-outdoor-computer-club-3{
+   margin: 0;
+  width: calc(var(--unit) * 6.5);
+  height: var(--pagedjs-height);
+ 
+  position: absolute;
+}
+
+
+
+#fig-outdoor-computer-club-2{
+  top: -11px;
+   break-after: page;
+}
+
+#fig-outdoor-computer-club-3{
+  break-before: page;
+  break-after: page;
+  top: 6px;
 }

assets/css/text.css

@@ -3,8 +3,8 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3 2; 
     /* position: relative; */
-    orphans: 2;
+    /* orphans: 2;
-    hyphens: 2;
+    hyphens: 2; */
     text-indent: calc(var(--unit) * 0.75);
     position: relative;
 }
@@ -37,11 +37,11 @@ p::before {
 }
 
 
-.first-p,
+.chapter p.first-p,
-.following-title,
+.chapter p.following-title,
-.following-h3,
+.chapter p.following-h3,
-.following-h4{
+.chapter p.following-h4{
-    text-indent: 0!important;
+    text-indent: 0;
 }
 
 .first-p::before,
@@ -61,8 +61,8 @@ p::before {
     line-height: 14px;
     font-weight: 500;
     text-align: left;
-    padding-left: calc(var(--unit)*2);
+    padding-left: calc(var(--unit)*1.5);
-    text-indent: calc(var(--unit)*-0.75);
+    text-indent: calc(var(--unit)*-0.5)!important;
     break-inside: avoid;
     position: relative;
 }

assets/css/typesetting.css

@@ -0,0 +1,23 @@
+
+/* Outdoor computer club */
+
+#tv-communales-televisions-populaires-au-venezuela{
+    margin-top: 0px;
+}
+
+#la-politisation-des-quartiers{
+      margin-top: 0px;
+}
+
+#une-television-rhizomatique{
+    padding-top: 5px;
+}
+
+[data-unique-id="p-lrnspsdlrd"]{
+     letter-spacing: -0.005rem;
+}
+
+#des-medias-autonomes-en-2026{
+    break-before: page;
+    margin-top: 0px;
+}

assets/js/handlers.js

@@ -185,6 +185,27 @@ class asciiTextFill extends Paged.Handler {
 
 // Paged.registerHandlers(asciiTextFill);
 
+function slugify(text) {
+  return text.trim()
+    .toLowerCase()
+    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-');
+}
+
+class addHeadingIds extends Paged.Handler {
+  beforeParsed(content) {
+    content.querySelectorAll('h3, h4').forEach(heading => {
+      if (!heading.id) {
+        heading.id = slugify(heading.textContent);
+      }
+    });
+  }
+}
+
+Paged.registerHandlers(addHeadingIds);
+
 class removeFullPageClass extends Paged.Handler {
   constructor(chunker, polisher, caller) {
     super(chunker, polisher, caller);

assets/js/main.js

@@ -3,9 +3,27 @@ window.onload = function(){
 };
 
 
+function slugify(text) {
+  return text.trim()
+    .toLowerCase()
+    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-');
+}
+
+function addHeadingIds(root) {
+  root.querySelectorAll('h3, h4').forEach(heading => {
+    if (!heading.id) {
+      heading.id = slugify(heading.textContent);
+    }
+  });
+}
+
 function init(){
     let fadeEl = document.getElementById('fade');
     if (fadeEl) {
         fadeEl.classList.add('loaded');
     }
+    addHeadingIds(document);
 }

assets/js/plugins/beforeParsed.js

@@ -0,0 +1,31 @@
+
+class before extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+    }
+
+    beforeParsed(content) {
+        paragraphId(content);
+    }
+}
+
+Paged.registerHandlers(before);
+
+
+
+function paragraphId(content) {
+    content.querySelectorAll("p, li").forEach((paragraph, index) => {
+        let words = paragraph.textContent
+            .trim()
+            .split(/\s+/)
+            .map(word => word.replace(/[^\wÀ-ÿ]/g, "")) // Supprime la ponctuation
+            .filter(word => word.length > 0);
+
+        let id = words.slice(0, 10).map(word => word.charAt(0)).join("").toLowerCase();
+        id = "p-" + id;
+
+        if (!id) id = `para-${index}`; // Si le paragraphe est vide, on donne un id par défaut
+        paragraph.dataset.uniqueId = id;
+    });
+
+}

assets/js/plugins/full-page.js

@@ -1,296 +0,0 @@
-let bleedFull = '6mm';
-let cssFullSpread = `.pagedjs_page_fullLeft .pagedjs_full-spread_container{
-  margin: 0;
-  width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
-  height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2) !important;
-  position: absolute;
-  top: calc((var(--pagedjs-margin-top) + `+ bleedFull + `)*-1);
-  left: calc((var(--pagedjs-margin-left) + `+ bleedFull + `)*-1);
-  overflow: hidden;
-}
-.pagedjs_page_fullRight .pagedjs_full-spread_container{
-  margin: 0;
-  width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
-  height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2) !important;
-  position: absolute;
-  top: calc((var(--pagedjs-margin-top) + `+ bleedFull + `)*-1);
-  left: calc(var(--pagedjs-margin-left)*-1);
-  overflow: hidden;
-}
-.pagedjs_full-spread_content{
-  margin: 0;
-  width: calc(var(--pagedjs-pagebox-width)*2 + `+ bleedFull + `*2);
-  height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2) !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.pagedjs_page_fullLeft .pagedjs_full-spread_content{
-  left: calc(var(--pagedjs-fold)*-1);
-}
-.pagedjs_page_fullRight .pagedjs_full-spread_content{
-  left: calc((var(--pagedjs-pagebox-width) + `+ bleedFull + `)*-1 + var(--pagedjs-fold))
-}`;
-
-
-let cssFullPage = `
-.pagedjs_full-page_content {
-  margin: 0;
-  position: absolute;
-  top: calc((var(--pagedjs-margin-top) + `+ bleedFull + `)*-1);
-}
-.pagedjs_left_page .pagedjs_full-page_content {
-  width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
-  height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2);
-  left: calc((var(--pagedjs-margin-left) + `+ bleedFull + `)*-1);
-
-}
-.pagedjs_right_page .pagedjs_full-page_content {
-  width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
-  height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2);
-  left: calc(var(--pagedjs-margin-left)*-1);
-}
-`;
-
-
-
-class fullPageImage extends Paged.Handler {
-  constructor(chunker, polisher, caller) {
-    super(chunker, polisher, caller);
-    this.selectorFullSpread = new Set();
-    this.fullSpreadEls = new Set();
-    this.selectorFullPage = new Set();
-    this.fullPageEls = new Set();
-    this.selectorFullRight = new Set();
-    this.fullRightEls = new Set();
-    this.selectorFullLeft= new Set();
-    this.fullLeftEls = new Set();
-    this.usedPagedEls = new Set();
-  }
-
-  onDeclaration(declaration, dItem, dList, rule) {
-    // Read customs properties
-    if (declaration.property == "--pagedjs-full-page") {
-      // get selector of the declaration (NOTE: need csstree.js)
-      let selector = csstree.generate(rule.ruleNode.prelude);
-      // Push selector in correct set 
-      if (declaration.value.value.includes("page")) {
-        this.selectorFullPage.add(selector);
-      }else if(declaration.value.value.includes("spread")) {
-        this.selectorFullSpread.add(selector);
-      }else if(declaration.value.value.includes("right")) {
-        this.selectorFullRight.add(selector);
-      }else if(declaration.value.value.includes("left")) {
-        this.selectorFullLeft.add(selector);
-      }
-    }
-  }
-
-
-  afterParsed(parsed){
-    // ADD global css
-    addcss(cssFullSpread);
-    addcss(cssFullPage);
-    // ADD pagedjs classes to elements
-    for (let item of this.selectorFullPage) {
-      let elems = parsed.querySelectorAll(item);
-      for (let elem of elems) {
-        elem.classList.add("pagedjs_full-page-elem");
-      }
-    }
-    for (let item of this.selectorFullSpread) {
-      let elems = parsed.querySelectorAll(item);
-      for (let elem of elems) {
-        elem.classList.add("pagedjs_full-spread-elem");
-      }
-    }
-    for (let item of this.selectorFullLeft) {
-      let elems = parsed.querySelectorAll(item);
-      for (let elem of elems) {
-        elem.classList.add("pagedjs_full-page-left-elem");
-      }
-    }
-    for (let item of this.selectorFullRight) {
-      let elems = parsed.querySelectorAll(item);
-      for (let elem of elems) {
-        elem.classList.add("pagedjs_full-page-right-elem");
-      }
-    }
-  }
-
-
-  renderNode(clone, node) {
-    // FULL SPREAD
-    // if you find a full page element, move it in the array
-    if (node.nodeType == 1 && node.classList.contains("pagedjs_full-spread-elem")) {
-      this.fullSpreadEls.add(node);
-      this.usedPagedEls.add(node);
-
-      // remove the element from the flow by hiding it.
-      clone.style.display = "none";
-    }
-
-    // FULL PAGE
-    if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-left-elem")) {
-      this.fullLeftEls.add(node);
-      this.usedPagedEls.add(node);
-      clone.style.display = "none";
-    }else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-right-elem")) {
-      this.fullRightEls.add(node);
-      this.usedPagedEls.add(node);
-      clone.style.display = "none";
-    }else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-elem")) {
-      this.fullPageEls.add(node);
-      this.usedPagedEls.add(node);
-      clone.style.display = "none";
-    }
-
-  }
-
-  afterPageLayout(pageElement, page, breakToken, chunker) {
-
-    // ADD --pagedjs-fold on body if doesn't exist
-    if(pageElement.classList.contains("pagedjs_first_page")){
-      let body = document.getElementsByTagName("body")[0];
-      let style = window.getComputedStyle(body);
-      let fold = style.getPropertyValue('--pagedjs-fold');
-      if(!fold){
-        body.style.setProperty('--pagedjs-fold', '0mm')
-      }
-    }
-
-    // FULL SPREAD
-    // if there is an element in the fullSpreadEls Set, (goodbye arrays!)
-
-    for (let img of this.fullSpreadEls) {
-
-      if (page.element.classList.contains("pagedjs_right_page")) {
-
-        let imgLeft;
-        let imgRight;
-        
-        if (img.nodeName == "IMG") {
-          /* Add outside + inside container if the element is an img */
-          let containerLeft = document.createElement("div");
-          containerLeft.classList.add("pagedjs_full-spread_container");
-          let containerLeftInside = document.createElement("div");
-          containerLeftInside.classList.add("pagedjs_full-spread_content");
-          containerLeft.appendChild(containerLeftInside).appendChild(img);
-          imgLeft = containerLeft;
-
-          let containerRight = document.createElement("div");
-          containerRight.classList.add("pagedjs_full-spread_container");
-          let containerRightInside = document.createElement("div");
-          containerRightInside.classList.add("pagedjs_full-spread_content");
-          containerRight.appendChild(containerRightInside).appendChild(img.cloneNode(true));
-          imgRight = containerRight;
-
-        } else {
-          /* Add outside container if the element is an img */
-          let containerLeft = document.createElement("div");
-          containerLeft.classList.add("pagedjs_full-spread_container");
-          img.classList.add("pagedjs_full-spread_content");
-          containerLeft.appendChild(img);
-          imgLeft = containerLeft;
-          let containerRight = document.createElement("div");
-          containerRight.classList.add("pagedjs_full-spread_container");
-          img.classList.add("pagedjs_full-spread_content");
-          containerRight.appendChild(img.cloneNode(true));
-          imgRight = containerRight;
-          
-        }
-
-        // put the first element on the page
-        let fullPage = chunker.addPage();
-        fullPage.element
-          .querySelector(".pagedjs_page_content")
-          .insertAdjacentElement("afterbegin", imgLeft);
-        fullPage.element.classList.add("pagedjs_page_fullLeft");
-
-        // page right
-        let fullPageRight = chunker.addPage();
-        fullPageRight.element
-          .querySelector(".pagedjs_page_content")
-          .insertAdjacentElement("afterbegin", imgRight);
-        fullPageRight.element.classList.add("pagedjs_page_fullRight");
-        img.style.removeProperty("display");
-
-        this.fullSpreadEls.delete(img);
-        
-      }
-    }
-
-
-    // FULL PAGE
-    // if there is an element in the fullPageEls Set
-    for (let img of this.fullPageEls) {
-      let container = document.createElement("div");
-        container.classList.add("pagedjs_full-page_content");
-        container.appendChild(img);
-      let fullPage = chunker.addPage();
-
-      fullPage.element
-        .querySelector(".pagedjs_page_content")
-        .insertAdjacentElement("afterbegin", container);
-      fullPage.element.classList.add("pagedjs_page_fullPage");
-      img.style.removeProperty("display");
-
-      this.fullPageEls.delete(img);
-    }
-
-    // FULL Left PAGE
-    // if there is an element in the fullLeftEls Set
-    for (let img of this.fullLeftEls) {
-
-      if (page.element.classList.contains("pagedjs_right_page")) {
-        let container = document.createElement("div");
-          container.classList.add("pagedjs_full-page_content");
-          container.appendChild(img);
-        let fullPage = chunker.addPage();
-
-        fullPage.element
-          .querySelector(".pagedjs_page_content")
-          .insertAdjacentElement("afterbegin", container);
-        fullPage.element.classList.add("pagedjs_page_fullPage");
-        img.style.removeProperty("display");
-
-        this.fullLeftEls.delete(img);
-      }
-    }
-
-    // FULL RIGHT PAGE
-    // if there is an element in the fullRightEls Set
-    for (let img of this.fullRightEls) {
-
-      if (page.element.classList.contains("pagedjs_left_page")) {
-        let container = document.createElement("div");
-          container.classList.add("pagedjs_full-page_content");
-          container.appendChild(img);
-        let fullPage = chunker.addPage();
-
-        fullPage.element
-          .querySelector(".pagedjs_page_content")
-          .insertAdjacentElement("afterbegin", container);
-        fullPage.element.classList.add("pagedjs_page_fullPage");
-        img.style.removeProperty("display");
-
-        this.fullRightEls.delete(img);
-      }
-    }
-
-  }
-}
-Paged.registerHandlers(fullPageImage);
-
-
-function addcss(css){
-  var head = document.getElementsByTagName('head')[0];
-  var s = document.createElement('style');
-  s.setAttribute('type', 'text/css');
-  if (s.styleSheet) {   // IE
-      s.styleSheet.cssText = css;
-  } else {// the world
-      s.appendChild(document.createTextNode(css));
-  }
-  head.appendChild(s);
-}

assets/js/plugins/fullpage.js

@@ -1,56 +1,291 @@
-//  ---- C O R R E C T    P O S I T I O N    O F    I M A G E S ----
+/**
+ * @name Full page
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/fullPage }
+ */
+let bleedFull = '6mm';
 
-var classElemFullPage = "full-page"; // ← class of full page images
+class fullPage extends Paged.Handler {
 
-
-class fullPageStuff extends Paged.Handler {
   constructor(chunker, polisher, caller) {
     super(chunker, polisher, caller);
+    this.selectorFullSpread = new Set();
+    this.fullSpreadEls = new Set();
+    this.selectorFullPage = new Set();
     this.fullPageEls = new Set();
+    this.selectorFullRight = new Set();
+    this.fullRightEls = new Set();
+    this.selectorFullLeft= new Set();
+    this.fullLeftEls = new Set();
     this.usedPagedEls = new Set();
+    this.specificPage = new Set();
+    this.specificPageClone = new Set();
   }
 
-  //find from the css the element you wanna have  full page
+
   onDeclaration(declaration, dItem, dList, rule) {
-    if (declaration.property == "position") {
+    // Read customs properties
-      if (declaration.value.children.head.data.name.includes("fullpage")) {
+    if (declaration.property == "--pagedjs-full-page") {
-        let sel = csstree.generate(rule.ruleNode.prelude);
+      // get selector of the declaration (NOTE: need csstree.js)
-        sel = sel.replace('[data-id="', "#");
+      let selector = csstree.generate(rule.ruleNode.prelude);
-        sel = sel.replace('"]', "");
+      // Push selector in correct set 
-        this.floatFullPage.push(sel.split(","));
+      if (declaration.value.value.includes("page")) {
+        this.selectorFullPage.add(selector);
+      }else if(declaration.value.value.includes("spread")) {
+        this.selectorFullSpread.add(selector);
+      }else if(declaration.value.value.includes("right")) {
+        this.selectorFullRight.add(selector);
+      }else if(declaration.value.value.includes("left")) {
+        this.selectorFullLeft.add(selector);
+      }else{
+        let obj = { page: declaration.value.value, elem: selector };
+        this.specificPage.add(JSON.stringify(obj));
+
       }
     }
   }
 
+  afterParsed(parsed){
+
+    console.log("FULL PAGE loaded");
+ 
+    // ADD pagedjs classes to elements
+    for (let item of this.selectorFullPage) {
+      let elems = parsed.querySelectorAll(item);
+      for (let elem of elems) {
+        elem.classList.add("pagedjs_full-page-elem");
+      }
+    }
+    for (let item of this.selectorFullSpread) {
+      let elems = parsed.querySelectorAll(item);
+      for (let elem of elems) {
+        elem.classList.add("pagedjs_full-spread-elem");
+      }
+    }
+    for (let item of this.selectorFullLeft) {
+      let elems = parsed.querySelectorAll(item);
+      for (let elem of elems) {
+        elem.classList.add("pagedjs_full-page-left-elem");
+      }
+    }
+    for (let item of this.selectorFullRight) {
+      let elems = parsed.querySelectorAll(item);
+      for (let elem of elems) {
+        elem.classList.add("pagedjs_full-page-right-elem");
+      }
+    }
+
+
+    // SPECIFIC PAGE ------------------------------------
+    this.specificPage.forEach(entry => {
+      const obj = JSON.parse(entry);
+      const elements = parsed.querySelectorAll(obj.elem);
+      if (elements.length > 0) {
+        // pourquoi c’est ajouté même si l’élément n’existe pas ?
+        elements[0].classList.add("pagedjs_full-page-specific");
+        const clone = elements[0].cloneNode(true); 
+        obj.elemClone = clone.outerHTML; 
+        elements[0].remove();
+      }
+      this.specificPageClone.add(JSON.stringify(obj));
+    });
+    
+
+  }
+
+
   renderNode(clone, node) {
+    // FULL SPREAD
     // if you find a full page element, move it in the array
-    if (node.nodeType == 1 && node.classList.contains(classElemFullPage)) {
+    if (node.nodeType == 1 && node.classList.contains("pagedjs_full-spread-elem")) {
-    // console.log(node);
+      this.fullSpreadEls.add(node);
-    this.fullPageEls.add(node);
       this.usedPagedEls.add(node);
 
       // remove the element from the flow by hiding it.
       clone.style.display = "none";
     }
+
+    // FULL PAGE
+    if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-left-elem")) {
+      this.fullLeftEls.add(node);
+      this.usedPagedEls.add(node);
+      clone.style.display = "none";
+    }else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-right-elem")) {
+      this.fullRightEls.add(node);
+      this.usedPagedEls.add(node);
+      clone.style.display = "none";
+    }else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-elem")) {
+      this.fullPageEls.add(node);
+      this.usedPagedEls.add(node);
+      clone.style.display = "none";
+    }
+
   }
 
   afterPageLayout(pageElement, page, breakToken, chunker) {
-    // if there is an element in the fullPageEls Set, (goodbye arrays!)
 
+    if(page.id == "page-1"){
+      let allPages = document.querySelector(".pagedjs_pages");
+      allPages.style.setProperty('--bleed-images',  bleedFull);
+    }
+    
+    // ADD --pagedjs-fold on body if doesn't exist
+    if(pageElement.classList.contains("pagedjs_first_page")){
+      let body = document.getElementsByTagName("body")[0];
+      let style = window.getComputedStyle(body);
+      let fold = style.getPropertyValue('--pagedjs-fold');
+      if(!fold){
+        body.style.setProperty('--pagedjs-fold', '0mm')
+      }
+    }
+
+    // FULL SPREAD
+    // if there is an element in the fullSpreadEls Set, (goodbye arrays!)
+
+    for (let img of this.fullSpreadEls) {
+
+      if (page.element.classList.contains("pagedjs_right_page")) {
+
+        let imgLeft;
+        let imgRight;
+        
+        if (img.nodeName == "IMG") {
+          /* Add outside + inside container if the element is an img */
+          let containerLeft = document.createElement("div");
+          containerLeft.classList.add("pagedjs_full-spread_container");
+          let containerLeftInside = document.createElement("div");
+          containerLeftInside.classList.add("pagedjs_full-spread_content");
+          containerLeft.appendChild(containerLeftInside).appendChild(img);
+          imgLeft = containerLeft;
+
+          let containerRight = document.createElement("div");
+          containerRight.classList.add("pagedjs_full-spread_container");
+          let containerRightInside = document.createElement("div");
+          containerRightInside.classList.add("pagedjs_full-spread_content");
+          containerRight.appendChild(containerRightInside).appendChild(img.cloneNode(true));
+          imgRight = containerRight;
+
+        } else {
+          /* Add outside container if the element is an img */
+          let containerLeft = document.createElement("div");
+          containerLeft.classList.add("pagedjs_full-spread_container");
+          img.classList.add("pagedjs_full-spread_content");
+          containerLeft.appendChild(img);
+          imgLeft = containerLeft;
+          let containerRight = document.createElement("div");
+          containerRight.classList.add("pagedjs_full-spread_container");
+          img.classList.add("pagedjs_full-spread_content");
+          containerRight.appendChild(img.cloneNode(true));
+          imgRight = containerRight;
+          
+        }
+
+        // put the first element on the page
+        let fullPage = chunker.addPage();
+        fullPage.element
+          .querySelector(".pagedjs_page_content")
+          .insertAdjacentElement("afterbegin", imgLeft);
+        fullPage.element.classList.add("pagedjs_page_fullLeft");
+
+        // page right
+        let fullPageRight = chunker.addPage();
+        fullPageRight.element
+          .querySelector(".pagedjs_page_content")
+          .insertAdjacentElement("afterbegin", imgRight);
+        fullPageRight.element.classList.add("pagedjs_page_fullRight");
+        img.style.removeProperty("display");
+
+        this.fullSpreadEls.delete(img);
+        
+      }
+    }
+
+
+    // FULL PAGE
+    // if there is an element in the fullPageEls Set
     for (let img of this.fullPageEls) {
+      let container = document.createElement("div");
+        container.classList.add("pagedjs_full-page_content");
+        container.appendChild(img);
       let fullPage = chunker.addPage();
+
       fullPage.element
         .querySelector(".pagedjs_page_content")
-        .insertAdjacentElement("afterbegin", img);
+        .insertAdjacentElement("afterbegin", container);
-      fullPage.element.classList.add("addedpage");
+      fullPage.element.classList.add("pagedjs_page_fullPage");
-      fullPage.element.classList.add("pagedjs_named_page");
+      img.style.removeProperty("display");
-      fullPage.element.classList.add("pagedjs_pagedjs-fullpage_page");
+
-      if(img.classList.contains('background-black')){
-        fullPage.element.classList.add("pagedjs_pagedjs-fullpageblack_page");
-      }
       this.fullPageEls.delete(img);
     }
+
+    // FULL Left PAGE
+    // if there is an element in the fullLeftEls Set
+    for (let img of this.fullLeftEls) {
+
+      if (page.element.classList.contains("pagedjs_right_page")) {
+        let container = document.createElement("div");
+          container.classList.add("pagedjs_full-page_content");
+          container.appendChild(img);
+        let fullPage = chunker.addPage();
+
+        fullPage.element
+          .querySelector(".pagedjs_page_content")
+          .insertAdjacentElement("afterbegin", container);
+        fullPage.element.classList.add("pagedjs_page_fullPage");
+        img.style.removeProperty("display");
+
+        this.fullLeftEls.delete(img);
+      }
+    }
+
+    // FULL RIGHT PAGE
+    // if there is an element in the fullRightEls Set
+    for (let img of this.fullRightEls) {
+
+      if (page.element.classList.contains("pagedjs_left_page")) {
+        let container = document.createElement("div");
+          container.classList.add("pagedjs_full-page_content");
+          container.appendChild(img);
+        let fullPage = chunker.addPage();
+
+        fullPage.element
+          .querySelector(".pagedjs_page_content")
+          .insertAdjacentElement("afterbegin", container);
+        fullPage.element.classList.add("pagedjs_page_fullPage");
+        img.style.removeProperty("display");
+
+        this.fullRightEls.delete(img);
+      }
+    }
+
+
+
+    // SPECIFIC PAGE ------------------------------------
+    let pageNum = pageElement.id.split('page-')[1];
+    pageNum = parseInt(pageNum);
+  
+    this.specificPageClone.forEach(entry => {
+      const obj = JSON.parse(entry);
+      let targetedPage = obj.page;
+      let prevPage = parseInt(targetedPage) - 1;
+
+      let elem = obj.elemClone;
+
+      if(prevPage == pageNum){
+        let container = document.createElement("div");
+          container.classList.add("pagedjs_full-page_content");
+          container.innerHTML = elem;
+          let fullPage = chunker.addPage();
+
+          fullPage.element
+            .querySelector(".pagedjs_page_content")
+            .insertAdjacentElement("afterbegin", container);
+          fullPage.element.classList.add("pagedjs_page_fullPage");
+      }
+    });
+    
+
   }
 }
 
-Paged.registerHandlers(fullPageStuff);
+Paged.registerHandlers(fullPage);

assets/js/plugins/moveElems.js

@@ -0,0 +1,80 @@
+/**
+ * @name Move Elems v1.0
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/moveElems }
+ */
+
+class moveElems extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+        this.selectorMoveElem  = new Set();
+    }
+
+    onDeclaration(declaration, dItem, dList, rule) {
+        
+        if (declaration.property == "--x-move-elem") {  
+          let selector = csstree.generate(rule.ruleNode.prelude);
+            let value = declaration.value.value
+            let doubleArray = [selector, value];
+            this.selectorMoveElem.add(doubleArray);            
+      }
+    }
+    
+
+    afterParsed(parsed){
+
+      console.log("MOVE ELEMS LOADED");
+
+      // ADD data to move elements
+      for (let item of this.selectorMoveElem) {
+        let elem = parsed.querySelector(item[0]);
+        if(elem){
+          elem.dataset.moveImg = item[1];
+        }
+      }
+
+     moveElem(parsed);
+
+    }
+
+}
+
+Paged.registerHandlers(moveElems);
+
+
+function  moveElem(parsed){
+    let elems = parsed.querySelectorAll('[data-move-img]');
+    for (let elem of elems) {
+      let n = parseInt(elem.getAttribute('data-move-img'));
+      let newPlace
+      if(n < 0){
+        newPlace = elem.previousSibling;
+        if (newPlace.nodeType !== Node.ELEMENT_NODE) {
+          newPlace = newPlace.previousSibling
+        }
+        n = n*-1 - 1;
+        for(let i = 0; i < n; i++){
+          newPlace = newPlace.previousSibling
+          if (newPlace.nodeType !== Node.ELEMENT_NODE) {
+            newPlace = newPlace.previousSibling
+          }
+        }
+      }else{
+        newPlace = elem.nextSibling;
+        if (newPlace.nodeType !== Node.ELEMENT_NODE) {
+          newPlace = newPlace.nextSibling;
+        }
+        for(let i = 0; i < n; i++){
+          newPlace = newPlace.nextSibling;
+          if (newPlace.nodeType !== Node.ELEMENT_NODE) {
+            newPlace = newPlace.nextSibling;
+          }
+        }
+      }
+  
+      newPlace.parentNode.insertBefore(elem, newPlace);
+      // do next = next.nextSibling;     while(next && next.nodeType !== 1);
+  
+    }
+  
+  }

assets/pagedjs/interface.js

@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
     let book_content = flowBook.content;
     let paged = new Paged.Previewer();
 
-    paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css',  'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css',], document.querySelector("#renderbook")).then((flow) => {
+    paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css',  'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css', 'assets/css/typesetting.css',], document.querySelector("#renderbook")).then((flow) => {
         
     });
   });

site/snippets/blocks/fullpageimage.php

@@ -13,11 +13,14 @@ if ($block->location() == 'web') {
     $src = $image->url();
 }
 
+$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
+$figId = 'fig-' . Str::slug($page->author()) . '-' . $GLOBALS['figCount'];
+
 ?>
 
 <?php if ($src): ?>
 	<div class="full-bleed-image full-page">
-		<figure id="<?= $block->id() ?>" class="<?= $fullWidth ? 'full-width' : '' ?>">
+		<figure id="<?= $figId ?>" class="<?= $fullWidth ? 'full-width' : '' ?>">
 			<img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
 			<?php if ($caption->isNotEmpty()): ?>
 			  <figcaption><?= $caption ?></figcaption>

site/snippets/blocks/gallery.php

@@ -3,8 +3,11 @@
 $caption = $block->caption();
 $crop    = $block->crop()->isTrue();
 $ratio   = $block->ratio()->or('auto');
+
+$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
+$figId = 'fig-' . Str::slug($block->parent()->author()) . '-' . $GLOBALS['figCount'];
 ?>
-<figure id="<?= $block->id() ?>"<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
+<figure id="<?= $figId ?>"<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
   <ul>
     <?php foreach ($block->images()->toFiles() as $image): ?>
     <li class="<?= $image->taille()->esc()?> <?= $image->orientation()?>">

site/snippets/blocks/image.php

@@ -5,10 +5,13 @@ $alt     = $block->alt();
 $caption = $block->caption();
 $src     = $block->image()->toFile()->url();
 
+$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
+$figId = 'fig-' . Str::slug($block->parent()->author()) . '-' . $GLOBALS['figCount'];
+
 ?>
 
 <?php if ($src): ?>
-<figure id="<?= $block->id() ?>" class="print-image full-page <?= $block->taille()->esc() ?>">
+<figure id="<?= $figId ?>">
 
     <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
 

site/snippets/blocks/imagefloat.php

@@ -5,10 +5,13 @@ $alt     = $block->alt();
 $caption = $block->caption();
 $src     = $block->image()->toFile()->url();
 
+$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
+$figId = 'fig-' . Str::slug($block->parent()->author()) . '-' . $GLOBALS['figCount'];
+
 ?>
 
 <?php if ($src): ?>
-<figure id="<?= $block->id() ?>" class="float-image">
+<figure id="<?= $figId ?>" class="float-image">
   <img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
   <?php if ($caption->isNotEmpty()): ?>
   <figcaption>

site/snippets/blocks/spreadimage.php

@@ -13,11 +13,14 @@ if ($block->location() == 'web') {
     $src = $image->url();
 }
 
+$GLOBALS['figCount'] = ($GLOBALS['figCount'] ?? 0) + 1;
+$figId = 'fig-' . Str::slug($block->parent()->author()) . '-' . $GLOBALS['figCount'];
+
 ?>
 
 <?php if ($src): ?>
 	<div class="spread-image">
-		<figure id="<?= $block->id() ?>" class="<?= $fullWidth ? 'full-width' : '' ?>">
+		<figure id="<?= $figId ?>" class="<?= $fullWidth ? 'full-width' : '' ?>">
 			<img src="<?= $src ?>" alt="<?= $alt->esc() ?>">
 			<?php if ($caption->isNotEmpty()): ?>
 			  <figcaption><?= $caption ?></figcaption>

site/snippets/head.php

@@ -32,11 +32,11 @@
       "assets/pagedjs/interface.js", 
       "assets/pagedjs/reload-in-place.js",
       "assets/js/plugins/csstree.js",
+      "assets/js/plugins/beforeParsed.js",
       "assets/js/plugins/smartquote.js",
-      "assets/js/plugins/fix-justif.js",
+      # "assets/js/plugins/fix-justif.js",
+      "assets/js/plugins/moveElems.js",
       "assets/js/plugins/fullpage.js",
-      "assets/js/plugins/full-page.js",
-      // "assets/js/plugins/margin-notes.js",
       "assets/js/plugins/followingNotes.js",
       "assets/js/plugins/decor-blockquote.js",
       "assets/js/plugins/decor-num-pages.js",

vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'getkirby/plainkit',
         'pretty_version' => 'dev-main',
         'version' => 'dev-main',
-        'reference' => '581d60f8832fc8d09a28ab688ab2a90ec22161ea',
+        'reference' => '76dc174fcaae3ec0532e26127d3b5acee74a18aa',
         'type' => 'project',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -67,7 +67,7 @@
         'getkirby/plainkit' => array(
             'pretty_version' => 'dev-main',
             'version' => 'dev-main',
-            'reference' => '581d60f8832fc8d09a28ab688ab2a90ec22161ea',
+            'reference' => '76dc174fcaae3ec0532e26127d3b5acee74a18aa',
             'type' => 'project',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),