Globe edits WIP

- Added visible continents to options

src/molecules/InteractiveGlobe.svelte

@@ -1,106 +1,94 @@
 <script>
     import { onMount } from 'svelte'
-    import { locations } from 'utils/store'
+    import { continents, locations } from 'utils/store'
+    import { getPosition } from 'utils/functions'
+    // Dependencies
     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
-        };
-    }
+    import Lazy from 'svelte-lazy'
 
     // Props
     export let type = ''
+    export let size = 0.575
     let scope
     let globe
     let containerTop = 0
     let containerHeight = 0
-    let winHeight = window ? window.innerHeight : 0
 
-    const resize = () => {
-        winHeight = window ? window.innerHeight : 0
+
+    /*
+    ** Functions
+    */
+    // Globe update
+    const update = () => {
+        requestAnimationFrame(update)
+        globe.update()
+    }
+
+    // On resize
+    const onResize = () => {
         if (scope) {
-            containerTop    = getPosition( scope ).top
+            containerTop = getPosition(scope).top
             containerHeight = scope.clientHeight
         }
         globe.resize()
         globe.update()
     }
 
-    const update = () => {
-        requestAnimationFrame(update)
-        globe.update()
+    // On scroll
+    const onScroll = () => {
+        let scrollDiff = (containerTop + window.innerHeight + (containerHeight - window.innerHeight) / 2) - document.documentElement.scrollTop
+        let scrollRatio = (1 - (scrollDiff / window.innerHeight)) * 2
+        globe && globe.updateCameraPos(scrollRatio, scrollDiff - window.innerHeight)
     }
 
-    const onScroll = (e)=> {
-        let scrollDiff = (containerTop + window.innerHeight + (containerHeight - window.innerHeight) /2 ) - document.documentElement.scrollTop
-        let scrollRatio = (1 - ( scrollDiff / window.innerHeight ) ) * 2
-        globe && globe.updateCameraPos( scrollRatio, scrollDiff - window.innerHeight)
-    }
 
     /*
     ** Run code when mounted
     */
     onMount(async () => {
-        
+        let InteractiveGlobe
+        // Import libraries and code
+        await import('globe/index').then(module => InteractiveGlobe = module.default)
+        // Init the globe from library
+        globe = new InteractiveGlobe({
+            el: scope,
+            cameraDistance: size, // Smaller number == larger globe
+            // autoRotationSpeed: -0.0025,
+            scrollSmoothing: 0.5,
+            texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
+            markers: [ ...$locations.map(location => {
+                return {
+                    name: location.name,
+                    slug: location.slug,
+                    countryName: location.country.name,
+                    countrySlug: location.country.slug,
+                    lat: location.coordinates.lat,
+                    lng: location.coordinates.lng,
+                    className: location.close ? 'is-close' : '',
+                }
+            }) ],
+            centerPositions: [ ...$continents.map(continent => continent.countries) ],
+            onLinkClicked: () => {}
+        })
+        console.log(globe.options.centerPositions)
+
+        // Run the globe
+        onResize()
+        update()
+
+        // Enable the globe only when shown
         const globeScroll = ScrollOut({
             once: false,
             targets: scope,
-            // threshold: 1,
-            onShown:  () => { 
+            onShown: () => {
                 globe.enable()
+                onScroll()
             },
-            onHidden: () => {
-                globe.disable()
-            },
+            onHidden: () => globe.disable()
         })
-
-
-        let InteractiveGlobe
-        if (process.browser) {
-            // Import libraries and code
-            await import('globe/index').then(module => InteractiveGlobe = module.default)
-            // Init the globe from library
-            globe = new InteractiveGlobe({
-                el: scope,
-                cameraDistance: 0.5,//smaller number == larger globe
-                autoRotationSpeed: -0.0025,
-                scrollSmoothing: 0.5, 
-                texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
-                markers: [...$locations.map(location => {
-                    return {
-                        name: location.name,
-                        slug: location.slug,
-                        countryName: location.country.name,
-                        countrySlug: location.country.slug,
-                        lat: location.coordinates.lat,
-                        lng: location.coordinates.lng,
-                        className: location.slug === 'marseille' ? 'is-left' : '',
-                    }
-                })],
-                onLinkClicked: () => {}
-            })
-
-            // Run the globe
-            resize()
-            update()
-        }
     })
 </script>
 
-<svelte:window on:resize={resize} on:scroll={onScroll} />
+<svelte:window on:resize={onResize} on:scroll={onScroll} />
 
-{#if type === 'part'}
-<div class="globe globe--cut" bind:this={scope} />
-{:else}
-<div class="globe" bind:this={scope} />
-{/if}
+<div class="globe" class:globe--part={type === 'part'} bind:this={scope} />