From 52eab435e7a104a942eee17816f6b69329678258 Mon Sep 17 00:00:00 2001
From: hobbes7878 <jon.r.mcclure@gmail.com>
Date: Tue, 24 Sep 2024 05:54:59 +0100
Subject: [PATCH] collapse unfulfilled ads by adding a class to the ad unit and
 collapsing the container with css :has

---
 src/components/AdSlot/AdSlot.svelte          |  6 ++++++
 src/components/AdSlot/LeaderboardAd.svelte   |  2 +-
 src/components/AdSlot/adScripts/bootstrap.ts | 13 +++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte
index e258fb46..b6dee7e0 100644
--- a/src/components/AdSlot/AdSlot.svelte
+++ b/src/components/AdSlot/AdSlot.svelte
@@ -53,3 +53,9 @@
 </script>
 
 <div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
+
+<style>
+  :global(div.freestar-adslot:has(.unfulfilled-ad)) {
+    display: none;
+  }
+</style>
diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte
index 80f7a359..20952495 100644
--- a/src/components/AdSlot/LeaderboardAd.svelte
+++ b/src/components/AdSlot/LeaderboardAd.svelte
@@ -47,7 +47,7 @@
 <svelte:window bind:innerWidth="{windowWidth}" />
 
 <div
-  class="leaderboard__sticky {cls}"
+  class="freestar-adslot leaderboard__sticky {cls}"
   class:sticky
   class:unstick
   {id}
diff --git a/src/components/AdSlot/adScripts/bootstrap.ts b/src/components/AdSlot/adScripts/bootstrap.ts
index 86a4f59a..420028a5 100644
--- a/src/components/AdSlot/adScripts/bootstrap.ts
+++ b/src/components/AdSlot/adScripts/bootstrap.ts
@@ -54,6 +54,19 @@ export const loadBootstrap = () => {
       // @ts-ignore window global
       window.googletag.pubads().enableAsyncRendering();
       window.googletag.pubads().collapseEmptyDivs(true);
+
+      window.googletag
+        .pubads()
+        .addEventListener('slotRenderEnded', function (event) {
+          const adDiv = document.getElementById(event.slot.getSlotElementId());
+          if (!adDiv) return;
+          // If the ad slot is empty
+          if (event.isEmpty) {
+            adDiv.classList.add('unfulfilled-ad');
+          } else {
+            adDiv.classList.remove('unfulfilled-ad');
+          }
+        });
     });
 
     // Set page-level key-values