CSS styly nebude aktualizovat před načítání souboru

hlasů
0

Zamýšleného cíle - uživatel vybere různé barvy z různých barevných vstupů a vytváří své vlastní téma. Jakmile jsou barvy vybrány, uživatel klikne na tlačítko pro stažení a dostává vygenerovaný soubor CSS s barvami on / ona si vybrala.

Otázka - jsem schopen stáhnout soubor CSS, ale jsem stále původní hodnoty i přes měnící se vstupy do různých barev.

Co jsem udělal

Soubor CSS, který je ke stažení již existuje a všechny barvy, které odpovídají různým prvkům, což se děje pomocí CSS proměnných.

Já je aktualizoval změní živě pomocí následujícího postupu.

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

Poté Získal jsem stylů ze serveru, uchopil všechny CSS proměnné a nahradí je s jejich skutečnou hodnotou (hex color hodnota).

Za to, že jsem se dostal návratovou hodnotu (nový stylesheet bez proměnných) a nastavte jej pro 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');
})

Už mám pro stahování nastavení tlačítka v mém HTML a já ji chytil dříve v mém scénáři tak, aby byl k dispozici kdekoliv, abych používal. downloadBtn

I nastavit tlačítkem na oheň a vzal nový list.

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

Výsledek

Mám počáteční hodnoty barvu stylů i přes měnící se barvy v barevných vstupů na str. Takže soubor CSS není aktualizován s novými barvami, než jsem soubor stáhnout.

Položena 13/01/2020 v 23:54
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
0

Dalo by se použít PHP předat hodnoty na novou stránku. Řekněme, že jste si vybrali barvy, které chcete pak klepněte na tlačítko, které říká: „Vytvořit“, která vás zavede na „Vytvořit stránku“.

Hodnoty budou předány přímo do HTML a chtěli stáhnout z generovat Page místo.

To je, když víte, PHP samozřejmě jen návrh, jak si to mohl vyřešit.

(By komentovat, ale nemůže kvůli pověsti)

Odpovězeno 14/01/2020 v 00:20
zdroj uživatelem

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