From 1e323ca8a9fdfccd3e3904ddbcf41532d6de3ad2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 29 Mar 2020 19:02:51 +0200
Subject: [PATCH] Viewer: Change page title on change, Code clean

---
 .../viewer/[country]/[place]/[photo].svelte      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/viewer/[country]/[place]/[photo].svelte b/src/routes/viewer/[country]/[place]/[photo].svelte
index 72ce03e..d5e8806 100644
--- a/src/routes/viewer/[country]/[place]/[photo].svelte
+++ b/src/routes/viewer/[country]/[place]/[photo].svelte
@@ -30,7 +30,7 @@
 </script>
 
 <script>
-    import { onMount, createEventDispatcher } from 'svelte'
+    import { onMount } from 'svelte'
     import {
         site,
         locations,
@@ -57,10 +57,10 @@
 
     // Variables
     const { page } = stores()
-    const dispatch = createEventDispatcher()
     let windowWidth
     let gotoLink
     let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
+    let pageTitle = ($currentLocation) ? `Photos of ${$currentLocation.name}, ${$currentLocation.country.name}` : ''
 
     // Update store current location
     if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.place))
@@ -68,11 +68,14 @@
 
     // Photo has changed (from Carousel)
     const photoChanged = event => {
+        const currentPhoto = event.detail
         const windowPathname = window.location.pathname
-        const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + event.detail.slug
-        // Go to page via a sapper-noscroll link to avoid scroll jump
+        const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
+        // Go to page via a sapper-noscroll link to avoid scroll jump (hacky)
         gotoLink.href = newUrl
         gotoLink.click()
+        // Change page title with photo name
+        pageTitle = `${currentPhoto.name}, ${currentPhoto.location.country.name}`
     }
 
 
@@ -86,10 +89,7 @@
 </script>
 
 <svelte:head>
-    <!-- TODO:
-        - Change the title with the current photo name and update Metas (with window location url)
-     -->
-    <title>{$site.seo_name} – Photos of {$currentLocation.name}, {$currentLocation.country.name}</title>
+    <title>{$site.seo_name} – {pageTitle}</title>
     <meta name="description" content="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}">
     <SocialMetas
         url="https://{$page.host}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}"