Re-implement close state to Globe marker

src/components/organisms/InteractiveGlobe.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, getContext } from 'svelte'
+    import { onMount, onDestroy, getContext } from 'svelte'
     import { getPosition, getRandomElement } from '$utils/functions'
 
     export let type: string = undefined
@@ -7,50 +7,48 @@
     export let scrollSmooth: number = 0.5
     export let opacity: number = 1
 
-    const { continents, locations } = getContext('global')
-
-    let globe: any
-    let Globe: any
     let globeEl: HTMLElement
-    let windowHeight: number, windowWidth: number
-    let containerTop: number = 0, containerHeight: number = 0
     let observer: IntersectionObserver
+    let globe: any
+    let innerWidth: number
+    let innerHeight: number
+    let containerTop = 0
+    let containerHeight = 0
 
-    const globeResolution = windowWidth > 1440 && window.devicePixelRatio > 1 ? '4k' : '2k'
+    $: globeResolution = innerWidth > 1440 && window.devicePixelRatio > 1 ? '4k' : '2k'
+
+    const { continents, locations } = getContext('global')
     const randomContinent = getRandomElement(continents.filter((cont: any) => cont.countries))
-    const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}: any) => ({
+    const markers = locations.map(({ name, slug, country, globe_close: isClose, coordinates: { coordinates }}: any) => ({
         name,
         slug,
         countryName: country.name,
         countrySlug: country.slug,
         lat: coordinates[1],
         lng: coordinates[0],
-        // className: location.close ? 'is-close' : '',
+        className: isClose ? 'is-close' : '',
     }))
 
 
-    /**
+    /*
-     * Globe update
+    ** Functions
-     */
+    */
+    // Globe update
     const update = () => {
         requestAnimationFrame(update)
         globe.update()
     }
 
-    /**
+    // On scroll
-     * When scrolling
-     */
     const handleScroll = () => {
-        let scrollDiff = (containerTop + windowHeight + (containerHeight - windowHeight) / 2) - document.documentElement.scrollTop
+        let scrollDiff = (containerTop + innerHeight + (containerHeight - innerHeight) / 2) - document.documentElement.scrollTop
-        let scrollRatio = (1 - (scrollDiff / windowHeight)) * 2
+        let scrollRatio = (1 - (scrollDiff / innerHeight)) * 2
         if (globe) {
-            globe.updateCameraPos(scrollRatio, scrollDiff - windowHeight)
+            globe.updateCameraPos(scrollRatio, scrollDiff - innerHeight)
         }
     }
 
-    /**
+    // On resize
-     * When resizing
-     */
     const handleResize = () => {
         if (globeEl) {
             containerTop = getPosition(globeEl).top
@@ -64,30 +62,40 @@
     }
 
 
+    /*
+    ** Run code when mounted
+    */
     onMount(async () => {
-        // Load globe library
+        // Import libraries and code
-        Globe = await import('$modules/globe')
+        const { default: InteractiveGlobe } = await import('$modules/globe')
 
-        // Instantiate globe
+        // Init the globe from library
-        globe = new Globe.default({
+        globe = new InteractiveGlobe({
             el: globeEl,
             //cameraDistance: size, // Smaller number == larger globe
             autoRotationSpeed: autoRotate ? -0.0025 : 0,
             rotationStart: randomContinent.rotation, // In degrees
             scrollSmoothing: scrollSmooth,
-            opacity,
+            opacity: opacity,
             texture: `/images/globe-map-${globeResolution}.png`,
             markers,
             onLinkClicked: () => {}
         })
 
-        // Observe the globe
+        // Run the globe
+        update()
+        handleResize()
+
+        // Enable/Disable the globe when shown/hidden
         observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
+            entries.forEach(({ isIntersecting }: IntersectionObserverEntry) => {
-                if (entry.isIntersecting) {
+                if (isIntersecting) {
                     globe.enable()
+                    console.log('IO enable globe')
                 } else {
                     globe.disable()
+                    console.log('IO disable globe')
+
                 }
             })
         }, {
@@ -96,26 +104,27 @@
         })
         observer.observe(globeEl)
 
-        // Run the globe
+        // const globeScroll = ScrollOut({
-        update()
+        //     targets: scope,
-        handleResize()
+        //     onShown: () => globe.enable(),
+        //     onHidden: () => globe.disable()
+        // })
+    })
 
 
-        // Destroy
+    /*
-        return () => {
+    ** Destroy when unmounted
-            if (globe) {
+    */
-                globe.destroy()
+    onDestroy(() => {
-                observer.disconnect()
+        globe && globe.destroy()
-            }
-        }
     })
 </script>
 
 <svelte:window
-    bind:innerHeight={windowHeight}
-    bind:innerWidth={windowWidth}
     on:scroll={handleScroll}
     on:resize={handleResize}
+    bind:innerHeight
+    bind:innerWidth
 />
 
 

src/routes/__layout.svelte

@@ -88,6 +88,7 @@
                         date_created
                     }
                     has_poster
+                    globe_close
                 }
 
                 countries: country (filter: { status: { _eq: "published" }}) {

src/style/modules/_globe.scss

@@ -96,9 +96,10 @@
             // Label
             &__label {
                 position: absolute;
-                bottom: -16px;
+                bottom: 16px;
-                left: 16px;
+                left: 0px;
                 color: transparent;
+                pointer-events: none;
             }
             // Location city
             &__city {