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

<template lang="pug">
.gallery.active.f-col.center
    button(@click="hideGallery").hide hide gallery &#x25B2
    figure.f-col.center
        p {{images}}
        img(:src="Object.values(images)[selected]")
        p active: {{ selected }}
        .titledesc.t-left {{titledesc}}
            h2 Title goes here: Responsive block to fit different screen sizes. Hide/Show from bottom of the screen.
            p Description goes here: London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blue McRight is an inter-disciplinary artist influenced by nature, personal experience, and politics. At its core, her multi-media work focuses on water – and its lack – as an environmental issue; however her practice has expanded to address related ideas such as the body, circulatory systems, and marine science. McRight’s work is both elusive and interactive, inviting viewer engagement and contemplation. 

    .controls.f-row
        button(v-if="selected > 0" @click="prev") &#x25C0prev
        .f-grow
        button(v-if="selected < Object.values(images).length - 1" @click="next") next &#x25B6
</template>

<script>
export default {
    props: {
        activeImageIndex: { type: Number, required: true, default: 0 },
        images: { type: Object, required: true },
    },
    data() {
        return {
            selected: 0,
        }
    },
    methods: {
        prev() {
            this.selected > 0
                ? this.selected--
                : (this.selected = Object.keys(this.images).length - 1)
        },
        next() {
            this.selected < Object.keys(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: {
        activeImageIndex(newVal, oldVal) {
            this.selected = newVal
        },
    },
    async mounted() {
        // Set the first selection
        this.selected = this.activeImageIndex
        window.addEventListener('keydown', this.interpretKeypress)
    },
    unmounted() {
        window.removeEventListener('keydown', this.interpretKeypress)
    },
}
</script>

<style lang="postcss">
// prettier-ignore
@import '../sss/variables.sss'
@import '../sss/theme.sss'

.gallery
    overflow: hidden
    .wrap
        /* width: 60vw */
    &.active
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        background-color: rgba(255, 0, 0, 0.6)
        z-index: 1001

        > * /* select for all direct children  */
            opacity: 100%
            position: relative
            max-height: 95vh
            z-index: 1011
        button.hide
            position: fixed
            top: 0
            padding: 4px
            color: $cia_red
            z-index: 1100
        figure
            img
                background-size: auto
                max-width: 90vw
                max-height: 80vh
            .titledesc
                position: fixed
                max-width: 90vw
                bottom: 1vh
                background-color: rgba(255, 255, 255, 0.6)
                padding: 1.0em
                text-align: left
                h2, p
                    color: $cia_black
        .controls
            position: absolute
            width: 100vw
            button
                background-color: rgba(255, 255, 255, 0.1)
                height: 100vh
                padding: 1.0em
</style>