mirror of
https://github.com/KevinMidboe/leifsopplevelser.git
synced 2025-10-29 09:40:21 +00:00
Renamed gallery to AdventureGallery
This commit is contained in:
136
src/components/AdventureGallery.vue
Normal file
136
src/components/AdventureGallery.vue
Normal file
@@ -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>
|
||||||
@@ -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>
|
|
||||||
Reference in New Issue
Block a user