105 lines
1.7 KiB
Vue
105 lines
1.7 KiB
Vue
<template>
|
|
<div class="image-viewer"
|
|
:class="{ 'is-visible': isVisible }"
|
|
:style="imageViewerStyle">
|
|
<div class="close-viewer mobile-only"
|
|
@click="$emit('close')">
|
|
X
|
|
</div>
|
|
<ThumbNav v-if="hasPrev"
|
|
class="thumb-nav thumb-nav--left mobile-only"
|
|
direction="left"
|
|
@navClick="$emit('clickPrev')"/>
|
|
<ThumbNav v-if="hasNext"
|
|
class="thumb-nav thumb-nav--right mobile-only"
|
|
direction="right"
|
|
@navClick="$emit('clickNext')"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ThumbNav from '@/components/ThumbNav'
|
|
|
|
export default {
|
|
components: {
|
|
ThumbNav
|
|
},
|
|
props: {
|
|
isVisible: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
imageUrl: {
|
|
type: String,
|
|
required: false,
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
hasNext: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
hasPrev: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
imageViewerStyle () {
|
|
return {
|
|
backgroundImage: 'url(' + this.imageUrl + ')'
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-viewer {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-color: #333;
|
|
}
|
|
|
|
@media (max-width: $bp__layout) {
|
|
.close-viewer {
|
|
font-size: 10em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.image-viewer {
|
|
z-index: 50;
|
|
|
|
transition: opacity 1s; //TEMP
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
&.is-visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: $bp__layout) {
|
|
.mobile-only {
|
|
display: none;
|
|
}
|
|
|
|
.image-viewer {
|
|
background-size: cover;
|
|
}
|
|
}
|
|
</style>
|