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

2
.gitignore vendored
View file

@ -1 +1 @@
.DS_Store
.DS_Store

4
public/csspageweaver/interface/css/panel.css
View file

@ -267,6 +267,10 @@
justify-content: space-between;
}
#cssPageWeaver_panel .panel-group-values label{
font-size: 12px;
}
/* INPUT NUMBER ---------------------------------- */

2
public/csspageweaver/plugins/baseline/baseline.js
View file

@ -19,7 +19,7 @@ export default function baseline() {
// set default value
baseline.default = {
size: 32 ,
size: 20,
position: 0
}

5
public/csspageweaver/plugins/grid/config.json
View file

@ -3,8 +3,9 @@
"description": "",
"version": "1.0",
"ui": {
"title": "Grid",
"description": "This Toogle a 12 columns grid",
"title": "Squared grid",
"description": "This Toogle a squared grid",
"template": "template.html",
"toggle": true
},
"stylesheet": "grid.css",

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

51
public/csspageweaver/plugins/grid/grid.css
View file

@ -1,61 +1,58 @@
:root {
--grid-bold: #bfbfbf;
--grid-light: #efefef;
--grid-spacing: 56px;
--steps: 5;
--grid-position-x: 28px;
--grid-position-y: 0px;
--grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
}
@media screen{
/* .pagedjs_sheet{
--grid-bold: #888;
--grid-light: #cfcfcf;
background-color: #e5e5f7;
opacity: 0.8;
background-image: linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), linear-gradient(transparent 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, white 1px);
background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
} */
body.grid .pagedjs_sheet {
--grid-bold: #cfcfcf;
--grid-light: #efefef;
z-index: -1;
--bold-step: 56px;
--light-step: 14px;
--shift-x: 28px;
background-color: white;
opacity: 0.8;
background-image:
/* Traits bold */
repeating-linear-gradient(
90deg,
var(--grid-bold) 0 1px,
transparent 1px var(--bold-step)
transparent 1px var(--grid-spacing)
),
repeating-linear-gradient(
0deg,
var(--grid-bold) 0 1px,
transparent 1px var(--bold-step)
transparent 1px var(--grid-spacing)
),
/* Traits fins (3 traits → 4 carrés) */
repeating-linear-gradient(
90deg,
var(--grid-light) 0 1px,
transparent 1px var(--light-step)
transparent 1px var(--grid-subdivisions)
),
repeating-linear-gradient(
0deg,
var(--grid-light) 0 1px,
transparent 1px var(--light-step)
transparent 1px var(--grid-subdivisions)
);
background-position:
var(--shift-x) 0,
var(--shift-x) 0,
var(--shift-x) 0,
var(--shift-x) 0;
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y);
}

16
public/csspageweaver/plugins/grid/template.html Normal file
View file

@ -0,0 +1,16 @@
<div class="panel-group-values">
<label for="spacing-grid">Spacing (px)</label>
<input type="number" id="spacing-grid" name="spacing-grid" min="1" max="200" value="56">
</div>
<div class="panel-group-values">
<label for="steps-grid">Steps</label>
<input type="number" id="steps-grid" name="steps-grid" min="1" max="20" value="5">
</div>
<div class="panel-group-values">
<label for="position-x-grid">Position X (px)</label>
<input type="number" id="position-x-grid" name="position-x-grid" value="28">
</div>
<div class="panel-group-values">
<label for="position-y-grid">Position Y (px)</label>
<input type="number" id="position-y-grid" name="position-y-grid" value="0">
</div>

4
static/csspageweaver/interface/css/panel.css
View file

@ -267,6 +267,10 @@
justify-content: space-between;
}
#cssPageWeaver_panel .panel-group-values label{
font-size: 12px;
}
/* INPUT NUMBER ---------------------------------- */

2
static/csspageweaver/plugins/baseline/baseline.js
View file

@ -19,7 +19,7 @@ export default function baseline() {
// set default value
baseline.default = {
size: 32 ,
size: 20,
position: 0
}

5
static/csspageweaver/plugins/grid/config.json
View file

@ -3,8 +3,9 @@
"description": "",
"version": "1.0",
"ui": {
"title": "Grid",
"description": "This Toogle a 12 columns grid",
"title": "Squared grid",
"description": "This Toogle a squared grid",
"template": "template.html",
"toggle": true
},
"stylesheet": "grid.css",

76
static/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);
});
}

51
static/csspageweaver/plugins/grid/grid.css
View file

@ -1,61 +1,58 @@
:root {
--grid-bold: #bfbfbf;
--grid-light: #efefef;
--grid-spacing: 56px;
--steps: 5;
--grid-position-x: 28px;
--grid-position-y: 0px;
--grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
}
@media screen{
/* .pagedjs_sheet{
--grid-bold: #888;
--grid-light: #cfcfcf;
background-color: #e5e5f7;
opacity: 0.8;
background-image: linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), linear-gradient(transparent 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, white 1px);
background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
} */
body.grid .pagedjs_sheet {
--grid-bold: #cfcfcf;
--grid-light: #efefef;
z-index: -1;
--bold-step: 56px;
--light-step: 14px;
--shift-x: 28px;
background-color: white;
opacity: 0.8;
background-image:
/* Traits bold */
repeating-linear-gradient(
90deg,
var(--grid-bold) 0 1px,
transparent 1px var(--bold-step)
transparent 1px var(--grid-spacing)
),
repeating-linear-gradient(
0deg,
var(--grid-bold) 0 1px,
transparent 1px var(--bold-step)
transparent 1px var(--grid-spacing)
),
/* Traits fins (3 traits → 4 carrés) */
repeating-linear-gradient(
90deg,
var(--grid-light) 0 1px,
transparent 1px var(--light-step)
transparent 1px var(--grid-subdivisions)
),
repeating-linear-gradient(
0deg,
var(--grid-light) 0 1px,
transparent 1px var(--light-step)
transparent 1px var(--grid-subdivisions)
);
background-position:
var(--shift-x) 0,
var(--shift-x) 0,
var(--shift-x) 0,
var(--shift-x) 0;
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y);
}

16
static/csspageweaver/plugins/grid/template.html Normal file
View file

@ -0,0 +1,16 @@
<div class="panel-group-values">
<label for="spacing-grid">Spacing (px)</label>
<input type="number" id="spacing-grid" name="spacing-grid" min="1" max="200" value="56">
</div>
<div class="panel-group-values">
<label for="steps-grid">Steps</label>
<input type="number" id="steps-grid" name="steps-grid" min="1" max="20" value="5">
</div>
<div class="panel-group-values">
<label for="position-x-grid">Position X (px)</label>
<input type="number" id="position-x-grid" name="position-x-grid" value="28">
</div>
<div class="panel-group-values">
<label for="position-y-grid">Position Y (px)</label>
<input type="number" id="position-y-grid" name="position-y-grid" value="0">
</div>