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>
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}"