phyks
/
flatisfy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix slider component as well to use local images

This commit is contained in:
Lucas Verney 2018-09-07 15:13:10 +02:00
parent c7fa6c8b5b
commit 139568f85e
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
flatisfy/web/js_src/components/slider.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div @keydown="closeModal"> <div @keydown="closeModal">
<isotope ref="cpt" :options="isotopeOptions" v-images-loaded:on.progress="layout" :list="photos"> <isotope ref="cpt" :options="isotopeOptions" v-images-loaded:on.progress="layout" :list="photos">
<div v-for="(photo, index) in photos" :key="photo.url"> <div v-for="(photo, index) in photosURLOrLocal" :key="photo">
<img :src="photo.url" v-on:click="openModal(index)"/> <img :src="photo" v-on:click="openModal(index)"/>
</div> </div>
</isotope> </isotope>
<div class="modal" ref="modal" :aria-label="$t('slider.Fullscreen_photo')" role="dialog"> <div class="modal" ref="modal" :aria-label="$t('slider.Fullscreen_photo')" role="dialog">
<span class="close"><button v-on:click="closeModal" :title="$t('common.Close')" :aria-label="$t('common.Close')">&times;</button></span> <span class="close"><button v-on:click="closeModal" :title="$t('common.Close')" :aria-label="$t('common.Close')">&times;</button></span>
<img class="modal-content" :src="photos[modalImgIndex].url"> <img class="modal-content" :src="photosURLOrLocal[modalImgIndex]">
</div> </div>
</div> </div>
</template> </template>
@ -27,6 +27,17 @@ export default {
isotope isotope
}, },
computed: {
photosURLOrLocal() {
return this.photos.map(photo => {
if (photo.local) {
return `/data/img/${photo.local}`;
}
return photo.url;
});
},
},
created () { created () {
window.addEventListener('keydown', event => { window.addEventListener('keydown', event => {
if (!this.isModalOpen) { if (!this.isModalOpen) {