styles CSS ne sera pas mise à jour avant le fichier fetching

voix
0

Objectif prévu - différentes couleurs de l' utilisateur à partir de différentes entrées de couleurs et crée leur propre thème. Une fois que les couleurs sont choisies, l'utilisateur clique sur le bouton de téléchargement et obtient le fichier CSS généré avec les couleurs qu'il / elle a choisi.

Problème - Je suis en mesure de télécharger le fichier CSS, mais je reçois les valeurs d' origine malgré l' évolution des entrées de couleurs différentes.

Ce que j'ai fait

Le fichier CSS qui est en cours de téléchargement existe déjà et toutes les couleurs qui correspondent à des éléments différents se font via des variables CSS.

Je met à jour les changements en direct en procédant comme suit.

import { colors } from './colorHelper'

const inputs = [].slice.call(document.querySelectorAll('input[type=color]'));

const handleThemeUpdate = (colors) => {
  const root = document.querySelector(':root');
  const keys = Object.keys(colors);
  keys.forEach(key => {
    root.style.setProperty(key, colors[key]);
  });
}

inputs.forEach((input) => {
  input.addEventListener('change', (e) => {
    e.preventDefault();
    const cssPropName = `--${e.target.id}`;
    document.styleSheets[2].cssRules[3].style.setProperty(cssPropName, e.target.value);

    handleThemeUpdate({
      [cssPropName]: e.target.value
    });
    console.log(`${cssPropName} is now ${e.target.value}`)
  });
});

Ensuite, j'allé chercher la feuille de style à partir du serveur, saisi toutes les variables CSS et les a remplacées par leur valeur réelle (valeur de couleur hexadécimal).

Après cela, je suis arrivé à la valeur de retour (nouvelle feuille de style sans variables) et réglez-le pour les données URI.

async function updatedStylesheet() {
  const res = await fetch(./prism.css);
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();

  for (const v of cssVars) {
     updated_css = updated_css.replace(v,   colors[v.slice(6, -1)]);
   };

  return updated_css;
}

const newStylesheet = updatedStylesheet().then(css => {
 downloadBtn.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(css));
 downloadBtn.setAttribute('download', 'prism-theme.css');
})

J'ai déjà une configuration de bouton de téléchargement dans mon HTML et je l'ai attrapé plus tôt dans mon script afin qu'il était disponible partout pour moi d'utiliser. downloadBtn

Je mis en place sur le bouton pour le feu et ai saisi la nouvelle feuille.

downloadBtn.addEventListener('click', () => {
  newStylesheet();
});

Le résultat

Je reçois les valeurs de couleur initiale de la feuille de style, malgré le changement des couleurs dans les entrées de couleur sur la page. Ainsi, le fichier CSS n'est pas mis à jour avec les nouvelles couleurs avant de télécharger le fichier.

Créé 13/01/2020 à 21:54
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Vous pouvez utiliser PHP pour transmettre les valeurs à une nouvelle page. Disons que vous avez choisi les couleurs que vous voulez, puis cliquez sur un bouton qui dit « Générer » qui vous emmène à la « Générer la page ».

Les valeurs seraient transmises directement dans le code HTML et que vous téléchargez à partir Générer la page au lieu.

Ceci est si vous connaissez PHP bien sûr, juste une suggestion sur la façon dont vous pouvez le résoudre.

(Commentera, mais ne peut pas en raison de la réputation)

Créé 13/01/2020 à 22:20
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more