MintApps Javascript client application
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

89 lines
2.4 KiB

<template>
<div
class="container-main"
:data-theme="theme"
:data-display="display"
>
<NavbarTop/>
<NavbarBottom/>
<router-view/>
</div>
</template>
<script>
import { onMounted, ref, provide, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import NavbarTop from '@/main/components/NavbarTop.vue'
import NavbarBottom from '@/main/components/NavbarBottom.vue'
import color from '@/main/js/color.js'
import consts from '@/consts.js'
export default {
components: { NavbarTop, NavbarBottom },
setup () {
const router = useRouter()
const theme = ref('light')
const colors = ref(color.getColors('light'))
const display = ref('normal')
const config = ref({})
const { locale } = useI18n({ useScope: 'global' })
provide('theme', theme)
provide('config', config)
provide('display', display)
provide('locale', locale)
onMounted(() => {
// init theme and start listener
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme.value = 'dark'
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
theme.value = e.matches ? 'dark' : 'light'
})
// get user locale
const nl = navigator.language
if (nl && nl.length > 1) locale.value = nl.substring(0, 2)
if (!locale.value || consts.LOCALES.indexOf(locale.value) < 0) locale.value = consts.DEFAULT_LOCALE
document.documentElement.setAttribute('lang', locale.value)
// try to load config from server
if (document.URL.startsWith('http')) {
const xhr = new XMLHttpRequest()
xhr.open('GET', './config.json', true)
xhr.responseType = 'json'
xhr.onload = () => {
if (xhr.status) config.value = xhr.response
}
xhr.send()
}
})
// watch locale changes
watch(locale, () => {
document.documentElement.setAttribute('lang', locale.value)
})
// watch for theme changes
watch(theme, () => {
colors.value = color.getColors(theme.value)
})
// handle search event
function doSearch (event) {
router.push({ name: 'main-search', params: { search: event.search } })
}
return { doSearch, theme, display }
}
}
</script>
<style scoped>
.contrast-0 { filter: contrast(0);
transition: filter 0.5s; }
.contrast-1 { filter: contrast(1);
transition: filter 0.5s; }
</style>