CSS-stiler vil ikke oppdatere før henting fil

stemmer
0

Tiltenkt Goal - Brukeren velger ulike farger fra ulike farge innganger og skaper sitt eget tema. Når fargene er valgt, brukeren klikker på nedlastingsknappen og får den genererte CSS fil med fargene han / hun valgte.

Problemet - jeg er i stand til å laste CSS-filen, men jeg får de opprinnelige verdiene til tross for skiftende inngangene til forskjellige farger.

Hva jeg har gjort

CSS-filen som blir lastet ned allerede eksisterer og alle fargene som korresponderer til forskjellige elementer er gjort via CSS variabler.

Jeg oppdaterer den endrer levende ved å gjøre følgende.

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

Da jeg hentet den stil fra serveren, grep alle CSS Variabler og erstattet dem med deres faktiske verdi (hex fargeverdi).

Etter at jeg fikk returverdien (nytt stilark uten variabler) og sett den for 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');
})

Jeg har allerede en nedlastingsknappen oppsett i min HTML og jeg fanget det tidligere i min skriptet slik at det var tilgjengelig hvor som helst for meg å bruke. downloadBtn

Jeg satt opp for å brann og grep nytt ark.

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

Resultatet

Jeg får de første fargeverdiene for stilark til tross for å endre fargene i farge inngangene på siden. Så CSS-filen ikke blir oppdatert med de nye fargene før jeg laste ned filen.

Publisert på 13/01/2020 klokken 23:54
kilden bruker
På andre språk...                            


1 svar

stemmer
0

Du kan bruke PHP til å passere verdiene til en ny side. La oss si at du velger de fargene du ønsker og klikk deretter på en knapp som sier "Generer" som tar deg til "generere side".

Verdiene vil bli sendt direkte inn i HTML, og du vil laste ned fra generere siden i stedet.

Dette er hvis du vet PHP selvfølgelig bare et forslag på hvordan du kan løse det.

(Vil kommentere, men kan ikke på grunn av rykte)

Svarte 14/01/2020 kl. 00:20
kilden bruker

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