suaqred grid ux
This commit is contained in:
Julie Blanc
parent
21711bd5dd
commit
be03eab4a9
13 changed files with 243 additions and 67 deletions
|
|
@ -267,6 +267,10 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-values label{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* INPUT NUMBER ---------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default function baseline() {
|
|||
|
||||
// set default value
|
||||
baseline.default = {
|
||||
size: 32 ,
|
||||
size: 20,
|
||||
position: 0
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
--bold-step: 56px;
|
||||
--light-step: 14px;
|
||||
--shift-x: 28px;
|
||||
z-index: -1;
|
||||
|
||||
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
16
public/csspageweaver/plugins/grid/template.html
Normal 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>
|
||||
|
|
@ -267,6 +267,10 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#cssPageWeaver_panel .panel-group-values label{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* INPUT NUMBER ---------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default function baseline() {
|
|||
|
||||
// set default value
|
||||
baseline.default = {
|
||||
size: 32 ,
|
||||
size: 20,
|
||||
position: 0
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
--bold-step: 56px;
|
||||
--light-step: 14px;
|
||||
--shift-x: 28px;
|
||||
z-index: -1;
|
||||
|
||||
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
16
static/csspageweaver/plugins/grid/template.html
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue