Use PageTransition component on every route

- Scrolls back to top when mounting new page with a timeout of the delay - Rename photo Viewer class - Change Shop posters section text from p to label
2021-12-07 21:58:17 +01:00
parent f15a2f2e47
commit 06db598b90
14 changed files with 79 additions and 66 deletions
--- a/src/components/PageTransition.svelte
+++ b/src/components/PageTransition.svelte
@@ -1,14 +1,28 @@
 <script lang="ts">
+    import { page } from '$app/stores'
+    import { onMount, tick } from 'svelte'
    import { fade } from 'svelte/transition'
+    import { scrollToTop } from '$utils/functions'
+    import { DURATION } from '$utils/contants'

-    export let path = ''
+    export let name: string
+
+    onMount(async () => {
+        // Disable when changing filters on /photos and shop?
+        if (!$page.query.get('country') && !$page.path.includes('/shop/poster')) {
+            await tick()
+            setTimeout(() => {
+                // Scroll back to top between page transitions
+                scrollToTop()
+            }, DURATION.PAGE_DELAY)
+        }
+    })
 </script>

-{#key path}
-<div
-    in:fade={{ duration: 400, delay: 500 }}
-    out:fade={{ duration: 400 }}
+
+<main class={name}
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_DELAY }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
 >
    <slot />
-</div>
-{/key}
+</main>
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -16,6 +16,7 @@
    // Components
    import Metas from '$components/Metas.svelte'
    import SplitText from '$components/SplitText.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Icon from '$components/atoms/Icon.svelte'
    import IconArrow from '$components/atoms/IconArrow.svelte'
@@ -227,22 +228,22 @@
                easing: 'easeOutQuart',
            })

