@4site/engrid-scripts 0.22.9 → 0.22.11

package/dist/a11y.d.ts

@@ -5,4 +5,5 @@ export declare class A11y {
     private addLabel;
     private updateFrequencyLabel;
     private setAutoGeneratedAltTags;
+    private manageErrorListAlertRole;
 }

package/dist/a11y.js

@@ -8,6 +8,7 @@ export class A11y {
         this.updateFrequencyLabel();
         const ecardImages = document.querySelectorAll('.en__ecarditems__list img');
         this.setAutoGeneratedAltTags(ecardImages);
+        this.manageErrorListAlertRole();
     }
     addGroupRole() {
         // Add role="group" to all EN Radio fields
@@ -93,4 +94,29 @@ export class A11y {
             }
         });
     }
+    manageErrorListAlertRole() {
+        const errorList = document.querySelector('ul.en__errorList');
+        if (!errorList)
+            return;
+        const hasErrorItems = () => Boolean(errorList.querySelector('li'));
+        const enableAlert = () => {
+            if (!errorList.hasAttribute('role')) {
+                errorList.setAttribute('role', 'alert');
+            }
+        };
+        const disableAlert = () => {
+            if (errorList.hasAttribute('role')) {
+                errorList.removeAttribute('role');
+            }
+        };
+        hasErrorItems() ? enableAlert() : disableAlert();
+        new MutationObserver(records => {
+            for (const record of records) {
+                if (record.type === 'childList') {
+                    hasErrorItems() ? enableAlert() : disableAlert();
+                    break;
+                }
+            }
+        }).observe(errorList, { childList: true });
+    }
 }

package/dist/data-layer.js

