diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index bd6d1f5..b1c9986 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -2,17 +2,19 @@ import { page } from '$app/stores' import { browser } from '$app/env' import { goto } from '$app/navigation' - import { getContext } from 'svelte' import { fly } from 'svelte/transition' + import { getContext, onMount } from 'svelte' import { quartOut } from 'svelte/easing' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime.js' import { map, lerp, throttle } from '$utils/functions' // Components import Metas from '$components/Metas.svelte' + import SplitText from '$components/SplitText.svelte' import IconEarth from '$components/atoms/IconEarth.svelte' import Button from '$components/atoms/Button.svelte' import Image from '$components/atoms/Image.svelte' + import ScrollingTitle from '$components/atoms/ScrollingTitle.svelte' import DiscoverText from '$components/atoms/DiscoverText.svelte' import PostCard from '$components/molecules/PostCard.svelte' import Select from '$components/molecules/Select.svelte' @@ -27,10 +29,17 @@ const { countries }: any = getContext('global') - let buttonReset: HTMLElement - // let buttonShuffle: HTMLElement + let introEl: HTMLElement + let filtersEl: HTMLElement + let photosContentEl: HTMLElement + let photosGridEl: HTMLElement + let observerPhotos: IntersectionObserver + let mutationPhotos: MutationObserver let scrollY: number let innerWidth: number, innerHeight: number + let scrolledPastIntro: boolean + let scrollDirection = 0 + let lastScrollTop = 0 /** @@ -38,8 +47,8 @@ */ const urlFiltersParams = new URLSearchParams() let filtered: boolean - let filterCountry: any = $page.query.get('country') || defaultCountry - let filterSort: string = $page.query.get('sort') || defaultSort + let filterCountry = $page.query.get('country') || defaultCountry + let filterSort = $page.query.get('sort') || defaultSort let countryFlagId: string $: filtered = filterCountry !== defaultCountry || filterSort !== defaultSort $: latestPhoto = photos[0] @@ -140,6 +149,7 @@ limit: ${import.meta.env.VITE_GRID_INCREMENT}, page: ${page}, ) { + id title slug image { @@ -188,6 +198,77 @@ currentPhotosAmount += newPhotos.length } } + + + /** + * Detect scroll passed intro + */ + $: if (browser && scrollY) { + // Detect scroll direction + throttle(() => { + scrollDirection = scrollY > lastScrollTop ? 1 : -1 + lastScrollTop = scrollY + }, 50) + + // Scrolled past grid of photos + if (scrollY > photosContentEl.offsetTop) { + if (!scrolledPastIntro) { + introEl.classList.add('is-passed') + filtersEl.classList.add('is-over') + } + scrolledPastIntro = true + } else { + if (scrolledPastIntro) { + introEl.classList.remove('is-passed') + filtersEl.classList.remove('is-over') + } + scrolledPastIntro = false + } + + // Show/hide filters bar when scrolling back up + filtersEl.classList.toggle('is-visible', scrollDirection < 0) + } + + + onMount(() => { + // Photos IntersectionObserver + observerPhotos = new IntersectionObserver(entries => { + entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => { + target.classList.toggle('is-visible', isIntersecting) + + // Run effect once + isIntersecting && observerPhotos.unobserve(target) + }) + }, { + threshold: 0, + rootMargin: '0px 0px 0px' + }) + + // Photos MutationObserver + mutationPhotos = new MutationObserver((mutationsList, observer) => { + // Use traditional 'for loops' for IE 11 + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + console.log('A child node has been added or removed.') + mutation.addedNodes.forEach((item: HTMLElement) => observerPhotos.observe(item)) + } + } + }) + mutationPhotos.observe(photosGridEl, { + childList: true, + }) + + // Observe existing elements + const existingPhotos = photosGridEl.querySelectorAll('.photo') + existingPhotos.forEach(el => observerPhotos.observe(el)) + + + // Destroy + return () => { + observerPhotos && observerPhotos.disconnect() + mutationPhotos && mutationPhotos.disconnect() + } + }) -
-
-

Houses

+
+
+ + + -
+
Filter photos
@@ -274,27 +360,22 @@
{#if filtered} - {/if} -
-
+
{#if photos.length} -
- {#each photos as { image, slug, location, title, city }, index} +
+ {#each photos as { id, image, slug, location, title, city }, index (id)}