1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<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>