grid column

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