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

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>