refactor: client-side optimizations + lazy-loading

client/js/app.js

@@ -8,7 +8,7 @@ import Vue from 'vue'
 import VueResource from 'vue-resource'
 import VueClipboards from 'vue-clipboards'
 import store from './store'
-import io from 'socket.io-client'
+import io from 'socket-io-client'
 import i18next from 'i18next'
 import i18nextXHR from 'i18next-xhr-backend'
 import VueI18Next from '@panter/vue-i18next'
@@ -23,14 +23,15 @@ import alertComponent from './components/alert.vue'
 import anchorComponent from './components/anchor.vue'
 import colorPickerComponent from './components/color-picker.vue'
 import loadingSpinnerComponent from './components/loading-spinner.vue'
+import modalCreatePageComponent from './components/modal-create-page.vue'
+import modalCreateUserComponent from './components/modal-create-user.vue'
 import searchComponent from './components/search.vue'
 import treeComponent from './components/tree.vue'
 
-import adminUsersCreateComponent from './modals/admin-users-create.vue'
-
 import adminProfileComponent from './pages/admin-profile.component.js'
 import adminSettingsComponent from './pages/admin-settings.component.js'
-import sourceComponent from './pages/source.component.js'
+import contentViewComponent from './pages/content-view.component.js'
+import sourceViewComponent from './pages/source-view.component.js'
 
 // ====================================
 // Initialize Vue Modules
