2020-03-29 13:47:07 +02:00
|
|
|
<!--
|
|
|
|
@license GNU AGPL version 3 or any later version
|
|
|
|
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
|
|
it under the terms of the GNU Affero General Public License as
|
|
|
|
published by the Free Software Foundation, either version 3 of the
|
|
|
|
License, or (at your option) any later version.
|
|
|
|
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
GNU Affero General Public License for more details.
|
|
|
|
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
-->
|
2020-03-28 17:40:53 +01:00
|
|
|
<template>
|
2020-03-28 23:45:27 +01:00
|
|
|
<div id="side-menu">
|
|
|
|
<div class="side-menu-header">
|
2020-10-16 11:04:03 +02:00
|
|
|
<SettingsButton
|
|
|
|
v-if="settings"
|
|
|
|
v-bind:href="settings.href"
|
|
|
|
v-bind:label="settings.name"
|
|
|
|
v-bind:avatar="settings.avatar" />
|
2020-10-15 15:47:28 +02:00
|
|
|
|
2020-10-16 11:04:03 +02:00
|
|
|
<OpenerButton />
|
2020-10-15 15:46:59 +02:00
|
|
|
|
2020-12-03 13:33:28 +01:00
|
|
|
<Logo
|
|
|
|
v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
|
|
|
v-bind:image="logo"
|
|
|
|
v-bind:link="logoLink"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Logo
|
|
|
|
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
|
|
|
v-bind:image="avatar"
|
|
|
|
v-bind:link="logoLink"
|
|
|
|
/>
|
2020-03-28 23:45:27 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<ul class="side-menu-apps-list">
|
2020-10-16 11:04:03 +02:00
|
|
|
<SideMenuApp
|
|
|
|
v-for="app in apps"
|
|
|
|
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
|
|
|
v-bind:icon="app.icon"
|
|
|
|
v-bind:label="app.name"
|
|
|
|
v-bind:href="app.href"
|
2021-02-09 16:50:16 +01:00
|
|
|
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
2020-10-16 11:04:03 +02:00
|
|
|
/>
|
2020-03-28 23:45:27 +01:00
|
|
|
</ul>
|
|
|
|
</div>
|
2020-03-28 17:40:53 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-05-12 09:25:43 +02:00
|
|
|
import trim from 'trim'
|
2020-09-20 20:56:36 +02:00
|
|
|
import axios from 'axios'
|
2020-10-16 11:04:03 +02:00
|
|
|
import OpenerButton from './OpenerButton'
|
|
|
|
import SettingsButton from './SettingsButton'
|
|
|
|
import SideMenuApp from './SideMenuApp'
|
|
|
|
import Logo from './Logo'
|
2020-05-12 09:25:43 +02:00
|
|
|
|
2020-03-28 17:40:53 +01:00
|
|
|
export default {
|
2020-03-28 23:45:27 +01:00
|
|
|
name: 'SideMenu',
|
2020-10-16 11:04:03 +02:00
|
|
|
components: {
|
|
|
|
SettingsButton,
|
|
|
|
OpenerButton,
|
|
|
|
SideMenuApp,
|
|
|
|
Logo,
|
|
|
|
},
|
2020-03-28 23:45:27 +01:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
apps: [],
|
2020-05-09 14:30:24 +02:00
|
|
|
logo: null,
|
2020-12-03 13:33:28 +01:00
|
|
|
logoLink: null,
|
2020-09-21 09:48:49 +02:00
|
|
|
avatar: null,
|
2020-05-09 16:37:17 +02:00
|
|
|
forceLightIcon: false,
|
2020-09-20 20:56:36 +02:00
|
|
|
targetBlankApps: [],
|
2020-10-15 15:46:59 +02:00
|
|
|
settings: null,
|
2020-03-28 23:45:27 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
retrieveApps() {
|
2020-05-09 16:37:17 +02:00
|
|
|
this.apps = []
|
2020-04-26 21:36:54 +02:00
|
|
|
const links = document.querySelectorAll('#appmenu a')
|
2020-08-13 13:05:38 +02:00
|
|
|
const menu = document.querySelector('#appmenu')
|
2020-08-25 19:06:01 +02:00
|
|
|
let menuIsHidden = true
|
2020-08-13 13:05:38 +02:00
|
|
|
|
2020-08-25 12:18:39 +02:00
|
|
|
if (menu) {
|
2020-08-25 19:06:01 +02:00
|
|
|
menuIsHidden = window.getComputedStyle(menu, null).getPropertyValue('display') === 'none'
|
2020-08-25 12:18:39 +02:00
|
|
|
}
|
2020-08-13 13:05:38 +02:00
|
|
|
|
2020-03-28 23:45:27 +01:00
|
|
|
for (let element of links) {
|
|
|
|
let href = element.getAttribute('href')
|
2020-05-12 19:45:46 +02:00
|
|
|
var parent = element.parentNode
|
2020-03-28 23:45:27 +01:00
|
|
|
|
2020-05-12 19:45:46 +02:00
|
|
|
if (!parent) {
|
|
|
|
continue
|
|
|
|
}
|
|
|
|
|
|
|
|
var dataId = parent.getAttribute('data-id')
|
|
|
|
dataId = dataId !== null ? dataId : ''
|
|
|
|
|
2020-08-13 13:05:38 +02:00
|
|
|
if (!parent.classList.contains('app-hidden') && !menuIsHidden) {
|
2020-05-12 19:45:46 +02:00
|
|
|
continue
|
2020-05-09 16:37:17 +02:00
|
|
|
}
|
2020-05-09 15:53:25 +02:00
|
|
|
|
2020-03-28 23:45:27 +01:00
|
|
|
if (href !== '#') {
|
2020-04-25 16:29:52 +02:00
|
|
|
let svg = element.querySelector('svg').outerHTML
|
2020-04-25 14:25:51 +02:00
|
|
|
|
2020-05-09 14:00:11 +02:00
|
|
|
svg = svg
|
2020-05-09 16:37:17 +02:00
|
|
|
.replace(/(height|width)="20"/, '')
|
|
|
|
.replace('id="invertMenuMain', 'id="invertSideMenu')
|
|
|
|
.replace('url(#invertMenuMain', 'url(#invertSideMenu')
|
2020-04-25 14:25:51 +02:00
|
|
|
|
2020-05-09 16:37:17 +02:00
|
|
|
if (this.forceLightIcon) {
|
|
|
|
svg = svg.replace(/filter="url[^"]+"/, '')
|
|
|
|
}
|
2020-05-09 14:30:24 +02:00
|
|
|
|
2020-03-28 23:45:27 +01:00
|
|
|
this.apps.push({
|
2020-09-20 20:56:36 +02:00
|
|
|
id: dataId,
|
2020-03-28 23:45:27 +01:00
|
|
|
href: href,
|
2020-05-12 09:25:43 +02:00
|
|
|
name: trim(element.querySelector('span').innerHTML),
|
2020-04-25 14:25:51 +02:00
|
|
|
icon: svg,
|
2020-03-28 23:45:27 +01:00
|
|
|
active: element.classList.contains('active')
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2020-04-26 21:36:54 +02:00
|
|
|
|
2020-05-09 16:37:17 +02:00
|
|
|
(function(apps) {
|
|
|
|
window.setTimeout(function() {
|
2021-10-28 13:50:16 +02:00
|
|
|
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
|
|
|
detail: {apps: apps},
|
|
|
|
}));
|
2020-05-09 16:37:17 +02:00
|
|
|
}, 1000)
|
|
|
|
})(this.apps)
|
2020-03-28 23:45:27 +01:00
|
|
|
},
|
2020-09-20 20:56:36 +02:00
|
|
|
|
|
|
|
retrieveConfig() {
|
|
|
|
let that = this
|
|
|
|
|
|
|
|
axios
|
|
|
|
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
|
|
|
.then(function(response) {
|
|
|
|
const config = response.data
|
|
|
|
|
|
|
|
that.targetBlankApps = config['target-blank-apps']
|
|
|
|
that.forceLightIcon = config['force-light-icon']
|
|
|
|
that.avatar = config['avatar']
|
|
|
|
that.logo = config['logo']
|
2020-12-03 13:33:28 +01:00
|
|
|
that.logoLink = config['logo-link']
|
2020-10-15 15:46:59 +02:00
|
|
|
that.settings = config['settings']
|
2020-09-20 20:56:36 +02:00
|
|
|
});
|
2020-03-28 23:45:27 +01:00
|
|
|
},
|
|
|
|
},
|
2020-05-09 14:30:24 +02:00
|
|
|
mounted() {
|
2020-09-20 20:56:36 +02:00
|
|
|
this.retrieveConfig()
|
2020-05-09 14:30:24 +02:00
|
|
|
this.retrieveApps()
|
2020-03-28 23:45:27 +01:00
|
|
|
|
|
|
|
const menu = document.querySelector('#appmenu')
|
2020-04-25 16:04:54 +02:00
|
|
|
|
2020-04-25 16:29:52 +02:00
|
|
|
if (menu) {
|
2020-05-09 14:30:24 +02:00
|
|
|
const config = {attributes: true, childList: true, subtree: true}
|
|
|
|
const observer = new MutationObserver(this.retrieveApps)
|
|
|
|
observer.observe(menu, config)
|
2020-04-25 16:29:52 +02:00
|
|
|
}
|
2020-03-28 23:45:27 +01:00
|
|
|
}
|
2020-03-28 17:40:53 +01:00
|
|
|
}
|
|
|
|
</script>
|