From bf6eae1428ff26aac46e27947855f061a227642e Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sun, 21 May 2017 18:58:19 -0400 Subject: [PATCH] refactor: All Pages tree Vue component --- client/js/app.js | 37 ++------------- client/js/components/tree.vue | 84 ++++++++++++++++++++++++++++++++++ client/js/pages/all.js | 74 ------------------------------ server/locales/en/browser.json | 3 ++ server/views/layout.pug | 4 +- server/views/pages/all.pug | 54 ++++++++-------------- 6 files changed, 114 insertions(+), 142 deletions(-) create mode 100644 client/js/components/tree.vue delete mode 100644 client/js/pages/all.js diff --git a/client/js/app.js b/client/js/app.js index 8dc062ea..73e4881b 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -1,10 +1,9 @@ '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) } }) }) diff --git a/client/js/components/tree.vue b/client/js/components/tree.vue new file mode 100644 index 00000000..9c933d10 --- /dev/null +++ b/client/js/components/tree.vue @@ -0,0 +1,84 @@ + + + diff --git a/client/js/pages/all.js b/client/js/pages/all.js deleted file mode 100644 index 18690f89..00000000 --- a/client/js/pages/all.js +++ /dev/null @@ -1,74 +0,0 @@ -'use strict' - -import $ from 'jquery' -import Vue from 'vue' -import _ 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: { - 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 - } - }) - 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) - } - } - }, - mounted: function () { - let basePath = window.location.pathname.slice(0, -4) - if (basePath.length > 1) { - basePath = basePath.slice(1) - } - this.fetch(basePath) - } - }) - } -} diff --git a/server/locales/en/browser.json b/server/locales/en/browser.json index 9ef3b278..a15b6fd3 100644 --- a/server/locales/en/browser.json +++ b/server/locales/en/browser.json @@ -1,4 +1,7 @@ { + "nav": { + "home": "Home" + }, "profile": { "displayname": "Display Name", "displaynameexample": "John Smith", diff --git a/server/views/layout.pug b/server/views/layout.pug index 4c00e88c..8e76e422 100644 --- a/server/views/layout.pug +++ b/server/views/layout.pug @@ -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') diff --git a/server/views/pages/all.pug b/server/views/pages/all.pug index a88a4f5f..cf24da62 100644 --- a/server/views/pages/all.pug +++ b/server/views/pages/all.pug @@ -1,40 +1,24 @@ 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