initial commit

public/csspageweaver/plugins/grid/.gitignore

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

public/csspageweaver/plugins/grid/README.md

@@ -0,0 +1,7 @@
+---
+name: grid
+tags: experimental, boilerplate, gui
+description: A simple helper to see custom grid (1-12 columns)
+---
+
+Caution: This plugin is not yet fully functional and requires further work.

public/csspageweaver/plugins/grid/config.json

@@ -0,0 +1,13 @@
+{
+	"name": "Grid",
+	"description": "",
+	"version": "1.0",
+	"ui": {
+		"title": "Grid",
+		"description": "This Toogle a 12 columns grid",
+		"toggle": true
+	},
+	"stylesheet": "grid.css",
+	"script": "grid-ui.js",
+	"hook": "grid-hook.js"
+}

public/csspageweaver/plugins/grid/grid-hook.js

@@ -0,0 +1,17 @@
+/**
+ * @name Grid
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/grid/ }
+ */
+
+import { Handler } from '/csspageweaver/lib/paged.esm.js';
+
+export default class GridPage extends Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+      }
+
+  
+ 
+
+}

public/csspageweaver/plugins/grid/grid-ui.js

@@ -0,0 +1,45 @@
+/**
+ * @name Grid
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/grid/ }
+ */
+
+
+export default function gridEvents(){
+    let body = cssPageWeaver.ui.body;
+    let fileTitle = cssPageWeaver.docTitle;
+
+    let grid = {};
+
+    // valeur par défaut → grille désactivée
+    grid.default = {
+        toggle: 'no-grid'
+    };
+
+    grid.toggle = {};
+    grid.toggle.input = cssPageWeaver.ui.grid.toggleInput;
+    grid.toggle.label = cssPageWeaver.ui.grid.toggleLabel;
+
+    /* Récupération de la session précédente */
+    grid.toggle.value = localStorage.getItem('gridToggle_' + fileTitle) || grid.default.toggle;
+
+    if(grid.toggle.value === "grid"){
+        body.classList.add('grid');  // on indique qu'il y a la grille
+        grid.toggle.input.checked = true;
+    } else {
+        body.classList.remove('grid'); // grille désactivée
+        grid.toggle.input.checked = false;
+    }
+
+    /* Événement toggle */
+    grid.toggle.input.addEventListener("input", (e) => {
+        if(e.target.checked){
+            body.classList.add('grid');  // grille activée
+            localStorage.setItem('gridToggle_' + fileTitle, 'grid');
+        } else {
+            body.classList.remove('grid');  // grille désactivée
+            localStorage.setItem('gridToggle_' + fileTitle, 'no-grid');
+        }
+    });
+}
+

public/csspageweaver/plugins/grid/grid.css

@@ -0,0 +1,127 @@
+@media screen{
+
+
+    /* .pagedjs_sheet{
+        --grid-bold: #888;
+        --grid-light: #cfcfcf;
+        background-color: #e5e5f7;
+        opacity: 0.8;
+        background-image:  linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), linear-gradient(transparent 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, white 1px);
+
+        background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
+        background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+    } */
+
+   
+    body.grid .pagedjs_sheet {
+
+
+        --grid-bold:  #cfcfcf;
+        --grid-light: #efefef;
+    
+        --bold-step: 56px;
+        --light-step: 14px; 
+        --shift-x: 28px;
+    
+        background-color: white;
+        opacity: 0.8;
+    
+        background-image:
+            /* Traits bold */
+            repeating-linear-gradient(
+                90deg,
+                var(--grid-bold) 0 1px,
+                transparent 1px var(--bold-step)
+            ),
+            repeating-linear-gradient(
+                0deg,
+                var(--grid-bold) 0 1px,
+                transparent 1px var(--bold-step)
+            ),
+    
+            /* Traits fins (3 traits → 4 carrés) */
+            repeating-linear-gradient(
+                90deg,
+                var(--grid-light) 0 1px,
+                transparent 1px var(--light-step)
+            ),
+            repeating-linear-gradient(
+                0deg,
+                var(--grid-light) 0 1px,
+                transparent 1px var(--light-step)
+            );
+    
+        background-position:
+            var(--shift-x) 0,
+            var(--shift-x) 0,
+            var(--shift-x) 0,
+            var(--shift-x) 0;
+    }
+    
+    
+    
+
+
+
+
+    .grid-page{
+        --nbr-columns: 8;
+        width: var(--pagedjs-pagebox-width);
+        height: var(--pagedjs-pagebox-height);
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: grid;
+        grid-template-columns: repeat(var(--nbr-columns), calc(100%/var(--nbr-columns)));
+
+        box-shadow: 1px 0px 0px 0px var(--grid-color);
+
+        --grid-color: magenta;
+        z-index: -1;
+    }
+
+    .pagedjs_right_page .grid-page{
+        padding-left: var(--pagedjs-margin-left);
+        padding-right: var(--pagedjs-margin-right);
+    }
+
+    .pagedjs_left_page .grid-page{
+        padding-left: var(--pagedjs-margin-left);
+        padding-right: var(--pagedjs-margin-right);
+    }
+
+
+    .grid-page .grid-column{
+        box-shadow: 1px 0px 0px 0px var(--grid-color);
+        grid-row: 1/end;
+        width: 100%;
+        justify-self: right;
+
+
+    }
+
+    .grid-column-0{ 
+        grid-column: 1; 
+        box-shadow: -1px 0px 0px 0px var(--grid-color)!important;
+        justify-self: left;
+    }
+
+    .grid-column-1{ grid-column: 1; }
+    .grid-column-2{ grid-column: 2; }
+    .grid-column-3{ grid-column: 3; }
+    .grid-column-4{ grid-column: 4; }
+    .grid-column-5{ grid-column: 5; }
+    .grid-column-6{ grid-column: 6; }
+    .grid-column-7{ grid-column: 7; }
+    .grid-column-8{ grid-column: 8; }
+    .grid-column-9{ grid-column: 9; }
+    .grid-column-10{ grid-column: 10; }
+    .grid-column-11{ grid-column: 11; }
+    .grid-column-12{ grid-column: 12; }
+}
+
+.no-grid .grid-page{
+    display: none;
+}
+
+