Initial commit

assets/csspageweaver/plugins/grid/.gitignore

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

assets/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.

assets/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"
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @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);
+      }
+
+  
+    afterPageLayout(pageElement, page, breakToken) {
+        let pageBox = pageElement.querySelector(".pagedjs_pagebox");
+
+        var div = document.createElement('div');
+        div.classList.add("grid-page");
+        div.innerHTML = '<div class="grid-column grid-column-0"></div>\
+        <div class="grid-column grid-column-1"></div>\
+        <div class="grid-column grid-column-2"></div>\
+        <div class="grid-column grid-column-3"></div>\
+        <div class="grid-column grid-column-4"></div>\
+        <div class="grid-column grid-column-5"></div>\
+        <div class="grid-column grid-column-6"></div>\
+        <div class="grid-column grid-column-7"></div>\
+        <div class="grid-column grid-column-8"></div>\
+        <div class="grid-column grid-column-9"></div>\
+        <div class="grid-column grid-column-10"></div>\
+        <div class="grid-column grid-column-11"></div>\
+        <div class="grid-column grid-column-12"></div>';
+        pageBox.appendChild(div);
+    }
+
+}

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

@@ -0,0 +1,50 @@
+/**
+ * @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 = {}
+
+    // set default value
+    grid.default = {
+        toggle: 'no-grid'
+    }
+
+    grid.toggle = {}
+    grid.toggle.input = cssPageWeaver.ui.grid.toggleInput
+    grid.toggle.label = cssPageWeaver.ui.grid.toggleLabel
+
+
+    /* Previous session */
+    grid.toggle.value = localStorage.getItem('gridToggle_' + fileTitle) || grid.default.toggle
+
+    if(grid.toggle.value == "no-grid"){
+        body.classList.add('no-grid');
+        grid.toggle.input.checked = false;
+    }else if(grid.toggle.value == "grid"){
+        body.classList.remove('no-grid');
+        grid.toggle.input.checked = true;
+    }else{
+        body.classList.add('no-grid');
+        localStorage.setItem('gridToggle_' + fileTitle, 'no-grid');
+        grid.toggle.input.checked = false;
+    }
+
+            
+    /* Grid toggle event */
+    grid.toggle.input.addEventListener("input", (e) => {
+        if(e.target.checked){
+            body.classList.remove('no-grid');
+            localStorage.setItem('gridToggle_' + fileTitle, 'grid');
+        }else{
+            body.classList.add('no-grid');
+            localStorage.setItem('gridToggle_' + fileTitle, 'no-grid');
+        }
+    });
+}

assets/csspageweaver/plugins/grid/grid.css

@@ -0,0 +1,60 @@
+@media screen{
+    .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;
+}