Viewer: Change page title on change, Code clean
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2020-03-29 19:02:51 +02:00
parent 86a38c8987
commit 1e323ca8a9

View File

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