Moving cdn architecutre to bootswatch module

This commit is contained in:
Paul D. Mendes 2020-05-23 01:42:58 +04:00
parent 013fa93ac9
commit 6510b40939
3 changed files with 32 additions and 11 deletions

5
package-lock.json generated
View File

@ -2509,6 +2509,11 @@
"vue-functional-data-merge": "^3.1.0" "vue-functional-data-merge": "^3.1.0"
} }
}, },
"bootswatch": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.5.0.tgz",
"integrity": "sha512-kAfYTTWIsgUOA5nybJNM4yvOpwxm37eIb1DFZlD5jLgPttK+bLJTt9UpKWAoMQZRBQbWfC1O1w1P5PGU7lz83Q=="
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

View File

@ -12,6 +12,7 @@
"axios": "^0.19.2", "axios": "^0.19.2",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"bootstrap-vue": "^2.14.0", "bootstrap-vue": "^2.14.0",
"bootswatch": "^4.5.0",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",

View File

@ -52,25 +52,39 @@ export default {
}, },
methods: { methods: {
handleClick(e) { handleClick(e) {
this.setTheme(e.target.value); // this.setTheme(e.target.value);
this.setTheme(e.target.innerText.toLowerCase().trim());
// console.log(e.target);
}, },
setTheme(theme) { setTheme(theme) {
// Change the stylesheet to a different cdn // Change the stylesheet to a different cdn
if (this.activeTheme === theme) { if (this.activeTheme === theme) {
return; return;
} }
// const stylesheet = document.querySelector(
// 'link[rel="stylesheet"][href$="/bootstrap.min.css"]',
// );
// if (stylesheet) {
// stylesheet.href = theme;
// } else {
// const link = document.createElement('link');
// link.href = theme;
// link.rel = 'stylesheet';
// link.title = 'bootswatch-theme';
// document.body.append(link);
// }
// const cdn = import(`bootswatch/dist/${theme}/bootstrap.min.css`);
// different
const stylesheet = document.querySelector( const stylesheet = document.querySelector(
'link[rel="stylesheet"][href$="/bootstrap.min.css"]', 'link[rel="stylesheet"][href$="/bootstrap.min.css"]',
); );
if (stylesheet) { // eslint-disable-next-line no-unused-expressions
stylesheet.href = theme; // import(`bootswatch/dist/${theme}/bootstrap.min.css`);
} else {
const link = document.createElement('link'); console.log(stylesheet);
link.href = theme;
link.rel = 'stylesheet';
link.title = 'bootswatch-theme';
document.body.append(link);
}
// Save the theme as localstorage // Save the theme as localstorage
if (this.supportsLocalStorage) { if (this.supportsLocalStorage) {
@ -85,6 +99,7 @@ export default {
.then((res) => { .then((res) => {
const { themes } = res.data; const { themes } = res.data;
this.themes = themes; this.themes = themes;
console.log(themes);
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);