grid column

csspageweaver/plugins/gridColumn/.gitignore

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

csspageweaver/plugins/gridColumn/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/gridColumn/config.json

@@ -0,0 +1,13 @@
+{
+	"name": "Column grid",
+	"description": "",
+	"version": "1.0",
+	"ui": {
+		"title": "Column grid",
+		"description": "This Toogle a column grid",
+		"template": "template.html",
+		"toggle": true
+	},
+	"stylesheet": "grid.css",
+	"script": "grid-ui.js"
+}

csspageweaver/plugins/gridColumn/grid-ui.js

@@ -0,0 +1,73 @@
+/**
+ * @name Grid
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/grid/ }
+ */
+
+
+export default function gridEvents(id){
+    let body = cssPageWeaver.ui.body;
+    let fileTitle = cssPageWeaver.docTitle;
+    let parameters = cssPageWeaver.features[id].parameters || {};
+    let isParametersSet = Object.keys(parameters).length > 0;
+
+    let grid = {};
+
+    // valeur par défaut
+    grid.default = {
+        steps: 7,
+    };
+
+    grid.toggle = {};
+    grid.toggle.value = localStorage.getItem('gridColToggle_' + fileTitle) || 'no-grid-col';
+    grid.toggle.input = document.querySelector(`#${id}-toggle`);
+
+    grid.steps = {};
+    grid.steps.value = parameters.steps || grid.default.steps;
+    grid.steps.input = document.querySelector('#steps-grid-col');
+
+
+    /* Récupération de la session précédente si elle existe */
+
+    grid.steps.value = localStorage.getItem('gridColSteps_' + fileTitle) || grid.steps.value;
+
+    grid.steps.input.value = grid.steps.value;
+
+
+    document.documentElement.style.setProperty('--grid-col-steps', grid.steps.value);
+
+
+    /* DOM edit */
+    if(grid.toggle.value === "grid-col"){
+        body.classList.add('grid-col');  // on indique qu'il y a la grille
+        grid.toggle.input.checked = true;
+    } else {
+        body.classList.remove('grid-col'); // grille désactivée
+        grid.toggle.input.checked = false;
+    }
+
+   
+
+
+    /* Toggle event */
+    grid.toggle.input.addEventListener("input", (e) => {
+        if(e.target.checked){
+            body.classList.add('grid-col');  // grille activée
+            localStorage.setItem('gridColToggle_' + fileTitle, 'grid-col');
+        } else {
+            body.classList.remove('grid-col');  // grille désactivée
+            localStorage.setItem('gridColToggle_' + fileTitle, 'no-grid-col');
+        }
+    });
+
+
+    /* Change grid steps on input */
+    document.querySelector("#steps-grid-col").addEventListener("input", (e) => {
+        grid.steps.value = e.target.value;
+        document.documentElement.style.setProperty('--grid-col-steps', grid.steps.value);
+        localStorage.setItem('gridColSteps_' + fileTitle, grid.steps.value);
+    });
+
+   
+}
+

csspageweaver/plugins/gridColumn/grid.css

@@ -0,0 +1,36 @@
+:root {
+    --grid-col-color:  #ee33d2;
+    --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-col .pagedjs_area {
+
+
+       
+        z-index: -1;
+    
+        box-shadow: 0px 0px 1px 0px var(--grid-col-color);
+    
+        background-image: repeating-linear-gradient(to right, var(--grid-col-color), var(--grid-col-color) 0.5px, transparent 0.5px, transparent);
+	    background-size: calc(100%/var(--grid-col-steps)); 
+
+    }
+    
+    
+    
+}
+
+

csspageweaver/plugins/gridColumn/template.html

@@ -0,0 +1,4 @@
+<div class="panel-group-values">
+    <label for="steps-grid-col">Steps</label>
+    <input type="number" id="steps-grid-col" name="steps-grid" min="1" max="22"  value="6">
+</div>