Tabs to spaces and code cleaning
This commit is contained in:
@@ -1,80 +1,86 @@
|
||||
<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) {
|
||||
const request = await this.fetch(apiEndpoints.gql, {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query: `{
|
||||
site {
|
||||
data {
|
||||
description
|
||||
explore_globe
|
||||
explore_list
|
||||
instagram
|
||||
credits_text
|
||||
credits_list
|
||||
}
|
||||
}
|
||||
continents {
|
||||
data {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
countries {
|
||||
data {
|
||||
id
|
||||
name
|
||||
slug
|
||||
flag { full_url title }
|
||||
continent { id }
|
||||
}
|
||||
}
|
||||
locations (filter: { status_eq: "published" }) {
|
||||
data {
|
||||
id
|
||||
name
|
||||
slug
|
||||
region
|
||||
country { id }
|
||||
description
|
||||
coordinates
|
||||
}
|
||||
}
|
||||
}`})
|
||||
})
|
||||
const result = await request.json()
|
||||
export async function preload (page, session) {
|
||||
const request = await this.fetch(apiEndpoints.gql, {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query: `{
|
||||
site {
|
||||
data {
|
||||
description
|
||||
explore_globe
|
||||
explore_list
|
||||
instagram
|
||||
credits_text
|
||||
credits_list
|
||||
}
|
||||
}
|
||||
continents {
|
||||
data {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
countries {
|
||||
data {
|
||||
id
|
||||
name
|
||||
slug
|
||||
flag { full_url title }
|
||||
continent { id }
|
||||
}
|
||||
}
|
||||
locations (filter: { status_eq: "published" }) {
|
||||
data {
|
||||
id
|
||||
name
|
||||
slug
|
||||
region
|
||||
country { id }
|
||||
description
|
||||
coordinates
|
||||
}
|
||||
}
|
||||
}`})
|
||||
})
|
||||
const result = await request.json()
|
||||
|
||||
// Set data into store
|
||||
site.set(result.data.site.data[0])
|
||||
continents.set(result.data.continents.data)
|
||||
countries.set(result.data.countries.data)
|
||||
locations.set(result.data.locations.data)
|
||||
}
|
||||
// Set data into store
|
||||
site.set(result.data.site.data[0])
|
||||
continents.set(result.data.continents.data)
|
||||
countries.set(result.data.countries.data)
|
||||
locations.set(result.data.locations.data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Manipulate countries data
|
||||
// Replace each countrie's continent by the database
|
||||
$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
|
||||
// Manipulate countries data
|
||||
// Replace each countrie's continent by the database
|
||||
$countries.forEach(count => count.continent = $continents.find(cont => cont.id === count.continent.id))
|
||||
|
||||
// Manipulate continents data
|
||||
// Push each country to its continent
|
||||
$countries.forEach(country => {
|
||||
const continent = $continents.find(cont => cont.id === country.continent.id)
|
||||
continent.countries = []
|
||||
!continent.countries.includes(country) && continent.countries.push(country)
|
||||
})
|
||||
// Manipulate continents data
|
||||
// Push each country to its continent
|
||||
$countries.forEach(country => {
|
||||
const continent = $continents.find(cont => cont.id === country.continent.id)
|
||||
continent.countries = []
|
||||
!continent.countries.includes(country) && continent.countries.push(country)
|
||||
})
|
||||
|
||||
// Manipulate locations data
|
||||
// Replace each location's country by the database
|
||||
$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
|
||||
// Manipulate locations data
|
||||
// Replace each location's country by the database
|
||||
$locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
|
||||
</script>
|
||||
|
||||
<!-- <style src="../style/style.scss" global></style> -->
|
||||
<style lang="scss" global>
|
||||
@import "./style/style.scss";
|
||||
@import "./style/style.scss";
|
||||
</style>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { fade, fly } from 'svelte/transition'
|
||||
import { flip } from 'svelte/animate'
|
||||
import { site, currentLocation, currentPhotos } from '../store'
|
||||
import {
|
||||
site,
|
||||
currentLocation,
|
||||
currentPhotos
|
||||
} from '../store'
|
||||
import AOS from 'aos'
|
||||
|
||||
// Components
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script context="module">
|
||||
import { apiEndpoints } from '../store'
|
||||
import {
|
||||
apiEndpoints,
|
||||
} from '../store'
|
||||
|
||||
// Preload data
|
||||
export async function preload (page, session) {
|
||||
@@ -7,9 +9,9 @@
|
||||
const limit = 5
|
||||
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()
|
||||
if (req.status === 200) {
|
||||
return { photos: photos.data }
|
||||
}
|
||||
if (req.ok) {
|
||||
return { photos: photos.data }
|
||||
}
|
||||
this.error(404, 'Not found')
|
||||
}
|
||||
</script>
|
||||
@@ -52,36 +54,36 @@
|
||||
// Scroll apparitions
|
||||
if (process.browser) {
|
||||
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>
|
||||
|
||||
@@ -89,50 +91,48 @@
|
||||
<title>Houses Of - Beautiful houses of planet Earth</title>
|
||||
</svelte:head>
|
||||
|
||||
<div in:fade out:fade>
|
||||
<section class="intro">
|
||||
<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">
|
||||
<h1 class="title-massive" aria-label="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')}
|
||||
<section class="intro">
|
||||
<div class="anim-mask">
|
||||
<div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
|
||||
<h1 class="title-massive" aria-label="Houses">
|
||||
{@html fn.lettersToSpan('Houses')}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Locations />
|
||||
</section>
|
||||
<div class="wrap">
|
||||
<div class="intro__description style-description">
|
||||
<p>{$site.description}</p>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<Locations />
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script context="module">
|
||||
// Svelte
|
||||
import { apiEndpoints, site, locations, currentLocation, currentPhotos } from '../../../store'
|
||||
import {
|
||||
apiEndpoints,
|
||||
site,
|
||||
locations,
|
||||
currentLocation,
|
||||
currentPhotos
|
||||
} from '../../../store'
|
||||
import { stores } from '@sapper/app'
|
||||
|
||||
// Preload data
|
||||
@@ -8,7 +13,7 @@
|
||||
// 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 photos = await req.json()
|
||||
if (req.status === 200) {
|
||||
if (req.ok) {
|
||||
return { photos: photos.data }
|
||||
}
|
||||
this.error(404, 'Not found')
|
||||
@@ -47,10 +52,11 @@
|
||||
currentPhotos.set(photos)
|
||||
|
||||
// Define dates
|
||||
const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
|
||||
const dateUpdatedDatetime = photos.length ? dayjs(photos[0].modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
|
||||
const dateUpdatedRelative = photos.length ? dayjs().to(dayjs(photos[0].modified_on)) : ''
|
||||
const lastUpdated = photos.length ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelative : ''
|
||||
$: latestPhoto = photos[0]
|
||||
$: dateUpdatedFull = latestPhoto ? dayjs(latestPhoto.modified_on).format('MMM Do, YYYY') : ''
|
||||
$: dateUpdatedDatetime = latestPhoto ?dayjs(latestPhoto.modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
|
||||
$: 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>
|
||||
</div>
|
||||
|
||||
{#if photos.length}
|
||||
<div class="photos__view wrap">
|
||||
{#each paginatedPhotos as photo, index}
|
||||
<Photo
|
||||
@@ -192,6 +199,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user