vue-wp/vue-theme/src/components/gallery.vue

<template lang="pug">
.gallery.f-col.center(v-if="fullscreengallery + 1 > 0")
    button(@click="hideGallery").hide hide
    ul
        li(v-for="(image, i) of images" :class="{ active: i === selected }")
            .image-wrapper.f-col.center
                img(:src="image")
    .controls.f-row
        button(@click="prev") <
        .f-grow
        button(@click="next") >
</template>

<script>
export default {
    props: {
        images: { type: Array },
        fullscreengallery: { type: Number },
    },
    data() { 
        return {
            selected: -1
        }
    },
    methods: {
        prev() {
            this.selected > 0 ? this.selected-- : this.selected = this.images.length - 1
        },
        next() {
            this.selected < this.images.length - 1 ? this.selected++ : this.selected = 0
        },
        hideGallery() {
            this.$emit('close')
        },
        interpretKeypress(e) {
            switch (e.key) {
                case 'ArrowRight':
                    this.next()
                    break
                case 'ArrowLeft':
                    this.prev()
                    break
                case 'Escape':
                    this.hideGallery()
                    break
            }
        }
    },
    watch: {
        fullscreengallery(newVal, oldVal) { 
            this.selected = newVal
        }
    },
    mounted() {
        // Set the first selection
        this.selected = this.fullscreengallery
        
        window.addEventListener('keydown', this.interpretKeypress)
    },
    destroyed() {
        window.removeEventListener('keydown', this.interpretKeypress)
    }
}
</script>

<style lang="postcss">
.gallery
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: black
    z-index: 1001
    > *
        opacity: 100%
        position: relative
        z-index: 1011
    button.hide
        z-index: 1100
    ul
        list-style: none
        li
            display: none
            &.active
                display: block
            .image-wrapper
                height: 100%
                width: 50vw
                background-color: yellow
            h1
                color: green
    .controls
        position: absolute
        width: 100vw
        button
            height: 100vw
            padding: 1vw
</style>