-            anime.set('.viewer-photo__picture', {
+            anime.set('.viewer__picture', {
                opacity: 0,
            })
-            anime.set('.viewer-photo__picture.is-1', {
+            anime.set('.viewer__picture.is-1', {
                translateY: 24,
            })

            // Photos
            timeline.add({
-                targets: '.viewer-photo__picture.is-1',
+                targets: '.viewer__picture.is-1',
                opacity: 1,
                translateY: 0,
                duration: 900,
            }, 250)
            timeline.add({
-                targets: '.viewer-photo__picture:not(.is-0):not(.is-1)',
+                targets: '.viewer__picture:not(.is-0):not(.is-1)',
                opacity: 1,
                translateX (element: HTMLElement, index: number) {
                    const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
@@ -253,7 +254,7 @@

            // Prev/Next buttons
            timeline.add({
-                targets: '.viewer-photo__controls button',
+                targets: '.viewer__controls button',
                translateX (item: HTMLElement) {
                    let direction = item.classList.contains('prev') ? -1 : 1
                    return [16 * direction, 0]
@@ -264,25 +265,25 @@

            // Infos
            timeline.add({
-                targets: '.viewer-photo__info > *',
+                targets: '.viewer__info > *',
                translateY: [24, 0],
                opacity: [0, 1],
                delay: anime.stagger(200)
            }, 400)


-            anime.set('.viewer-photo__index', {
+            anime.set('.viewer__index', {
                opacity: 0
            })
            // Index
            timeline.add({
-                targets: '.viewer-photo__index',
+                targets: '.viewer__index',
                opacity: 1,
                duration: 900,
            }, 600)
            // Fly each number
            timeline.add({
-                targets: '.viewer-photo__index .char',
+                targets: '.viewer__index .char',
                translateY: ['100%', 0],
                delay: anime.stagger(200),
                duration: 1000,
@@ -313,25 +314,25 @@
 {/if}


-<main class="viewer-photo">
+<PageTransition name="viewer">
    <div class="container grid">
-        <p class="viewer-photo__notice text-label">Tap for fullscreen</p>
+        <p class="viewer__notice text-label">Tap for fullscreen</p>

        <ButtonCircle
            tag="a"
            url={previousUrl}
            color="purple"
-            class="viewer-photo__close shadow-box-dark"
+            class="viewer__close shadow-box-dark"
        >
            <svg width="12" height="12">
                <use xlink:href="#cross">
            </svg>
        </ButtonCircle>

-        <div class="viewer-photo__carousel">
-            <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
+        <div class="viewer__carousel">
+            <div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                {#each visiblePhotos as photo, index (photo.id)}
-                    <div class="viewer-photo__picture is-{currentIndex === 0 ? index + 1 : index}">
+                    <div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
                        <Image
                            class="photo"
                            id={photo.image.id}
@@ -347,7 +348,7 @@
                    </div>
                {/each}

-                <div class="viewer-photo__controls">
+                <div class="viewer__controls">
                    <ButtonCircle class="prev shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
                        <IconArrow color="pink" flip={true} />
                    </ButtonCircle>
@@ -357,12 +358,12 @@
                </div>


-                <div class="viewer-photo__index title-index">
+                <div class="viewer__index title-index">
                    <SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
                </div>
            </div>

-            <div class="viewer-photo__info">
+            <div class="viewer__info">
                <h1 class="title-medium">{currentPhoto.title}</h1>

                <div class="detail text-info">
@@ -383,7 +384,7 @@
    </div>

    {#if isFullscreen}
-        <div class="viewer-photo__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}>
+        <div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}>
            <div class="inner" transition:scale={{ easing: quartOut, start: 1.1, duration: 1000 }}>
                <Image
                    id={currentPhoto.image.id}
@@ -400,7 +401,7 @@
            </div>
        </div>
    {/if}
-</main>
+</PageTransition>


 <script context="module" lang="ts">
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -11,6 +11,7 @@
    import { DURATION } from '$utils/contants'
    // Components
    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import Icon from '$components/atoms/Icon.svelte'
    import Button from '$components/atoms/Button.svelte'
    import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -209,7 +210,7 @@
 <svelte:window bind:scrollY />


-<main class="location-page">
+<PageTransition name="location-page">
    <section class="location-page__intro grid" bind:this={introEl}>
        <h1 class="title" class:is-short={location.name.length <= 4}>
            <span class="housesof mask">
@@ -349,7 +350,7 @@
            </p>
        </div>
    {/if}
-</main>
+</PageTransition>


 <script context="module" lang="ts">
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -8,7 +8,6 @@
    import '$utils/polyfills'
    // Components
    import SVGSprite from '$components/SVGSprite.svelte'
-    import PageTransition from '$components/PageTransition.svelte'
    import Switcher from '$components/molecules/Switcher.svelte'
    import Footer from '$components/organisms/Footer.svelte'

@@ -41,14 +40,6 @@
            setTimeout(() => {
                $pageLoading = false
            }, DURATION.PAGE_IN * 1.25)
-
-            // Scroll back to top between page transitions
-            setTimeout(() => {
-                // Disable scroll when changing filters on /photos and shop?
-                if (!$page.query.get('country') && !$page.path.includes('/shop/poster')) {
-                    scrollToTop()
-                }
-            }, DURATION.PAGE_OUT + 1)
        }
    })

@@ -60,9 +51,7 @@

 <Switcher isOver={!!$page.params.location && !!$page.params.photo} />

-<PageTransition path={$page.path}>
-    <slot />
-</PageTransition>
+<slot />

 {#if !$page.params.photo}
    <Footer />
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -5,6 +5,7 @@
    import type { AnimeTimelineInstance } from 'animejs'
    // Components
    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import SiteTitle from '$components/atoms/SiteTitle.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
    import Image from '$components/atoms/Image.svelte'
@@ -69,7 +70,7 @@
 />


-<main class="credits">
+<PageTransition name="credits">
    <section class="credits__heading">
        <SiteTitle variant="inline" />
        <p class="text-medium">{data.credits.text}</p>
@@ -145,7 +146,7 @@
    </section>

    <InteractiveGlobe type="cropped" />
-</main>
+</PageTransition>


 <script context="module" lang="ts">
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -6,6 +6,7 @@
    import type { AnimeTimelineInstance } from 'animejs'
    // Components
    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import SplitText from '$components/SplitText.svelte'
    import Button from '$components/atoms/Button.svelte'
    import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -85,7 +86,7 @@
    image=""
 />

-<main class="homepage">
+<PageTransition name="homepage">
    <section class="homepage__intro">
        <ScrollingTitle
            tag="h1"
@@ -101,7 +102,7 @@
                {settings.description}
            </p>

-            <Button text="Explore locations" url="{path}#locations">
+            <Button text="Explore locations" url="#locations">
                <IconEarth animate={true} />
            </Button>
        </div>
@@ -169,7 +170,7 @@
            </div>
        </div>
    </div>
-</main>
+</PageTransition>


 <script context="module" lang="ts">
--- a/src/routes/locations.svelte
+++ b/src/routes/locations.svelte
@@ -2,6 +2,7 @@
    import { getContext } from 'svelte'
    // Components
    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
    import Locations from '$components/organisms/Locations.svelte'
    import Shop from '$components/organisms/Shop.svelte'
@@ -17,7 +18,7 @@
    image=""
 />

-<main class="explore">
+<PageTransition name="explore">
    <Heading
        text="Explore the globe to discover unique locations across the world"
    />
@@ -33,4 +34,4 @@
                <Newsletter />
            </div>
    </section>
-</main>
+</PageTransition>
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -12,6 +12,7 @@
    import { map, lerp, throttle } from '$utils/functions'
    // Components
    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import SplitText from '$components/SplitText.svelte'
    import IconEarth from '$components/atoms/IconEarth.svelte'
    import Button from '$components/atoms/Button.svelte'
@@ -339,7 +340,7 @@
 />


-<main class="photos">
+<PageTransition name="photos">
    <section class="photos__intro"
        class:is-passed={scrolledPastIntro}
    >
@@ -498,7 +499,7 @@
            </div>
        </div>
    </section>
-</main>
+</PageTransition>


 <script context="module" lang="ts">
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -6,6 +6,7 @@
    import type { AnimeTimelineInstance } from 'animejs'
    // Components
    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import SiteTitle from '$components/atoms/SiteTitle.svelte'
    import Image from '$components/atoms/Image.svelte'
    import ButtonCart from '$components/atoms/ButtonCart.svelte'
@@ -103,7 +104,8 @@
    image=""
 />

-<main class="shop-page">
+
+<PageTransition name="shop-page">
    <Cart />

    <section class="shop-page__intro" bind:this={introEl}>
@@ -180,7 +182,9 @@
        </div>
    </section>

+    {#key product}
        <slot />
+    {/key}

    {#if posters}
        <section class="shop-page__posters grid">
@@ -195,12 +199,12 @@
                {/each}
            </div>
            <div class="subscribe">
-                <p>Subscribe to be notified when new posters become available</p>
+                <label class="subscribe__text" for="SUB_EMAIL">Subscribe to be notified when new posters become available</label>
                <EmailForm />
            </div>
        </section>
    {/if}
-</main>
+</PageTransition>


 <script context="module" lang="ts">
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -6,10 +6,11 @@
    import type { AnimeTimelineInstance } from 'animejs'
    // Components
    import Metas from '$components/Metas.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Heading from '$components/molecules/Heading.svelte'
-    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte';
-    import EmailForm from '$components/molecules/EmailForm.svelte';
+    import EmailForm from '$components/molecules/EmailForm.svelte'
+    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'

    export let data: any
    export let issues: any
@@ -69,7 +70,7 @@
    image=""
 />

-<main class="subscribe">
+<PageTransition name="subscribe">
    <div class="subscribe__top">
        <Heading
            text={data.newsletter_page_text}
@@ -104,7 +105,7 @@
    </section>

    <InteractiveGlobe type="cropped" />
-</main>
+</PageTransition>


 <script context="module" lang="ts">
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -1,4 +1,4 @@
-.viewer-photo {
+.viewer {
    position: relative;
    height: 100vh;
    display: flex;
@@ -424,7 +424,7 @@

    // Close button
    &__close {
-        position: fixed;
+        position: fixed !important;
        z-index: 2;
        top: 16px;
        right: calc(16px + 44px + 12px);
--- a/src/style/pages/shop/_posters.scss
+++ b/src/style/pages/shop/_posters.scss
@@ -108,7 +108,8 @@
            text-align: left;
        }

-        p {
+        &__text {
+            display: block;
            font-size: rem(18px);
            color: $color-cream;
            font-weight: 300;
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -26,6 +26,7 @@
@import "pages/credits";
@import "pages/subscribe";
@import "pages/location";
+@import "pages/viewer";
@import "pages/shop";

 // Modules
@@ -70,9 +71,5 @@
 // Layouts
@import "layouts/poster";

-
-// Pages
-@import "pages/viewer-photo";
-
 // Misc
@import "animations";
--- a/src/utils/contants.ts
+++ b/src/utils/contants.ts
@@ -7,4 +7,5 @@ export const DELAY = {
 export const DURATION = {
    PAGE_IN: 400,
    PAGE_OUT: 400,
+    PAGE_DELAY: 600,
 }