estilos CSS no se actualizarán antes de ir a buscar el archivo

votos
0

Objetivo previsto - diferentes usuario selecciona los colores de varias entradas de color y crea su propio tema. Una vez elegidos los colores, el usuario hace clic en el botón de descarga y obtiene el archivo CSS generado con los colores que él / ella eligió.

Problema - Soy capaz de descargar el archivo CSS, pero yo estoy poniendo los valores originales a pesar de cambiar las entradas de diferentes colores.

Qué he hecho

El archivo CSS que está siendo descargado ya existe y todos los colores que corresponden a los diferentes elementos se realizan a través de variables CSS.

Estoy actualizando los cambios que vivo haciendo lo siguiente.

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

Entonces, fui a buscar la hoja de estilo desde el servidor, agarró todas las variables CSS y los reemplazó con su valor real (valor de color hexadecimal).

Después de eso, me dieron el valor de retorno (nueva hoja de estilo sin variables) y la puse para el URI de datos.

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

Ya tengo una configuración de botón de descarga en mi HTML y lo agarró antes en mi script para que estaba disponible en cualquier lugar para que yo use. downloadBtn

He definido el botón de fuego y agarró la nueva hoja.

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

El resultado

Consigo los valores de los colores iniciales de la hoja de estilo a pesar de cambiar los colores dentro de las entradas de color en la página. Por lo que el archivo CSS no se actualiza con los nuevos colores antes de descargar el archivo.

Publicado el 13/01/2020 a las 23:54
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Se podría usar PHP para pasar los valores a una nueva página. Digamos que usted eligió los colores que desee a continuación, haga clic en un botón que dice "Generar" que te lleva a la "Generación de la página".

Los valores se transmiten directamente en el código HTML y que se descarga desde la página Generar lugar.

Esto es si sabes PHP, por supuesto, sólo una sugerencia sobre cómo podría resolverlo.

(Quiso hacer comentarios, pero no puede debido a la reputación)

Respondida el 14/01/2020 a las 00:20
fuente por usuario

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