@@ -86,68 +86,50 @@ export class DataLayer {
         return "";
     }
     onLoad() {
+        // Collect all data layer events and variables to push at once
+        const dataLayerData = {};
+        const dataLayerEvents = [];
         if (ENGrid.getGiftProcess()) {
             this.logger.log("EN_SUCCESSFUL_DONATION");
-            this.dataLayer.push({
-                event: "EN_SUCCESSFUL_DONATION",
-            });
+            dataLayerEvents.push("EN_SUCCESSFUL_DONATION");
             this.addEndOfGiftProcessEventsToDataLayer();
         }
         else {
             this.logger.log("EN_PAGE_VIEW");
-            this.dataLayer.push({
-                event: "EN_PAGE_VIEW",
-            });
+            dataLayerEvents.push("EN_PAGE_VIEW");
         }
         if (window.pageJson) {
             const pageJson = window.pageJson;
             for (const property in pageJson) {
                 if (!Number.isNaN(pageJson[property])) {
-                    this.dataLayer.push({
-                        event: `EN_PAGEJSON_${property.toUpperCase()}-${pageJson[property]}`,
-                    });
-                    this.dataLayer.push({
-                        [`'EN_PAGEJSON_${property.toUpperCase()}'`]: pageJson[property],
-                    });
+                    dataLayerEvents.push(`EN_PAGEJSON_${property.toUpperCase()}-${pageJson[property]}`);
+                    dataLayerData[`'EN_PAGEJSON_${property.toUpperCase()}'`] =
+                        pageJson[property];
                 }
                 else {
-                    this.dataLayer.push({
-                        event: `EN_PAGEJSON_${property.toUpperCase()}-${this.transformJSON(pageJson[property])}`,
-                    });
-                    this.dataLayer.push({
-                        [`'EN_PAGEJSON_${property.toUpperCase()}'`]: this.transformJSON(pageJson[property]),
-                    });
+                    dataLayerEvents.push(`EN_PAGEJSON_${property.toUpperCase()}-${this.transformJSON(pageJson[property])}`);
+                    dataLayerData[`'EN_PAGEJSON_${property.toUpperCase()}'`] =
+                        this.transformJSON(pageJson[property]);
                 }
-                this.dataLayer.push({
-                    event: "EN_PAGEJSON_" + property.toUpperCase(),
-                    eventValue: pageJson[property],
-                });
+                dataLayerEvents.push("EN_PAGEJSON_" + property.toUpperCase());
+                dataLayerData.eventValue = pageJson[property];
             }
             if (ENGrid.getPageCount() === ENGrid.getPageNumber()) {
-                this.dataLayer.push({
-                    event: "EN_SUBMISSION_SUCCESS_" + pageJson.pageType.toUpperCase(),
-                });
-                this.dataLayer.push({
-                    [`'EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}'`]: "TRUE",
-                });
+                dataLayerEvents.push("EN_SUBMISSION_SUCCESS_" + pageJson.pageType.toUpperCase());
+                dataLayerData[`'EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}'`] = "TRUE";
             }
         }
         const urlParams = new URLSearchParams(window.location.search);
         urlParams.forEach((value, key) => {
-            this.dataLayer.push({
-                event: `EN_URLPARAM_${key.toUpperCase()}-${this.transformJSON(value)}`,
-            });
-            this.dataLayer.push({
-                [`'EN_URLPARAM_${key.toUpperCase()}'`]: this.transformJSON(value),
-            });
+            dataLayerEvents.push(`EN_URLPARAM_${key.toUpperCase()}-${this.transformJSON(value)}`);
+            dataLayerData[`'EN_URLPARAM_${key.toUpperCase()}'`] =
+                this.transformJSON(value);
         });
         if (ENGrid.getPageType() === "DONATION") {
             const recurrFreqEls = document.querySelectorAll('[name="transaction.recurrfreq"]');
             const recurrValues = [...recurrFreqEls].map((el) => el.value);
-            this.dataLayer.push({
-                event: "EN_RECURRING_FREQUENCIES",
-                [`'EN_RECURRING_FREQEUENCIES'`]: recurrValues,
-            });
+            dataLayerEvents.push("EN_RECURRING_FREQUENCIES");
+            dataLayerData[`'EN_RECURRING_FREQEUENCIES'`] = recurrValues;
         }
         let fastFormFill = false;
         // Fast Form Fill - Personal Details
@@ -156,20 +138,14 @@ export class DataLayer {
             const allPersonalMandatoryInputsAreFilled = FastFormFill.allMandatoryInputsAreFilled(fastPersonalDetailsFormBlock);
             const somePersonalMandatoryInputsAreFilled = FastFormFill.someMandatoryInputsAreFilled(fastPersonalDetailsFormBlock);
             if (allPersonalMandatoryInputsAreFilled) {
-                this.dataLayer.push({
-                    event: "EN_FASTFORMFILL_PERSONALINFO_SUCCESS",
-                });
+                dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_SUCCESS");
                 fastFormFill = true;
             }
             else if (somePersonalMandatoryInputsAreFilled) {
-                this.dataLayer.push({
-                    event: "EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS",
-                });
+                dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS");
             }
             else {
-                this.dataLayer.push({
-                    event: "EN_FASTFORMFILL_PERSONALINFO_FAILURE",
-                });
+                dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_FAILURE");
             }
         }
         // Fast Form Fill - Address Details
@@ -178,31 +154,29 @@ export class DataLayer {
             const allAddressMandatoryInputsAreFilled = FastFormFill.allMandatoryInputsAreFilled(fastAddressDetailsFormBlock);
             const someAddressMandatoryInputsAreFilled = FastFormFill.someMandatoryInputsAreFilled(fastAddressDetailsFormBlock);
             if (allAddressMandatoryInputsAreFilled) {
-                this.dataLayer.push({
-                    event: "EN_FASTFORMFILL_ADDRESS_SUCCESS",
-                });
+                dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_SUCCESS");
                 fastFormFill = fastFormFill ? true : false; // Only set to true if it was true before
             }
             else if (someAddressMandatoryInputsAreFilled) {
-                this.dataLayer.push({
-                    event: "EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS",
-                });
+                dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS");
             }
             else {
-                this.dataLayer.push({
-                    event: "EN_FASTFORMFILL_ADDRESS_FAILURE",
-                });
+                dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_FAILURE");
             }
         }
         if (fastFormFill) {
-            this.dataLayer.push({
-                event: "EN_FASTFORMFILL_ALL_SUCCESS",
-            });
+            dataLayerEvents.push("EN_FASTFORMFILL_ALL_SUCCESS");
         }
         else {
-            this.dataLayer.push({
-                event: "EN_FASTFORMFILL_ALL_FAILURE",
-            });
+            dataLayerEvents.push("EN_FASTFORMFILL_ALL_FAILURE");
+        }
+        // Push all collected events individually (GTM requirement)
+        dataLayerEvents.forEach((event) => {
+            this.dataLayer.push({ event });
+        });
+        // Push all collected variables at once
+        if (Object.keys(dataLayerData).length > 0) {
+            this.dataLayer.push(dataLayerData);
         }
         this.attachEventListeners();
     }

