wikijs-fork/client/js/components/navigator.vue
2018-01-29 22:58:05 -05:00

156 lines
4.8 KiB
Vue

<template lang="pug">
.navigator
.navigator-bar
.navigator-fab
.navigator-fab-button(@click='toggleMainMenu')
svg.icons.is-24(role='img')
title Navigation
use(xlink:href='#gg-apps-grid')
.navigator-title
h1 {{ siteTitle }}
.navigator-subtitle(:class='subtitleClass')
transition(name='navigator-subtitle-icon')
svg.icons.is-24.navigator-subtitle-icon(role='img', v-if='subtitleIcon')
title {{subtitleText}}
use(:xlink:href='subtitleIconClass')
h2 {{subtitleText}}
.navigator-action
.navigator-action-item(:class='{"is-active": userMenuShown}', @click='toggleUserMenu')
svg.icons.is-32(role='img')
title User
use(xlink:href='#nc-user-circle')
transition(name='navigator-action-item-dropdown')
ul.navigator-action-item-dropdown(v-show='userMenuShown', v-cloak)
li
label Account
svg.icons.is-24(role='img')
title Account
use(xlink:href='#nc-man-green')
li(@click='logout')
label Sign out
svg.icons.is-24(role='img')
title Sign Out
use(xlink:href='#nc-exit')
transition(name='navigator-sd')
.navigator-sd(v-show='sdShown', v-cloak)
.navigator-sd-actions
a.is-active(href='', title='Search')
svg.icons.is-24(role='img')
title Search
use(xlink:href='#gg-search')
a(href='', title='New Document')
svg.icons.is-24(role='img')
title New Document
use(xlink:href='#nc-plus-circle')
a(href='', title='Edit Document')
svg.icons.is-24(role='img')
title Edit Document
use(xlink:href='#nc-pen-red')
a(href='', title='History')
svg.icons.is-24(role='img')
title History
use(xlink:href='#nc-restore')
a(href='', title='View Source')
svg.icons.is-24(role='img')
title View Source
use(xlink:href='#nc-code-editor')
a(href='', title='Move Document')
svg.icons.is-24(role='img')
title Move Document
use(xlink:href='#nc-move')
a(href='', title='Delete Document')
svg.icons.is-24(role='img')
title Delete Document
use(xlink:href='#nc-trash')
.navigator-sd-search
input(type='text', ref='iptSearch', placeholder='Search')
.navigator-sd-results
.navigator-sd-footer
a(href='', title='Settings')
svg.icons.is-24(role='img')
title Settings
use(xlink:href='#nc-gear')
a(href='', title='Users')
svg.icons.is-24(role='img')
title Users
use(xlink:href='#nc-users')
a(href='', title='Assets')
svg.icons.is-24(role='img')
title Assets
use(xlink:href='#nc-image')
</template>
<script>
/* global siteConfig */
import { mapState } from 'vuex'
export default {
data() {
return {
sdShown: false,
userMenuShown: false
}
},
computed: {
...mapState('navigator', [
'subtitleShown',
'subtitleStyle',
'subtitleText',
'subtitleIcon'
]),
siteTitle() {
return siteConfig.title
},
subtitleClass() {
return {
'is-active': this.subtitleShown,
'is-error': this.subtitleStyle === 'error',
'is-warning': this.subtitleStyle === 'warning',
'is-success': this.subtitleStyle === 'success',
'is-info': this.subtitleStyle === 'info'
}
},
subtitleIconClass() { return '#' + this.subtitleIcon }
},
methods: {
toggleMainMenu() {
this.sdShown = !this.sdShown
this.userMenuShown = false
if (this.sdShown) {
this.$nextTick(() => {
this.bindOutsideClick()
this.$refs.iptSearch.focus()
})
} else {
this.unbindOutsideClick()
}
},
toggleUserMenu() {
this.userMenuShown = !this.userMenuShown
this.sdShown = false
if (this.userMenuShown) {
this.bindOutsideClick()
} else {
this.unbindOutsideClick()
}
},
bindOutsideClick() {
document.addEventListener('mousedown', this.handleOutsideClick, false)
},
unbindOutsideClick() {
document.removeEventListener('mousedown', this.handleOutsideClick, false)
},
handleOutsideClick(ev) {
if (!this.$el.contains(ev.target)) {
this.sdShown = false
this.userMenuShown = false
}
},
logout() {
window.location.assign(this.$helpers.resolvePath('logout'))
}
}
}
</script>