Julie/lure-2026
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

suaqred grid ux

Browse source
This commit is contained in:
Julie Blanc 2026-01-11 09:28:23 +01:00
parent 21711bd5dd
commit be03eab4a9
13 changed files with 243 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

76
public/csspageweaver/plugins/grid/grid-ui.js
View file

@ -8,21 +8,48 @@
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 → grille désactivée
// valeur par défaut
grid.default = {
toggle: 'no-grid'
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;
@ -31,7 +58,22 @@ export default function gridEvents(){
grid.toggle.input.checked = false;
}
/* Événement toggle */
/* 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
@ -41,5 +83,33 @@ export default function gridEvents(){
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);
});
}