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

WIP React > Svelte

Browse Source 
Put most of the developed design into Svelte
This commit is contained in:
Félix Péault
2020-02-11 15:09:32 +01:00
parent 61e45cb171
commit 9b0c154f61
95 changed files with 3627 additions and 9464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,31 +1,29 @@
<script context="module">
// Svelte
import { api, locations, currentLocation } from '../../../../store'
import { apiEndpoints, locations, currentLocation } from '../../../../store'
import { stores } from '@sapper/app'
// Define to preload data or load the store
// Define either to preload data or use the store
let preloaded
currentLocation.subscribe(store => {
preloaded = (store) ? store : undefined
})
currentLocation.subscribe(store => preloaded = store ? store : undefined)
// Sapper preload data
// Preload data
export async function preload (page, session) {
if (preloaded === undefined) {
const photos = await this.fetch(`${api.rest}/items/photos?fields=id,name,slug,image.data,created_on&filter[location.slug][rlike]=%${page.params.location}%`)
const photosData = await photos.json()
// 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 photos = await req.json()
return {
photos: photosData.data
}
} else {
return {
photos: preloaded.photos
photos: photos.data
}
}
// Use the store otherwise
else return {
photos: preloaded.photos
}
}
</script>
<script>
import { stores } from '@sapper/app'
const { page, session, preloading } = stores()
// Dependencies
@@ -33,18 +31,15 @@
import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat)
// Props and variables
export let photos
let currentIndex
let indexFormated
let viewerPhotos
// Define current location
if ($currentLocation === undefined) {
currentLocation.set({
location: $locations.find(location => location.slug === $page.params.location),
photos: photos
})
}
const location = $locations.find(loc => loc.slug === $page.params.location)
$currentLocation == undefined && currentLocation.set({ location, photos })
// Set current photo, index and siblings
const setCurrentPhotos = () => {
@@ -53,9 +48,9 @@
indexFormated = (currentIndex < 10) ? '0' + (currentIndex + 1) : currentIndex + 1
viewerPhotos = {
current: photos[currentIndex],
// Last photo if first, otherwise index-1
// Last photo if first, otherwise index - 1
prev: (currentIndex === 0) ? photos[photos.length - 1] : photos[currentIndex - 1],
// First photo if last, otherwise index+1
// First photo if last, otherwise index + 1
next: (currentIndex === photos.length - 1) ? photos[0] : photos[currentIndex + 1]
}
}
@@ -67,9 +62,9 @@
}
})
// Define things
const locationFull = `${$currentLocation.location.name}, ${$currentLocation.location.country.name}`
const path = `/viewer/${$currentLocation.location.country.slug}/${$currentLocation.location.slug}/`
// Define values
const locationFull = `${location.name}, ${location.country.name}`
const path = `/viewer/${location.country.slug}/${location.slug}/`
// Get thumbnail
const getThumb = (photo, size) => {
@@ -99,12 +94,12 @@
<div class="container">
<div class="nav content">
<a href="/choose" class="button is-info" id="photo_close">Change location</a>
<a href="/location/{$currentLocation.location.country.slug}/{$currentLocation.location.slug}" class="button is-dark" id="photo_close">Close</a>
<a href="/location/{location.country.slug}/{location.slug}" class="button is-dark" id="photo_close">Close</a>
</div>
<div class="photo">
<div class="image">
<img src="{getThumb(viewerPhotos.current, 'large')}" srcset="{getThumb(viewerPhotos.current, 'large')} 1x, {getThumb(viewerPhotos.current, 'large-2x')} 2x" alt="{viewerPhotos.current.name}">
<img src={getThumb(viewerPhotos.current, 'large')} srcset="{getThumb(viewerPhotos.current, 'large')} 1x, {getThumb(viewerPhotos.current, 'large-2x')} 2x" alt="viewerPhotos.current.name">
</div>
<div class="details content">
<strong class="is-size-5">{viewerPhotos.current.name}</strong> <br>
@@ -117,10 +112,10 @@
<div class="section">
<div class="level">
<div class="level-left">
<a href="{path + viewerPhotos.prev.slug}" id="photo_prev">
<a href={path + viewerPhotos.prev.slug} id="photo_prev">
<div class="media">
<div class="media-left">
<img src="{getThumb(viewerPhotos.prev, 'thumbnail')}" alt="{viewerPhotos.prev.name}" width="200">
<img src={getThumb(viewerPhotos.prev, 'thumbnail')} alt={viewerPhotos.prev.name} width="200">
</div>
<div class="media-content content">
<strong class="is-size-5">{viewerPhotos.prev.name}</strong> <br>
@@ -131,14 +126,14 @@
</div>
<div class="level-right">
<a href="{path + viewerPhotos.next.slug}" id="photo_next">
<a href={path + viewerPhotos.next.slug} id="photo_next">
<div class="media">
<div class="media-content content has-text-right">
<strong class="is-size-5">{viewerPhotos.next.name}</strong> <br>
<span>{locationFull}</span>
</div>
<div class="media-right">
<img src="{getThumb(viewerPhotos.next, 'thumbnail')}" alt="{viewerPhotos.next.name}" width="200">
<img src={getThumb(viewerPhotos.next, 'thumbnail')} alt={viewerPhotos.next.name} width="200">
</div>
</div>
</a>