flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tabs to spaces and code cleaning

Browse Source
This commit is contained in:
Félix Péault
2020-02-27 23:08:13 +01:00
parent b5369b66a8
commit a73d9ff71c
7 changed files with 248 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/routes/viewer/[country]/[location]/[photo].svelte
View File

@@ -1,112 +1,99 @@
<script context="module">
import { apiEndpoints, locations, currentLocation } from '../../../../store'
import { stores } from '@sapper/app'
import { stores } from '@sapper/app'
import {
apiEndpoints,
locations,
currentLocation,
currentPhotos
} from '../../../../store'
// Define either to preload data or use the store
let preloaded
currentLocation.subscribe(store => preloaded = store ? store : undefined)
// Define either to preload data or use the store
let preloaded
currentLocation.subscribe(store => preloaded = store ? store : undefined)
// Preload data
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.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
const photos = await req.json()
return {
photos: photos.data
}
}
// Use the store otherwise
else return {
photos: preloaded.photos
}
}
// Preload data
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.*,image.data,location.*,location.country.*,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
const photos = await req.json()
return {
photos: photos.data
}
}
// Use the store otherwise
else return {
photos: preloaded.photos
}
}
</script>
<script>
import { onMount } from 'svelte'
import * as fn from '../../../../functions'
import { onMount } from 'svelte'
import * as fn from '../../../../functions'
// Dependencies
// Dependencies
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)
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'
// 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
// 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 current location
const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
const locationFull = `${location.name}, ${location.country.name}`
// Define path
const path = `/viewer/${location.country.slug}/${location.slug}/`
// Update store current location informations
if (!$currentLocation) currentLocation.set(location)
if (!$currentPhotos) currentPhotos.set(photos)
// Set current photo, index and siblings
const setCurrentPhotos = () => {
// Define index and prev/next photos
currentIndex = photos.findIndex(photo => photo.slug === $page.params.photo)
indexFormated = (currentIndex < 10) ? '0' + (currentIndex + 1) : currentIndex + 1
viewerPhotos = {
current: photos[currentIndex],
// Last photo if first, otherwise index - 1
prev: (currentIndex === 0) ? photos[photos.length - 1] : photos[currentIndex - 1],
// First photo if last, otherwise index + 1
next: (currentIndex === photos.length - 1) ? photos[0] : photos[currentIndex + 1]
}
}
// On photo page change
page.subscribe(({ path, params, query }) => {
if (path.includes('/viewer/')) {
setCurrentPhotos()
}
})
// Define path
const path = `/viewer/${location.country.slug}/${location.slug}/`
/*
** Run code on browser only
*/
onMount(() => {
/*
** Run code on browser only
*/
onMount(() => {
})
})
</script>
<svelte:head>
<title>Houses Of - photoName photoCountryName</title>
<title>Houses Of - photoName photoCountryName</title>
</svelte:head>
<svelte:window bind:innerWidth={windowWidth} />
<section class="viewer">
<div class="viewer__top">
<p class="tip">Tap for fullscreen</p>
<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={windowWidth >= 768 ? 22 : 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" class="icon" />
<IconCross color="#fff" width="18" class="icon" hidden="true" />
</a>
</div>
</div>
<div class="buttons">
<a href="/choose" class="button-control button-control--dashed">
<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 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" class="icon" />
<IconCross color="#fff" width="18" class="icon" hidden="true" />
</a>
</div>
</div>
<Carousel {photos} viewer={true} />
<Carousel {photos} viewer={true} />
</section>