@@ -81,12 +82,14 @@ $(() => {
       alert: alertComponent,
       adminProfile: adminProfileComponent,
       adminSettings: adminSettingsComponent,
-      adminUsersCreate: adminUsersCreateComponent,
       anchor: anchorComponent,
       colorPicker: colorPickerComponent,
+      contentView: contentViewComponent,
       loadingSpinner: loadingSpinnerComponent,
+      modalCreatePage: modalCreatePageComponent,
+      modalCreateUser: modalCreateUserComponent,
       search: searchComponent,
-      sourceView: sourceComponent,
+      sourceView: sourceViewComponent,
       tree: treeComponent
     },
     store,

client/js/components/anchor.vue

@@ -14,8 +14,6 @@
 </template>
 
 <script>
-  import * as _ from 'lodash'
-
   export default {
     name: 'anchor',
     data () {

client/js/components/modal-create-page.vue

@@ -10,45 +10,44 @@
             input.input(type='text', placeholder='page-name', v-model='entrypath', autofocus)
             span.help.is-danger(v-show='isInvalid') This document path is invalid!
         footer
-          a.button.is-grey.is-outlined(v-on:click='hide') Discard
+          a.button.is-grey.is-outlined(v-on:click='cancel') Discard
           a.button.is-light-blue(v-on:click='create') Create
 </template>
 
 <script>
-  import * as _ from 'lodash'
-  import { makeSafePath } from '../helpers/pages'
+  import { isEmpty } from 'lodash'
+  // import { makeSafePath } from '../helpers/pages'
+  import { mapState } from 'vuex'
 
   export default {
     name: 'modal-create',
     data () {
       return {
-        entrypath: ''
-        isInvalid: false,
-        isLoading: false,
-        isShown: false
+        isLoading: false
       }
     },
+    computed: mapState('createPage', {
+      entrypath: '',
+      isShown: 'shown',
+      isInvalid: 'invalid'
+    }),
     methods: {
-      show: function () {
-        this.isInvalid = false
-        this.shown = true
-      },
-      hide: function () {
-        this.shown = false
+      cancel: function () {
+        this.$store.dispatch('createPageClose')
       },
       create: function () {
         this.isInvalid = false
         let newDocPath = makeSafePath(this.entrypath)
-        if (_.isEmpty(newDocPath)) {
-          this.isInvalid = true
+        if (isEmpty(newDocPath)) {
+          this.$store.createPage.commit('')
         } else {
-          $('#txt-create-prompt').parent().addClass('is-loading')
+          this.isLoading = true
           window.location.assign('/create/' + newDocPath)
         }
       }
     },
     mounted () {
-      this.entrypath = currentBasePath + '/new-page'
+      // this.entrypath = currentBasePath + '/new-page'
     }
   }
 </script>

client/js/components/page-loader.js

@@ -1,13 +1,13 @@
 'use strict'
 
 import $ from 'jquery'
-import _ from 'lodash'
+import delay from 'lodash/delay'
 
 module.exports = {
 
   complete () {
     $('#page-loader').addClass('is-loaded')
-    _.delay(() => {
+    delay(() => {
       $('#page-loader').addClass('is-hidden')
     }, 1100)
   }

client/js/pages/content-view.component.js

@@ -1,23 +1,13 @@
 'use strict'
 
-/* eslint-disable no-new */
-
-import $ from 'jquery'
 import MathJax from 'mathjax'
 
-module.exports = (alerts) => {
-  if ($('#page-type-view').length) {
-    let currentBasePath = ($('#page-type-view').data('entrypath') !== 'home') ? $('#page-type-view').data('entrypath') : ''
-
-    // Copy Path
-
-    // new Vue({
-    //   el: '.modal-copypath',
-    //   render: h => h(CopyPath)
-    // })
-
-    // MathJax Render
-
+export default {
+  name: 'content-view',
+  data() {
+    return {}
+  },
+  mounted() {
     MathJax.Hub.Config({
       jax: ['input/TeX', 'input/MathML', 'output/SVG'],
       extensions: ['tex2jax.js', 'mml2jax.js'],
@@ -36,8 +26,13 @@ module.exports = (alerts) => {
       messageStyle: 'none'
     })
     MathJax.Hub.Configured()
-
-    require('../modals/create.js')(currentBasePath)
-    require('../modals/move.js')(currentBasePath, alerts)
   }
 }
+
+// module.exports = (alerts) => {
+//   if ($('#page-type-view').length) {
+//     let currentBasePath = ($('#page-type-view').data('entrypath') !== 'home') ? $('#page-type-view').data('entrypath') : ''
+//     require('../modals/create.js')(currentBasePath)
+//     require('../modals/move.js')(currentBasePath, alerts)
+//   }
+// }

client/js/pages/source-view.component.js

@@ -0,0 +1,27 @@
+'use strict'
+
+/* global FuseBox */
+
+import pageLoader from '../components/page-loader'
+
+export default {
+  name: 'source-view',
+  data() {
+    return {}
+  },
+  mounted() {
+    FuseBox.import('/js/ace/source-view.js', (ace) => {
+      let scEditor = ace.edit('source-display')
+      scEditor.setTheme('ace/theme/dawn')
+      scEditor.getSession().setMode('ace/mode/markdown')
+      scEditor.setOption('fontSize', '14px')
+      scEditor.setOption('hScrollBarAlwaysVisible', false)
+      scEditor.setOption('wrap', true)
+      scEditor.setReadOnly(true)
+      scEditor.renderer.updateFull()
+      scEditor.renderer.on('afterRender', () => {
+        pageLoader.complete()
+      })
+    })
+  }
+}

client/js/pages/source.component.js

@@ -1,26 +0,0 @@
-'use strict'
-
-import * as ace from 'brace'
-import 'brace/theme/tomorrow_night'
-import 'brace/mode/markdown'
-import pageLoader from '../components/page-loader'
-
-export default {
-  name: 'source-view',
-  data() {
-    return {}
-  },
-  mounted() {
-    let scEditor = ace.edit('source-display')
-    scEditor.setTheme('ace/theme/tomorrow_night')
-    scEditor.getSession().setMode('ace/mode/markdown')
-    scEditor.setOption('fontSize', '14px')
-    scEditor.setOption('hScrollBarAlwaysVisible', false)
-    scEditor.setOption('wrap', true)
-    scEditor.setReadOnly(true)
-    scEditor.renderer.updateFull()
-    scEditor.renderer.on('afterRender', () => {
-      pageLoader.complete()
-    })
-  }
-}

client/js/store/index.js

@@ -3,7 +3,8 @@ import Vuex from 'vuex'
 
 import alert from './modules/alert'
 import anchor from './modules/anchor'
-import adminUsersCreate from './modules/admin-users-create'
+import modalCreatePage from './modules/modal-create-page'
+import modalCreateUser from './modules/modal-create-user'
 
 Vue.use(Vuex)
 
@@ -22,6 +23,7 @@ export default new Vuex.Store({
   modules: {
     alert,
     anchor,
-    adminUsersCreate
+    modalCreatePage,
+    modalCreateUser
   }
 })

client/js/store/modules/modal-create-user.js

@@ -0,0 +1,15 @@
+'use strict'
+
+export default {
+  state: {
+    shown: false
+  },
+  getters: {},
+  mutations: {
+    shownChange: (state, shownState) => { state.shown = shownState }
+  },
+  actions: {
+    adminUsersCreateOpen({ commit }) { commit('shownChange', true) },
+    adminUsersCreateClose({ commit }) { commit('shownChange', false) }
+  }
+}