2020-08-06 15:00:59 +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/>.
|
|
|
|
-->
|
|
|
|
<template>
|
2020-08-11 10:34:06 +02:00
|
|
|
<div id="side-menu" class="side-menu-big">
|
|
|
|
<div class="side-menu-header">
|
2020-08-19 11:41:10 +02:00
|
|
|
<button class="side-menu-opener side-menu-closer"></button>
|
|
|
|
<button class="side-menu-opener"></button>
|
2020-08-11 10:34:06 +02:00
|
|
|
</div>
|
2020-08-06 15:00:59 +02:00
|
|
|
|
2020-08-11 13:34:36 +02:00
|
|
|
<div class="side-menu-categories-wrapper">
|
|
|
|
<div class="side-menu-categories">
|
|
|
|
<div class="side-menu-category" v-for="category in items">
|
|
|
|
<h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2>
|
2020-08-11 10:34:06 +02:00
|
|
|
|
2020-08-11 13:34:36 +02:00
|
|
|
<ul class="side-menu-apps-list">
|
|
|
|
<li v-bind:class="{'side-menu-app': true, 'active': activeApp === appId}" v-for="(app, appId) in category.apps">
|
2020-09-11 13:23:40 +02:00
|
|
|
<a v-bind:href="app.href" :target="targetBlank ? '_blank' : undefined" v-bind:title="app.name">
|
2020-08-11 13:34:36 +02:00
|
|
|
<img class="side-menu-app-icon" v-bind:src="app.icon"></span>
|
|
|
|
<span class="side-menu-app-text" v-html="app.name"></span>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-08-06 15:00:59 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import trim from 'trim'
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'SideMenuBig',
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
items: [],
|
2020-08-11 13:34:36 +02:00
|
|
|
activeApp: null,
|
2020-09-11 13:23:40 +02:00
|
|
|
targetBlank: false,
|
2020-08-06 15:00:59 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
retrieveApps() {
|
|
|
|
this.apps = []
|
2020-08-11 13:34:36 +02:00
|
|
|
let that = this
|
2020-08-06 15:00:59 +02:00
|
|
|
|
2020-08-11 13:34:36 +02:00
|
|
|
axios
|
|
|
|
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
|
|
|
.then(function(response) {
|
|
|
|
that.items = response.data.items
|
2020-08-06 15:00:59 +02:00
|
|
|
|
2020-08-13 16:33:02 +02:00
|
|
|
let apps = []
|
2020-08-12 14:06:52 +02:00
|
|
|
|
2020-08-13 16:33:02 +02:00
|
|
|
for (let category of that.items) {
|
2020-08-18 14:39:45 +02:00
|
|
|
for (let a in category.apps) {
|
|
|
|
apps.push(category.apps[a])
|
2020-08-13 16:33:02 +02:00
|
|
|
}
|
|
|
|
}
|
2020-08-12 14:06:52 +02:00
|
|
|
|
|
|
|
jQuery('body').trigger('side-menu.apps', [apps])
|
2020-08-11 13:34:36 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
retrieveActiveApp() {
|
|
|
|
let activeAppLink = document.querySelector('#appmenu a.active')
|
|
|
|
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
|
|
|
},
|
2020-08-06 15:00:59 +02:00
|
|
|
},
|
|
|
|
mounted() {
|
2020-09-11 13:23:40 +02:00
|
|
|
this.targetBlank = document.querySelector('#side-menu-container').getAttribute('data-targetblank') == 1;
|
|
|
|
|
2020-08-06 15:00:59 +02:00
|
|
|
this.retrieveApps()
|
2020-08-11 13:34:36 +02:00
|
|
|
this.retrieveActiveApp()
|
2020-08-06 15:00:59 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|