Os estilos CSS não irá atualizar antes de arquivo atraente

votos
0

Objetivo pretendido - usuário seleciona cores diferentes de várias entradas de cor e cria o seu próprio tema. Uma vez que as cores são escolhidas, o usuário clica no botão de download e recebe o arquivo CSS gerado com as cores que ele / ela escolheu.

Edição - eu sou capaz de baixar o arquivo CSS, mas eu estou recebendo os valores originais apesar de mudar as entradas para cores diferentes.

O que eu fiz

O arquivo CSS que está sendo baixado já existe e todas as cores que correspondem a diferentes elementos são feitos através de variáveis ​​CSS.

Estou atualizando a muda ao vivo, fazendo o seguinte.

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

Então, fui buscar a folha de estilo a partir do servidor, pegou todas as variáveis ​​CSS e substituiu-os com o seu valor real (valor de cor hex).

Depois disso, eu tenho o valor de retorno (novo estilo sem variáveis) e configurá-lo para os dados 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');
})

Eu já tenho uma configuração de botão de download no meu HTML e eu agarrei-lo mais cedo no meu script de modo que ele estava em qualquer lugar disponível para me usar. downloadBtn

Eu configurar o botão para o fogo e agarrou a nova folha.

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

O resultado

Recebo os valores de cores iniciais do estilo, apesar mudando as cores dentro das entradas de cor na página. Portanto, o arquivo CSS não está sendo atualizado com as novas cores antes de baixar o arquivo.

Publicado 13/01/2020 em 23:54
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Você poderia usar o PHP para passar os valores para uma nova página. Vamos dizer que você escolheu as cores que deseja e clique em um botão que diz "Gerar", que leva você para o "Gerar página".

Os valores seriam passados ​​diretamente para o HTML e você baixar da Gerar página em seu lugar.

Isto é, se você sabe PHP é claro, apenas uma sugestão de como você pode resolvê-lo.

(Quis comentar, mas não pode devido à reputação)

Respondeu 14/01/2020 em 00:20
fonte usuário

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