CSS-stijlen zal geen update voor het ophalen van het bestand

stemmen
0

Beoogde doel - De gebruiker selecteert verschillende kleuren uit verschillende kleuren ingangen en creëert een eigen thema. Zodra de kleuren zijn gekozen, de gebruiker klikt op de download knop en krijgt de gegenereerde CSS-bestand met de kleuren die hij / zij heeft gekozen.

Issue - Ik ben in staat om het CSS-bestand te downloaden, maar ik krijg de oorspronkelijke waarden, ondanks het veranderen van de ingangen om verschillende kleuren.

Wat ik heb gedaan

Het CSS-bestand dat wordt gedownload bestaat en alle kleuren die overeenkomen met de verschillende elementen worden gedaan via CSS variabelen al.

Ik ben het bijwerken van de verandert leven door het volgende te doen.

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}`)
  });
});

Dan heb ik haalde de stylesheet van de server, pakte alle CSS Variabelen en verving ze door de werkelijke waarde (hex kleur waarde).

Daarna kreeg ik de return waarde (nieuw stylesheet zonder variabelen) en stel het voor de data 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');
})

Ik heb al een download knop setup in mijn HTML en ik pakte hem eerder in mijn script, zodat het overal beschikbaar voor mij om te gebruiken. downloadBtn

Zette ik de knop om te vuur en pakte het nieuwe blad.

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

Het resultaat

Ik krijg de eerste kleurwaarden van de stylesheet, ondanks het veranderen van de kleuren in de kleur ingangen op de pagina. Dus de CSS-bestand niet wordt bijgewerkt met de nieuwe kleuren voor ik het bestand te downloaden.

De vraag is gesteld op 13/01/2020 om 21:54
bron van user
In andere talen...                            


1 antwoorden

stemmen
0

Je zou kunnen PHP gebruiken om de waarden te geven aan een nieuwe pagina. Laten we zeggen dat je de kleuren koos u wilt klik op een knop die zegt "Generate" die je meeneemt naar de "Generate pagina".

De waarden zou direct worden doorberekend in de HTML en zou u in plaats daarvan te downloaden van het genereren pagina.

Dit is als je PHP weet natuurlijk slechts een suggestie over hoe je het zou kunnen oplossen.

(Commentaar zou geven, maar kan niet te wijten aan de reputatie)

antwoordde op 13/01/2020 om 22:20
bron van user

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