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

Code clean,

Browse Source
This commit is contained in:
Félix Péault
2020-04-06 12:21:47 +02:00
parent 60fdf02112
commit 8fabe68241
7 changed files with 55 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env
View File

@@ -1,6 +1,7 @@
# Website
PROD_URL="https://housesof.world"
TRANSITION=true
HOME_PHOTOS_LIMIT=6
# API
API_TOKEN="NJk0urljsdSvApUDzWxGgoO6"

11
src/animations/TitleSite.js
View File

@@ -7,21 +7,20 @@ import { animDelay } from 'utils/store'
** Transition In
*/
export const animateIn = (scope, init) => {
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: 1000
})
// Stagger each letters and words
tl.add({
const letters = anime({
targets: scope.querySelectorAll('span, em span'),
translateY: ['100%', 0],
easing: 'easeOutQuart',
duration: 1000,
delay: anime.stagger(40, { start: init ? 0 : animDelay }),
autoplay: false
})
// On scroll animation
const title = ScrollOut({
once: true,
targets: scope,
onShown: () => tl.restart()
onShown: () => letters.restart()
})
}

4
src/animations/index.js
View File

@@ -36,8 +36,8 @@ export const animateIn = () => {
duration: animDuration,
autoplay: false
})
window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 5))
requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate))
// Intro: Description
const introDescription = anime({

87
src/atoms/ToggleLayout.svelte
View File

@@ -3,60 +3,61 @@
// Variables
let toggleEl
let toggleLayout
let grid
let pill
let layoutSetting
// Elements
const layoutGridClass = 'photos--grid'
const layoutListClass = 'photos--list'
// Change active pill
const toggleAnimate = (elem, pill, toggle) => {
pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
pill.style.left = Math.round(elem.getBoundingClientRect().left - toggleEl.getBoundingClientRect().left) + 'px'
}
// Toggle layout
const toggleLayout = event => {
const clicked = event.currentTarget
const type = clicked.dataset.layout
// Change the layout
switch (type) {
case 'grid':
grid.classList.add(layoutGridClass)
grid.classList.remove(layoutListClass)
break
case 'list':
grid.classList.add(layoutListClass)
grid.classList.remove(layoutGridClass)
break
default: break
}
// Animate the active pill
toggleAnimate(clicked, pill, toggleEl)
// Add/Remove active classes
toggleEl.querySelectorAll('button').forEach(button => button.classList.remove('active'))
clicked.classList.add('active')
// Remember this setting
localStorage.setItem('photosLayout', type)
}
/*
** Run code when mounted
*/
onMount(() => {
grid = document.querySelector('.photos')
// Get layout setting from storage
layoutSetting = (localStorage.getItem('photosLayout')) ? localStorage.getItem('photosLayout') : 'list'
// Variables
const layoutGridClass = 'photos--grid'
const layoutListClass = 'photos--list'
const grid = document.querySelector('.photos')
const pill = toggleEl.querySelector('.pill')
// Change active pill
const toggleAnimate = (elem, pill, toggle) => {
pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
pill.style.left = Math.round(elem.getBoundingClientRect().left - toggleEl.getBoundingClientRect().left) + 'px'
}
// Init of first option
toggleAnimate(toggleEl.querySelector(`[data-layout="${layoutSetting}"]`), pill, toggleEl)
// Toggle layout
toggleLayout = event => {
const clicked = event.currentTarget
const type = clicked.dataset.layout
// Change the layout
switch (type) {
case 'grid':
grid.classList.add(layoutGridClass)
grid.classList.remove(layoutListClass)
break
case 'list':
grid.classList.add(layoutListClass)
grid.classList.remove(layoutGridClass)
break
default: break
}
// Animate the active pill
toggleAnimate(clicked, pill, toggleEl)
// Add/Remove active classes
toggleEl.querySelectorAll('button').forEach(button => button.classList.remove('active'))
clicked.classList.add('active')
// Remember this setting
localStorage.setItem('photosLayout', type)
}
})
</script>
@@ -84,5 +85,5 @@
<span>Grid</span>
</button>
<div class="pill" aria-hidden="true" role="presentation"></div>
<div class="pill" aria-hidden="true" role="presentation" bind:this={pill}></div>
</div>

1
src/routes/_layout.svelte
View File

@@ -9,7 +9,6 @@
description
explore_globe
explore_list
homepage_photos_limit
photos_per_page
instagram
seo_name

9
src/routes/index.svelte
View File

@@ -1,6 +1,6 @@
<script context="module">
// Variables
let limit
let limit = process.env.CONFIG.HOME_PHOTOS_LIMIT
// Preload data (photos to display)
export async function preload (page, session) {
@@ -11,12 +11,9 @@
]
// Random sort
const sort = '?'
// Get the limit from API
site.subscribe(store => limit = store.homepage_photos_limit)
const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&sort=${sort}&limit=${limit}`)
const photos = await req.json()
if (req.ok) {
if (req.ok) {
return { photos: photos.data }
}
this.error(404, 'Not found')
@@ -103,10 +100,8 @@
</div>
<div id="intro-carousel">
{#if photos}
<Carousel {photos} />
<Fullscreen />
{/if}
</div>
</section>

2
src/utils/Transition.svelte
View File

@@ -37,7 +37,7 @@
{#if show || !process.browser}
<slot />
{:else}
{:else if process.env.CONFIG.TRANSITION}
<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
<div class="transition__loader"
in:fly={{ y: 32, duration: 1000, easing: quartOut }}