fix merge

src/molecules/InteractiveGlobe.svelte

@@ -1,14 +1,38 @@
 <script>
     import { onMount } from 'svelte'
     import { locations } from 'utils/store'
+    import ScrollOut from 'scroll-out'
+
+    function getPosition (node, scope) {
+        var root = scope || document;
+        var offsetTop  = node.offsetTop;
+        var offsetLeft = node.offsetLeft;
+        while (node && node.offsetParent && node.offsetParent != document && node !== root && root !== node.offsetParent ) {
+            offsetTop += node.offsetParent.offsetTop;
+            offsetLeft += node.offsetParent.offsetLeft;
+            node = node.offsetParent;
+        }
+        return {
+            top: offsetTop,
+            left: offsetLeft
+        };
+    }
+
 
     // Props
-    export let type = ''
+    // export let type = ''
     let scope
     let globe
+    let containerTop = 0
+    let containerHeight = 0
+    let winHeight = window ? window.innerHeight : 0
 
-    // Functions
     const resize = () => {
+        winHeight = window ? window.innerHeight : 0
+        if (scope) {
+            containerTop    = getPosition( scope ).top
+            containerHeight = scope.clientHeight
+        }
         globe.resize()
         globe.update()
     }
@@ -17,22 +41,41 @@
         globe.update()
     }
 
+    const onScroll = (e)=> {
+        let scrollDiff = (containerTop + window.innerHeight + (containerHeight - window.innerHeight) /2 ) - document.documentElement.scrollTop
+        let scrollRatio = 1 - ( scrollDiff / window.innerHeight ) 
 
+        globe && globe.updateCameraPos( scrollRatio )
+    }
     /*
     ** Run code when mounted
     */
     onMount(async () => {
-        // For browser only
+        
+        const globeScroll = ScrollOut({
+            once: false,
+            targets: scope,
+            // threshold: 1,
+            onShown:  () => { 
+                globe.enable()
+            },
+            onHidden: () => {
+                globe.disable()
+            },
+        })
+
+
+        let InteractiveGlobe
         if (process.browser) {
             // Import libraries and code
-            let Globe
-            await import('globe').then(module => Globe = module.default)
-
+            await import('globe/index').then(module => InteractiveGlobe = module.default)
             // Init the globe from library
-            globe = new Globe({
+            globe = new InteractiveGlobe({
                 el: scope,
+                cameraDistance: 1.5,
                 autoRotationSpeed: -0.01,
-                texture: `/img/globe/map-${window.innerWidth >= 992 ? '4k' : '2k'}.png`,
+                scrollSmoothing: 0.5, 
+                texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
                 markers: [...$locations.map(location => {
                     return {
                         name: location.name,
@@ -44,7 +87,6 @@
                         className: location.slug === 'marseille' ? 'is-left' : '',
                     }
                 })],
-                cameraDistance: 3,
                 onLinkClicked: () => {}
             })
 
@@ -55,12 +97,14 @@
     })
 </script>
 
-<svelte:window on:resize={resize} />
+<svelte:window on:resize={resize} on:scroll={onScroll} />
 
-{#if type === 'part'}
+<!-- {#if type === 'part'}
 <div class="globe__cut">
     <div class="globe" bind:this={scope} />
 </div>
 {:else}
 <div class="globe" bind:this={scope} />
-{/if}
+{/if} -->
+
+<div class="globe" bind:this={scope} />

src/molecules/Photo.svelte

@@ -8,7 +8,6 @@
     // Props and variables
     export let photo
     export let index
-    export let layout = 'list'
     let scope
 
     // Default size for the image
@@ -54,10 +53,10 @@
                     <source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>
                     <source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
                     <source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
-                    <img src={getThumbnail(private_hash, 900)}
+                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                         width={defaultWidth} height={defaultHeight}
                         alt={imgAlt}
-                        class:lazyload={layout === 'list'}
+                        class="lazyload"
                     />
                 </picture>
             </a>