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

12
src/molecules/Photo.svelte
View File

@@ -12,8 +12,8 @@
dayjs.extend(advancedFormat) dayjs.extend(advancedFormat)
// Props and variables // Props and variables
export let index
export let photo export let photo
export let index
export let layout = 'list' export let layout = 'list'
let photoElement let photoElement
@@ -22,16 +22,16 @@
const defaultHeight = Math.ceil(defaultWidth / 1.5) const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Reactive variables for location informations // Reactive variables for location informations
$: location = $currentLocation const location = photo.location
$: imgAlt = !!location ? `${photo.name}, ${location.region}, ${location.country.name}` : 'Loading…' const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}`
$: photoHref = !!location ? `/viewer/${location.country.slug}/${location.slug}/${photo.slug}` : '#' const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
/* /*
** Run code on browser only ** Run code on browser only
*/ */
onMount(() => { onMount(() => {
// Parallax on photo when image has been loaded // Parallax on photo when the image has been loaded
const parallaxNumber = basicScroll.default.create({ const parallaxNumber = basicScroll.default.create({
elem: photoElement.querySelector('.photo__image--number'), elem: photoElement.querySelector('.photo__image--number'),
direct: photoElement, direct: photoElement,
@@ -57,7 +57,7 @@
<div class="photo__location wrap"> <div class="photo__location wrap">
<div class="wrapper"> <div class="wrapper">
<h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2> <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
<p class="style-caps">{!!location && location.region}, {!!location && location.country.name}</p> <p class="style-caps">{location.region}, {location.country.name}</p>
</div> </div>
</div> </div>

4
src/molecules/Switcher.svelte
View File

@@ -1,5 +1,7 @@
<script> <script>
import { currentLocation } from '../store' import {
currentLocation,
} from '../store'
// Components // Components
import IconGlobe from '../atoms/iconGlobe' import IconGlobe from '../atoms/iconGlobe'

136
src/routes/_layout.svelte
View File

@@ -1,80 +1,86 @@
<script context="module"> <script context="module">
import { apiEndpoints, site, continents, countries, locations } from '../store' import {
apiEndpoints,
site,
continents,
countries,
locations
} from '../store'
export async function preload (page, session) { export async function preload (page, session) {
const request = await this.fetch(apiEndpoints.gql, { const request = await this.fetch(apiEndpoints.gql, {
method: 'post', method: 'post',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: `{ body: JSON.stringify({ query: `{
site { site {
data { data {
description description
explore_globe explore_globe
explore_list explore_list
instagram instagram
credits_text credits_text
credits_list credits_list
} }
} }
continents { continents {
data { data {
id id
name name
} }
} }
countries { countries {
data { data {
id id
name name
slug slug
flag { full_url title } flag { full_url title }
continent { id } continent { id }
} }
} }
locations (filter: { status_eq: "published" }) { locations (filter: { status_eq: "published" }) {
data { data {
id id
name name
slug slug
region region
country { id } country { id }
description description
coordinates coordinates
} }
} }
}`}) }`})
}) })
const result = await request.json() const result = await request.json()
// Set data into store // Set data into store
site.set(result.data.site.data[0]) site.set(result.data.site.data[0])
continents.set(result.data.continents.data) continents.set(result.data.continents.data)
countries.set(result.data.countries.data) countries.set(result.data.countries.data)
locations.set(result.data.locations.data) locations.set(result.data.locations.data)
} }
</script> </script>
<script> <script>
// Manipulate countries data // Manipulate countries data
// Replace each countrie's continent by the database // Replace each countrie's continent by the database
$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id)) $countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
// Manipulate continents data // Manipulate continents data
// Push each country to its continent // Push each country to its continent
$countries.forEach(country => { $countries.forEach(country => {
const continent = $continents.find(cont => cont.id === country.continent.id) const continent = $continents.find(cont => cont.id === country.continent.id)
continent.countries = [] continent.countries = []
!continent.countries.includes(country) && continent.countries.push(country) !continent.countries.includes(country) && continent.countries.push(country)
}) })
// Manipulate locations data // Manipulate locations data
// Replace each location's country by the database // Replace each location's country by the database
$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id)) $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
</script> </script>
<!-- <style src="../style/style.scss" global></style> --> <!-- <style src="../style/style.scss" global></style> -->
<style lang="scss" global> <style lang="scss" global>
@import "./style/style.scss"; @import "./style/style.scss";
</style> </style>
<slot></slot> <slot></slot>

8
src/routes/choose.svelte
View File

@@ -1,8 +1,10 @@
<script> <script>
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { fade, fly } from 'svelte/transition' import {
import { flip } from 'svelte/animate' site,
import { site, currentLocation, currentPhotos } from '../store' currentLocation,
currentPhotos
} from '../store'
import AOS from 'aos' import AOS from 'aos'
// Components // Components

152
src/routes/index.svelte
View File

@@ -1,5 +1,7 @@
<script context="module"> <script context="module">
import { apiEndpoints } from '../store' import {
apiEndpoints,
} from '../store'
// Preload data // Preload data
export async function preload (page, session) { export async function preload (page, session) {
@@ -7,9 +9,9 @@
const limit = 5 const limit = 5
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`) const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`)
const photos = await req.json() const photos = await req.json()
if (req.status === 200) { if (req.ok) {
return { photos: photos.data } return { photos: photos.data }
} }
this.error(404, 'Not found') this.error(404, 'Not found')
} }
</script> </script>
@@ -52,36 +54,36 @@
// Scroll apparitions // Scroll apparitions
if (process.browser) { if (process.browser) {
AOS.init() AOS.init()
// Parallax titles
const titleHouses = document.getElementById('title-houses')
const scrollTitleHouses = basicScroll.default.create({
elem: titleHouses,
direct: titleHouses,
from: 0,
to: window.innerHeight * 0.6,
props: {
'--translateX': {
from: '-3%',
to: '-20%'
}
}
}).start()
const titleWorld = document.getElementById('title-world')
const scrollTitleWorld = basicScroll.default.create({
elem: titleWorld,
direct: titleWorld,
from: document.querySelector('.explore__description').getBoundingClientRect().top,
to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
props: {
'--translateX': {
from: '4%',
to: '-4%'
}
}
}).start()
} }
// Parallax titles
const titleHouses = document.getElementById('title-houses')
const scrollTitleHouses = basicScroll.default.create({
elem: titleHouses,
direct: titleHouses,
from: 0,
to: window.innerHeight * 0.6,
props: {
'--translateX': {
from: '-3%',
to: '-20%'
}
}
}).start()
const titleWorld = document.getElementById('title-world')
const scrollTitleWorld = basicScroll.default.create({
elem: titleWorld,
direct: titleWorld,
from: document.querySelector('.explore__description').getBoundingClientRect().top,
to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
props: {
'--translateX': {
from: '4%',
to: '-4%'
}
}
}).start()
}) })
</script> </script>
@@ -89,50 +91,48 @@
<title>Houses Of - Beautiful houses of planet Earth</title> <title>Houses Of - Beautiful houses of planet Earth</title>
</svelte:head> </svelte:head>
<div in:fade out:fade> <section class="intro">
<section class="intro"> <div class="anim-mask">
<div class="anim-mask" in:fade out:fade> <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
<div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true"> <h1 class="title-massive" aria-label="Houses">
<h1 class="title-massive" aria-label="Houses"> {@html fn.lettersToSpan('Houses')}
{@html fn.lettersToSpan('Houses')}
</h1>
</div>
</div>
<div class="wrap" in:fade out:fade>
<div class="intro__description style-description">
<p>{$site.description}</p>
<Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
<IconGlobeSmall width="22" color="#666" />
</Button>
</div>
</div>
<Carousel {photos} />
</section>
<section class="explore explore--homepage">
<div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
<div class="anim-mask">
{@html fn.lettersToSpan('of')}
</div>
</div>
<div class="explore__description style-description" id="choose">
<p>{$site.explore_globe}</p>
</div>
<InteractiveGlobe />
<div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
{@html fn.lettersToSpan('World')}
</h1> </h1>
</div> </div>
</div>
<Locations /> <div class="wrap">
</section> <div class="intro__description style-description">
<p>{$site.description}</p>
<Footer /> <Button type="a" href="#choose" class="button" text="Explore locations" on:click={e => fn.smoothScroll(e, '#choose')}>
</div> <IconGlobeSmall width="22" color="#666" />
</Button>
</div>
</div>
<Carousel {photos} />
</section>
<section class="explore explore--homepage">
<div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
<div class="anim-mask">
{@html fn.lettersToSpan('of')}
</div>
</div>
<div class="explore__description style-description" id="choose">
<p>{$site.explore_globe}</p>
</div>
<InteractiveGlobe />
<div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
{@html fn.lettersToSpan('World')}
</h1>
</div>
<Locations />
</section>
<Footer />

22
src/routes/location/[country]/[location].svelte
View File

@@ -1,6 +1,11 @@
<script context="module"> <script context="module">
// Svelte import {
import { apiEndpoints, site, locations, currentLocation, currentPhotos } from '../../../store' apiEndpoints,
site,
locations,
currentLocation,
currentPhotos
} from '../../../store'
import { stores } from '@sapper/app' import { stores } from '@sapper/app'
// Preload data // Preload data
@@ -8,7 +13,7 @@
// Load photos // Load photos
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`) const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`)
const photos = await req.json() const photos = await req.json()
if (req.status === 200) { if (req.ok) {
return { photos: photos.data } return { photos: photos.data }
} }
this.error(404, 'Not found') this.error(404, 'Not found')
@@ -47,10 +52,11 @@
currentPhotos.set(photos) currentPhotos.set(photos)
// Define dates // Define dates
const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : '' $: latestPhoto = photos[0]
const dateUpdatedDatetime = photos.length ? dayjs(photos[0].modified_on).format('YYYY-MM-DDThh:mm:ss') : '' $: dateUpdatedFull = latestPhoto ? dayjs(latestPhoto.modified_on).format('MMM Do, YYYY') : ''
const dateUpdatedRelative = photos.length ? dayjs().to(dayjs(photos[0].modified_on)) : '' $: dateUpdatedDatetime = latestPhoto ?dayjs(latestPhoto.modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
const lastUpdated = photos.length ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelative : '' $: dateUpdatedRelative = latestPhoto ?dayjs().to(dayjs(latestPhoto.modified_on)) : ''
$: lastUpdated = latestPhoto ? (dayjs(latestPhoto.modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelatives : ''
/* /*
@@ -156,6 +162,7 @@
</aside> </aside>
</div> </div>
{#if photos.length}
<div class="photos__view wrap"> <div class="photos__view wrap">
{#each paginatedPhotos as photo, index} {#each paginatedPhotos as photo, index}
<Photo <Photo
@@ -192,6 +199,7 @@
</div> </div>
{/if} {/if}
</section> </section>
{/if}
</section> </section>
<Footer /> <Footer />

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

@@ -1,112 +1,99 @@
<script context="module"> <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 // Define either to preload data or use the store
let preloaded let preloaded
currentLocation.subscribe(store => preloaded = store ? store : undefined) currentLocation.subscribe(store => preloaded = store ? store : undefined)
// Preload data // Preload data
export async function preload (page, session) { export async function preload (page, session) {
// Load the photos if not loaded // Load the photos if not loaded
if (!preloaded) { 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 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() const photos = await req.json()
return { return {
photos: photos.data photos: photos.data
} }
} }
// Use the store otherwise // Use the store otherwise
else return { else return {
photos: preloaded.photos photos: preloaded.photos
} }
} }
</script> </script>
<script> <script>
import { onMount } from 'svelte' import { onMount } from 'svelte'
import * as fn from '../../../../functions' import * as fn from '../../../../functions'
// Dependencies // Dependencies
import dayjs from 'dayjs' import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat' import advancedFormat from 'dayjs/plugin/advancedFormat'
dayjs.extend(advancedFormat) dayjs.extend(advancedFormat)
// Components // Components
import IconGlobe from '../../../../atoms/IconGlobe' import IconGlobe from '../../../../atoms/IconGlobe'
import IconCross from '../../../../atoms/IconCross' import IconCross from '../../../../atoms/IconCross'
import Carousel from '../../../../organisms/Carousel' import Carousel from '../../../../organisms/Carousel'
// Props and variables // Props and variables
const { page } = stores() const { page } = stores()
export let photos export let photos
let currentIndex let currentIndex
let indexFormated let indexFormated
let viewerPhotos let viewerPhotos
let windowWidth let windowWidth
let changeWindowWidth let changeWindowWidth
// Define current location // Define current location
const location = $locations.find(loc => loc.slug === $page.params.location) const location = (!$currentLocation) ? $locations.find(loc => loc.slug === $page.params.location) : $currentLocation
const locationFull = `${location.name}, ${location.country.name}` const locationFull = `${location.name}, ${location.country.name}`
$currentLocation == undefined && currentLocation.set({ location, photos })
// Define path // Update store current location informations
const path = `/viewer/${location.country.slug}/${location.slug}/` if (!$currentLocation) currentLocation.set(location)
if (!$currentPhotos) currentPhotos.set(photos)
// Set current photo, index and siblings // Define path
const setCurrentPhotos = () => { const path = `/viewer/${location.country.slug}/${location.slug}/`
// 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()
}
})
/* /*
** Run code on browser only ** Run code on browser only
*/ */
onMount(() => { onMount(() => {
}) })
</script> </script>
<svelte:head> <svelte:head>
<title>Houses Of - photoName photoCountryName</title> <title>Houses Of - photoName photoCountryName</title>
</svelte:head> </svelte:head>
<svelte:window bind:innerWidth={windowWidth} /> <svelte:window bind:innerWidth={windowWidth} />
<section class="viewer"> <section class="viewer">
<div class="viewer__top"> <div class="viewer__top">
<p class="tip">Tap for fullscreen</p> <p class="tip">Tap for fullscreen</p>
<div class="buttons"> <div class="buttons">
<a href="/choose" class="button-control button-control--dashed"> <a href="/choose" class="button-control button-control--dashed">
<IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} /> <IconGlobe color="#fff" width={windowWidth >= 768 ? 22 : 18} />
<svg> <svg>
<circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle> <circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
</svg> </svg>
</a> </a>
<a href="/location/{location.country.slug}/{location.slug}" class="button-control button-control--pink dir-bottom" aria-label="Close"> <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" />
<IconCross color="#fff" width="18" class="icon" hidden="true" /> <IconCross color="#fff" width="18" class="icon" hidden="true" />
</a> </a>
</div> </div>
</div> </div>
<Carousel {photos} viewer={true} /> <Carousel {photos} viewer={true} />
</section> </section>