Last little fixes and debugging

2020-04-21 13:09:11 +02:00
parent f6c385798b
commit bdf93e89fb
9 changed files with 56 additions and 48 deletions
--- a/src/animations/Carousel.js
+++ b/src/animations/Carousel.js
@@ -10,7 +10,6 @@ export const animateIn = scope => {
    const tl = anime.timeline({
        easing: 'easeOutQuart',
        duration: animDuration,
-        // delay: animDelay,
        autoplay: false
    })

@@ -27,7 +26,8 @@ export const animateIn = scope => {
    tl.add({
        targets: scope.querySelector('.is-active picture'),
        translateY: [8, 0],
-        translateZ: [0, 0]
+        translateZ: [0, 0],
+        complete: event => event.animatables[0].target.removeAttribute('style')
    }, 100)

    // Photo: Prev
@@ -36,7 +36,8 @@ export const animateIn = scope => {
        translateY: [8, 0],
        translateX: [64, 0],
        translateZ: [0, 0],
-        rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0]
+        rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0],
+        complete: event => event.animatables[0].target.removeAttribute('style')
    }, 100)

    // Photo: Next
@@ -45,13 +46,31 @@ export const animateIn = scope => {
        translateY: [8, 0],
        translateX: [-48, 0],
        translateZ: [0, 0],
-        rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0]
+        rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0],
+        complete: event => event.animatables[0].target.removeAttribute('style')
    }, 100)

    // Reveal on scroll
-    const carouselIn = ScrollOut({
-        once: true,
-        targets: scope,
-        onShown: () => tl.restart()
+    let visible = false
+    requestAnimationFrame(() => {
+        const carouselReveal = ScrollOut({
+            once: true,
+            targets: scope,
+            onChange: (el, ctx) => {
+                if (ctx.visible === 0) {
+                    visible = true
+                }
+            },
+            onShown: (el, ctx) => {
+                // If revealed on scroll, no delay
+                if (visible) {
+                    tl.restart()
+                }
+                // If revealed on load, add a delay
+                else {
+                    setTimeout(() => tl.restart(), animDelay * 2)
+                }
+            }
+        })
    })
 }
--- a/src/animations/viewer.js
+++ b/src/animations/viewer.js
@@ -7,18 +7,11 @@ import { animDuration, animDelay } from 'utils/store'
 */
 export const animateIn = () => {
    const viewer = document.querySelector('.viewer')
+
    const tl = anime.timeline({
        easing: 'easeOutQuart',
        duration: animDuration,
-        delay: animDelay
-    })
-
-    // Carousel
-    tl.add({
-        targets: viewer.querySelector('.carousel .wrap'),
-        opacity: [0, 1],
-        translateY: ['-4%', 0],
-        translateZ: [0, 0]
+        delay: 1400
    })

    // Carousel: Number
--- a/src/atoms/TitleSite.svelte
+++ b/src/atoms/TitleSite.svelte
@@ -19,11 +19,11 @@
    })
 </script>

-<div class="title-location title-location--inline"
+<div class="title-location title-location--inline" role="heading" aria-level="1"
    bind:this={scope}
    style="opacity: {mounted ? 1 : 0}"
 >
-    <div role="heading" aria-level="1" aria-label="Houses">
+    <div aria-label="Houses">
        <div class="anim-mask">
            {@html charsToSpan('Houses')}
        </div>
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -135,8 +135,7 @@

 <svelte:window on:keydown={keyboardNav} />

-<div class="carousel" role="region" aria-label="Photos"
-    bind:this={scope}
+<div class="carousel" role="region" aria-label="Photos" bind:this={scope}
    on:swipe={event => swipe(event.detail.directions)}
 >
    <div class="wrap">
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -32,7 +32,7 @@
                        name
                        slug
                        flag { full_url title }
-                        continent { id }
+                        continent { id name }
                    }
                }
                locations (filter: { status_eq: "published" }) {
@@ -41,7 +41,7 @@
                        name
                        slug
                        region
-                        country { id }
+                        country { id name slug }
                        description
                        close
                        coordinates
--- a/src/routes/viewer/[country]/[place]/[photo].svelte
+++ b/src/routes/viewer/[country]/[place]/[photo].svelte
@@ -40,7 +40,6 @@
        pageAnimation
    } from 'utils/store'
    import { getThumbnail } from 'utils/functions'
