169 lines
4.7 KiB
Svelte
169 lines
4.7 KiB
Svelte
<script lang="ts">
|
|
import '../style/style.scss'
|
|
import { navigating, page } from '$app/stores'
|
|
import { beforeNavigate } from '$app/navigation'
|
|
import { onMount, setContext } from 'svelte'
|
|
import { pageLoading, previousPage } from '$utils/stores'
|
|
import { DURATION } from '$utils/contants'
|
|
import '$utils/polyfills'
|
|
// Components
|
|
import SVGSprite from '$components/SVGSprite.svelte'
|
|
import Switcher from '$components/molecules/Switcher.svelte'
|
|
import Footer from '$components/organisms/Footer.svelte'
|
|
|
|
export let data: any
|
|
export let count: any
|
|
|
|
// Set global data
|
|
setContext('global', {
|
|
...data,
|
|
count,
|
|
})
|
|
|
|
|
|
/**
|
|
* On page change
|
|
*/
|
|
// Store previous page (for photo Viewer close button)
|
|
beforeNavigate(({ from }) => {
|
|
$previousPage = from.pathname
|
|
})
|
|
|
|
// Define page loading from navigating store
|
|
navigating.subscribe((store: any) => {
|
|
if (store) {
|
|
$pageLoading = true
|
|
|
|
// Turn page loading when changing page
|
|
setTimeout(() => {
|
|
$pageLoading = false
|
|
}, DURATION.PAGE_IN * 1.25)
|
|
}
|
|
})
|
|
|
|
onMount(() => {
|
|
// Avoid FOUC
|
|
document.body.style.opacity = '1'
|
|
})
|
|
</script>
|
|
|
|
<Switcher isOver={!!$page.params.location && !!$page.params.photo} />
|
|
|
|
<slot />
|
|
|
|
{#if !$page.params.photo}
|
|
<Footer />
|
|
{/if}
|
|
|
|
{#if $pageLoading}
|
|
<div class="page-loading" />
|
|
{/if}
|
|
|
|
<SVGSprite />
|
|
|
|
<script context="module" lang="ts">
|
|
import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
|
|
import { fetchAPI } from '$utils/api'
|
|
|
|
export async function load ({}: LoadEvent): Promise<LoadOutput> {
|
|
const res = await fetchAPI(`
|
|
query {
|
|
locations: location (filter: { status: { _eq: "published" }}) {
|
|
id
|
|
name
|
|
slug
|
|
coordinates
|
|
country {
|
|
name
|
|
slug
|
|
flag { id }
|
|
continent { slug }
|
|
}
|
|
date_updated
|
|
photos (
|
|
sort: "-date_created",
|
|
limit: ${import.meta.env.VITE_PREVIEW_COUNT}
|
|
) {
|
|
image {
|
|
id
|
|
title
|
|
}
|
|
date_created
|
|
}
|
|
has_poster
|
|
globe_close
|
|
}
|
|
|
|
countries: country (filter: { status: { _eq: "published" }}) {
|
|
id
|
|
name
|
|
slug
|
|
flag { id }
|
|
locations { id slug }
|
|
}
|
|
|
|
continents: continent {
|
|
name
|
|
slug
|
|
rotation
|
|
countries { id slug }
|
|
}
|
|
|
|
settings {
|
|
seo_name
|
|
seo_title
|
|
seo_description
|
|
description
|
|
explore_list
|
|
limit_new
|
|
instagram
|
|
footer_links
|
|
switcher_links
|
|
newsletter_subtitle
|
|
newsletter_url
|
|
newsletter_text
|
|
}
|
|
|
|
shop {
|
|
enabled
|
|
module_title
|
|
module_text
|
|
module_images {
|
|
directus_files_id {
|
|
id
|
|
title
|
|
}
|
|
}
|
|
}
|
|
|
|
# Count
|
|
countPhotos: photo_aggregated (filter: { status: { _eq: "published" }}) {
|
|
count { id }
|
|
}
|
|
countLocations: location_aggregated (filter: { status: { _eq: "published" }}) {
|
|
count { id }
|
|
}
|
|
countCountries: country_aggregated (filter: { status: { _eq: "published" }}) {
|
|
count { id }
|
|
}
|
|
}
|
|
`)
|
|
|
|
const { data } = res
|
|
const filteredContinents = data.continents.filter((cont: any) => cont.countries.length)
|
|
|
|
return {
|
|
props: {
|
|
data: {
|
|
...data,
|
|
continents: filteredContinents,
|
|
},
|
|
count: {
|
|
photos: data.countPhotos[0].count.id,
|
|
locations: data.countLocations[0].count.id,
|
|
countries: data.countCountries[0].count.id,
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script> |