image gallery added

frontend/views/partials/Preview.vue

@@ -4,15 +4,26 @@
     <div class="modal-card">
       <header class="modal-card-head">
         <p class="modal-card-title">
-          {{ item.name }}
+          {{ currentItem.name }}
         </p>
       </header>
-      <section class="modal-card-body preview">
+      <section :class="[isImage(item.path) ? 'overflowyh' : '', 'modal-card-body preview']">
         <template v-if="isText(item.path)">
-          <prism-editor v-model="content" :readonly="!can('write')" :line-numbers="lineNumbers" />
+          <prism-editor v-model="content" language="md" :readonly="!can('write')" :line-numbers="lineNumbers" />
         </template>
-        <div v-if="isImage(item.path)" class="image">
-          <img :src="content">
+        <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 :src="imageSrc(image.path)" @click="currentItem = image">
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
       </section>
       <footer class="modal-card-foot">
@@ -33,6 +44,7 @@ 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',
@@ -41,10 +53,17 @@ export default {
   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,
@@ -53,11 +72,12 @@ export default {
           this.content = res
         })
         .catch(error => this.handleError(error))
-    } else if (this.isImage(this.item.path)) {
-      this.content =this.getDownloadLink(this.item.path)
     }
   },
   methods: {
+    imageSrc(path) {
+      return this.getDownloadLink(path)
+    },
     saveFile() {
       api.saveContent({
         name: this.item.name,
@@ -84,7 +104,36 @@ export default {
   }
 }
 
+.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>