wikijs-fork/client/js/components/tree.vue
2017-05-25 20:54:03 -04:00

83 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>
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 = self._.last(self.tree)
branch.hasChildren = true
self._.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
self._.forEach(self.tree, branch => {
lastIndex++
if (self._.find(branch.pages, { _id: entryPath }) !== undefined) {
return false
}
})
self.tree = self._.slice(self.tree, 0, lastIndex)
let branch = self._.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>