refactor: vue comp: page-loader + modal-create-page

client/js/app.js

@@ -33,6 +33,7 @@ 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 pageLoaderComponent from './components/page-loader.vue'
 import searchComponent from './components/search.vue'
 import treeComponent from './components/tree.vue'
 
@@ -49,6 +50,7 @@ Vue.use(VueResource)
 Vue.use(VueClipboards)
 Vue.use(VueI18Next)
 Vue.use(VueLodash, _)
+Vue.use(helpers)
 
 i18next
   .use(i18nextXHR)
@@ -98,6 +100,7 @@ $(() => {
       loadingSpinner: loadingSpinnerComponent,
       modalCreatePage: modalCreatePageComponent,
       modalCreateUser: modalCreateUserComponent,
+      pageLoader: pageLoaderComponent,
       search: searchComponent,
       sourceView: sourceViewComponent,
       tree: treeComponent

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

@@ -7,7 +7,7 @@
         section
           label.label Enter the new document path:
           p.control.is-fullwidth(v-bind:class='{ "is-loading": isLoading }')
-            input.input(type='text', placeholder='page-name', v-model='entrypath', autofocus)
+            input.input(type='text', placeholder='page-name', v-model='entrypath', ref='createPageInput', @keyup.enter='create', @keyup.esc='cancel')
             span.help.is-danger(v-show='isInvalid') This document path is invalid!
         footer
           a.button.is-grey.is-outlined(v-on:click='cancel') Discard
@@ -15,28 +15,39 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
-
   export default {
     name: 'modal-create-page',
     props: ['basepath'],
     data () {
       return {
+        currentPath: '',
         isLoading: false
       }
     },
     computed: {
       entrypath () { return this.$store.state.modalCreatePage.entrypath }
-      isShown () { return this.$store.state.modalCreatePage.shown }
+      isShown () {
+        if(this.$store.state.modalCreatePage.shown) {
+          this.makeSelection()
+        }
+        return this.$store.state.modalCreatePage.shown
+      }
       isInvalid () { return this.$store.state.modalCreatePage.invalid }
     },
     methods: {
+      makeSelection: function () {
+        let self = this;
+        self._.delay(() => {
+          let startPos = (self.currentPath.length > 0) ? self.currentPath.length + 1 : 0
+          self.$helpers.form.setInputSelection(self.$refs.createPageInput, startPos, self.entrypath.length)
+        }, 100)
+      },
       cancel: function () {
         this.$store.dispatch('modalCreatePage/close')
       },
       create: function () {
         this.isInvalid = false
-        let newDocPath = this.helpers.pages.makeSafePath(this.entrypath)
+        let newDocPath = this.$helpers.pages.makeSafePath(this.entrypath)
         if (this._.isEmpty(newDocPath)) {
           this.$store.createPage.commit('')
         } else {
@@ -46,7 +57,9 @@
       }
     },
     mounted () {
-      this.$store.commit('modalCreatePage/pathChange', this.basepath + '/new-page')
+      this.currentPath = (this.basepath === 'home') ? '' : this.basepath
+      let newPage = (this._.isEmpty(this.currentPath)) ? 'new-page' : this.currentPath + '/new-page'
+      this.$store.commit('modalCreatePage/pathChange', newPage)
     }
   }
 </script>

client/js/components/page-loader.js

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

client/js/components/page-loader.vue

@@ -0,0 +1,24 @@
+<template lang="pug">
+  transition(name='page-loader')
+    .page-loader(v-if='isShown')
+      i
+      span {{ msg }}
+</template>
+
+<script>
+  export default {
+    name: 'page-loader',
+    props: ['text'],
+    data () {
+      return {}
+    },
+    computed: {
+      msg () { return this.$store.state.pageLoader.msg },
+      isShown () { return this.$store.state.pageLoader.shown }
+    },
+    mounted() {
+      this.$store.commit('pageLoader/msgChange', this.text)
+    }
+  }
+}
+</script>

client/js/helpers/index.js

@@ -1,8 +1,19 @@
 'use strict'
 
+const helpers = {
+  form: require('./form'),
+  pages: require('./pages')
+}
+
 export default {
-  helpers: {
-    form: require('./form'),
-    pages: require('./pages')
+  install(Vue) {
+    Vue.$helpers = helpers
+    Object.defineProperties(Vue.prototype, {
+      $helpers: {
+        get() {
+          return helpers
+        }
+      }
+    })
   }
 }

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

@@ -2,14 +2,13 @@
 
 /* global FuseBox */
 
-import pageLoader from '../components/page-loader'
-
 export default {
   name: 'source-view',
   data() {
     return {}
   },
   mounted() {
+    let self = this
     FuseBox.import('/js/ace/source-view.js', (ace) => {
       let scEditor = ace.edit('source-display')
       scEditor.setTheme('ace/theme/dawn')
@@ -20,7 +19,7 @@ export default {
       scEditor.setReadOnly(true)
       scEditor.renderer.updateFull()
       scEditor.renderer.on('afterRender', () => {
-        pageLoader.complete()
+        self.$store.dispatch('pageLoader/complete')
       })
     })
   }

client/js/store/index.js

@@ -5,6 +5,7 @@ import alert from './modules/alert'
 import anchor from './modules/anchor'
 import modalCreatePage from './modules/modal-create-page'
 import modalCreateUser from './modules/modal-create-user'
+import pageLoader from './modules/page-loader'
 
 Vue.use(Vuex)
 
@@ -24,6 +25,7 @@ export default new Vuex.Store({
     alert,
     anchor,
     modalCreatePage,
-    modalCreateUser
+    modalCreateUser,
+    pageLoader
   }
 })

client/js/store/modules/page-loader.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export default {
+  namespaced: true,
+  state: {
+    shown: true,
+    msg: 'Loading...'
+  },
+  getters: {},
+  mutations: {
+    shownChange: (state, shownState) => { state.shown = shownState },
+    msgChange: (state, newText) => { state.msg = newText }
+  },
+  actions: {
+    complete({ commit }) { commit('shownChange', false) }
+  }
+}

client/scss/layout/_loader.scss

@@ -1,4 +1,4 @@
-#page-loader {
+.page-loader {
   position: fixed;
   top: 0;
   left: 0;
@@ -28,6 +28,10 @@
 		}
 	}
 
+  &-leave-active {
+    animation: pageLoaderExit 1s ease forwards;
+  }
+
   @include keyframes(pageLoaderExit) {
     0% {
       opacity: 1;
@@ -43,12 +47,4 @@
     }
   }
 
-  &.is-loaded {
-    animation: pageLoaderExit 1s ease forwards;
-  }
-
-  &.is-hidden {
-    display: none !important;
-  }
-
 }

server/views/pages/source.pug

@@ -23,14 +23,10 @@ block rootNavRight
 
 block content
 
-  source-view(inline-template, data-entrypath=pageData.meta.path)
+  source-view(inline-template, data-entrypath=pageData.meta.path, v-cloak)
     .ace-container
       #source-display= pageData.markdown
 
   include ../modals/create.pug
   include ../modals/move.pug
-
-block outside
-  #page-loader
-    i
-    span= t('loading.source')
+  page-loader(text=t('loading.source'))