initial commit

static/csspageweaver/plugins/baseline/.gitignore

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

static/csspageweaver/plugins/baseline/README.md

@@ -0,0 +1,8 @@
+---
+name: baseline
+tags: recommended, stable, boilerplate, gui
+description: A simple helper to see custom baseline grid. 
+---
+
+
+

static/csspageweaver/plugins/baseline/baseline.css

@@ -0,0 +1,21 @@
+/* BASELINE -------------------------------------------*/  
+
+:root {
+    --pagedjs-baseline: 12px;
+    --pagedjs-baseline-position: 0px;
+    --pagedjs-baseline-color: cyan;
+}
+
+@media screen{
+    .pagedjs_pagebox {
+        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
+        background-size: 100% var(--pagedjs-baseline);
+        background-repeat: repeat-y;
+        background-position-y: var(--pagedjs-baseline-position);
+     
+    }  
+
+    .no-baseline .pagedjs_pagebox{
+        background: none;
+    }
+}

static/csspageweaver/plugins/baseline/baseline.js

@@ -0,0 +1,100 @@
+/**
+ * @name Baseline
+ * @author Julie Blanc <contact@julie-blanc.fr>
+ * @see { @link https://gitlab.com/csspageweaver/plugins/baseline/ }
+ */
+
+
+export default function baseline() {
+    let body = cssPageWeaver.ui.body
+    let fileTitle = cssPageWeaver.docTitle;
+    let parameters = cssPageWeaver.features.baseline.parameters || {}
+    let isParametersSet = Object.keys(parameters).length > 0
+
+    /* BASELINE ---------------------------------------------------------------------------------------------------- 
+    ----------------------------------------------------------------------------------------------------------------*/
+
+    /* Set baseline onload */
+    let baseline = {}
+
+    // set default value
+    baseline.default = {
+        size: 32 ,
+        position: 0
+    }
+
+    baseline.toggle = {}
+    baseline.toggle.value = localStorage.getItem('baselineToggle_' + fileTitle)
+    baseline.toggle.input = cssPageWeaver.ui.baseline.toggleInput
+
+    baseline.button = cssPageWeaver.ui.baseline.toggleLabel
+
+    baseline.size = {}
+    baseline.size.value = parameters.size || baseline.default.size
+    baseline.size.input = document.querySelector('#size-baseline')
+
+    baseline.position = {}
+    baseline.position.value = parameters.position || baseline.default.position
+    baseline.position.input = document.querySelector('#position-baseline')
+    
+
+    /* */
+    /* Retrieve previous sessions */
+    baseline.size.value = localStorage.getItem('baselineSize_' + fileTitle) || baseline.size.value
+    baseline.position.value = localStorage.getItem('baselinePosition_' + fileTitle) || baseline.position.value
+
+    /* */
+    /* DOM edit */
+
+    /* Toggle */
+    if(baseline.toggle.value == "no-baseline"){
+        body.classList.add('no-baseline');
+        baseline.toggle.input.checked = false;
+    }else if(baseline.toggle.value == "baseline"){
+        body.classList.remove('no-baseline');
+        baseline.toggle.input.checked = true;
+    }else{
+        body.classList.add('no-baseline');
+        localStorage.setItem('baselineToggle_' + fileTitle, 'no-baseline');        //baselineButton.querySelector(".button-hide").classList.remove("button-not-selected");
+        baseline.toggle.input.checked = false;
+    }
+
+    /* Set baseline size and position on load */
+    baseline.size.input.value = baseline.size.value
+    document.documentElement.style.setProperty('--pagedjs-baseline', baseline.size.value + 'px');
+    baseline.position.input.value = baseline.position.value
+    document.documentElement.style.setProperty('--pagedjs-baseline-position', baseline.position.value + 'px');
+
+
+    /*  */
+    /* Event listenner */
+
+    /* Toggle event  */
+    baseline.toggle.input.addEventListener("input", (e) => {
+        if(e.target.checked){
+            /* see baseline */
+            body.classList.remove('no-baseline');
+            localStorage.setItem('baselineToggle_' + fileTitle, 'baseline');
+        }else{
+            /* hide baseline */
+            body.classList.add('no-baseline');
+            localStorage.setItem('baselineToggle_' + fileTitle, 'no-baseline');
+        }
+    });
+
+    /* Change baseline size on input */
+    document.querySelector("#size-baseline").addEventListener("input", (e) => {
+        baseline.size.value = e.target.value
+        document.documentElement.style.setProperty('--pagedjs-baseline', baseline.size.value + 'px');
+        localStorage.setItem('baselineSize_'  + fileTitle, baseline.size.value);
+    });
+
+
+    /* Change baseline position on input */
+      document.querySelector("#position-baseline").addEventListener("input", (e) => {
+        baseline.position.value = e.target.value
+        document.documentElement.style.setProperty('--pagedjs-baseline-position', baseline.position.value + 'px');
+        localStorage.setItem('baselinePosition_'  + fileTitle, baseline.position.value);
+    });
+
+}

static/csspageweaver/plugins/baseline/config.json

@@ -0,0 +1,13 @@
+{
+	"name": "Baseline",
+	"description": "",
+	"version": "1.0",
+	"ui": {
+		"title": "Baseline Grid",
+		"description": "This Toogle a baseline on pages",
+		"template": "template.html",
+		"toggle": true
+	},
+	"script": "baseline.js",
+	"stylesheet": "baseline.css"
+}

static/csspageweaver/plugins/baseline/template.html

@@ -0,0 +1,8 @@
+<div class="panel-group-values">
+    <label for="size-baseline">Size (px)</label>
+    <input type="number" id="size-baseline" name="size-baseline" min="1" max="100" value="12">
+</div>
+<div class="panel-group-values">
+    <label for="position-baseline" id="label-position">Position (px)</label>
+    <input type="number" id="position-baseline" name="position-baseline" value="0">
+</div>