package/dist/page-background.d.ts

@@ -1,6 +1,64 @@
 export declare class PageBackground {
     private pageBackground;
+    private mutationObserver;
+    private logger;
     constructor();
+    /**
+     * Initialize background image by finding and setting CSS custom property
+     */
+    private initializeBackgroundImage;
+    /**
+     * Set the background image URL as a CSS custom property
+     */
+    private setBackgroundImageUrl;
+    /**
+     * Processes attribution positioning for background images by moving positioning classes
+     * and data attributes from images to their parent column containers.
+     *
+     * This function handles two attribution patterns:
+     * 1. Class-based: <img class="attribution-bottomright" src="...">
+     * 2. Data attribute-based: <img data-background-position="bottomright" src="...">
+     *
+     * Examples:
+     *
+     * Class-based attribution:
+     * <img class="attribution-bottomright" src="background.jpg">
+     * → Moves "attribution-bottomright" class to parent .en__component--column
+     *
+     * Data attribute-based attribution:
+     * <img data-background-position="top" src="background.jpg">
+     * → Converts to "attribution-top" class and moves to parent .en__component--column
+     *
+     * Supported positioning values:
+     * - center
+     * - top, topcenter (these result in the same positioning)
+     * - right, rightcenter (these result in the same positioning)
+     * - bottom, bottomcenter (these result in the same positioning)
+     * - left, leftcenter (these result in the same positioning)
+     * - topright
+     * - bottomright
+     * - bottomleft
+     * - topleft
+     */
+    private processAttributionPositioning;
+    /**
+     * Process attribution for a single image
+     */
+    private processImageAttribution;
+    /**
+     * Handle class-based attribution positioning
+     */
+    private handleClassBasedAttribution;
+    /**
+     * Handle data attribute-based attribution positioning
+     */
+    private handleDataAttributeAttribution;
+    private setupMutationObserver;
+    reprocessAttributionPositioning(): void;
+    /**
+     * Clean up resources and observers
+     */
+    destroy(): void;
     private setDataAttributes;
     private hasVideoBackground;
     private hasImageBackground;

package/dist/page-background.js

@@ -1,55 +1,242 @@
-import { ENGrid } from "./engrid";
+import { ENGrid, EngridLogger } from ".";
 export class PageBackground {
     constructor() {
         // @TODO: Change page-backgroundImage to page-background
         this.pageBackground = document.querySelector(".page-backgroundImage");
-        // Finds any <img> added to the "backgroundImage" ENGRid section and sets it as the "--engrid__page-backgroundImage_url" CSS Custom Property
-        if (this.pageBackground) {
-            const pageBackgroundImg = this.pageBackground.querySelector("img");
-            let pageBackgroundImgDataSrc = pageBackgroundImg === null || pageBackgroundImg === void 0 ? void 0 : pageBackgroundImg.getAttribute("data-src");
-            let pageBackgroundImgSrc = pageBackgroundImg === null || pageBackgroundImg === void 0 ? void 0 : pageBackgroundImg.src;
-            if (this.pageBackground && pageBackgroundImgDataSrc) {
-                if (ENGrid.debug)
-                    console.log("A background image set in the page was found with a data-src value, setting it as --engrid__page-backgroundImage_url", pageBackgroundImgDataSrc);
-                pageBackgroundImgDataSrc = "url('" + pageBackgroundImgDataSrc + "')";
-                this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", pageBackgroundImgDataSrc);
-            }
-            else if (this.pageBackground && pageBackgroundImgSrc) {
-                if (ENGrid.debug)
-                    console.log("A background image set in the page was found with a src value, setting it as --engrid__page-backgroundImage_url", pageBackgroundImgSrc);
-                pageBackgroundImgSrc = "url('" + pageBackgroundImgSrc + "')";
-                this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", pageBackgroundImgSrc);
-            }
-            else if (pageBackgroundImg) {
-                if (ENGrid.debug)
-                    console.log("A background image set in the page was found but without a data-src or src value, no action taken", pageBackgroundImg);
-            }
-            else {
-                if (ENGrid.debug)
-                    console.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");
-            }
+        this.mutationObserver = null;
+        this.logger = new EngridLogger("PageBackground", "lightblue", "darkblue", "🖼️");
+        if (!this.pageBackground) {
+            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;
+        }
+        this.initializeBackgroundImage();
+        this.setDataAttributes();
+        this.processAttributionPositioning();
+        this.setupMutationObserver();
+    }
+    /**
+     * Initialize background image by finding and setting CSS custom property
+     */
+    initializeBackgroundImage() {
+        if (!this.pageBackground)
+            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");
+            return;
+        }
+        const dataSrc = pageBackgroundImg.getAttribute("data-src");
+        const src = pageBackgroundImg.src;
+        if (dataSrc) {
+            this.setBackgroundImageUrl(dataSrc, "data-src");
+        }
+        else if (src) {
+            this.setBackgroundImageUrl(src, "src");
         }
         else {
-            if (ENGrid.debug)
-                console.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");
+            this.logger.log("A background image set in the page was found but without a data-src or src value, no action taken", pageBackgroundImg);
+        }
+    }
+    /**
+     * Set the background image URL as a CSS custom property
+     */
+    setBackgroundImageUrl(imageUrl, sourceType) {
+        if (!this.pageBackground || !imageUrl)
+            return;
+        try {
+            const cssUrl = `url('${imageUrl}')`;
+            this.pageBackground.style.setProperty("--engrid__page-backgroundImage_url", cssUrl);
+            this.logger.log(`A background image set in the page was found with a ${sourceType} value, setting it as --engrid__page-backgroundImage_url`, imageUrl);
+        }
+        catch (error) {
+            this.logger.error("Error setting background image URL:", error);
+        }
+    }
+    /**
+     * Processes attribution positioning for background images by moving positioning classes
+     * and data attributes from images to their parent column containers.
+     *
+     * This function handles two attribution patterns:
+     * 1. Class-based: <img class="attribution-bottomright" src="...">
+     * 2. Data attribute-based: <img data-background-position="bottomright" src="...">
+     *
+     * Examples:
+     *
+     * Class-based attribution:
+     * <img class="attribution-bottomright" src="background.jpg">
+     * → Moves "attribution-bottomright" class to parent .en__component--column
+     *
+     * Data attribute-based attribution:
+     * <img data-background-position="top" src="background.jpg">
+     * → Converts to "attribution-top" class and moves to parent .en__component--column
+     *
+     * Supported positioning values:
+     * - center
+     * - top, topcenter (these result in the same positioning)
+     * - right, rightcenter (these result in the same positioning)
+     * - bottom, bottomcenter (these result in the same positioning)
+     * - left, leftcenter (these result in the same positioning)
+     * - topright
+     * - bottomright
+     * - bottomleft
+     * - topleft
+     */
+    processAttributionPositioning() {
+        if (!this.pageBackground) {
+            this.logger.log("No background section found for attribution positioning processing");
+            return;
+        }
+        this.logger.log("Processing attribution positioning for background section:", this.pageBackground);
+        // Define all supported attribution positioning classes
+        const allowedClasses = [
+            "attribution-center",
+            "attribution-bottom",
+            "attribution-bottomcenter",
+            "attribution-bottomright",
+            "attribution-bottomleft",
+            "attribution-top",
+            "attribution-topcenter",
+            "attribution-topright",
+            "attribution-topleft",
+            "attribution-left",
+            "attribution-leftcenter",
+            "attribution-right",
+            "attribution-rightcenter",
+        ];
+        try {
+            // Find all images in the background section (after any DOM transformations)
+            const images = this.pageBackground.querySelectorAll("img");
+            this.logger.log("Found images in background section:", images.length);
+            images.forEach((img) => {
+                this.processImageAttribution(img, allowedClasses);
+            });
+        }
+        catch (error) {
+            this.logger.error("Error processing attribution positioning:", error);
+        }
+    }
+    /**
+     * Process attribution for a single image
+     */
+    processImageAttribution(img, allowedClasses) {
+        // Pattern 1: Check for class-based attribution positioning
+        // Example: <img class="attribution-bottomright" src="...">
+        const matchedClass = allowedClasses.find((cls) => img.classList.contains(cls));
+        // Pattern 2: Check for data attribute-based attribution positioning
+        // Example: <img data-background-position="bottomright" src="...">
+        const dataPosition = img.getAttribute("data-background-position");
+        if (matchedClass) {
+            this.handleClassBasedAttribution(img, matchedClass);
+        }
+        else if (dataPosition) {
+            this.handleDataAttributeAttribution(img, dataPosition);
+        }
+    }
+    /**
+     * Handle class-based attribution positioning
+     */
+    handleClassBasedAttribution(img, matchedClass) {
+        this.logger.log("Found attribution class on image:", matchedClass, img);
+        const parentDiv = img.closest(".en__component--column");
+        if (parentDiv) {
+            // Move the class from image to parent column
+            img.classList.remove(matchedClass);
+            parentDiv.classList.add(matchedClass);
+            this.logger.log("Moved attribution class from image to parent column:", matchedClass, parentDiv);
+        }
+        else {
+            this.logger.log("No parent .en__component--column found for image:", img);
+        }
+    }
+    /**
+     * Handle data attribute-based attribution positioning
+     */
+    handleDataAttributeAttribution(img, dataPosition) {
+        // Convert data attribute value to attribution class format
+        const attributionClass = `attribution-${dataPosition}`;
+        this.logger.log("Found data-background-position on image:", dataPosition, "->", attributionClass, img);
+        const parentDiv = img.closest(".en__component--column");
+        if (parentDiv) {
+            // Remove data attribute from image and add class to parent column
+            img.removeAttribute("data-background-position");
+            parentDiv.classList.add(attributionClass);
+            this.logger.log("Moved data-background-position from image to parent column as class:", attributionClass, parentDiv);
+        }
+        else {
+            this.logger.log("No parent .en__component--column found for image:", img);
+        }
+    }
+    setupMutationObserver() {
+        if (!this.pageBackground || !window.MutationObserver) {
+            if (!window.MutationObserver) {
+                this.logger.log("MutationObserver not supported in this browser");
+            }
+            return;
+        }
+        try {
+            this.mutationObserver = new MutationObserver((mutations) => {
+                let shouldReprocess = false;
+                mutations.forEach((mutation) => {
+                    // Check if nodes were added or attributes changed
+                    if (mutation.type === "childList" || mutation.type === "attributes") {
+                        shouldReprocess = true;
+                    }
+                });
+                if (shouldReprocess) {
+                    this.logger.log("DOM changes detected in background section, reprocessing attribution classes");
+                    // Use a small delay to ensure all changes are complete
+                    setTimeout(() => {
+                        this.processAttributionPositioning();
+                    }, 100);
+                }
+            });
+            // Start observing the background section
+            this.mutationObserver.observe(this.pageBackground, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ["class"],
+            });
+            this.logger.log("MutationObserver set up for background section");
+        }
+        catch (error) {
+            this.logger.error("Error setting up MutationObserver:", error);
+        }
+    }
+    // Public method to manually trigger reprocessing
+    reprocessAttributionPositioning() {
+        this.logger.log("Manually reprocessing attribution positioning");
+        this.processAttributionPositioning();
+    }
+    /**
+     * Clean up resources and observers
+     */
+    destroy() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+            this.logger.log("MutationObserver disconnected");
         }
