feat: format options to include closeButton and downArrow properties (#…

…13) * feat: format options to include closeButton and downArrow properties * feat: controll topscroll height
get-advantage · Sep 10, 2024 · 7f919ab · 7f919ab
1 parent a5ce0b0
commit 7f919ab
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 33 deletions.
diff --git a/playground/local-dev/config.ts b/playground/local-dev/config.ts
@@ -1,12 +1,16 @@
-import { AdvantageFormatName, IAdvantageWrapper } from "@src/types";
+import {
+    AdvantageFormatName,
+    IAdvantageWrapper,
+    AdvantageConfig
+} from "@src/types";
 import logger from "@src/utils/logging";
 
 export default {
     formats: [
         {
             name: "MyCustomFormat",
             description: "A custom format",
-            setup: (wrapper: IAdvantageWrapper, ad?: HTMLElement) => {
+            setup: (wrapper: IAdvantageWrapper, ad?: HTMLIFrameElement) => {
                 return new Promise<void>((resolve) => {
                     wrapper.style.cssText = `position: relative; width: 100vw; height: 80vh;`;
                     if (ad) {
@@ -17,7 +21,7 @@ export default {
                     resolve();
                 });
             },
-            reset: (wrapper: IAdvantageWrapper, ad?: HTMLElement) => {
+            reset: (wrapper: IAdvantageWrapper, ad?: HTMLIFrameElement) => {
                 if (ad) {
                     ad.style.cssText = "display: none;";
                 }
@@ -28,6 +32,12 @@ export default {
     formatIntegrations: [
         {
             format: AdvantageFormatName.TopScroll,
+            // uncomment to show/hide UI elements
+            // options: {
+            //     closeButton: true,
+            //     downArrow: false,
+            //     closeButtonText: "Lukk"
+            // },
             setup: () => {
                 return new Promise<void>((resolve, reject) => {
                     const queryParams = new URLSearchParams(
@@ -52,4 +62,4 @@ export default {
             }
         }
     ]
-};
+} as AdvantageConfig;
diff --git a/src/advantage/formats/topscroll.css b/src/advantage/formats/topscroll.css
@@ -1,8 +1,9 @@
 :host {
+    --adv-topscroll-height: 80svh;
     display: block;
     position: relative;
     width: 100svw;
-    height: 80svh;
+    height: var(--adv-topscroll-height);
     overflow: hidden;
 }
 
@@ -14,20 +15,20 @@
     position: absolute;
     top: 0;
     width: 100svw;
-    height: 80svh;
+    height: var(--adv-topscroll-height);
     clip-path: inset(0px);
 }
 
 #ad-slot {
     position: fixed;
     top: 0;
     width: 100svw;
-    height: 80svh;
+    height: var(--adv-topscroll-height);
 }
 
 ::slotted(#simulated-ad) {
     width: 100svw;
-    height: 80svh;
+    height: var(--adv-topscroll-height);
     background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkyMHB4IiBoZWlnaHQ9IjEwODBweCIgdmlld0JveD0iMCAwIDE5MjAgMTA4MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5VbnRpdGxlZDwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiM5Nzk3OTciIGZpbGw9IiM5MDkwOTAiIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIj48L3JlY3Q+CiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgc3Ryb2tlPSIjOTc5Nzk3IiBmaWxsPSIjRDhEOEQ4IiB4PSIyNjAuNSIgeT0iMjMwLjUiIHdpZHRoPSIxNDAwIiBoZWlnaHQ9IjYyMCI+PC9yZWN0PgogICAgICAgIDx0ZXh0IGlkPSJUT1BTQ1JPTEwtU0FGRS1BUkVBIiBmb250LWZhbWlseT0iSGVsdmV0aWNhIiBmb250LXNpemU9IjcyIiBmb250LXdlaWdodD0ibm9ybWFsIiBmaWxsPSIjMDAwMDAwIj4KICAgICAgICAgICAgPHRzcGFuIHg9Ijc0Mi41NzYxNzIiIHk9IjUyMyI+VE9QU0NST0xMPC90c3Bhbj4KICAgICAgICAgICAgPHRzcGFuIHg9IjU5My43MjQ2MDkiIHk9IjYwOSI+U0FGRSBBUkVBIDE0MDB4NjIwPC90c3Bhbj4KICAgICAgICA8L3RleHQ+CiAgICA8L2c+Cjwvc3ZnPg==");
     background-size: cover;
     background-position: center center;
@@ -37,7 +38,7 @@
 @media screen and (orientation: portrait) {
     ::slotted(#simulated-ad) {
         width: 100svw;
-        height: 80svh;
+        height: var(--adv-topscroll-height);
         /*background-image: url("../../../fullscreen-portrait.png")*/
     }
 }
diff --git a/src/advantage/formats/topscroll.ts b/src/advantage/formats/topscroll.ts
@@ -1,4 +1,8 @@
-import { AdvantageFormat, AdvantageFormatName } from "../../types";
+import {
+    AdvantageFormat,
+    AdvantageFormatName,
+    AdvantageFormatOptions
+} from "../../types";
 import topscrollCSS from "./topscroll.css?raw";
 import topscrollUICSS from "./topscroll-ui.css?raw";
 import {
@@ -11,7 +15,15 @@ export const topscroll: AdvantageFormat = {
     name: AdvantageFormatName.TopScroll,
     description:
         "A format that sticks the ad to the top of the page as the user scrolls down.",
-    setup: (wrapper, ad) => {
+    setup: (wrapper, ad, options) => {
+        const defaults: AdvantageFormatOptions = {
+            closeButton: true,
+            closeButtonText: "Close ad",
+            downArrow: true,
+            height: 80
+        };
+        const config = { ...defaults, ...(options || {}) };
+
         return new Promise((resolve) => {
             // Inser the CSS for the top scroll format
             wrapper.insertCSS(topscrollCSS);
@@ -23,20 +35,37 @@ export const topscroll: AdvantageFormat = {
             // Change the content of the UI layer
             const uiContainer = document.createElement("div");
             uiContainer.id = "ui-container";
-            const closeBtn = document.createElement("div");
-            closeBtn.id = "close";
-            const downArrow = document.createElement("div");
-            downArrow.id = "down-arrow";
-            uiContainer.appendChild(closeBtn);
-            uiContainer.appendChild(downArrow);
+
+            if (config.height && config.height <= 100) {
+                wrapper.style.setProperty(
+                    "--adv-topscroll-height",
+                    `${config.height}svh`
+                );
+            }
+
+            if (config?.closeButton) {
+                const closeBtn = document.createElement("div");
+                closeBtn.id = "close";
+                closeBtn.addEventListener("click", () => {
+                    logger.debug("Close button clicked");
+                    wrapper.close();
+                });
+                uiContainer.appendChild(closeBtn);
+                wrapper.uiLayer.style.setProperty(
+                    "--before-content",
+                    `'${config.closeButtonText}'`
+                );
+            }
+
+            if (config?.downArrow) {
+                const downArrow = document.createElement("div");
+                downArrow.id = "down-arrow";
+                uiContainer.appendChild(downArrow);
+            }
+
             wrapper.uiLayer.insertCSS(topscrollUICSS);
             wrapper.uiLayer.changeContent(uiContainer);
-            wrapper.uiLayer.style.setProperty("--before-content", "'Close ad'");
 
-            closeBtn.addEventListener("click", () => {
-                logger.debug("Close button clicked");
-                wrapper.close();
-            });
             resolve();
         });
     },

diff --git a/src/advantage/wrapper.ts b/src/advantage/wrapper.ts
@@ -165,11 +165,22 @@ export class AdvantageWrapper extends HTMLElement implements IAdvantageWrapper {
                     return;
                 }
             }
+
+            const integration = Advantage.getInstance().formatIntegrations.get(
+                this.currentFormat
+            );
+
             try {
-                await formatConfig.setup(this, this.messageHandler.ad?.iframe);
-                await Advantage.getInstance()
-                    .formatIntegrations.get(format)
-                    ?.setup(this, this.messageHandler.ad?.iframe);
+                // 1. First we call the format setup function with optinal user defined format options
+                await formatConfig.setup(
+                    this,
+                    this.messageHandler.ad?.iframe,
+                    integration?.options
+                );
+
+                // 2. Then we call the integration setup function to apply site-specific adjustments
+                await integration?.setup(this, this.messageHandler.ad?.iframe);
+
                 resolve();
             } catch (error) {
                 this.reset();

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -60,26 +60,50 @@ export interface AdvantageFormat {
     description: string;
     setup: (
         wrapper: IAdvantageWrapper,
-        adIframe?: HTMLElement
+        adIframe?: HTMLElement,
+        options?: AdvantageFormatOptions
     ) => Promise<void>;
     reset: (wrapper: IAdvantageWrapper, adIframe?: HTMLElement) => void;
     close?: (wrapper: IAdvantageWrapper, adIframe?: HTMLElement) => void;
     simulate?: (wrapper: IAdvantageWrapper) => void;
 }
 
+export interface AdvantageFormatOptions {
+    closeButton?: boolean;
+    closeButtonText?: string;
+    downArrow?: boolean;
+    height?: number;
+}
+
 export interface AdvantageFormatIntegration {
     format: AdvantageFormatName | string;
+    options?: AdvantageFormatOptions;
     setup: (
         wrapper: IAdvantageWrapper,
-        adIframe?: HTMLElement
+        adIframe?: HTMLIFrameElement | HTMLElement
     ) => Promise<void>;
-    teardown?: (wrapper: IAdvantageWrapper, adIframe?: HTMLElement) => void;
-    close?: (wrapper: IAdvantageWrapper, adIframe?: HTMLElement) => void;
-    reset?: (wrapper: IAdvantageWrapper, adIframe?: HTMLElement) => void;
+    teardown?: (
+        wrapper: IAdvantageWrapper,
+        adIframe?: HTMLIFrameElement | HTMLElement
+    ) => void;
+    close?: (
+        wrapper: IAdvantageWrapper,
+        adIframe?: HTMLIFrameElement | HTMLElement
+    ) => void;
+    reset?: (
+        wrapper: IAdvantageWrapper,
+        adIframe?: HTMLIFrameElement | HTMLElement
+    ) => void;
     /** @deprecated use close */
-    onClose?: (wrapper: IAdvantageWrapper, adIframe?: HTMLElement) => void;
+    onClose?: (
+        wrapper: IAdvantageWrapper,
+        adIframe?: HTMLIFrameElement | HTMLElement
+    ) => void;
     /** @deprecated use reset */
-    onReset?: (wrapper: IAdvantageWrapper, adIframe?: HTMLElement) => void;
+    onReset?: (
+        wrapper: IAdvantageWrapper,
+        adIframe?: HTMLIFrameElement | HTMLElement
+    ) => void;
 }
 
 export interface AdvantageMessage {