get-advantage
diff --git a/‎playground/local-dev/config.ts‎
Lines changed: 19 additions & 0 deletions b/‎playground/local-dev/config.ts‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎playground/local-dev/index.html‎
Lines changed: 2 additions & 2 deletions b/‎playground/local-dev/index.html‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/advantage/formats/welcomepage.ts‎
Lines changed: 28 additions & 2 deletions b/‎src/advantage/formats/welcomepage.ts‎
Lines changed: 28 additions & 2 deletions
@@ -62,6 +62,25 @@ export default {
                 logger.debug("Resetting top scroll format");
             }
         },
+        {
+            format: AdvantageFormatName.WelcomePage,
+            // uncomment to show/hide UI elements
+            options: {
+              closeButtonAnimationDuration: 0,
+            },
+            setup: (wrapper, ad) => {
+                console.log(wrapper, ad);
+                return new Promise<void>((resolve, reject) => {
+                    resolve();
+                });
+            },
+            close: () => {
+                logger.debug("Closing welcome page format");
+            },
+            reset: () => {
+                logger.debug("Resetting welcome page format");
+            }
+        },
         {
             format: AdvantageFormatName.DoubleMidscroll,
             options: {
 
@@ -17,10 +17,10 @@
     </head>
 
     <body>
-        <advantage-wrapper id="allowed-formats-wrapper">
+        <advantage-wrapper>
             <div slot="advantage-ad-slot">
                 <iframe
-                    src="./topscroll/topscroll.html"
+                    src="./welcomepage/welcomepage.html"
                     title="advantage-ad"
                     style="border: 0; width: 0; height: 0"
                     scrolling="no"
 
@@ -34,6 +34,12 @@ export const welcomePage: AdvantageFormat = {
             if (ad) {
                 setDimensionsUntilAdvantageAdSlot(ad);
             }
+            if (config.closeButtonAnimationDuration !== undefined) {
+                wrapper.style.setProperty(
+                    "--adv-wp-transition-duration",
+                    `${config.closeButtonAnimationDuration}s`
+                );
+            }
 
             // Change the content of the UI layer
             const uiContainer = document.createElement("div");
@@ -123,8 +129,11 @@ export const welcomePage: AdvantageFormat = {
             resetDimensionsUntilAdvantageAdSlot(ad);
         }
         wrapper.resetCSS();
+        wrapper.style.removeProperty("--adv-wp-transition-duration");
     },
     close: (wrapper) => {
+        const container = wrapper.shadowRoot?.getElementById("container");
+
         function handleTransitionEnd() {
             wrapper.style.display = "none";
             // Remove the event listener after it has been executed
@@ -134,8 +143,25 @@ export const welcomePage: AdvantageFormat = {
             );
         }
 
-        const container = wrapper.shadowRoot?.getElementById("container");
-        container?.addEventListener("transitionend", handleTransitionEnd);
+        if (container) {
+            const computedStyle = window.getComputedStyle(container);
+            const transitionProperty = computedStyle.transitionProperty;
+            const transitionDuration = computedStyle.transitionDuration;
+
+            const hasTransition =
+                transitionProperty !== "none" &&
+                transitionDuration.split(",").some((d) => parseFloat(d) > 0);
+
+            if (!hasTransition) {
+                wrapper.style.display = "none";
+                wrapper.classList.remove("show");
+                wrapper.style.height = "0px";
+                return;
+            }
+
+            container.addEventListener("transitionend", handleTransitionEnd);
+        }
+
         wrapper.classList.remove("show");
         wrapper.style.height = "0px";
     }