initial commit

csspageweaver/plugins/grid/.gitignore

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

csspageweaver/plugins/grid/README.md

@@ -0,0 +1,70 @@
+---
+name: grid
+tags: recommended, stable, boilerplate, gui
+description: A simple GUI tool to display a square grid with subdivisions.
+---
+
+# Grid Plugin
+
+A visual development helper for CSS Page Weaver that displays
+  customizable grid overlays on pages. Useful for layout debugging and
+  ensuring consistent spacing in print designs.
+
+- **Squared grid**: Repeating grid with customizable spacing
+  and subdivisions
+- **Persistent settings**: Grid preferences saved per document in
+  localStorage
+- **Screen-only**: Grid overlays only appear in screen view, not in
+  print output
+
+## Installation
+
+This plugin is part of the CSS Page Weaver plugin ecosystem. It should
+  be included in your `csspageweaver/plugins/` directory.
+
+
+## Usage
+
+### Toggle the grid
+
+Use the toggle switch in the CSS Page Weaver UI panel to show/hide the
+  grid overlay.
+
+### Customize grid parameters
+
+Four adjustable parameters are available in the UI panel:
+
+- **Spacing (px)**: Distance between bold grid lines (default: 56px)
+- **Steps**: Number of subdivisions between bold lines (default: 5)
+- **Position X (px)**: Horizontal offset of the grid (default: 28px)
+- **Position Y (px)**: Vertical offset of the grid (default: 0px)
+
+### Configure default values
+
+You can set default grid parameters in your configuration:
+
+```json
+  {
+    "grid": {
+      "parameters": {
+        "spacing": 56,
+        "steps": 5,
+        "positionX": 28,
+        "positionY": 0
+      }
+    }
+  }
+```
+
+CSS Custom Properties
+
+The grid uses CSS custom properties that can be overridden in `grid.css`:
+
+```
+  :root {
+    --grid-bold: #bfbfbf;      /* Bold grid line color */
+    --grid-light: #efefef;     /* Light grid line color */
+    --grid-color: magenta;     /* Column grid color */
+    --nbr-columns: 8;          /* Number of columns (1-12) */
+  }
+```

csspageweaver/plugins/grid/config.json

@@ -0,0 +1,14 @@
+{
+	"name": "Grid",
+	"description": "",
+	"version": "1.0",
+	"ui": {
+		"title": "Squared grid",
+		"description": "This Toogle a squared grid",
+		"template": "template.html",
+		"toggle": true
+	},
+	"stylesheet": "grid.css",
+	"script": "grid-ui.js",
+	"hook": "grid-hook.js"
+}

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);
+      }
+
+  
+ 
+
+}

csspageweaver/plugins/grid/grid-ui.js

