Add vue gallery

package-lock.json

@@ -2695,6 +2695,11 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
+    "blueimp-gallery": {
+      "version": "2.44.0",
+      "resolved": "https://registry.npmjs.org/blueimp-gallery/-/blueimp-gallery-2.44.0.tgz",
+      "integrity": "sha512-msLsEV/7hpOokS/MimNbbrIv1lFnNe/45HeLJUvHUfuJklbPRiodXYSBs0Ibwe05un5bFRryQmmzhUZBiFaZmg=="
+    },
     "bn.js": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.3.tgz",
@@ -7566,6 +7571,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "opener": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
@@ -10640,6 +10650,15 @@
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.5.tgz",
       "integrity": "sha512-0CSftHY0bDTD+4FbYkuFf6+iKDjZ4h2in2YYJDRMk5daZIjrgT9LjFHvP7Rzqy9/s1pij3zDtTSLRUjsPWMwqg=="
     },
+    "vue-gallery": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-gallery/-/vue-gallery-2.0.1.tgz",
+      "integrity": "sha512-e6PADJlb4tcrPP7rmkYHDZI7KeDW//CIYRt7ZtcEvbc9eg0msyW/s9K+ZIWzSUyujnhKroePq/wQuh6BvXbxLA==",
+      "requires": {
+        "blueimp-gallery": "^2.33.0",
+        "opencollective-postinstall": "^2.0.2"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -11,6 +11,7 @@
     "lottie-vuejs": "^0.3.7",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-gallery": "^2.0.1",
     "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.2.0",
     "vuescroll": "^4.16.1",

src/components/Photo.vue

@@ -2,7 +2,8 @@
   <transition appear name="fade">
     <div class="photo"
         :style="photoStyle"
-        ref="element">
+        ref="element"
+        @click="onClick">
     </div>
   </transition>
 </template>
@@ -49,6 +50,10 @@ export default class Photo extends Vue {
     }
   }
 
+  onClick() {
+    this.$emit('clickPhoto', this.album.files.indexOf(this.file));
+  }
+
   mounted() {
     this.updateHeight();
   }

src/views/Album.vue

@@ -6,15 +6,25 @@
       :picture="picture"></LeftBlock>
     <div class="photos-wrapper">
       <div class="photos" v-if="album !== null">
-        <Photo v-for="file in filesToShow" :key="file" :file="file" :album="album"></Photo>
+        <Photo v-for="file in filesToShow" :key="file" :file="file" :album="album"
+               @clickPhoto="clickPhoto"></Photo>
       </div>
     </div>
+    <vue-gallery v-if="album !== null"
+                 :options="options" 
+                 :images="images" 
+                 :index="index" 
+                 @close="index = null">
+      <slot name="next">Next</slot>
+    </vue-gallery>
   </div>
 </template>
 
 <script lang="ts">
 import 'reflect-metadata';
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator';
+
+import VueGallery from 'vue-gallery';
 
 import { StoreType } from '@/store';
 import { IAlbum } from '@/store/albums/state';
@@ -28,11 +38,16 @@ import Photo from '@/components/Photo.vue';
   components: {
     LeftBlock,
     Photo,
+    VueGallery,
   }
 })
 export default class AlbumPage extends Vue {
   public filesToShow: string[] = [];
 
+  public index: number | null = null;
+  
+  public options: object = {};
+
   get album(): IAlbum | null {
     const albums = (this.$store as StoreType).state.albums.albums;
 
@@ -62,7 +77,12 @@ export default class AlbumPage extends Vue {
   get picture(): string {
     if (this.album === null)
       return '';
-    return `/pictures/albums/${this.album.folderName}/${this.album.coverFileName}`
+    return `/pictures/albums/${this.album.folderName}/${this.album.coverFileName}`;
+  }
+
+  get images() {
+    return this.album!.files
+    .map(item => `/pictures/albums/${this.album!.folderName}/${item}`);
   }
 
   updateFiles() {
@@ -81,8 +101,14 @@ export default class AlbumPage extends Vue {
     this.updateFiles();
   }
 
+  clickPhoto(index: number) {
+    this.index = index;
+  }
+
   mounted() {
     this.updateFiles();
+
+    this.$on('clickPhoto', this.clickPhoto);
   }
 }
 </script>
@@ -112,3 +138,11 @@ export default class AlbumPage extends Vue {
   flex-wrap: wrap;
 }
 </style>
+
+<style>
+.blueimp-gallery>.next, .blueimp-gallery>.prev {
+  border: none;
+  background: none;
+  color: white!important;
+}
+</style>

tsconfig.json

@@ -25,7 +25,10 @@
       "dom",
       "dom.iterable",
       "scripthost"
-    ]
+    ],
+    "typeRoots": [
+      "src/types"
+    ],
   },
   "include": [
     "src/**/*.ts",