WIP

src/routes/viewer/[country]/[location]/[photo].svelte

@@ -10,7 +10,7 @@
 	export async function preload (page, session) {
 		// Load the photos if not loaded
 		if (!preloaded) {
-			const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.data,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
+			const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,image.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
 			const photos = await req.json()
 			return {
 				photos: photos.data
@@ -24,23 +24,36 @@
 </script>
 
 <script>
-	const { page, session, preloading } = stores()
+	import { onMount } from 'svelte'
+	import * as fn from '../../../../functions'
 
 	// Dependencies
     import dayjs from 'dayjs'
 	import advancedFormat from 'dayjs/plugin/advancedFormat'
 	dayjs.extend(advancedFormat)
 
+	// Components
+	import IconGlobe from '../../../../atoms/IconGlobe'
+	import IconCross from '../../../../atoms/IconCross'
+	import Carousel from '../../../../organisms/Carousel'
+
 	// Props and variables
+	const { page } = stores()
 	export let photos
 	let currentIndex
 	let indexFormated
 	let viewerPhotos
+	let windowWidth
+	let changeWindowWidth
 
 	// Define current location
 	const location = $locations.find(loc => loc.slug === $page.params.location)
+	const locationFull = `${location.name}, ${location.country.name}`
 	$currentLocation == undefined && currentLocation.set({ location, photos })
 
+	// Define path
+	const path = `/viewer/${location.country.slug}/${location.slug}/`
+
 	// Set current photo, index and siblings
 	const setCurrentPhotos = () => {
 		// Define index and prev/next photos
@@ -62,18 +75,6 @@
 		}
 	})
 
-	// Define values
-	const locationFull = `${location.name}, ${location.country.name}`
-	const path = `/viewer/${location.country.slug}/${location.slug}/`
-
-	// Get thumbnail
-	const getThumb = (photo, size) => {
-		if (photo) {
-			const thumbnail = photo.image.data.thumbnails.find(thumb => thumb.url.includes(`key=${size}`))
-			return thumbnail.url
-		}
-	}
-
 	// Keyboard navigation
 	const keyboardNav = event => {
 		const keyCode = event.keyCode
@@ -85,13 +86,48 @@
 		// Close
 		else if ([27,67].includes(keyCode)) document.getElementById('photo_close').click()
 	}
+
+
+	/*
+	** Run code on browser only
+	*/
+	onMount(() => {
+		changeWindowWidth = () => {
+			windowWidth = window.innerWidth
+		}
+		changeWindowWidth()
+	})
 </script>
 
-<!-- <pre>{JSON.stringify(viewerPhotos, null, 2)}</pre> -->
+<svelte:head>
+	<title>Houses Of - photoName photoCountryName</title>
+</svelte:head>
 
-<svelte:window on:keydown={keyboardNav} />
+<svelte:window on:keydown={keyboardNav} on:resize={changeWindowWidth} />
 
-<div class="container">
+<section class="viewer">
+	<div class="viewer__top">
+		<p class="tip">Tap for fullscreen</p>
+
+		<div class="buttons">
+			<a href="/choose" class="button-control button-control--dashed">
+				<IconGlobe color="#fff" width="18" />
+				<svg>
+					<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
+				</svg>
+			</a>
+			<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close">
+				<IconCross color="#fff" width="18" className="icon" />
+				<IconCross color="#fff" width="18" className="icon" hidden="true" />
+			</a>
+		</div>
+	</div>
+
+	<Carousel viewer={true} {photos} />
+</section>
+
+
+<!-- <div class="container">
 	<div class="nav content">
 		<a href="/choose" class="button is-info" id="photo_close">Change location</a>
 		<a href="/location/{location.country.slug}/{location.slug}" class="button is-dark" id="photo_close">Close</a>
@@ -140,4 +176,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div> -->