frequi_origin/src/components/BootswatchThemeSelect.vue

147 lines
4.9 KiB
Vue
Raw Normal View History

2020-05-22 21:02:17 +00:00
<template>
<div>
<b-nav-item-dropdown
v-if="!simple"
2020-05-22 21:02:17 +00:00
id="my-nav-dropdown"
text="Theme"
toggle-class="nav-link-custom"
right
lazy
>
<b-dropdown-item v-if="themeList.length === 0">
<b-spinner small></b-spinner> Loading Themes...
</b-dropdown-item>
<!-- TODO Add v-b-tooltip.hover.right=="{ variant: 'className' }" for tooltip class rendered from bootswatch-->
2020-05-22 21:02:17 +00:00
<b-dropdown-item-button
v-for="(theme, key) in themeList"
2020-05-22 21:02:17 +00:00
:key="key"
v-b-tooltip.hover.right
2020-08-31 15:43:44 +00:00
:active="activeTheme === theme.name"
:title="theme.description"
:name="theme.name"
2020-08-31 15:43:44 +00:00
@click="handleClick"
>{{ theme.name }}{{ theme.dark ? ' [dark]' : '' }}</b-dropdown-item-button
>
2020-05-22 21:02:17 +00:00
</b-nav-item-dropdown>
<b-link v-else variant="outline-primary" class="nav-link" @click="toggleNight">
<ThemeLightDark :size="16" />
</b-link>
2020-05-22 21:02:17 +00:00
</div>
</template>
<script lang="ts">
2022-07-07 18:44:19 +00:00
import { defineComponent, ref, onMounted } from 'vue';
2020-05-22 21:02:17 +00:00
import axios from 'axios';
import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
2021-03-08 06:46:40 +00:00
import { FTHTMLStyleElement } from '@/types/styleElement';
import { useSettingsStore } from '@/stores/settings';
2022-04-26 20:00:21 +00:00
import { ThemeType } from '@/shared/themes';
2020-05-22 21:02:17 +00:00
2022-04-17 08:07:48 +00:00
export default defineComponent({
2020-08-31 15:43:44 +00:00
name: 'BootswatchThemeSelect',
components: { ThemeLightDark },
props: {
simple: {
type: Boolean,
default: true,
},
},
2022-04-17 08:07:48 +00:00
setup(props) {
const activeTheme = ref('');
2022-04-26 20:00:21 +00:00
const themeList = ref<ThemeType[]>([]);
const settingsStore = useSettingsStore();
2022-04-17 08:07:48 +00:00
const setTheme = (themeName) => {
// If theme is already active, do nothing.
2022-04-17 08:07:48 +00:00
if (activeTheme.value === themeName) {
2020-05-22 21:02:17 +00:00
return;
}
if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
const styles = document.getElementsByTagName('style');
const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
document.documentElement.setAttribute(
'data-theme',
2020-12-29 09:52:14 +00:00
themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
);
2020-07-26 09:16:40 +00:00
// Reset all bootswatch styles
bw.forEach((style, index) => {
2021-03-08 06:46:40 +00:00
(bw[index] as FTHTMLStyleElement).disabled = true;
});
2022-04-17 08:07:48 +00:00
if (props.simple && activeTheme.value) {
// Only transition if simple mode is active
document.documentElement.classList.add('ft-theme-transition');
window.setTimeout(() => {
document.documentElement.classList.remove('ft-theme-transition');
}, 1000);
}
2020-07-26 09:16:40 +00:00
} else {
// Dynamic import for a different theme, to avoid loading ALL themes.
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => {
console.log('theme', mod);
document.documentElement.removeAttribute('data-theme');
2020-07-26 09:16:40 +00:00
const styles = document.getElementsByTagName('style');
const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
2020-07-26 09:16:40 +00:00
bw.forEach((style, index) => {
if (!style.id) {
// If its a style that was just imported and hasn't been assigned an id.
bw[index].id = themeName;
} else if (style.id === themeName) {
// If it's a style that has been imported already.
2021-03-08 06:46:40 +00:00
(bw[index] as FTHTMLStyleElement).disabled = false;
2020-07-26 09:16:40 +00:00
} else {
// All other style themes should be disabled.
2021-03-08 06:46:40 +00:00
(bw[index] as FTHTMLStyleElement).disabled = true;
2020-07-26 09:16:40 +00:00
}
});
});
}
2020-05-22 21:02:17 +00:00
// Save the theme as localstorage
settingsStore.currentTheme = themeName;
2022-04-17 08:07:48 +00:00
activeTheme.value = themeName;
};
onMounted(() => {
if (window.localStorage.theme) setTheme(window.localStorage.theme);
});
const handleClick = (e) => {
setTheme(e.target.name.trim());
};
const toggleNight = () => {
setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
};
const fetchApi = () => {
// Fetches boostswatch api and dynamically sets themes.
// Not used, but useful for updating the static array of themes if bootswatch dependency is outdated.
2020-05-22 21:02:17 +00:00
axios
.get('https://bootswatch.com/api/4.json')
// .then((res) => {
// const { themes } = res.data;
// this.themes = themes;
// Use this code in the browser console and copy and paste the filteredThemes into this.themes
// console.log(themes);
// const filteredThemes = [];
// themes.forEach((item) =>
// filteredThemes.push({ name: item.name, description: item.description }),
// );
// })
2020-05-22 21:02:17 +00:00
.catch((error) => {
2020-12-06 08:44:58 +00:00
console.error(error);
2020-05-22 21:02:17 +00:00
});
2022-04-17 08:07:48 +00:00
};
return {
activeTheme,
themeList,
setTheme,
handleClick,
toggleNight,
fetchApi,
};
2020-05-22 21:02:17 +00:00
},
});
2020-05-22 21:02:17 +00:00
</script>
<style scoped></style>