@4site/engrid-scripts 0.25.12 → 0.25.13

package/dist/app.js

@@ -180,6 +180,8 @@ export class App extends ENGrid {
         new CustomCurrency();
         // Auto Country Select
         new AutoCountrySelect();
+        // Page Background
+        new PageBackground(this.options.UseBodyBannerImageAsBackground);
         // Add Image Attribution
         if (this.options.MediaAttribution)
             new MediaAttribution();
@@ -230,8 +232,6 @@ export class App extends ENGrid {
         new A11y();
         new AddNameToMessage();
         new ExpandRegionName();
-        // Page Background
-        new PageBackground();
         // Url Params to Form Fields
         new UrlToForm();
         // Required if Visible Fields

package/dist/engrid.js

@@ -171,7 +171,7 @@ export class ENGrid {
         return null;
     }
     static isThankYouPage() {
-        return this.getPageNumber() === this.getPageCount();
+        return (this.getPageNumber() === this.getPageCount() && this.getPageCount() > 1);
     }
     // Return the current page ID
     static getPageID() {

package/dist/interfaces/options.d.ts

@@ -1,5 +1,6 @@
 export interface Options {
     backgroundImage?: string | string[];
+    UseBodyBannerImageAsBackground?: boolean;
     MediaAttribution?: boolean;
     applePay?: boolean;
     CapitalizeFields?: boolean;

package/dist/interfaces/options.js

@@ -54,4 +54,5 @@ export const OptionsDefaults = {
         "rightright1col",
         "none",
     ],
+    UseBodyBannerImageAsBackground: false,
 };

package/dist/page-background.d.ts

@@ -1,12 +1,18 @@
 export declare class PageBackground {
     private pageBackground;
+    private bodyBanner;
+    private bodyBannerImage;
     private mutationObserver;
     private logger;
-    constructor();
+    constructor(useBodyBannerImage?: boolean);
+    private findBodyBannerImage;
     /**
      * Initialize background image by finding and setting CSS custom property
      */
     private initializeBackgroundImage;
+    private getBackgroundImage;
+    private useBodyBannerAsBackground;
+    private getImageSource;
     /**
      * Set the background image URL as a CSS custom property
      */

package/dist/page-background.js

@@ -1,11 +1,16 @@
 import { ENGrid, EngridLogger } from ".";
 export class PageBackground {
-    constructor() {
+    constructor(useBodyBannerImage = false) {
         // @TODO: Change page-backgroundImage to page-background
         this.pageBackground = document.querySelector(".page-backgroundImage");
+        this.bodyBanner = document.querySelector(".body-banner");
+        this.bodyBannerImage = null;
         this.mutationObserver = null;
         this.logger = new EngridLogger("PageBackground", "lightblue", "darkblue", "🖼️");
-        if (!this.pageBackground) {
+        if (useBodyBannerImage) {
+            this.bodyBannerImage = this.findBodyBannerImage();
+        }
+        if (!this.pageBackground && !this.bodyBannerImage) {
             this.logger.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
             return;
         }
@@ -14,28 +19,66 @@ export class PageBackground {
         this.processAttributionPositioning();
         this.setupMutationObserver();
     }
+    findBodyBannerImage() {
+        var _a;
+        if (!this.bodyBanner) {
+            return null;
+        }
+        return ((_a = this.bodyBanner.querySelector("img.preferred-image")) !== null && _a !== void 0 ? _a : this.bodyBanner.querySelector("img"));
+    }
     /**
      * Initialize background image by finding and setting CSS custom property
      */
     initializeBackgroundImage() {
-        if (!this.pageBackground)
+        const backgroundImg = this.getBackgroundImage();
+        if (!backgroundImg) {
+            this.logger.log("No image found in page background and no body banner image found (or pageBackground is already occupied), any default image set in the theme on --engrid__page-backgroundImage_url will be used");
             return;
-        const pageBackgroundImg = this.pageBackground.querySelector("img");
-        if (!pageBackgroundImg) {
-            this.logger.log("A background image set in the page was not found, any default image set in the theme on --engrid__page-backgroundImage_url will be used");
+        }
+        const imageSource = this.getImageSource(backgroundImg);
+        if (!imageSource) {
+            this.logger.log("A background image set in the page was found but without a data-src or src value, no action taken", backgroundImg);
             return;
         }
-        const dataSrc = pageBackgroundImg.getAttribute("data-src");
-        const src = pageBackgroundImg.src;
-        if (dataSrc) {
-            this.setBackgroundImageUrl(dataSrc, "data-src");
+        this.setBackgroundImageUrl(imageSource.url, imageSource.sourceType);
+    }
+    getBackgroundImage() {
+        if (!this.pageBackground) {
+            return null;
         }
-        else if (src) {
-            this.setBackgroundImageUrl(src, "src");
+        const existingImage = this.pageBackground.querySelector("img");
+        if (existingImage) {
+            return existingImage;
         }
-        else {
-            this.logger.log("A background image set in the page was found but without a data-src or src value, no action taken", pageBackgroundImg);
+        if (this.bodyBannerImage && this.pageBackground.children.length === 0) {
+            return this.useBodyBannerAsBackground();
+        }
+        return null;
+    }
+    useBodyBannerAsBackground() {
+        var _a;
+        if (!this.pageBackground || !this.bodyBanner) {
+            return null;
+        }
+        this.logger.log("No image found in page background, using body banner image as background image instead");
+        const clonedBodyBanner = this.bodyBanner.cloneNode(true);
+        while (clonedBodyBanner.firstChild) {
+            this.pageBackground.appendChild(clonedBodyBanner.firstChild);
+        }
+        document.body.removeAttribute("data-engrid-no-page-backgroundImage");
+        ENGrid.setBodyData("use-body-banner-background", "");
+        return ((_a = this.pageBackground.querySelector("img.preferred-image")) !== null && _a !== void 0 ? _a : this.pageBackground.querySelector("img"));
+    }
+    getImageSource(backgroundImg) {
+        const dataSrc = backgroundImg.getAttribute("data-src");
+        if (dataSrc) {
+            return { sourceType: "data-src", url: dataSrc };
+        }
+        const src = backgroundImg.src;
+        if (src) {
+            return { sourceType: "src", url: src };
         }
+        return null;
     }
     /**
      * Set the background image URL as a CSS custom property

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.25.12";
+export declare const AppVersion = "0.25.13";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.25.12";
+export const AppVersion = "0.25.13";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.25.12",
+  "version": "0.25.13",
   "description": "Scripts for the ENGRID Project",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "strongly-typed-events": "^2.0.9"
   },
   "homepage": "https://github.com/4site-interactive-studios/engrid#readme",
-  "gitHead": "79a43bee4e541f226dd438124f7a0d14f3169586",
+  "gitHead": "6e3e2a64fd59921011967c02bd5c68fa2aaa3a65",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }