Globe: Add opacity option, Part globe WIP

- Don't run the onScroll method on load, creates a funky translate otherwise
- Bind window innerHeight via Svelte
- Path scroll smoothing option value as prop

src/molecules/InteractiveGlobe.svelte

@@ -7,11 +7,13 @@
     import Lazy from 'svelte-lazy'
 
     // Props
-    export let type = ''
-    export let size = 0.575
+    export let type = null
     export let autoRotate = true
+    export let scrollSmooth = 0.5
+    export let opacity = 1
     let scope
     let globe
+    let windowHeight
     let containerTop = 0
     let containerHeight = 0
     $: randomRotationPosition = getRandomArrayItem($continents.filter(continent => continent.countries)).rotation_position
@@ -26,6 +28,13 @@
         globe.update()
     }
 
+    // On scroll
+    const onScroll = () => {
+        let scrollDiff = (containerTop + windowHeight + (containerHeight - windowHeight) / 2) - document.documentElement.scrollTop
+        let scrollRatio = (1 - (scrollDiff / windowHeight)) * 2
+        globe && globe.updateCameraPos(scrollRatio, scrollDiff - windowHeight)
+    }
+
     // On resize
     const onResize = () => {
         if (scope) {
@@ -34,13 +43,7 @@
         }
         globe.resize()
         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)
+        onScroll()
     }
 
 
@@ -58,7 +61,8 @@
             //cameraDistance: size, // Smaller number == larger globe
             autoRotationSpeed: autoRotate ? -0.0025 : 0,
             rotationStart: randomRotationPosition, // In degrees
-            scrollSmoothing: 0.5,
+            scrollSmoothing: scrollSmooth,
+            opacity: opacity,
             texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
             markers: [ ...$locations.map(location => {
                 return {
@@ -71,13 +75,12 @@
                     className: location.close ? 'is-close' : '',
                 }
             }) ],
-            onLinkClicked: () => {  }
+            onLinkClicked: () => {}
         })
 
         // Run the globe
-        onResize()
         update()
-        onScroll()
+        onResize()
 
         // Enable/Disable the globe when shown/hidden
         const globeScroll = ScrollOut({
@@ -96,6 +99,12 @@
     })
 </script>
 
-<svelte:window on:resize={onResize} on:scroll={onScroll} />
+<svelte:window on:scroll={onScroll} on:resize={onResize} bind:innerHeight={windowHeight} />
 
-<div class="globe" class:globe--part={type === 'part'} bind:this={scope} />
+{#if type === 'part'}
+<div class="globe--part">
+    <div class="globe" bind:this={scope} />
+</div>
+{:else}
+<div class="globe" bind:this={scope} />
+{/if}