From 79fa21199530cd394b98cd4c0322f07a2195f0c3 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Mon, 28 Jan 2019 12:04:41 +0000
Subject: [PATCH] galleries: scroll to gallery thumb on page load

---
 components/GalleryFeatured.vue |  5 +++++
 components/GalleryPage.vue     | 20 +++++++++++++++++++-
 pages/services.vue             |  8 ++++----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/components/GalleryFeatured.vue b/components/GalleryFeatured.vue
index 2b327e6..860be54 100644
--- a/components/GalleryFeatured.vue
+++ b/components/GalleryFeatured.vue
@@ -1,6 +1,7 @@
 <template>
   <ul class="gallery-featured">
     <li v-for="(gallery, index) in galleries"
+        ref="galleries"
         class="featured-image thumb-overlay selected-indicator"
         :class="{ 'is-active': index === galleryActive }"
         :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
@@ -26,6 +27,10 @@ export default {
       },
     }
   },
+
+  mounted () {
+    this.$refs.galleries[this.galleryActive].scrollIntoView({behavior: 'smooth'})
+  },
 }
 </script>
 
diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 9924162..f5858ef 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -55,10 +55,28 @@ export default {
 
   computed: {
     viewingImageUrl () {
-      return this.galleries[this.activeGalleryIndex].images[this.activeImageIndex].url
+      if (
+        this.galleries[this.activeGalleryIndex]
+        && this.galleries[this.activeGalleryIndex].images 
+        && this.galleries[this.activeGalleryIndex].images[this.activeImageIndex]
+      ) {
+        console.log('found')
+        return this.galleries[this.activeGalleryIndex].images[this.activeImageIndex].url
+      } else {
+        console.log('not found')
+        // TOOD return 404 page - does this do it?
+        throw({ statusCode: 404, message: 'Image Not Found' })
+      }
     }
   },
 
+  created () {
+    let query = this.$route.query
+    this.activeGalleryIndex = query.gallery ? parseInt(query.gallery) : 0
+    this.activeRow = this.activeGalleryIndex
+    this.activeImageIndex = query.image ? parseInt(query.image) : 0
+  },
+
   mounted () {
     window.addEventListener('resize', () => { this.imageViewerIsVisible = false })
   },
diff --git a/pages/services.vue b/pages/services.vue
index 1bbad32..2d2c145 100644
--- a/pages/services.vue
+++ b/pages/services.vue
@@ -53,28 +53,28 @@ export default {
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
           'html': '<p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=0',
         },
         {
           'heading': 'Dance',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
           'html': '<p>Photography and video production of dancers and performances for print, web, and promotion.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=1',
         },
         {
           'heading': 'Music',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
           'html': '<p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=2',
         },
         {
           'heading': 'Events',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
           'html': '<p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=3',
         },
       ]
     }