refactor: editor + discard edits + save -> vue components

client/js/components/editor.component.js

@@ -1,32 +1,54 @@
 'use strict'
 
-import $ from 'jquery'
-import Vue from 'vue'
-import _ from 'lodash'
-import filesize from 'filesize.js'
 import SimpleMDE from 'simplemde'
-import pageLoader from '../components/page-loader'
+import filesize from 'filesize.js'
+import $ from 'jquery'
 
-// ====================================
-// Markdown Editor
-// ====================================
+let mde
 
-module.exports = (alerts, pageEntryPath, socket) => {
-  if ($('#mk-editor').length === 1) {
-    Vue.filter('filesize', (v) => {
-      return _.toUpper(filesize(v))
-    })
-
-    let mdeModalOpenState = false
-    let vueImage
-    let vueFile
-    let vueVideo
-    let vueCodeBlock
-
-    let mde = new SimpleMDE({
+export default {
+  name: 'editor',
+  props: ['currentPath'],
+  filters: {
+    filesize(v) {
+      return this._.toUpper(filesize(v))
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    save() {
+      let self = this
+      this.$http.put(window.location.href, {
+        markdown: mde.value()
+      }).then(resp => {
+        return resp.json()
+      }).then(resp => {
+        if (resp.ok) {
+          window.location.assign('/' + self.currentPath)
+        } else {
+          self.$store.dispatch('alert', {
+            style: 'red',
+            icon: 'square-cross',
+            msg: resp.msg
+          })
+        }
+      }).catch(err => {
+        self.$store.dispatch('alert', {
+          style: 'red',
+          icon: 'square-cross',
+          msg: 'Error: ' + err.body.msg
+        })
+      })
+    }
+  },
+  mounted() {
+    let self = this
+    mde = new SimpleMDE({
       autofocus: true,
       autoDownloadFontAwesome: false,
-      element: $('#mk-editor').get(0),
+      element: this.$refs.editorTextArea,
       placeholder: 'Enter Markdown formatted content here...',
       spellChecker: false,
       status: false,
@@ -183,46 +205,20 @@ module.exports = (alerts, pageEntryPath, socket) => {
       }
     })
 
-    vueImage = require('./editor-image.js')(alerts, mde, mdeModalOpenState, socket)
-    vueFile = require('./editor-file.js')(alerts, mde, mdeModalOpenState, socket)
-    vueVideo = require('./editor-video.js')(mde, mdeModalOpenState)
-    vueCodeBlock = require('./editor-codeblock.js')(mde, mdeModalOpenState)
-
-    pageLoader.complete()
-
-    // -> Save
-
-    let saveCurrentDocument = (ev) => {
-      $.ajax(window.location.href, {
-        data: {
-          markdown: mde.value()
-        },
-        dataType: 'json',
-        method: 'PUT'
-      }).then((rData, rStatus, rXHR) => {
-        if (rData.ok) {
-          window.location.assign('/' + pageEntryPath) // eslint-disable-line no-undef
-        } else {
-          alerts.pushError('Something went wrong', rData.error)
-        }
-      }, (rXHR, rStatus, err) => {
-        alerts.pushError('Something went wrong', 'Save operation failed.')
-      })
-    }
-
-    $('.btn-edit-save, .btn-create-save').on('click', (ev) => {
-      saveCurrentDocument(ev)
-    })
+    // Save
 
+    this.$root.$on('editor-save', this.save)
     $(window).bind('keydown', (ev) => {
       if (ev.ctrlKey || ev.metaKey) {
         switch (String.fromCharCode(ev.which).toLowerCase()) {
           case 's':
             ev.preventDefault()
-            saveCurrentDocument(ev)
+            self.save()
             break
         }
       }
     })
+
+    this.$store.dispatch('pageLoader/complete')
   }
 }

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

@@ -0,0 +1,43 @@
+<template lang="pug">
+  transition(:duration="400")
+    .modal(v-show='isShown', v-cloak)
+      transition(name='modal-background')
+        .modal-background(v-show='isShown')
+      .modal-container
+        transition(name='modal-content')
+          .modal-content(v-show='isShown')
+            header.is-orange Discard?
+            section
+              span(v-if='mode === "create"') Are you sure you want to leave this page and loose anything you wrote so far?
+              span(v-else) Are you sure you want to leave this page and loose any modifications?
+            footer
+              a.button.is-grey.is-outlined(v-on:click='stay') Stay on page
+              a.button.is-orange(v-on:click='discard') Discard
+</template>
+
+<script>
+  export default {
+    name: 'modal-discard-page',
+    props: ['mode', 'currentPath'],
+    data () {
+      return {}
+    },
+    computed: {
+      isShown () {
+        return this.$store.state.modalDiscardPage.shown
+      }
+    },
+    methods: {
+      stay: function () {
+        this.$store.dispatch('modalDiscardPage/close')
+      },
+      discard: function () {
+        if(this.mode === 'create') {
+          window.location.assign('/')
+        } else {
+          window.location.assign('/' + this.currentPath)
+        }
+      }
+    }
+  }
+</script>

client/js/components/tree.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  transition
+  .has-collapsable-nav
     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)')