1{ 2 3 var jsScript = document.querySelector('script[data-target="globe-script"]'); 4 5 let html = `<hyper-globe id="network-globe" data-location="9.6862 -68.386" data-version="36" style="--preview-size: 800px; --globe-scale: 0.8; --globe-damping: 0.01; --map-density: 0.9; --map-height: 0.4; --point-size: 1.1; --backside-opacity: 0; --backside-transition: 0.7; --marker-size: 1; --title-position: 0 -1; --title-padding: 0.5; --text-color: #999999; --text-size: 1; --text-padding: 0.5; --line-color: #c8c5c1; --line-offset: 0.8; --preview-color: #f0f0f0; --animation: opacity; --animation-intensity: 0.5; --animation-scale: 0; --animation-speed: 0.3; --point-glow: #0e2e3f; --point-color: #857091; max-width: 1174px; --text-height: 1.1; --line-thickness: 0.8; --autorotate: true; --autorotate-speed: 0.45; --autorotate-delay: 0; --islands: false; --point-opacity: 0.75; --point-image: url('shape-soft.png'); --backside-color: #bababa; --autorotate-latitude: 45;"> 6 7 <span data-location="52.0183 -1.295" style="" slot="lines" data-destination="20.6422 72.5118"></span> 8 <span data-location="20.6422 72.5118" style="" slot="lines" data-destination="35.5046 138.232"></span> 9 <span data-location="37.156 -8.0899" style="" slot="lines" data-destination="-23.945 -46.5366"></span> 10 <span data-location="33.8532 -119.6757" style="" slot="lines" data-destination="35.5046 140.221"></span> 11 <span data-location="-5.7798 -36.309" style="" slot="lines" data-destination="38.8073 -76.5517"></span> 12 <span data-location="22.2936 112.5" style="" slot="lines" data-destination="-25.5963 149.703"></span> 13 <span data-location="28.8991 -82.6531" style="" slot="lines" data-destination="47.0642 7.1053"></span> 14 15 <a slot="markers" title="#1 - United States" class="globe-text" data-location="37.6 -95.6" href="/country/united-states-of-america"></a> 16 <a slot="markers" title="#2 - Finland" class="globe-text" data-location="64.9 26" href="/country/finland"></a> 17 <a slot="markers" title="#3 - Singapore" class="globe-text" data-location="1.3 103.8" href="/country/singapore"></a> 18 <a slot="markers" title="#4 - Denmark" class="globe-text" data-location="55.9 9.5" href="/country/denmark"></a> 19 <a slot="markers" title="#5 - Sweden" class="globe-text" data-location="62.1 17.5" href="/country/sweden"></a> 20 <a slot="markers" title="#6 - Netherlands" class="globe-text" data-location="52.2 5.2" href="/country/netherlands"></a> 21 <a slot="markers" title="#7 - Germany" class="globe-text" data-location="51.1 10.4" href="/country/germany"></a> 22 <a slot="markers" title="#8 - United Kingdom" class="globe-text" data-location="55.3 -3.4" href="/country/united-kingdom"></a> 23 <a slot="markers" title="#9 - Switzerland" class="globe-text" data-location="46.8 8.2" href="/country/switzerland"></a> 24 <a slot="markers" title="#10 - Republic of Korea" class="globe-text" data-location="35.8 127" href="/country/republic-of-korea"></a> 25 26 </hyper-globe>`; 27 28 let script = `// function to animate one line 29 let animateLine = line => { 30 this.set(line, '--line-start', 0); 31 this.set(line, '--line-end', 0); 32 33 setTimeout( () => { 34 this.ani(line, { '--line-end': 1 }, { duration: 500 }); 35 setTimeout( ()=> { 36 this.ani(line, { '--line-start': 1 }, { duration: 400, onfinish: () => animateLine(line) }); 37 }, 400); 38 }, Math.random() * 4000); 39 }; 40 for (let line of this.lines) { 41 animateLine(line); 42 }`; 43 44 if (jsScript.dataset.single === 'true' || jsScript.dataset.single) { 45 html = `<hyper-globe id="network-globe" data-location="${Number(jsScript.dataset.lat)} ${Number(jsScript.dataset.lon)}" data-version="36" style="--preview-size: 800px; --globe-scale: 0.8; --globe-damping: 0.01; --map-density: 0.9; --map-height: 0.4; --point-size: 1.1; --backside-opacity: 0; --backside-transition: 0.7; --marker-size: 1; --title-position: 0 -1; --title-padding: 0.5; --text-color: #999999; --text-size: 1; --text-padding: 0.5; --line-color: #c8c5c1; --line-offset: 0.8; --preview-color: #f0f0f0; --animation: opacity; --animation-intensity: 0.7; --animation-scale: 0; --animation-speed: 0.3; --point-glow: #0e2e3f; --point-color: #857091; max-width: 1174px; --text-height: 1.1; --line-thickness: 0.8; --autorotate: false; --islands: false; --point-opacity: 0.75; --point-image: url('shape-soft.png'); --backside-color: #bababa; --globe-draggable: false"> 46 <a slot="markers" title="#${jsScript.dataset.rank} - ${jsScript.dataset.name}" class="globe-text" data-location="${Number(jsScript.dataset.lat)} ${Number(jsScript.dataset.lon)}"></a> 47 </hyper-globe>`; 48 } 49 50 let css = ` 51 .globe-text { 52 --marker-image: url('pin-light.svg'); 53 --marker-size: 0.45; 54 --marker-position: 0 -1; 55 --text-size: 0.6pt; 56 --text-color: #252525; 57 --text-outline: #ffffff; 58 --text-outline-thickness: 12px; 59 --line-thickness: 1.6; 60 --text-padding: 3.2px; 61 --text-position: 0.77 -0.32; 62 font-weight: bold; 63 opacity: 0.8; 64 background-color: #ffffff; 65 } 66 .dark .globe-text { 67 --text-color: #ffffff; 68 --text-outline: #252525; 69 --marker-image: url('pin-dark.svg'); 70 } 71 `; 72 73 if ( ! self.confGlobe ) { 74 // get the script element 75 let elem = document.currentScript; 76 if ( elem && elem.isConnected && elem.closest('body') && elem.getAttribute('src') ) { 77 78 // get baseurl from script src 79 let url = new URL( elem.getAttribute('src'), self.location.href ).href; 80 if ( url.startsWith('http') ) { 81 let baseurl = url.substr(0, url.lastIndexOf('/')+1); 82 83 // import hyper globe module once 84 if ( ! self.hyperGlobe ) { 85 self.hyperGlobe = true; 86 import( baseurl + 'hyper-globe.min.js' ); 87 } 88 89 // inject html 90 html = html.replace('<hyper-globe ', `<hyper-globe data-baseurl="${baseurl}" `); 91 elem.insertAdjacentHTML('afterend', html); 92 if (css) elem.nextElementSibling.insertAdjacentHTML('afterend', `<style>${css}</style>`); 93 if (script) elem.nextElementSibling.addEventListener('complete', new Function(script)); 94 95 } else { 96 console.error('This script was used in the wrong way. It must be loaded via the https: or http: protocol.'); 97 } 98 99 } else {
100 console.error('This script was used in the wrong way. It must be a non-module script inside the body element.'); 101 } 102 } 103 104}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.