CSS стили не будут обновляться перед загрузкой файла - PullRequest
Новая
       4

CSS стили не будут обновляться перед загрузкой файла

0 голосов
/ 13 января 2020

Намеренная цель - Пользователь выбирает разные цвета из различных вводимых цветов и создает свою собственную тему. Как только цвета выбраны, пользователь нажимает кнопку загрузки и получает сгенерированный файл CSS с выбранными цветами.

Проблема - Я могу загрузить файл CSS, но я получаю исходные значения, несмотря на изменение входных данных на разные цвета.

Что я сделал

Загружаемый файл CSS уже существует, и все цвета, соответствующие различным элементам, выполняются с помощью переменных CSS.

Я обновляю изменения вживую, выполняя следующее. 

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

Затем я взял таблицу стилей с сервера, взял все переменные CSS и заменил их фактическим значением (шестнадцатеричное значение цвета).

После этого я получил возвращаемое значение (новая таблица стилей без переменных) и установите его для 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');
})

У меня уже есть кнопка загрузки в моем HTML, и я схватил ее ранее в своем скрипте, чтобы она была доступна для использования в любом месте. downloadBtn

Я настроил кнопку, чтобы запустить и схватил новый лист. 

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

Результат

Я получаю первоначальный цвет значения таблицы стилей, несмотря на изменение цветов внутри цветовых входов на странице. Таким образом, файл CSS не обновляется новыми цветами, прежде чем я скачаю файл.

1 Ответ

0 голосов
/ 14 января 2020

Вы можете использовать PHP для передачи значений на новую страницу. Допустим, вы выбрали нужные цвета, а затем нажмите кнопку с надписью «Сформировать», которая приведет вас на «Сгенерировать страницу».

Значения будут переданы непосредственно в HTML, и вы загрузите их из Вместо этого создайте страницу.

Это, конечно, если вы знаете PHP, просто предложение о том, как вы можете решить эту проблему.

(прокомментируйте, но не сможете из-за репутации)

...