Viewer: Change page title on change, Code clean
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -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}"
|
||||||
|
|||||||
Reference in New Issue
Block a user