85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template lang="pug">
|
|
transition
|
|
ul.collapsable-nav(v-for='treeItem in tree', :class='{ "has-children": treeItem.hasChildren }', v-cloak)
|
|
li(v-for='page in treeItem.pages', :class='{ "is-active": page.isActive }')
|
|
a(v-on:click='mainAction(page)')
|
|
template(v-if='page._id !== "home"')
|
|
i(:class='{ "icon-folder2": page.isDirectory, "icon-file-text-o": !page.isDirectory }')
|
|
span {{ page.title }}
|
|
template(v-else)
|
|
i.icon-home
|
|
span {{ $t('nav.home') }}
|
|
a.is-pagelink(v-if='page.isDirectory && page.isEntry', v-on:click='goto(page._id)')
|
|
i.icon-file-text-o
|
|
i.icon-arrow-right2
|
|
</template>
|
|
|
|
<script>
|
|
import * as _ from 'lodash'
|
|
|
|
export default {
|
|
name: '',
|
|
data () {
|
|
return {
|
|
tree: []
|
|
}
|
|
},
|
|
methods: {
|
|
fetch (basePath) {
|
|
let self = this
|
|
self.$store.dispatch('startLoading')
|
|
self.$nextTick(() => {
|
|
socket.emit('treeFetch', { basePath }, (data) => {
|
|
if (self.tree.length > 0) {
|
|
let branch = _.last(self.tree)
|
|
branch.hasChildren = true
|
|
_.find(branch.pages, { _id: basePath }).isActive = true
|
|
}
|
|
self.tree.push({
|
|
hasChildren: false,
|
|
pages: data
|
|
})
|
|
self.$store.dispatch('stopLoading')
|
|
})
|
|
})
|
|
},
|
|
goto (entryPath) {
|
|
window.location.assign(siteRoot + '/' + entryPath)
|
|
},
|
|
unfold (entryPath) {
|
|
let self = this
|
|
let lastIndex = 0
|
|
_.forEach(self.tree, branch => {
|
|
lastIndex++
|
|
if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
|
|
return false
|
|
}
|
|
})
|
|
self.tree = _.slice(self.tree, 0, lastIndex)
|
|
let branch = _.last(self.tree)
|
|
branch.hasChildren = false
|
|
branch.pages.forEach(page => {
|
|
page.isActive = false
|
|
})
|
|
},
|
|
mainAction (page) {
|
|
let self = this
|
|
if (page.isActive) {
|
|
self.unfold(page._id)
|
|
} else if (page.isDirectory) {
|
|
self.fetch(page._id)
|
|
} else {
|
|
self.goto(page._id)
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
let basePath = window.location.pathname.slice(0, -4)
|
|
if (basePath.length > 1) {
|
|
basePath = basePath.slice(1)
|
|
}
|
|
this.fetch(basePath)
|
|
}
|
|
}
|
|
</script>
|