refactoring & new config vars

frontend/views/Browser.vue

@@ -154,7 +154,8 @@
 import Vue from 'vue'
 import Menu from './partials/Menu'
 import Tree from './partials/Tree'
-import Preview from './partials/Preview'
+import Editor from './partials/Editor'
+import Gallery from './partials/Gallery'
 import Pagination from './partials/Pagination'
 import Upload from './partials/Upload'
 import api from '../api/api'
@@ -347,11 +348,18 @@ export default {
       // TODO: create search logic
     },
     preview(item) {
+      let modal = null
+      if (this.isImage(item.path)) {
+        modal = Gallery
+      }
+      if (this.isText(item.path)) {
+        modal = Editor
+      }
       this.$modal.open({
         parent: this,
         props: { item: item },
         hasModalCard: true,
-        component: Preview,
+        component: modal,
       })
     },
     isArchive(item) {

frontend/views/partials/Editor.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">
+          {{ currentItem.name }}
+        </p>
+      </header>
+      <section class="modal-card-body preview">
+        <template>
+          <prism-editor v-model="content" language="md" :readonly="!can('write')" :line-numbers="lineNumbers" />
+        </template>
+      </section>
+      <footer class="modal-card-foot">
+        <button v-if="can('write')" class="button" type="button" @click="saveFile()">
+          {{ lang('Save') }}
+        </button>
+        <button class="button" type="button" @click="$parent.close()">
+          {{ lang('Close') }}
+        </button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '../../api/api'
+import 'prismjs'
+import 'prismjs/themes/prism.css'
+import 'vue-prism-editor/dist/VuePrismEditor.css'
+import PrismEditor from 'vue-prism-editor'
+
+export default {
+  name: 'Editor',
+  components: { PrismEditor },
+  props: [ 'item' ],
+  data() {
+    return {
+      content: '',
+      currentItem: '',
+      lineNumbers: true,
+    }
+  },
+  mounted() {
+    this.currentItem = this.item
+    api.downloadItem({
+      path: this.item.path,
+    })
+      .then((res) => {
+        this.content = res
+      })
+      .catch(error => this.handleError(error))
+  },
+  methods: {
+    saveFile() {
+      api.saveContent({
+        name: this.item.name,
+        content: this.content,
+      })
+        .then(() => {
+          this.$toast.open({
+            message: this.lang('Updated'),
+            type: 'is-success',
+          })
+          this.$parent.close()
+        })
+        .catch(error => this.handleError(error))
+    }
+  },
+}
+</script>
+
+<style scoped>
+@media (min-width: 1100px) {
+  .modal-card {
+    width: 100%;
+    min-width: 640px;
+  }
+}
+
+.preview {
+  min-height: 450px;
+}
+</style>

frontend/views/partials/Gallery.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="modal-card">
+      <div class="modal-card-body preview">
+        <strong>{{ currentItem.name }}</strong>
+        <div class="columns is-mobile">
+          <div class="column mainbox">
+            <img :src="imageSrc(currentItem.path)" class="mainimg">
+          </div>
+          <div v-if="images.length > 1" class="column is-one-fifth sidebox">
+            <ul>
+              <li v-for="(image, index) in images" :key="index">
+                <img v-lazy="imageSrc(image.path)" @click="currentItem = image">
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+  name: 'Gallery',
+  props: [ 'item' ],
+  data() {
+    return {
+      content: '',
+      currentItem: '',
+      lineNumbers: true,
+    }
+  },
+  computed: {
+    images() {
+      return _.filter(this.$store.state.cwd.content, o => this.isImage(o.name))
+    },
+  },
+  mounted() {
+    this.currentItem = this.item
+  },
+  methods: {
+    imageSrc(path) {
+      return this.getDownloadLink(path)
+    },
+  },
+}
+</script>
+
+<style scoped>
+@media (min-width: 1100px) {
+  .modal-card {
+    width: 100%;
+    min-width: 640px;
+  }
+}
+
+.mainbox {
+  height: 70vh;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
+.mainimg {
+  max-width:100%;
+  max-height:100%;
+}
+
+.sidebox {
+  overflow-y:auto;
+  height: 70vh;
+}
+
+.sidebox {
+  border-left: 1px solid #dbdbdb;
+}
+
+.sidebox img {
+  padding: 5px 0 5px 0;
+}
+
+</style>

frontend/views/partials/Preview.vue

@@ -1,139 +0,0 @@
-/* eslint-disable */
-<template>
-  <div>
-    <div class="modal-card">
-      <header class="modal-card-head">
-        <p class="modal-card-title">
-          {{ currentItem.name }}
-        </p>
-      </header>
-      <section :class="[isImage(item.path) ? 'overflowyh' : '', 'modal-card-body preview']">
-        <template v-if="isText(item.path)">
-          <prism-editor v-model="content" language="md" :readonly="!can('write')" :line-numbers="lineNumbers" />
-        </template>
-        <div v-if="isImage(item.path)">
-          <div class="columns is-mobile">
-            <div class="column mainbox">
-              <img :src="imageSrc(currentItem.path)" class="mainimg">
-            </div>
-            <div v-if="images.length > 1" class="column is-one-fifth sidebox">
-              <ul>
-                <li v-for="(image, index) in images" :key="index">
-                  <img v-lazy="imageSrc(image.path)" @click="currentItem = image">
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-      <footer class="modal-card-foot">
-        <button v-if="isText(item.path) && can('write')" class="button" type="button" @click="saveFile()">
-          {{ lang('Save') }}
-        </button>
-        <button class="button" type="button" @click="$parent.close()">
-          {{ lang('Close') }}
-        </button>
-      </footer>
-    </div>
-  </div>
-</template>
-
-<script>
-import api from '../../api/api'
-import 'prismjs'
-import 'prismjs/themes/prism.css'
-import 'vue-prism-editor/dist/VuePrismEditor.css'
-import PrismEditor from 'vue-prism-editor'
-import _ from 'lodash'
-
-export default {
-  name: 'Preview',
-  components: { PrismEditor },
-  props: [ 'item' ],
-  data() {
-    return {
-      content: '',
-      currentItem: '',
-      lineNumbers: true,
-    }
-  },
-  computed: {
-    images() {
-      return _.filter(this.$store.state.cwd.content, o => this.isImage(o.name))
-    },
-  },
-  mounted() {
-    this.currentItem = this.item
-    if (this.isText(this.item.path)) {
-      api.downloadItem({
-        path: this.item.path,
-      })
-        .then((res) => {
-          this.content = res
-        })
-        .catch(error => this.handleError(error))
-    }
-  },
-  methods: {
-    imageSrc(path) {
-      return this.getDownloadLink(path)
-    },
-    saveFile() {
-      api.saveContent({
-        name: this.item.name,
-        content: this.content,
-      })
-        .then(() => {
-          this.$toast.open({
-            message: this.lang('Updated'),
-            type: 'is-success',
-          })
-          this.$parent.close()
-        })
-        .catch(error => this.handleError(error))
-    }
-  },
-}
-</script>
-
-<style scoped>
-@media (min-width: 1100px) {
-  .modal-card {
-    width: 100%;
-    min-width: 640px;
-  }
-}
-
-.mainbox {
-  height: 70vh;
-  display:flex;
-  justify-content:center;
-  align-items:center;
-}
-
-.mainimg {
-  max-width:100%;
-  max-height:100%;
-}
-
-.sidebox {
-  overflow-y:auto;
-  height: 70vh;
-}
-
-.sidebox {
-  border-left: 1px solid #dbdbdb;
-}
-
-.sidebox img {
-  padding: 5px 0 5px 0;
-}
-
-.preview {
-  min-height: 450px;
-}
-
-.overflowyh {
-  overflow-y: hidden;
-}
-</style>