forked from deblan/side_menu
update indentation (4 spaces -> 2 spaces)
This commit is contained in:
parent
1c1fe946cf
commit
585aec5ee2
|
@ -15,168 +15,168 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<ul class="side-menu-setting-list">
|
<ul class="side-menu-setting-list">
|
||||||
<li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
|
<li v-for="item in values" class="side-menu-setting-list-item" v-on:click="showEditForm(item)">
|
||||||
<span v-text="item.en"></span>
|
<span v-text="item.en"></span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<Actions>
|
<NcActions>
|
||||||
<ActionButton @click="showAddForm" icon="icon-add"></ActionButton>
|
<NcActionButton @click="showAddForm" icon="icon-add"></NcActionButton>
|
||||||
</Actions>
|
</NcActions>
|
||||||
|
|
||||||
<Modal v-if="addForm" @close="hideAddForm">
|
<NcModal v-if="addForm" @close="hideAddForm">
|
||||||
<div class="modal__content">
|
<div class="modal__content">
|
||||||
<div v-for="lang in langs">
|
<div v-for="lang in langs">
|
||||||
<span class="lang" v-text="lang"></span>
|
<span class="lang" v-text="lang"></span>
|
||||||
<input type="text" v-model="newValue[lang]" required>
|
<input type="text" v-model="newValue[lang]" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Actions>
|
<NcActions>
|
||||||
<ActionButton @click="saveAdd" icon="icon-checkmark"></ActionButton>
|
<NcActionButton @click="saveAdd" icon="icon-checkmark"></NcActionButton>
|
||||||
</Actions>
|
</NcActions>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</NcModal>
|
||||||
|
|
||||||
<Modal v-if="editForm" @close="hideEditForm">
|
<NcModal v-if="editForm" @close="hideEditForm">
|
||||||
<div class="modal__content">
|
<div class="modal__content">
|
||||||
<div v-for="lang in langs">
|
<div v-for="lang in langs">
|
||||||
<span class="lang" v-text="lang"></span>
|
<span class="lang" v-text="lang"></span>
|
||||||
<input type="text" v-model="editValue[lang]" required>
|
<input type="text" v-model="editValue[lang]" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pull-right">
|
<div class="pull-right">
|
||||||
<Actions>
|
<NcActions>
|
||||||
<ActionButton @click="removeEdit" icon="icon-delete"></ActionButton>
|
<NcActionButton @click="removeEdit" icon="icon-delete"></NcActionButton>
|
||||||
</Actions>
|
</NcActions>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Actions>
|
<NcActions>
|
||||||
<ActionButton @click="saveEdit" icon="icon-checkmark"></ActionButton>
|
<NcActionButton @click="saveEdit" icon="icon-checkmark"></NcActionButton>
|
||||||
</Actions>
|
</NcActions>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</NcModal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.modal__content {
|
.modal__content {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal__content .lang {
|
.modal__content .lang {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal__content input[type=text] {
|
.modal__content input[type=text] {
|
||||||
width: calc(100% - 85px);
|
width: calc(100% - 85px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-right {
|
.pull-right {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Modal from '@nextcloud/vue/dist/Components/Modal'
|
import NcModal from '@nextcloud/vue/dist/Components/NcModal'
|
||||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
import NcActions from '@nextcloud/vue/dist/Components/NcActions'
|
||||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AdminCategoriesCustom',
|
name: 'AdminCategoriesCustom',
|
||||||
components: {
|
components: {
|
||||||
Modal,
|
NcModal,
|
||||||
Actions,
|
NcActions,
|
||||||
ActionButton,
|
NcActionButton,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
input: null,
|
input: null,
|
||||||
values: [],
|
values: [],
|
||||||
langs: [],
|
langs: [],
|
||||||
addForm: false,
|
addForm: false,
|
||||||
editForm: false,
|
editForm: false,
|
||||||
newValue: {},
|
newValue: {},
|
||||||
editValue: {},
|
editValue: {},
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
this.values = JSON.parse(this.input.value)
|
|
||||||
this.langs = JSON.parse(this.input.getAttribute('data-langs'))
|
|
||||||
},
|
|
||||||
update() {
|
|
||||||
this.input.value = JSON.stringify(this.values)
|
|
||||||
},
|
|
||||||
showAddForm() {
|
|
||||||
this.newValue = {id: 'cat' + Math.random().toString().replace('0.', '')}
|
|
||||||
|
|
||||||
this.addForm = true
|
|
||||||
},
|
|
||||||
showEditForm(value) {
|
|
||||||
this.editValue = {id: value.id}
|
|
||||||
|
|
||||||
for (let i of this.langs) {
|
|
||||||
this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
|
|
||||||
}
|
|
||||||
|
|
||||||
this.editForm = true
|
|
||||||
},
|
|
||||||
saveAdd() {
|
|
||||||
for (let i of this.langs) {
|
|
||||||
if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.values.push(this.newValue)
|
|
||||||
this.update()
|
|
||||||
this.hideAddForm()
|
|
||||||
this.newValue = {}
|
|
||||||
},
|
|
||||||
saveEdit() {
|
|
||||||
for (let i of this.langs) {
|
|
||||||
if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i in this.values) {
|
|
||||||
if (this.values[i].id === this.editValue.id) {
|
|
||||||
this.values[i] = this.editValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.update()
|
|
||||||
this.hideEditForm()
|
|
||||||
},
|
|
||||||
removeEdit() {
|
|
||||||
for (let i in this.values) {
|
|
||||||
if (this.values[i].id === this.editValue.id) {
|
|
||||||
this.values.splice(i, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.update()
|
|
||||||
this.hideEditForm()
|
|
||||||
},
|
|
||||||
hideAddForm() {
|
|
||||||
this.addForm = false
|
|
||||||
},
|
|
||||||
hideEditForm() {
|
|
||||||
this.editForm = false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.input = document.querySelector('input[name="categories-custom"]')
|
|
||||||
this.init()
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.values = JSON.parse(this.input.value)
|
||||||
|
this.langs = JSON.parse(this.input.getAttribute('data-langs'))
|
||||||
|
},
|
||||||
|
update() {
|
||||||
|
this.input.value = JSON.stringify(this.values)
|
||||||
|
},
|
||||||
|
showAddForm() {
|
||||||
|
this.newValue = {id: 'cat' + Math.random().toString().replace('0.', '')}
|
||||||
|
|
||||||
|
this.addForm = true
|
||||||
|
},
|
||||||
|
showEditForm(value) {
|
||||||
|
this.editValue = {id: value.id}
|
||||||
|
|
||||||
|
for (let i of this.langs) {
|
||||||
|
this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
this.editForm = true
|
||||||
|
},
|
||||||
|
saveAdd() {
|
||||||
|
for (let i of this.langs) {
|
||||||
|
if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.values.push(this.newValue)
|
||||||
|
this.update()
|
||||||
|
this.hideAddForm()
|
||||||
|
this.newValue = {}
|
||||||
|
},
|
||||||
|
saveEdit() {
|
||||||
|
for (let i of this.langs) {
|
||||||
|
if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i in this.values) {
|
||||||
|
if (this.values[i].id === this.editValue.id) {
|
||||||
|
this.values[i] = this.editValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
this.hideEditForm()
|
||||||
|
},
|
||||||
|
removeEdit() {
|
||||||
|
for (let i in this.values) {
|
||||||
|
if (this.values[i].id === this.editValue.id) {
|
||||||
|
this.values.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
this.hideEditForm()
|
||||||
|
},
|
||||||
|
hideAddForm() {
|
||||||
|
this.addForm = false
|
||||||
|
},
|
||||||
|
hideEditForm() {
|
||||||
|
this.editForm = false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.input = document.querySelector('input[name="categories-custom"]')
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -77,14 +77,14 @@ export default {
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const ncApps = loadState('core', 'apps', {})
|
const ncApps = loadState('core', 'apps', {})
|
||||||
const that = this
|
const that = this
|
||||||
that.apps = {}
|
that.apps = {}
|
||||||
|
|
||||||
Array.from(window.topMenuApps).forEach((id) => {
|
Array.from(window.topMenuApps).forEach((id) => {
|
||||||
if (ncApps.hasOwnProperty(id)) {
|
if (ncApps.hasOwnProperty(id)) {
|
||||||
that.apps[id] = ncApps[id]
|
that.apps[id] = ncApps[id]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this.observer = new ResizeObserver(this.resize)
|
this.observer = new ResizeObserver(this.resize)
|
||||||
this.observer.observe(this.$el)
|
this.observer.observe(this.$el)
|
||||||
|
|
|
@ -15,11 +15,11 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<button class="side-menu-opener side-menu-closer"></button>
|
<button class="side-menu-opener side-menu-closer"></button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'CloserButton',
|
name: 'CloserButton',
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,28 +15,28 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="side-menu-loader">
|
<div class="side-menu-loader">
|
||||||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g fill="none" fill-rule="evenodd">
|
<g fill="none" fill-rule="evenodd">
|
||||||
<g transform="translate(1 1)" stroke-width="2">
|
<g transform="translate(1 1)" stroke-width="2">
|
||||||
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
||||||
<path d="M36 18c0-9.94-8.06-18-18-18">
|
<path d="M36 18c0-9.94-8.06-18-18-18">
|
||||||
<animateTransform
|
<animateTransform
|
||||||
attributeName="transform"
|
attributeName="transform"
|
||||||
type="rotate"
|
type="rotate"
|
||||||
from="0 18 18"
|
from="0 18 18"
|
||||||
to="360 18 18"
|
to="360 18 18"
|
||||||
dur="1s"
|
dur="1s"
|
||||||
repeatCount="indefinite"/>
|
repeatCount="indefinite"/>
|
||||||
</path>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Loader',
|
name: 'Loader',
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
40
src/Logo.vue
40
src/Logo.vue
|
@ -15,30 +15,30 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div v-bind:class="classes">
|
<div v-bind:class="classes">
|
||||||
<a v-if="link !== null" v-bind:href="link">
|
<a v-if="link !== null" v-bind:href="link">
|
||||||
<img v-bind:src="image" alt="Logo">
|
<img v-bind:src="image" alt="Logo">
|
||||||
</a>
|
</a>
|
||||||
<img v-else v-bind:src="image" alt="Logo">
|
<img v-else v-bind:src="image" alt="Logo">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Logo',
|
name: 'Logo',
|
||||||
props: {
|
props: {
|
||||||
image: {
|
image: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
|
||||||
link: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
classes: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
link: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,11 +15,11 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<button class="side-menu-opener"></button>
|
<button class="side-menu-opener"></button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'OpenerButton',
|
name: 'OpenerButton',
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,33 +15,33 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="side-menu-settings">
|
<div class="side-menu-settings">
|
||||||
<a v-bind:href="href">
|
<a v-bind:href="href">
|
||||||
{{ label }}
|
{{ label }}
|
||||||
|
|
||||||
<span class="avatardiv avatardiv-shown">
|
<span class="avatardiv avatardiv-shown">
|
||||||
<img v-bind:src="avatar" v-bind:alt="name" v-bind:title="name">
|
<img v-bind:src="avatar">
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'SettingsButton',
|
name: 'SettingsButton',
|
||||||
props: {
|
props: {
|
||||||
label: {
|
label: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
|
||||||
href: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
avatar: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
268
src/SideMenu.vue
268
src/SideMenu.vue
|
@ -15,41 +15,41 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="side-menu">
|
<div id="side-menu">
|
||||||
<div class="side-menu-header">
|
<div class="side-menu-header">
|
||||||
<SettingsButton
|
<SettingsButton
|
||||||
v-if="settings"
|
v-if="settings"
|
||||||
v-bind:href="settings.href"
|
v-bind:href="settings.href"
|
||||||
v-bind:label="settings.name"
|
v-bind:label="settings.name"
|
||||||
v-bind:avatar="settings.avatar" />
|
v-bind:avatar="settings.avatar" />
|
||||||
|
|
||||||
<OpenerButton />
|
<OpenerButton />
|
||||||
|
|
||||||
<Logo
|
<Logo
|
||||||
v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}"
|
||||||
v-bind:image="logo"
|
v-bind:image="logo"
|
||||||
v-bind:link="logoLink"
|
v-bind:link="logoLink"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Logo
|
<Logo
|
||||||
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}"
|
||||||
v-bind:image="avatar"
|
v-bind:image="avatar"
|
||||||
v-bind:link="logoLink"
|
v-bind:link="logoLink"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
|
||||||
<SideMenuApp
|
|
||||||
v-for="(app, key) in apps"
|
|
||||||
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
|
||||||
v-bind:key="key"
|
|
||||||
v-bind:icon="app.icon"
|
|
||||||
v-bind:label="app.name"
|
|
||||||
v-bind:href="app.href"
|
|
||||||
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ul class="side-menu-apps-list">
|
||||||
|
<SideMenuApp
|
||||||
|
v-for="(app, key) in apps"
|
||||||
|
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
||||||
|
v-bind:key="key"
|
||||||
|
v-bind:icon="app.icon"
|
||||||
|
v-bind:label="app.name"
|
||||||
|
v-bind:href="app.href"
|
||||||
|
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -61,109 +61,109 @@ import SideMenuApp from './SideMenuApp'
|
||||||
import Logo from './Logo'
|
import Logo from './Logo'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenu',
|
name: 'SideMenu',
|
||||||
components: {
|
components: {
|
||||||
SettingsButton,
|
SettingsButton,
|
||||||
OpenerButton,
|
OpenerButton,
|
||||||
SideMenuApp,
|
SideMenuApp,
|
||||||
Logo,
|
Logo,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
apps: [],
|
apps: [],
|
||||||
logo: null,
|
logo: null,
|
||||||
logoLink: null,
|
logoLink: null,
|
||||||
avatar: null,
|
avatar: null,
|
||||||
forceLightIcon: false,
|
forceLightIcon: false,
|
||||||
targetBlankApps: [],
|
targetBlankApps: [],
|
||||||
settings: null,
|
settings: null,
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
retrieveApps() {
|
|
||||||
this.apps = []
|
|
||||||
const links = document.querySelectorAll('#appmenu a')
|
|
||||||
const menu = document.querySelector('#appmenu')
|
|
||||||
let menuIsHidden = true
|
|
||||||
|
|
||||||
if (menu) {
|
|
||||||
menuIsHidden = window.getComputedStyle(menu, null).getPropertyValue('display') === 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let element of links) {
|
|
||||||
let href = element.getAttribute('href')
|
|
||||||
let parent = element.parentNode
|
|
||||||
|
|
||||||
if (!parent) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
let dataId = parent.getAttribute('data-id')
|
|
||||||
dataId = dataId !== null ? dataId : ''
|
|
||||||
|
|
||||||
if (!parent.classList.contains('app-top-side-menu') && !parent.classList.contains('app-hidden') && !menuIsHidden) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
if (href !== '#') {
|
|
||||||
let svg = element.querySelector('svg').outerHTML
|
|
||||||
|
|
||||||
svg = svg
|
|
||||||
.replace(/(height|width)="20"/, '')
|
|
||||||
.replace('id="invertMenuMain', 'id="invertSideMenu')
|
|
||||||
.replace('url(#invertMenuMain', 'url(#invertSideMenu')
|
|
||||||
|
|
||||||
if (this.forceLightIcon) {
|
|
||||||
svg = svg.replace(/filter="url[^"]+"/, '')
|
|
||||||
}
|
|
||||||
|
|
||||||
this.apps.push({
|
|
||||||
id: dataId,
|
|
||||||
href: href,
|
|
||||||
name: trim(element.querySelector('span').innerHTML),
|
|
||||||
icon: svg,
|
|
||||||
active: element.classList.contains('active')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
(function(apps) {
|
|
||||||
window.setTimeout(function() {
|
|
||||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
|
||||||
detail: {apps: apps},
|
|
||||||
}))
|
|
||||||
}, 1000)
|
|
||||||
})(this.apps)
|
|
||||||
},
|
|
||||||
|
|
||||||
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']
|
|
||||||
that.logoLink = config['logo-link']
|
|
||||||
that.settings = config['settings']
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.retrieveConfig()
|
|
||||||
this.retrieveApps()
|
|
||||||
|
|
||||||
const menu = document.querySelector('#appmenu')
|
|
||||||
|
|
||||||
if (menu) {
|
|
||||||
const config = {attributes: true, childList: true, subtree: true}
|
|
||||||
const observer = new MutationObserver(this.retrieveApps)
|
|
||||||
observer.observe(menu, config)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
retrieveApps() {
|
||||||
|
this.apps = []
|
||||||
|
const links = document.querySelectorAll('#appmenu a')
|
||||||
|
const menu = document.querySelector('#appmenu')
|
||||||
|
let menuIsHidden = true
|
||||||
|
|
||||||
|
if (menu) {
|
||||||
|
menuIsHidden = window.getComputedStyle(menu, null).getPropertyValue('display') === 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let element of links) {
|
||||||
|
let href = element.getAttribute('href')
|
||||||
|
let parent = element.parentNode
|
||||||
|
|
||||||
|
if (!parent) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
let dataId = parent.getAttribute('data-id')
|
||||||
|
dataId = dataId !== null ? dataId : ''
|
||||||
|
|
||||||
|
if (!parent.classList.contains('app-top-side-menu') && !parent.classList.contains('app-hidden') && !menuIsHidden) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
if (href !== '#') {
|
||||||
|
let svg = element.querySelector('svg').outerHTML
|
||||||
|
|
||||||
|
svg = svg
|
||||||
|
.replace(/(height|width)="20"/, '')
|
||||||
|
.replace('id="invertMenuMain', 'id="invertSideMenu')
|
||||||
|
.replace('url(#invertMenuMain', 'url(#invertSideMenu')
|
||||||
|
|
||||||
|
if (this.forceLightIcon) {
|
||||||
|
svg = svg.replace(/filter="url[^"]+"/, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.apps.push({
|
||||||
|
id: dataId,
|
||||||
|
href: href,
|
||||||
|
name: trim(element.querySelector('span').innerHTML),
|
||||||
|
icon: svg,
|
||||||
|
active: element.classList.contains('active')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
(function(apps) {
|
||||||
|
window.setTimeout(function() {
|
||||||
|
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||||
|
detail: {apps: apps},
|
||||||
|
}))
|
||||||
|
}, 1000)
|
||||||
|
})(this.apps)
|
||||||
|
},
|
||||||
|
|
||||||
|
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']
|
||||||
|
that.logoLink = config['logo-link']
|
||||||
|
that.settings = config['settings']
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.retrieveConfig()
|
||||||
|
this.retrieveApps()
|
||||||
|
|
||||||
|
const menu = document.querySelector('#appmenu')
|
||||||
|
|
||||||
|
if (menu) {
|
||||||
|
const config = {attributes: true, childList: true, subtree: true}
|
||||||
|
const observer = new MutationObserver(this.retrieveApps)
|
||||||
|
observer.observe(menu, config)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,38 +15,38 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<li v-bind:class="classes">
|
<li v-bind:class="classes">
|
||||||
<a v-bind:href="href" :target="target" v-bind:title="label">
|
<a v-bind:href="href" :target="target" v-bind:title="label">
|
||||||
<span class="side-menu-app-icon" v-html="icon"></span>
|
<span class="side-menu-app-icon" v-html="icon"></span>
|
||||||
<span class="side-menu-app-text" v-text="label"></span>
|
<span class="side-menu-app-text" v-text="label"></span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenuApp',
|
name: 'SideMenuApp',
|
||||||
props: {
|
props: {
|
||||||
label: {
|
label: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
href: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
classes: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
target: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
target: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,42 +15,42 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="side-menu" class="side-menu-big">
|
<div id="side-menu" class="side-menu-big">
|
||||||
<div class="side-menu-header">
|
<div class="side-menu-header">
|
||||||
<CloserButton />
|
<CloserButton />
|
||||||
|
|
||||||
<SettingsButton
|
<SettingsButton
|
||||||
v-if="settings"
|
v-if="settings"
|
||||||
v-bind:href="settings.href"
|
v-bind:href="settings.href"
|
||||||
v-bind:label="settings.name"
|
v-bind:label="settings.name"
|
||||||
v-bind:avatar="settings.avatar"
|
v-bind:avatar="settings.avatar"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<OpenerButton />
|
<OpenerButton />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="side-menu-categories-wrapper">
|
|
||||||
<div class="side-menu-categories">
|
|
||||||
<Loader v-if="!items.length" />
|
|
||||||
|
|
||||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
|
||||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
|
||||||
<SideMenuBigApp
|
|
||||||
v-for="(app, appId) in category.apps"
|
|
||||||
v-bind:key="appId"
|
|
||||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
|
||||||
v-bind:icon="app.icon"
|
|
||||||
v-bind:label="app.name"
|
|
||||||
v-bind:href="app.href"
|
|
||||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="side-menu-categories-wrapper">
|
||||||
|
<div class="side-menu-categories">
|
||||||
|
<Loader v-if="!items.length" />
|
||||||
|
|
||||||
|
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
||||||
|
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||||
|
|
||||||
|
<ul class="side-menu-apps-list">
|
||||||
|
<SideMenuBigApp
|
||||||
|
v-for="(app, appId) in category.apps"
|
||||||
|
v-bind:key="appId"
|
||||||
|
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||||
|
v-bind:icon="app.icon"
|
||||||
|
v-bind:label="app.name"
|
||||||
|
v-bind:href="app.href"
|
||||||
|
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -62,69 +62,69 @@ import Loader from './Loader'
|
||||||
import SideMenuBigApp from './SideMenuBigApp'
|
import SideMenuBigApp from './SideMenuBigApp'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenuBig',
|
name: 'SideMenuBig',
|
||||||
components: {
|
components: {
|
||||||
SettingsButton,
|
SettingsButton,
|
||||||
OpenerButton,
|
OpenerButton,
|
||||||
CloserButton,
|
CloserButton,
|
||||||
Loader,
|
Loader,
|
||||||
SideMenuBigApp,
|
SideMenuBigApp,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: [],
|
items: [],
|
||||||
activeApp: null,
|
activeApp: null,
|
||||||
targetBlank: false,
|
targetBlank: false,
|
||||||
targetBlankApps: [],
|
targetBlankApps: [],
|
||||||
settings: null,
|
settings: null,
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
retrieveApps() {
|
|
||||||
this.apps = []
|
|
||||||
let that = this
|
|
||||||
|
|
||||||
axios
|
|
||||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
|
||||||
.then(function(response) {
|
|
||||||
that.items = response.data.items
|
|
||||||
|
|
||||||
let apps = []
|
|
||||||
|
|
||||||
for (let category of that.items) {
|
|
||||||
for (let a in category.apps) {
|
|
||||||
apps.push(category.apps[a])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
|
||||||
detail: {apps: apps},
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
retrieveActiveApp() {
|
|
||||||
let activeAppLink = document.querySelector('#appmenu a.active')
|
|
||||||
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
|
||||||
},
|
|
||||||
|
|
||||||
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.settings = config['settings']
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.retrieveConfig()
|
|
||||||
this.retrieveApps()
|
|
||||||
this.retrieveActiveApp()
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
retrieveApps() {
|
||||||
|
this.apps = []
|
||||||
|
let that = this
|
||||||
|
|
||||||
|
axios
|
||||||
|
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||||
|
.then(function(response) {
|
||||||
|
that.items = response.data.items
|
||||||
|
|
||||||
|
let apps = []
|
||||||
|
|
||||||
|
for (let category of that.items) {
|
||||||
|
for (let a in category.apps) {
|
||||||
|
apps.push(category.apps[a])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||||
|
detail: {apps: apps},
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
retrieveActiveApp() {
|
||||||
|
let activeAppLink = document.querySelector('#appmenu a.active')
|
||||||
|
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
||||||
|
},
|
||||||
|
|
||||||
|
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.settings = config['settings']
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.retrieveConfig()
|
||||||
|
this.retrieveApps()
|
||||||
|
this.retrieveActiveApp()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,38 +15,38 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<li v-bind:class="classes">
|
<li v-bind:class="classes">
|
||||||
<a v-bind:href="href" :target="target" v-bind:title="label">
|
<a v-bind:href="href" :target="target" v-bind:title="label">
|
||||||
<img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
|
<img class="side-menu-app-icon" v-bind:src="icon" v-bind:alt="label" />
|
||||||
<span class="side-menu-app-text" v-text="label"></span>
|
<span class="side-menu-app-text" v-text="label"></span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenuBigApp',
|
name: 'SideMenuBigApp',
|
||||||
props: {
|
props: {
|
||||||
label: {
|
label: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
href: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
classes: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
target: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
target: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,40 +15,40 @@ 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/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="side-menu" class="side-menu-with-categories">
|
<div id="side-menu" class="side-menu-with-categories">
|
||||||
<div class="side-menu-header">
|
<div class="side-menu-header">
|
||||||
<SettingsButton
|
<SettingsButton
|
||||||
v-if="settings"
|
v-if="settings"
|
||||||
v-bind:href="settings.href"
|
v-bind:href="settings.href"
|
||||||
v-bind:label="settings.name"
|
v-bind:label="settings.name"
|
||||||
v-bind:avatar="settings.avatar"
|
v-bind:avatar="settings.avatar"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<OpenerButton />
|
<OpenerButton />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="side-menu-categories-wrapper">
|
|
||||||
<div class="side-menu-categories">
|
|
||||||
<Loader v-if="!items.length" />
|
|
||||||
|
|
||||||
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
|
||||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
|
||||||
<SideMenuBigApp
|
|
||||||
v-for="(app, appId) in category.apps"
|
|
||||||
v-bind:key="appId"
|
|
||||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
|
||||||
v-bind:icon="app.icon"
|
|
||||||
v-bind:label="app.name"
|
|
||||||
v-bind:href="app.href"
|
|
||||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="side-menu-categories-wrapper">
|
||||||
|
<div class="side-menu-categories">
|
||||||
|
<Loader v-if="!items.length" />
|
||||||
|
|
||||||
|
<div class="side-menu-category" v-for="(category, key) in items" v-bind:key="key">
|
||||||
|
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||||
|
|
||||||
|
<ul class="side-menu-apps-list">
|
||||||
|
<SideMenuBigApp
|
||||||
|
v-for="(app, appId) in category.apps"
|
||||||
|
v-bind:key="appId"
|
||||||
|
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||||
|
v-bind:icon="app.icon"
|
||||||
|
v-bind:label="app.name"
|
||||||
|
v-bind:href="app.href"
|
||||||
|
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -60,69 +60,69 @@ import Loader from './Loader'
|
||||||
import SideMenuBigApp from './SideMenuBigApp'
|
import SideMenuBigApp from './SideMenuBigApp'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenuWithCategories',
|
name: 'SideMenuWithCategories',
|
||||||
components: {
|
components: {
|
||||||
SettingsButton,
|
SettingsButton,
|
||||||
OpenerButton,
|
OpenerButton,
|
||||||
CloserButton,
|
CloserButton,
|
||||||
Loader,
|
Loader,
|
||||||
SideMenuBigApp,
|
SideMenuBigApp,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: [],
|
items: [],
|
||||||
activeApp: null,
|
activeApp: null,
|
||||||
targetBlank: false,
|
targetBlank: false,
|
||||||
targetBlankApps: [],
|
targetBlankApps: [],
|
||||||
settings: null,
|
settings: null,
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
retrieveApps() {
|
|
||||||
this.apps = []
|
|
||||||
let that = this
|
|
||||||
|
|
||||||
axios
|
|
||||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
|
||||||
.then(function(response) {
|
|
||||||
that.items = response.data.items
|
|
||||||
|
|
||||||
let apps = []
|
|
||||||
|
|
||||||
for (let category of that.items) {
|
|
||||||
for (let a in category.apps) {
|
|
||||||
apps.push(category.apps[a])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
|
||||||
detail: {apps: apps},
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
retrieveActiveApp() {
|
|
||||||
let activeAppLink = document.querySelector('#appmenu a.active')
|
|
||||||
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
|
||||||
},
|
|
||||||
|
|
||||||
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.settings = config['settings']
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.retrieveConfig()
|
|
||||||
this.retrieveApps()
|
|
||||||
this.retrieveActiveApp()
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
retrieveApps() {
|
||||||
|
this.apps = []
|
||||||
|
let that = this
|
||||||
|
|
||||||
|
axios
|
||||||
|
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||||
|
.then(function(response) {
|
||||||
|
that.items = response.data.items
|
||||||
|
|
||||||
|
let apps = []
|
||||||
|
|
||||||
|
for (let category of that.items) {
|
||||||
|
for (let a in category.apps) {
|
||||||
|
apps.push(category.apps[a])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||||
|
detail: {apps: apps},
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
retrieveActiveApp() {
|
||||||
|
let activeAppLink = document.querySelector('#appmenu a.active')
|
||||||
|
this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
|
||||||
|
},
|
||||||
|
|
||||||
|
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.settings = config['settings']
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.retrieveConfig()
|
||||||
|
this.retrieveApps()
|
||||||
|
this.retrieveActiveApp()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue