सीएसएस शैलियों प्राप्त कर रहा है फ़ाइल पहले अपडेट नहीं करेंगे

वोट
0

इरादा लक्ष्य - विभिन्न रंग आदानों से प्रयोक्ता चयन अलग अलग रंग और अपने स्वयं के विषय बनाता है। एक बार जब रंग चुना जाता है, उपयोगकर्ता डाउनलोड बटन पर क्लिक करता है और रंग वह / वह चुना है के साथ उत्पन्न सीएसएस फ़ाइल हो जाता है।

मुद्दा - मैं सीएसएस फ़ाइल डाउनलोड करने में सक्षम हूँ, लेकिन मैं अलग अलग रंग के लिए आदानों को बदलने के बावजूद मूल मूल्यों हो रही है।

मैंने क्या किया

सीएसएस फ़ाइल डाउनलोड किया जा रहा है पहले से मौजूद है और रंग है कि विभिन्न तत्वों के अनुरूप सीएसएस चर के माध्यम से किया जाता है के सभी।

मैं अद्यतन करने कर रहा हूँ निम्नलिखित कार्य करके लाइव बदल जाता है।

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 चरों को पकड़ा और उन्हें अपने वास्तविक मूल्य (हेक्स रंग मान) के साथ बदल दिया।

उसके बाद, मैं वापसी मान (चर के बिना नई स्टाइलशीट) हो गया और डेटा यूआरआई के लिए यह निर्धारित किया है।

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

परिणाम

मैं पृष्ठ पर रंग आदानों के भीतर बदलने वाले रंगों के बावजूद स्टाइलशीट की प्रारंभिक रंग मान मिलता है। तो सीएसएस फ़ाइल नए रंग के साथ अद्यतन नहीं किया जा रहा है इससे पहले कि मैं फ़ाइल डाउनलोड करें।

13/01/2020 को 23:54
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
0

आप PHP का उपयोग एक नया पृष्ठ के लिए मान प्रदान कर सकता है। चलो आप रंग चुना है आप फिर एक बटन है कि "उत्पन्न" "उत्पन्न पृष्ठ" पर ले जाता है को क्लिक करें चाहते हैं।

मूल्यों सीधे HTML में पारित कर दिया जाएगा और आप के बजाय उत्पन्न पृष्ठ से डाउनलोड होगा।

यदि आप निश्चित रूप से पीएचपी पता है, आप इसे कैसे हल कर सकते हैं पर सिर्फ एक सुझाव है।

(टिप्पणी होगा, लेकिन प्रतिष्ठा की वजह से नहीं कर सकते हैं)

14/01/2020 को 00:20
का स्रोत उपयोगकर्ता

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