Separate ad head elements into a separate component

svelte/src/file_viewer/AdHead.svelte

@@ -0,0 +1,44 @@
+<script context="module">
+import { writable } from "svelte/store";
+export const adsplus_load = writable(false)
+export const adsplus_loaded = writable(false)
+export const adaround_load = writable(false)
+export const adaround_loaded = writable(false)
+
+</script>
+<script>
+// This script makes sure that each head element is only loaded once. The _load
+// stores are for telling this script to load a head element, and the _loaded
+// stores are for telling the ads that the head element has finished loading
+
+let adsplus = false
+adsplus_load.subscribe(v => {
+	if (v) {
+		adsplus = true
+	}
+})
+const adsplus_load_event = () => {
+	adsplus_loaded.set(true)
+	console.debug("finished loading adsplus head element")
+}
+
+let adaround = false
+adaround_load.subscribe(v => {
+	if (v) {
+		adaround = true
+	}
+})
+const adaround_load_event = () => {
+	adaround_loaded.set(true)
+	console.debug("finished loading adaround head element")
+}
+</script>
+
+<svelte:head>
+	{#if adsplus}
+		<script on:load={adsplus_load_event} async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
+	{/if}
+	{#if adaround}
+		<script on:load={adaround_load_event} async src="/res/script/adaround.js"></script>
+	{/if}
+</svelte:head>

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -1,41 +1,51 @@
 <script>
 import { onMount } from "svelte"
+import { adsplus_load, adsplus_loaded, adaround_load } from "./AdHead.svelte"
 
 let container
 let banner
 let ad_type = ""
 
+let set_ad_type = (t) => {
+	ad_type = t
+	if (ad_type === "ads.plus") {
+		adsplus_load.set(true)
+	} else if (ad_type === "adaround") {
+		adaround_load.set(true)
+	}
+}
+
 onMount(() => {
 	if (window.location.pathname === "/u/demo") {
 		let url_ads = new URL(window.location.href).searchParams.get("ads")
 		if (url_ads !== "") {
-			ad_type = url_ads
+			set_ad_type(url_ads)
 			return
 		}
 	}
 
 	switch (Math.floor(Math.random() * 10)) {
 		case 0:
-			ad_type = "publisherrest_1"
+			set_ad_type("publisherrest_1")
 			break
 		case 1:
-			ad_type = "publisherrest_3"
+			set_ad_type("publisherrest_3")
 			break
 		case 2:
 		case 3:
-			ad_type = "brave"
+			set_ad_type("brave")
 			break
 		case 4:
 		case 5:
-			ad_type = "ads.plus"
+			set_ad_type("ads.plus")
 			break
 		case 6:
 		case 7:
-			ad_type = "pixfuture"
+			set_ad_type("pixfuture")
 			break
 		case 8:
 		case 9:
-			ad_type = "adaround"
+			set_ad_type("adaround")
 			break
 	}
 
@@ -78,7 +88,8 @@ const resize = () => {
 	banner.style.transform = "scale(" + scale + ")"
 }
 
-const ads_plus = () => {
+adsplus_loaded.subscribe(v => {
+	if (v) {
 	window.googletag = window.googletag || {cmd: []};
 	googletag.cmd.push(function() {
 		googletag.defineSlot('/21673142571/299__pixeldrain.com__default__728x90_1', [728, 90], 'div-gpt-ad-pixeldraincom728x90_1').addService(googletag.pubads());
@@ -86,19 +97,12 @@ const ads_plus = () => {
 		googletag.enableServices();
 	});
 	googletag.cmd.push(function() { googletag.display('div-gpt-ad-pixeldraincom728x90_1'); });
-}
+	}
+})
 </script>
 
 <svelte:window on:resize={resize} on:load={resize}/>
 
-<svelte:head>
-	{#if ad_type === "ads.plus"}
-		<script on:load={ads_plus} async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
-	{:else if ad_type === "adaround"}
-		<script async src="/res/script/adaround.js"></script>
-	{/if}
-</svelte:head>
-
 <div bind:this={container}>
 	{#if ad_type === "publisherrest_1"}
 		<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
@@ -124,7 +128,7 @@ const ads_plus = () => {
 				<i class="icon">shopping_cart</i>
 			</a>
 		</div>
-	{:else if ad_type === "a-ads"}
+	{:else if ad_type === "aads1"}
 		<iframe bind:this={banner} class="banner"
 			data-aa="73974"
 			src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"

svelte/src/file_viewer/AdSkyscraper.svelte

@@ -1,16 +1,27 @@
 <script>
 import { createEventDispatcher, onMount, tick } from "svelte"
+import { adsplus_load, adsplus_loaded, adaround_load } from "./AdHead.svelte"
 
 let dispatch = createEventDispatcher()
 let container
 let ad_type = ""
 let visible = false
 
+let set_ad_type = (t) => {
+	ad_type = t
+	if (ad_type === "ads.plus") {
+		adsplus_load.set(true)
+	} else if (ad_type === "adaround") {
+		adaround_load.set(true)
+	}
+}
+
+
 onMount(async () => {
 	if (window.location.pathname === "/u/demo") {
 		let url_ads = new URL(window.location.href).searchParams.get("ads")
 		if (url_ads !== "") {
-			ad_type = url_ads
+			set_ad_type(url_ads)
 			open()
 			return
 		}
@@ -35,16 +46,16 @@ onMount(async () => {
 
 	switch (Math.floor(Math.random() * 4)) {
 		case 0:
-			ad_type = "a-ads"
+			set_ad_type("aads2")
 			break
 		case 1:
-			ad_type = "pixfuture"
+			set_ad_type("pixfuture")
 			break
 		case 2:
-			ad_type = "ads.plus"
+			set_ad_type("ads.plus")
 			break
 		case 3:
-			ad_type = "adaround"
+			set_ad_type("adaround")
 			break
 	}
 
@@ -67,7 +78,8 @@ const close = () => {
 	setTimeout(() => { visible = false }, 1000)
 }
 
-const ads_plus = () => {
+adsplus_loaded.subscribe(v => {
+	if (v) {
 		window.googletag = window.googletag || {cmd: []};
 		googletag.cmd.push(function() {
 			googletag.defineSlot('/21673142571/299__pixeldrain.com__default__160x600_1', [160, 600], 'div-gpt-ad-pixeldraincom160x600_1').addService(googletag.pubads());
@@ -75,25 +87,18 @@ const ads_plus = () => {
 			googletag.enableServices();
 		});
 		googletag.cmd.push(function() { googletag.display('div-gpt-ad-pixeldraincom160x600_1'); });
-}
+	}
+})
 
 </script>
 
-<svelte:head>
-	{#if ad_type === "ads.plus"}
-		<script on:load={ads_plus} async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
-	{:else if ad_type === "adaround"}
-		<script async src="/res/script/adaround.js"></script>
-	{/if}
-</svelte:head>
-
 {#if visible}
 	<div class="skyscraper" bind:this={container}>
 		<button on:click={close} class="round">
 			<i class="icon">close</i> Close ad
 		</button>
 		<div class="ad_space">
-			{#if ad_type === "a-ads"}
+			{#if ad_type === "aads2"}
 				<iframe
 					data-aa="1811738"
 					src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"

svelte/src/file_viewer/FileViewer.svelte

@@ -11,6 +11,7 @@ import EditWindow from "./EditWindow.svelte";
 import EmbedWindow from "./EmbedWindow.svelte";
 import ReportWindow from "./ReportWindow.svelte";
 import IntroPopup from "./IntroPopup.svelte";
+import AdHead from "./AdHead.svelte";
 import AdLeaderboard from "./AdLeaderboard.svelte";
 import AdSkyscraper from "./AdSkyscraper.svelte";
 import Sharebar from "./Sharebar.svelte";
@@ -317,6 +318,9 @@ const keyboard_event = evt => {
 <svelte:window on:keydown={keyboard_event}/>
 
 <div id="file_viewer" class="file_viewer">
+	<!-- Head elements for the ads -->
+	<AdHead></AdHead>
+
 	<div id="headerbar" class="headerbar" class:embedded>
 		<button on:click={toolbar_toggle} class="button_toggle_toolbar round" class:button_highlight={toolbar_visible}>
 			<i class="icon">menu</i>