Simon Vieille
135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<template>
|
|
<template v-if="display && hasApps">
|
|
<PageLoader v-if="hasPageLoader" />
|
|
<TopWideMenu
|
|
v-if="display === 'big-menu'"
|
|
:open="isOpen"
|
|
@close="closeMenu"
|
|
/>
|
|
<SideMenuWithCategories
|
|
v-else-if="display === 'side-with-categories'"
|
|
:open="isOpen"
|
|
@close="closeMenu"
|
|
/>
|
|
<SimpleSideMenu
|
|
v-else-if="display === 'simple-side-menu'"
|
|
:open="isOpen"
|
|
@close="closeMenu"
|
|
@open="openMenu"
|
|
@toggle="toggleMenu(!isOpen)"
|
|
/>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useConfigStore } from '../store/config.js'
|
|
import { useNavStore } from '../store/nav.js'
|
|
import { createElement } from '../lib/dom.js'
|
|
import { translate as t } from '@nextcloud/l10n'
|
|
|
|
import SimpleSideMenu from './SimpleSideMenu'
|
|
import TopWideMenu from './TopWideMenu'
|
|
import SideMenuWithCategories from './SideMenuWithCategories'
|
|
import PageLoader from '../components/PageLoader'
|
|
|
|
const config = ref(null)
|
|
const configStore = useConfigStore()
|
|
const navStore = useNavStore()
|
|
const display = ref(null)
|
|
const hasPageLoader = ref(false)
|
|
const isOpen = ref(false)
|
|
const hasApps = ref(false)
|
|
const openerHover = ref(false)
|
|
|
|
const toggleMenu = (value) => {
|
|
isOpen.value = value
|
|
}
|
|
|
|
const openMenu = () => {
|
|
toggleMenu(true)
|
|
}
|
|
|
|
const closeMenu = () => {
|
|
toggleMenu(false)
|
|
}
|
|
|
|
const createOpener = () => {
|
|
const nextcloud = document.querySelector('#nextcloud')
|
|
const logo = document.querySelector('.header-left .logo, .header-start .logo')
|
|
|
|
if (!nextcloud || !logo) {
|
|
return
|
|
}
|
|
|
|
if (logo.parentNode !== nextcloud) {
|
|
nextcloud.appendChild(logo)
|
|
}
|
|
|
|
const opener = createElement('button', {
|
|
class: 'side-menu-opener',
|
|
'arial-label': t('side_menu', 'Toggle the menu'),
|
|
html: `<span>${t('side_menu', 'Toggle the menu')}</span>`,
|
|
})
|
|
|
|
if (config.value['opener-position'] === 'before') {
|
|
nextcloud.parentNode.insertBefore(opener, nextcloud)
|
|
} else {
|
|
nextcloud.parentNode.insertBefore(opener, nextcloud.nextSibling)
|
|
}
|
|
|
|
opener.addEventListener('click', () => toggleMenu(true), true)
|
|
|
|
if (openerHover.value) {
|
|
opener.addEventListener('mouseenter', () => toggleMenu(true), true)
|
|
}
|
|
}
|
|
|
|
const createLoader = () => {
|
|
const loader = createElement('div', { id: 'side-menu-loader' })
|
|
const bar = createElement('div', { id: 'side-menu-loader-bar' })
|
|
|
|
loader.appendChild(bar)
|
|
document.querySelector('body').appendChild(loader)
|
|
|
|
let pageLoaderValue = 0
|
|
|
|
window.addEventListener('beforeunload', () => {
|
|
setInterval(() => {
|
|
pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
|
|
pageLoaderValue = Math.min(pageLoaderValue + 0.2, 100)
|
|
}, 25)
|
|
})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
hasApps.value = (await navStore.getApps()).length > 0
|
|
|
|
config.value = await configStore.getConfig()
|
|
|
|
if (config.value['big-menu']) {
|
|
display.value = 'big-menu'
|
|
} else if (config.value['side-with-categories']) {
|
|
display.value = 'side-with-categories'
|
|
} else {
|
|
display.value = 'simple-side-menu'
|
|
}
|
|
|
|
hasPageLoader.value = config.value['loader-enabled']
|
|
openerHover.value = config.value['opener-hover']
|
|
|
|
if (hasApps.value) {
|
|
createOpener()
|
|
}
|
|
|
|
window.document.addEventListener('keydown', (e) => {
|
|
const key = e.key || e.keyCode
|
|
|
|
if ((key === 'o' || key === 79) && e.ctrlKey === true) {
|
|
e.preventDefault()
|
|
toggleMenu(!isOpen.value)
|
|
}
|
|
})
|
|
})
|
|
</script>
|