Discussion :

[clickandgo]

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Pytet]

Bonjour,

Le fait d'utiliser des classes est une bonne idée puisqu'elles permettent de dissocier l'état (galerie ouverte ou fermée, état/classe "open/close" par exemple) et le style (display none/block par exemple).
Tu pourras ainsi modifier au besoin le style dans un fichier css sans avoir besoin de modifier les états dans ton code js. Ceci permettra aussi d'éviter les style inline et avoir une meilleure factorisation du code css.

Concernant la persistance des données, ca dépends de ton besoin mais tu pourrais enregistrer toutes les valeurs dans une seule colonne en utilisant un type Doctrine "array" ou "json" pour la propriété de ton entité.

[clickandgo]

Merci Pytet d'avoir répondu

Alors les parties manquantes pour moi c'est :

1/ Peut-on créer une classe/fonction qui simplifierait le code JS pour éviter tout ce cumul d'eventListeners en traitant chaque élément en runtime ? D'ailleurs doit-on faire un remove à un moment donné ?
2/ Comment créer le fichier css et les différentes propriétés en json qui doivent s'actualiser au moment du persist ?

Merci de m'aiguiller (avec un exemple peut être )