-        this.setDataAttributes();
     }
     setDataAttributes() {
-        if (this.hasVideoBackground())
+        if (this.hasVideoBackground()) {
             return ENGrid.setBodyData("page-background", "video");
-        if (this.hasImageBackground())
+        }
+        if (this.hasImageBackground()) {
             return ENGrid.setBodyData("page-background", "image");
+        }
         return ENGrid.setBodyData("page-background", "empty");
     }
     hasVideoBackground() {
-        if (this.pageBackground) {
-            return !!this.pageBackground.querySelector("video");
+        if (!this.pageBackground) {
+            return false;
         }
+        return !!this.pageBackground.querySelector("video");
     }
     hasImageBackground() {
-        if (this.pageBackground) {
-            return (!this.hasVideoBackground() && !!this.pageBackground.querySelector("img"));
+        if (!this.pageBackground) {
+            return false;
         }
+        return (!this.hasVideoBackground() && !!this.pageBackground.querySelector("img"));
     }
 }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.22.9";
+export declare const AppVersion = "0.22.11";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.22.9";
+export const AppVersion = "0.22.11";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.22.9",
+  "version": "0.22.11",
   "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": "12d37d720dee51ffbe9b3fba07de92d0d63c1139",
+  "gitHead": "ca99b189c78dbe2123d662fe1335063f3bddb8f1",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }