Appliquer des styles CSS provenant de la BDD en instantané : bonnes pratiques ?
Bonjour à tous,
Actuellement entrain de développer la partie galerie d'images de mon projet, j'ai mis en place une personnalisation des propriétés css de la part de l'utilisateur en utilisant des variables css, tout fonctionne bien , cependant j'aimerai savoir :
1/ Peut-on simplifier le code js ci-dessous en créant des classes (et cela vaut il le coup ?)
2/ Quelles sont les meilleures pratiques concernant l'initialisation des variables css qui seront lues depuis la bdd, faut-il utiliser le cache navigateur ? si oui, comment ?
3/ N'existe t'il pas une meilleure méthode que du style inline sur chacun des éléments html pour le render dans Twig ex: <div class="galerie"style="background-color:{{galerie.primarybackgroundcolor}}">?
Actuellement je stocke les variables une par une en tant que colonnes dans la bdd par rapport à leur entité, n'existe t'il pas / ne serait il pas préférable d'utiliser une méthode permettant de stocker carrément une liste de propriétés css en une seule fois ?.
galerie.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| window.onload = () => {
//Changer la largeur de la galerie
const inputGalleryWidth = document.querySelector("#galeries_gallery_width");
inputGalleryWidth.addEventListener("change", () => {
let width = inputGalleryWidth.value;
document.documentElement.style.setProperty("--gallery-width", `${width}%`);
});
//Changer la couleur de fond d'une galerie d'images
const inputGalleryPrimaryBackgroundColor = document.querySelector(
"#galeries_primary_background_color"
);
inputGalleryPrimaryBackgroundColor.addEventListener("input", () => {
let color = inputGalleryPrimaryBackgroundColor.value;
document.documentElement.style.setProperty(
"--gallery-primary-background-color",
color
);
});
//Changer le border-radius des images
const inputImagesBorderRadius = document.querySelector(
"#galeries_images_border_radius"
);
inputImagesBorderRadius.addEventListener("change", () => {
let borderRadius = inputImagesBorderRadius.value;
document.documentElement.style.setProperty(
"--images-border-radius",
`${borderRadius}%`
);
});
//Changer l'espacement des images
const inputGalleryGap = document.querySelector("#galeries_gallery_gap");
inputGalleryGap.addEventListener("change", () => {
let gap = inputGalleryGap.value;
document.documentElement.style.setProperty("--gallery-gap", `${gap}px`);
});
//Changer l'épaisseur du bord des images
const inputImagesBorderWidth = document.querySelector(
"#galeries_images_border_width"
);
inputImagesBorderWidth.addEventListener("change", () => {
let borderWidth = inputImagesBorderWidth.value;
document.documentElement.style.setProperty(
"--images-border-width",
`${borderWidth}px solid #fff`
);
});
//Choisir le nombre de colonnes
const inputColumns = document.querySelector("#galeries_gallery_max_columns");
inputColumns.addEventListener("change", () => {
let maxColumns = inputColumns.value;
document.documentElement.style.setProperty(
"--gallery-max-columns",
`${maxColumns}`
);
});
//Choisir la hauteur de la galerie
const inputGalleryHeight = document.querySelector("#galeries_gallery_height");
inputGalleryHeight.addEventListener("change", () => {
let maxGalleryHeight = inputGalleryHeight.value;
document.documentElement.style.setProperty(
"--gallery-height",
`${maxGalleryHeight}px`
);
});
//Changer l'ombre de l'image
const inputImageShadow = document.querySelector("#galeries_images_shadow");
inputImageShadow.addEventListener("change", () => {
let imgShadow = inputImageShadow.value;
console.log(imgShadow);
document.documentElement.style.setProperty(
"--images-shadow",
`${imgShadow}px ${imgShadow}px ${imgShadow}px darkgray`
);
});
}; |
Merci d'avance pour votre expertise
