From 8fabe68241b7ae4f9c145157b3777dcc2be2abf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 6 Apr 2020 12:21:47 +0200 Subject: [PATCH] Code clean, --- .env | 1 + src/animations/TitleSite.js | 11 ++--- src/animations/index.js | 4 +- src/atoms/ToggleLayout.svelte | 87 ++++++++++++++++++----------------- src/routes/_layout.svelte | 1 - src/routes/index.svelte | 9 +--- src/utils/Transition.svelte | 2 +- 7 files changed, 55 insertions(+), 60 deletions(-) diff --git a/.env b/.env index efaf575..3bf5c67 100644 --- a/.env +++ b/.env @@ -1,6 +1,7 @@ # Website PROD_URL="https://housesof.world" TRANSITION=true +HOME_PHOTOS_LIMIT=6 # API API_TOKEN="NJk0urljsdSvApUDzWxGgoO6" diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js index 7465916..ee5424f 100644 --- a/src/animations/TitleSite.js +++ b/src/animations/TitleSite.js @@ -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() }) } diff --git a/src/animations/index.js b/src/animations/index.js index 95e3e66..f6a2849 100644 --- a/src/animations/index.js +++ b/src/animations/index.js @@ -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({ diff --git a/src/atoms/ToggleLayout.svelte b/src/atoms/ToggleLayout.svelte index e6bbf39..779b8ec 100644 --- a/src/atoms/ToggleLayout.svelte +++ b/src/atoms/ToggleLayout.svelte @@ -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) - } }) @@ -84,5 +85,5 @@ Grid - + diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index ba5b0d8..a473290 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -9,7 +9,6 @@ description explore_globe explore_list - homepage_photos_limit photos_per_page instagram seo_name diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 5f52c60..a61a94f 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,6 +1,6 @@