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"
}
},
"bootswatch": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.5.0.tgz",
"integrity": "sha512-kAfYTTWIsgUOA5nybJNM4yvOpwxm37eIb1DFZlD5jLgPttK+bLJTt9UpKWAoMQZRBQbWfC1O1w1P5PGU7lz83Q=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

View File

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

View File

@ -43,7 +43,7 @@ export default {
updated() {
if (this.supportsLocalStorage) {
const { theme } = window.localStorage;
console.log('theme', window.localStorage.theme);
console.log('theme ', window.localStorage.theme);
if (theme) {
console.log('Theme found in localstorage', theme);
this.setTheme(theme);
@ -52,25 +52,39 @@ export default {
},
methods: {
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) {
// Change the stylesheet to a different cdn
if (this.activeTheme === theme) {
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(
'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);
}
// eslint-disable-next-line no-unused-expressions
// import(`bootswatch/dist/${theme}/bootstrap.min.css`);
console.log(stylesheet);
// Save the theme as localstorage
if (this.supportsLocalStorage) {
@ -85,6 +99,7 @@ export default {
.then((res) => {
const { themes } = res.data;
this.themes = themes;
console.log(themes);
})
.catch((error) => {
console.log(error);