@@ -0,0 +1,115 @@
+/**
+ * @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 parameters = cssPageWeaver.features.grid.parameters || {};
+    let isParametersSet = Object.keys(parameters).length > 0;
+
+    let grid = {};
+
+    // valeur par défaut
+    grid.default = {
+        toggle: 'no-grid',
+        spacing: 56,
+        steps: 5,
+        positionX: 28,
+        positionY: 0
+    };
+
+    grid.toggle = {};
+    grid.toggle.input = cssPageWeaver.ui.grid.toggleInput;
+    grid.toggle.label = cssPageWeaver.ui.grid.toggleLabel;
+
+    grid.spacing = {};
+    grid.spacing.value = parameters.spacing || grid.default.spacing;
+    grid.spacing.input = document.querySelector('#spacing-grid');
+
+    grid.steps = {};
+    grid.steps.value = parameters.steps || grid.default.steps;
+    grid.steps.input = document.querySelector('#steps-grid');
+
+    grid.positionX = {};
+    grid.positionX.value = parameters.positionX || grid.default.positionX;
+    grid.positionX.input = document.querySelector('#position-x-grid');
+
+    grid.positionY = {};
+    grid.positionY.value = parameters.positionY || grid.default.positionY;
+    grid.positionY.input = document.querySelector('#position-y-grid');
+
+    /* Récupération de la session précédente */
+    grid.toggle.value = localStorage.getItem('gridToggle_' + fileTitle) || grid.default.toggle;
+    grid.spacing.value = localStorage.getItem('gridSpacing_' + fileTitle) || grid.spacing.value;
+    grid.steps.value = localStorage.getItem('gridSteps_' + fileTitle) || grid.steps.value;
+    grid.positionX.value = localStorage.getItem('gridPositionX_' + fileTitle) || grid.positionX.value;
+    grid.positionY.value = localStorage.getItem('gridPositionY_' + fileTitle) || grid.positionY.value;
+
+    /* DOM edit */
+    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;
+    }
+
+    /* Set grid values on load */
+    grid.spacing.input.value = grid.spacing.value;
+    document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
+
+    grid.steps.input.value = grid.steps.value;
+    document.documentElement.style.setProperty('--steps', grid.steps.value);
+
+    grid.positionX.input.value = grid.positionX.value;
+    document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
+
+    grid.positionY.input.value = grid.positionY.value;
+    document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
+
+    /* Event listeners */
+
+    /* Toggle event */
+    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');
+        }
+    });
+
+    /* Change grid spacing on input */
+    document.querySelector("#spacing-grid").addEventListener("input", (e) => {
+        grid.spacing.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-spacing', grid.spacing.value + 'px');
+        localStorage.setItem('gridSpacing_' + fileTitle, grid.spacing.value);
+    });
+
+    /* Change grid steps on input */
+    document.querySelector("#steps-grid").addEventListener("input", (e) => {
+        grid.steps.value = e.target.value;
+        document.documentElement.style.setProperty('--steps', grid.steps.value);
+        localStorage.setItem('gridSteps_' + fileTitle, grid.steps.value);
+    });
+
+    /* Change grid position X on input */
+    document.querySelector("#position-x-grid").addEventListener("input", (e) => {
+        grid.positionX.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-position-x', grid.positionX.value + 'px');
+        localStorage.setItem('gridPositionX_' + fileTitle, grid.positionX.value);
+    });
+
+    /* Change grid position Y on input */
+    document.querySelector("#position-y-grid").addEventListener("input", (e) => {
+        grid.positionY.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-position-y', grid.positionY.value + 'px');
+        localStorage.setItem('gridPositionY_' + fileTitle, grid.positionY.value);
+    });
+}
+

csspageweaver/plugins/grid/grid.css

@@ -0,0 +1,124 @@
+:root {
+    --grid-bold:  #bfbfbf;
+    --grid-light: #efefef;
+
+    --grid-spacing: 56px;
+    --steps: 5;
+    --grid-position-x: 28px;
+    --grid-position-y: 0px;
+
+    --grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
+
+}
+
+
+@media screen{
+
+
+   
+    body.grid .pagedjs_sheet {
+
+
+       
+        z-index: -1;
+    
+    
+        background-image:
+            /* Traits bold */
+            repeating-linear-gradient(
+                90deg,
+                var(--grid-bold) 0 1px,
+                transparent 1px var(--grid-spacing)
+            ),
+            repeating-linear-gradient(
+                0deg,
+                var(--grid-bold) 0 1px,
+                transparent 1px var(--grid-spacing)
+            ),
+    
+            /* Traits fins (3 traits → 4 carrés) */
+            repeating-linear-gradient(
+                90deg,
+                var(--grid-light) 0 1px,
+                transparent 1px var(--grid-subdivisions)
+            ),
+            repeating-linear-gradient(
+                0deg,
+                var(--grid-light) 0 1px,
+                transparent 1px var(--grid-subdivisions)
+            );
+    
+        background-position:
+            var(--grid-position-x) var(--grid-position-y),
+            var(--grid-position-x) var(--grid-position-y),
+            var(--grid-position-x) var(--grid-position-y),
+            var(--grid-position-x) var(--grid-position-y);
+    }
+    
+    
+    
+
+
+
+
+    .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;
+}
+
+

csspageweaver/plugins/grid/template.html

@@ -0,0 +1,16 @@
+<div class="panel-group-values">
+    <label for="spacing-grid">Spacing (px)</label>
+    <input type="number" id="spacing-grid" name="spacing-grid" min="1"  max="200" value="56">
+</div>
+<div class="panel-group-values">
+    <label for="steps-grid">Steps</label>
+    <input type="number" id="steps-grid" name="steps-grid" min="1" max="20"  value="5">
+</div>
+<div class="panel-group-values">
+    <label for="position-x-grid">Position X (px)</label>
+    <input type="number" id="position-x-grid" name="position-x-grid"  value="28">
+</div>
+<div class="panel-group-values">
+    <label for="position-y-grid">Position Y (px)</label>
+    <input type="number" id="position-y-grid" name="position-y-grid"  value="0">
+</div>