IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Appliquer des styles CSS provenant de la BDD en instantané : bonnes pratiques ?


Sujet :

Symfony PHP

  1. #1
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    1 126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 1 126
    Par défaut 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 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

  2. #2
    Membre émérite
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    431
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 431
    Par défaut
    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é.

  3. #3
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    1 126
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 1 126
    Par défaut
    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 )

Discussions similaires

  1. comment appliquer les style css à un mail
    Par mmz dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/09/2006, 17h19
  2. [DisplayTag] Appliquer des styles
    Par jeb001 dans le forum Taglibs
    Réponses: 6
    Dernier message: 29/11/2005, 19h09
  3. [GD] Comment appliquer des styles souligné, gras, italique ?
    Par Yusuke dans le forum Bibliothèques et frameworks
    Réponses: 4
    Dernier message: 07/11/2005, 10h02
  4. Comment appliquer un style CSS ?
    Par adameteve dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 10/03/2005, 21h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo