Skip to content

W
wiki-js
Commit bf6eae14 authored by NGPixel's avatar NGPixel
Browse files
Options

refactor: All Pages tree Vue component

parent 6814c952
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 132 deletions
client/js/app.js
View file @ bf6eae14
'use strict'
/* global alertsData, siteLang */
/* global siteLang */
/* eslint-disable no-new */
import $ from 'jquery'
import _ from 'lodash'
import Vue from 'vue'
import VueResource from 'vue-resource'
import store from './store'
......@@ -12,7 +11,6 @@ import io from 'socket.io-client'
import i18next from 'i18next'
import i18nextXHR from 'i18next-xhr-backend'
import VueI18Next from '@panter/vue-i18next'
// import Alerts from './components/alerts.js'
import 'jquery-smooth-scroll'
import 'jquery-sticky'
......@@ -25,6 +23,7 @@ import anchorComponent from './components/anchor.vue'
import colorPickerComponent from './components/color-picker.vue'
import loadingSpinnerComponent from './components/loading-spinner.vue'
import searchComponent from './components/search.vue'
import treeComponent from './components/tree.vue'
import adminUsersCreateComponent from './modals/admin-users-create.vue'
......@@ -62,14 +61,6 @@ $(() => {
store.dispatch('stopLoading')
})
var alerts = {}
/*var alerts = new Alerts()
if (alertsData) {
_.forEach(alertsData, (alertRow) => {
alerts.push(alertRow)
})
}*/
// ====================================
// Establish WebSocket connection
// ====================================
......@@ -91,34 +82,16 @@ $(() => {
anchor: anchorComponent,
colorPicker: colorPickerComponent,
loadingSpinner: loadingSpinnerComponent,
search: searchComponent
},
directives: {
// sticky: VueSticky
search: searchComponent,
tree: treeComponent
},
store,
i18n,
el: '#root',
mounted() {
$('a').smoothScroll({
speed: 500,
offset: -50
})
$('a').smoothScroll({ speed: 500, offset: -50 })
$('#header').sticky({ topSpacing: 0 })
$('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
// ====================================
// Pages logic
// ====================================
require('./pages/view.js')(alerts)
require('./pages/all.js')(alerts, socket)
require('./pages/create.js')(alerts, socket)
require('./pages/edit.js')(alerts, socket)
require('./pages/source.js')(alerts)
require('./pages/history.js')(alerts)
require('./pages/admin.js')(alerts)
}
})
})
client/js/pages/all.js → client/js/components/tree.vue
View file @ bf6eae14
'use strict'
<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>
import $ from 'jquery'
import Vue from 'vue'
import _ from 'lodash'
<script>
import * as _ from 'lodash'
const rootUrl = '/'
module.exports = (alerts, socket) => {
if ($('#page-type-all').length) {
let vueAllPages = new Vue({ // eslint-disable-line no-unused-vars
el: '#page-type-all',
data: {
export default {
name: '',
data () {
return {
tree: []
},
methods: {
fetch: function (basePath) {
let self = this
$('#notifload').addClass('active')
Vue.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
})
$('#notifload').removeClass('active')
})
})
},
goto: function (entryPath) {
window.location.assign(rootUrl + entryPath)
},
unfold: function (entryPath) {
let self = this
let lastIndex = 0
_.forEach(self.tree, branch => {
lastIndex++
if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
return false
}
},
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')
})
self.tree = _.slice(self.tree, 0, lastIndex)
let branch = _.last(self.tree)
branch.hasChildren = false
branch.pages.forEach(page => {
page.isActive = false
})
},
mainAction: function (page) {
let self = this
if (page.isActive) {
self.unfold(page._id)
} else if (page.isDirectory) {
self.fetch(page._id)
} else {
self.goto(page._id)
})
},
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
})
},
mounted: function () {
let basePath = window.location.pathname.slice(0, -4)
if (basePath.length > 1) {
basePath = basePath.slice(1)
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)
}
this.fetch(basePath)
}
})
},
mounted () {
let basePath = window.location.pathname.slice(0, -4)
if (basePath.length > 1) {
basePath = basePath.slice(1)
}
this.fetch(basePath)
}
}
}
</script>
server/locales/en/browser.json
View file @ bf6eae14
{
"nav": {
"home": "Home"
},
"profile": {
"displayname": "Display Name",
"displaynameexample": "John Smith",
......
server/views/layout.pug
View file @ bf6eae14
......@@ -18,7 +18,9 @@ html
link(rel='manifest', href='/manifest.json')
//- Site Lang
script var siteLang = '!{appconfig.lang}';
script.
var siteLang = '!{appconfig.lang}';
var siteRoot = '!{appconfig.host}';
//- JS / CSS
script(type='text/javascript', src='/js/libs.min.js')
......
server/views/pages/all.pug
View file @ bf6eae14
extends ../layout.pug
block rootNavRight
i.nav-item#notifload
block content
#page-type-all
.container.is-fluid.has-collapsable-nav
.sidebar.is-collapsed
aside
.sidebar-label
span= t('sidebar.nav')
ul.sidebar-menu
li
a(href='/')
i.icon-home
span= t('nav.home')
if !isGuest
li
a(href='/admin')
i.icon-head
span= t('nav.account')
else
li
a(href='/login')
i.icon-unlock
span= t('nav.login')
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)
.container.is-fluid.has-collapsable-nav
.sidebar.is-collapsed
aside
.sidebar-label
span= t('sidebar.nav')
ul.sidebar-menu
li
a(href='/')
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
if !isGuest
li
a(href='/admin')
i.icon-cog
span= t('nav.account')
else
li
a(href='/login')
i.icon-unlock
span= t('nav.login')
tree
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment