initial commit

2026-01-10 18:33:22 +01:00 · 2026-01-10 18:33:22 +01:00 · 21711bd5dd
commit 21711bd5dd
253 changed files with 78415 additions and 0 deletions
--- a/static/csspageweaver/plugins/moveElems/README.md
+++ b/static/csspageweaver/plugins/moveElems/README.md
@ -0,0 +1,82 @@
+---
+name: Move Elems
+tags: stable, feedback-wanted
+description: Moves elements within the DOM structure during rendering.
+---
+
+
+# Move Elems (paged.js)
+
+This plugin moves elements within the DOM structure during rendering. Usefull with other script like [Full page](https://gitlab.com/csspageweaver/plugins/fullPage) or [Float page](https://gitlab.com/csspageweaver/plugins/floatPage).
+
+This plugin moves elements relative to their sibling elements in the DOM — either forward or backward — based on the integer value you provide.
+
+You need to use [csstree.js](https://github.com/csstree/csstree) in order to transform custom properties. 
+If you use CSS Page Weaver is inclued by default
+
+
+## How to install
+
+**With CSS Page Weaver**
+
+Register the `moveElems` plugin in your `manifest.json`:
+
+```json
+[
+    "moveElems",
+    // other plugins
+
+]
+
+```
+
+⚠️ It’s recommended to load this plugin first to prevent any conflicts with other plugins.
+
+
+**Without CSS Page Weaver**
+
+Include both csstree and the fullPage script in your HTML `<head>`:
+
+```html
+<script src="js/csstree.min.js"></script>
+<script type="module" src="path/to/fullPage/floatPage.js"></script>
+```
+
+Don’t forget to update the path to the paged.esm.js module in the import statement before using the script.
+
+```js
+import { Handler } from '/path/to/paged.esm.js'
+```
+
+
+## How to use it
+
+In your CSS, add the following custom property to the elements you want to move, using an ID or class:
+
+```css
+elem{
+    --x-move-elem: 2;
+}
+```
+
+
+In this example, the element will be moved after its second next sibling.
+You can also use negative values to move elements backward, e.g.:
+
+```css
+elem{
+    --x-move-elem: -3;
+}
+```
+
+This would move the element before its third previous sibling.
+
+
+## Credits
+
+- [pagedjs.org](https://www.pagedjs.org/)
+- [csstree.js](https://github.com/csstree/csstree)
+
+MIT licence, Julie Blanc, 2025
+
+
--- a/static/csspageweaver/plugins/moveElems/config.json
+++ b/static/csspageweaver/plugins/moveElems/config.json
@ -0,0 +1,8 @@
+{
+	"name": "Move Elems",
+	"description": "Moves elements within the DOM structure during rendering",
+	"author": ["Julie Blanc"],
+	"license": "MIT License",
+	"version": "1.0",
+	"hook": "moveElems.js"
+}
--- a/static/csspageweaver/plugins/moveElems/moveElems.js
+++ b/static/csspageweaver/plugins/moveElems/moveElems.js
@ -0,0 +1,81 @@
+/**
+ * @name Move Elems v1.0
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/moveElems }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+
+export class moveElems extends 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);
+
+    }
+
+}
+
+
+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);
+  
+    }
+  
+  }