115 lines
4.5 KiB
JavaScript
115 lines
4.5 KiB
JavaScript
/**
|
|
* @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 parameters = cssPageWeaver.features.grid.parameters || {};
|
|
let isParametersSet = Object.keys(parameters).length > 0;
|
|
|
|
let grid = {};
|
|
|
|
// valeur par défaut
|
|
grid.default = {
|
|
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;
|
|
} else {
|
|
body.classList.remove('grid'); // grille désactivée
|
|
grid.toggle.input.checked = false;
|
|
}
|
|
|
|
/* 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
|
|
localStorage.setItem('gridToggle_' + fileTitle, 'grid');
|
|
} else {
|
|
body.classList.remove('grid'); // grille désactivée
|
|
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);
|
|
});
|
|
}
|
|
|