From aecab1b1b5411673ca27955e07342c8884ecba4e Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 16 Apr 2019 00:10:18 +0200
Subject: [PATCH] Renamed gallery to AdventureGallery

---
 src/components/AdventureGallery.vue | 136 ++++++++++++++++++++++++++++
 src/components/Gallery.vue          | 108 ----------------------
 2 files changed, 136 insertions(+), 108 deletions(-)
 create mode 100644 src/components/AdventureGallery.vue
 delete mode 100644 src/components/Gallery.vue

diff --git a/src/components/AdventureGallery.vue b/src/components/AdventureGallery.vue
new file mode 100644
index 0000000..fafcb04
--- /dev/null
+++ b/src/components/AdventureGallery.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <button @click="toggleView">Toggle view</button>
+
+    <div class="gallery-container" :class="mobileFriendly ? 'mobile' : 'large'">
+
+      <gallery-image v-for="(image, key) in gallery" :image="image" :index="key" :thumbnail="true" @click="imageSelected"></gallery-image>
+
+    </div>
+
+    <div class="gallery--load-more">
+      <button class="button">View all</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import GalleryImage from '@/components/GalleryImage'
+import GalleryText from '@/components/GalleryText'
+
+import { mapGetters } from 'vuex'
+import store from '@/store'
+
+import { imagesByAdventureId } from '@/utils/leifsbackend-api'
+
+
+export default {
+  name: 'Gallery-Item',
+  components: { GalleryImage, GalleryText },
+  props: {
+    id: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      selected: undefined,
+      wide: false,
+      gallery: [],
+      ASSET_URL: 'https://leifsopplevelser.no/assets',
+      mobileFriendly: undefined
+    }
+  },
+  watch: {
+    gallery: function (val) {
+      this.setPopoverAlbum(val)
+    }
+  },
+  created() {
+    
+    this.adventureImages = imagesByAdventureId(this.id)
+      .then(adventureImages => {
+        adventureImages.forEach(image => {
+          let [filename, filextension] = image.filename.split('.')
+
+          console.log('filename:', filename)
+          console.log('filextension:', filextension)
+          const url = `${this.ASSET_URL}/${filename}_lg.${filextension}`
+
+          this.gallery.push({
+            type: 'image',
+            url
+          })
+        })
+      })
+
+    this.setPopoverAlbum(this.gallery)
+
+    // const that = this;
+    // window.addEventListener('resize', function() {
+    //   that.setMobileFriendly()
+    // });
+  },
+  methods: {
+    setMobileFriendly() {
+      const monitor = document.getElementsByClassName('gallery-container');
+      const image = document.getElementsByClassName('gallery-image')
+
+      if (monitor === undefined || image === undefined)
+        return
+      console.log('monitor and image', monitor[0].offsetWidth, image[0].offsetWidth)
+
+      this.mobileFriendly = monitor[0].offsetWidth < image[0].offsetWidth * 1.5;
+    },
+    toggleView() {
+      this.wide = !this.wide;
+    },
+    // setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
+
+    imageSelected(selectedImage) {
+      const selectedImageIndex = this.gallery.findIndex(image => selectedImage === image);
+
+      console.log('this is the selected image index', selectedImageIndex)
+
+      store.dispatch('setPopoverAlbum', this.gallery);
+      store.dispatch('setPopoverAlbumIndex', selectedImageIndex)
+      store.dispatch('showPopover');
+      // store.dispatch('incrementPopoverImage', this.selectedIndexInGallery())
+    },
+    selectedIndexInGallery() {
+      const gallery = this.gallery;
+      const selected = this.selected;
+
+      for(var i = 0; i < gallery.length; i += 1) {
+        if(gallery[i] === selected) {
+          return i;
+        }
+      }
+      return -1;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../scss/buttons.scss';
+
+  .gallery-container {
+    display: flex;
+    flex-direction: row;
+    // justify-content: space-evenly;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 1rem 0.5rem;
+
+    &.mobile {
+      // background-color: NavajoWhite;
+    }
+  }
+
+  .gallery--load-more {
+    display: flex;
+    justify-content: center;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
deleted file mode 100644
index 821d173..0000000
--- a/src/components/Gallery.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <button @click="toggleView">Toggle view</button>
-
-    <div class="gallery-container">
-
-      
-      <div v-for="(item, key) in gallery">
-        <gallery-image v-if="item.type === 'image'" :image="item" :index="key" :wide="wide" @click="imageSelected"></gallery-image> 
-        <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> 
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import GalleryImage from '@/components/GalleryImage'
-import GalleryText from '@/components/GalleryText'
-
-import { mapGetters } from 'vuex'
-import store from '@/store'
-
-import { imagesByAdventureId } from '@/utils/leifsbackend-api'
-
-
-export default {
-  name: 'Gallery-Item',
-  components: { GalleryImage, GalleryText },
-  props: {
-    short: {
-      default: false,
-      type: Boolean
-    },
-    id: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      selected: undefined,
-      wide: false,
-      gallery: [],
-      ASSET_URL: 'https://leifsopplevelser.no/assets'
-    }
-  },
-  created() {
-    this.setPopoverAlbum(this.gallery)
-  },
-  watch: {
-    gallery: function (val) {
-      this.setPopoverAlbum(val)
-    }
-  },
-  created() {
-    imagesByAdventureId(this.id)
-      .then(images => {
-        console.log('events', images)
-        images.forEach(image => {
-          let [filename, filextension] = image.filename.split('.')
-
-          console.log('filename:', filename)
-          console.log('filextension:', filextension)
-          const url = `${this.ASSET_URL}/${filename}_lg.${filextension}`
-
-          this.gallery.push({
-            type: 'image',
-            url
-          })
-        })
-      })
-  },
-  methods: {
-    toggleView() {
-      this.wide = !this.wide;
-    },
-    setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),
-
-    imageSelected(image) {
-      console.log('selected image', image)
-      this.selected = image;
-      // store.dispatch('incrementPopoverImage', this.selectedIndexInGallery())
-    },
-    selectedIndexInGallery() {
-      const gallery = this.gallery;
-      const selected = this.selected;
-
-      for(var i = 0; i < gallery.length; i += 1) {
-        if(gallery[i] === selected) {
-          return i;
-        }
-      }
-      return -1;
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .gallery-container {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    // justify-content: space-evenly;
-    flex-wrap: wrap;
-    padding: 1rem 0;
-  }
-</style>
\ No newline at end of file