<template> <div class="gallery-page"> <GalleryImageViewer class="image-viewer" :is-visible="imageViewerIsVisible" :image-url="viewingImageUrl" :has-next="activeImageIndex < galleries[activeGalleryIndex].images.length - 1" :has-prev="activeImageIndex > 0" @clickPrev="handleClickPrev" @clickNext="handleClickNext" @close="imageViewerIsVisible = false" /> <div class="gallery"> <GalleryFeatured class="gallery__featured" :galleries="galleries" @clicked="handleFeaturedClick" /> <GalleryThumbs class="gallery__thumbs" :featured-height="featuredImageHeight" :galleries="galleries" :active-row="activeRow" @thumbClick="handleThumbClick"/> </div> </div> </template> <script> import GalleryFeatured from '@/components/GalleryFeatured' import GalleryThumbs from '@/components/GalleryThumbs' import GalleryImageViewer from '@/components/GalleryImageViewer' export default { components: { GalleryFeatured, GalleryThumbs, GalleryImageViewer, }, props: { galleries: { type: Array, required: true } }, data () { return { featuredImageHeight: '16rem', imageViewerIsVisible: false, activeRow: 0, activeGalleryIndex: 0, activeImageIndex: 0 } }, computed: { viewingImageUrl () { return this.galleries[this.activeGalleryIndex].images[this.activeImageIndex].url } }, mounted () { window.addEventListener('resize', () => { this.imageViewerIsVisible = false }) }, methods: { handleFeaturedClick (index) { this.activeRow = index }, handleThumbClick(gallery, image) { this.activeGalleryIndex = gallery this.activeImageIndex = image this.imageViewerIsVisible = true }, handleClickNext () { this.activeImageIndex++; }, handleClickPrev () { this.activeImageIndex--; } } } </script> <style lang="scss" scoped> .gallery-page { position: relative; height: 100%; width: 100%; } .image-viewer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } @media (max-width: $bp__layout) { .gallery-page { padding-top: $site-menu__header-height; } .gallery { position: relative; height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; } .gallery__thumbs { position: absolute; top: 0; left: 0; } .gallery__featured { width: 100vw; } .close-viewer { font-size: 10em; cursor: pointer; } } @media (min-width: $bp__layout) { .mobile-only { display: none; } .gallery-page { padding-left: $site-menu__header-width; } .gallery { display: flex; flex-direction: row; justify-content: space-between; position: relative; height: 100%; width: 100%; overflow: hidden; } .gallery__featured { order: 2; flex: 0 0 $gallery-featured-width--compact; overflow-y: auto; @media (min-width: $bp__gallery-compact) { flex-basis: $gallery-featured-width; } } .gallery__thumbs { order: 1; display: flex; flex-direction: column; justify-content: space-between; padding-left: 8px; overflow: hidden; } .gallery__nav { display: none; } .close-viewer { display: none; } } </style>