mirror of
https://github.com/KevinMidboe/leifsopplevelser.git
synced 2025-10-29 01:30:22 +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