github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

update docs theme switcher

pull/7354/head
Leopoldthecoder 2017-10-04 21:20:09 +08:00 committed by 杨奕
parent e2be799e6d
commit 88811bd14e
1 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
examples/components/theme-picker.vue
View File

@ -28,7 +28,8 @@
export default { export default {
data() { data() {
return { return {
chalk: '', chalk: '', // content of theme-chalk css
docs: '', // content of docs css
theme: ORIGINAL_THEME theme: ORIGINAL_THEME
}; };
}, },
@ -38,29 +39,43 @@
if (typeof val !== 'string') return; if (typeof val !== 'string') return;
const themeCluster = this.getThemeCluster(val.replace('#', '')); const themeCluster = this.getThemeCluster(val.replace('#', ''));
const originalCluster = this.getThemeCluster(oldVal.replace('#', '')); const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
const handler = () => { const getHandler = (text, id) => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')); return () => {
let newStyle = this.updateStyle(this.chalk, originalCluster, themeCluster); const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));
let newStyle = this.updateStyle(text, originalCluster, themeCluster);
let styleTag = document.getElementById('theme-style'); let styleTag = document.getElementById(id);
if (!styleTag) { if (!styleTag) {
styleTag = document.createElement('style'); styleTag = document.createElement('style');
styleTag.setAttribute('id', 'theme-style'); styleTag.setAttribute('id', id);
document.head.appendChild(styleTag); document.head.appendChild(styleTag);
} }
styleTag.innerText = newStyle; styleTag.innerText = newStyle;
};
}; };
const chalkHandler = getHandler(this.chalk, 'chalk-style');
const docsHandler = getHandler(this.docs, 'docs-style');
if (!this.chalk) { if (!this.chalk) {
this.getChalkString(handler); this.getCSSString(`https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`, chalkHandler);
} else { } else {
handler(); chalkHandler();
}
if (!this.docs) {
const links = [].filter.call(document.querySelectorAll('link'), link => {
return /docs\..+\.css/.test(link.href || '');
});
links[0] && this.getCSSString(links[0].href, docsHandler);
} else {
docsHandler();
} }
const styles = [].slice.call(document.querySelectorAll('style')) const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => { .filter(style => {
const text = style.innerText; const text = style.innerText;
return new RegExp(oldVal).test(text) && !/Chalk Variables/.test(text); return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);
}); });
styles.forEach(style => { styles.forEach(style => {
const { innerText } = style; const { innerText } = style;
@ -79,7 +94,7 @@
return newStyle; return newStyle;
}, },
getChalkString(callback) { getCSSString(url, callback) {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) { if (xhr.readyState === 4 && xhr.status === 200) {
@ -87,7 +102,7 @@
callback(); callback();
} }
}; };
xhr.open('GET', `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`); xhr.open('GET', url);
xhr.send(); xhr.send();
}, },