-
    // Components
    import IconGlobe from 'atoms/IconGlobe'
    import IconCross from 'atoms/IconCross'
@@ -48,24 +47,24 @@
    import Fullscreen from 'organisms/Fullscreen'
    import Transition from 'utils/Transition'
    import SocialMetas from 'utils/SocialMetas'
-
    // Animations
    import { animateIn } from 'animations/viewer'

    // Props
    export let photos

-    // Variables
    const { page } = stores()
    pageAnimation.set(animateIn)
-    let windowWidth
-    let gotoLink
-    let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
-    let pageTitle = ($currentLocation) ? `Beautiful homes of ${$currentLocation.name}, ${$currentLocation.country.name}` : ''

    // Update store current location
-    if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.place))
-    if (!$currentPhotos) currentPhotos.set(photos)
+    currentLocation.set($locations.find(loc => loc.slug === $page.params.place))
+    currentPhotos.set(photos)
+
+    let windowWidth
+    let gotoLink
+    let pageTitle
+    let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
+

    // Photo has changed (from Carousel)
    const photoChanged = event => {
@@ -73,10 +72,10 @@
        const windowPathname = window.location.pathname
        const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
        // Go to page via a sapper-noscroll link to avoid scroll jump (hacky)
-        gotoLink.href = newUrl
-        gotoLink.click()
-        // Change page title with photo name
-        pageTitle = `${currentPhoto.name}, ${currentPhoto.location.country.name}`
+        if (gotoLink && newUrl) {
+            gotoLink.href = newUrl
+            gotoLink.click()
+        }
    }


@@ -90,11 +89,11 @@
 </script>

 <svelte:head>
-    <title>{$site.seo_name} – {pageTitle}</title>
+    <title>{$site.seo_name} – Beautiful homes of {$currentLocation.name}, {$currentLocation.country.name}</title>
    <meta name="description" content="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}">
    <SocialMetas
        url="https://{$page.host}/viewer/{currentPhoto.location.country.slug}/{currentPhoto.location.slug}/{currentPhoto.slug}"
-        title="{$site.seo_name} - {pageTitle}"
+        title="{$site.seo_name} - Beautiful homes of {$currentLocation.name}, {$currentLocation.country.name}"
        description="{$site.seo_name} {$currentLocation.name} {$currentLocation.description}"
        image={getThumbnail(currentPhoto.image.private_hash, 1200, 630)}
    />
@@ -122,8 +121,7 @@
            <a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a>
        </div>

-        <Carousel {photos}
-            viewer="true"
+        <Carousel {photos} viewer={true}
            on:photoChange={photoChanged}
        />

--- a/src/style/organisms/_fullscreen.scss
+++ b/src/style/organisms/_fullscreen.scss
@@ -7,6 +7,7 @@
    height: 100%;
    overflow: hidden;
    pointer-events: none;
+    user-select: none;

    &, * {
        will-change: transform, opacity;
--- a/src/style/pages/_viewer.scss
+++ b/src/style/pages/_viewer.scss
@@ -98,7 +98,7 @@

            // Specific box shadow for images
            &__photo {
-                box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
+                box-shadow: 0 pxVW(16) pxVW(40) rgba(#2e025c, 0.4);
            }
        }

--- a/src/utils/Transition.svelte
+++ b/src/utils/Transition.svelte
@@ -9,17 +9,15 @@
        animDelay,
        animPanelDelay
    } from 'utils/store'
-    const { page } = stores()
-    $: animateIn = $pageAnimation
-
-    // Animations
-    import { panelBackgroundOut } from 'animations/Transition'
-
    // Components
    import TitleSite from 'atoms/TitleSite'
    import IconGlobe from 'atoms/IconGlobe'
+    // Animations
+    import { panelBackgroundOut } from 'animations/Transition'

-    // Props and Variables
+    // Variables
+    const { page } = stores()
+    $: animateIn = $pageAnimation
    let scope
    let show = false
    let firstLoad = true