@sheerid/jslib 1.153.0 → 1.154.0

package/sheerides6.js

@@ -22269,38 +22269,205 @@ const NewVerificationInnerComponent = ({ locale, messages, programTheme, verific
                     verificationService.verificationResponse.currentStep, verificationService: verificationService }))))));
 };
 
+const fadeInElements = (elements) => {
+    elements.forEach((element) => {
+        element.classList.add("fade-in");
+    });
+};
+const removeElement = (element, transitionTimeout) => {
+    element.classList.remove("fade-in");
+    window.setTimeout(() => {
+        document.body.style.overflow = "auto";
+        element.parentNode.removeChild(element);
+    }, transitionTimeout);
+};
+const getVerificationUrl = (url) => {
+    const newUrl = new URL(url);
+    const parentUrl = new URL(window.location.href);
+    // Combine query parameters from parent window and provided url.
+    // If duplicates, provided url parameters supercede.
+    parentUrl.searchParams.forEach((value, key) => {
+        if (!newUrl.searchParams.has(key)) {
+            newUrl.searchParams.set(key, value);
+        }
+    });
+    return newUrl.href;
+};
+
+class Iframe {
+    constructor(containerElement, url) {
+        this.hasLoaded = false;
+        this.onLoadEvents = [];
+        this.onCleanupEvents = [];
+        this.installType = "cdn_inline_iframe";
+        if (Iframe.isValidHttpUrl(url)) {
+            const options = {
+                className: iframeConstants.CLASS_NAMES.INLINE_IFRAME_CONTENT,
+                title: iframeTitle,
+            };
+            this.containerElement = containerElement;
+            this.verificationUrl = new URL(getVerificationUrl(url));
+            this.verificationIframeUid = Iframe.createUniqueId();
+            this.createIframe(options);
+            this.addVerificationSizeUpdatesListener();
+        }
+        else {
+            logger.error("Invalid URL. Provide a proper URL: https://example.com/", "iframe url");
+        }
+    }
+    cleanup() {
+        this.onCleanupEvents.forEach((callback) => callback());
+    }
+    static createUniqueId() {
+        return Math.random().toString(36).substr(2, 9);
+    }
+    static isValidHttpUrl(urlString) {
+        try {
+            const url = new URL(urlString);
+            return url.protocol === "http:" || url.protocol === "https:";
+        }
+        catch {
+            return false;
+        }
+    }
+    createIframe(options) {
+        this.iframe = document.createElement("iframe");
+        this.iframe.classList.add(options.className);
+        this.iframe.title = options.title;
+        let mark = "?";
+        if (this.verificationUrl.search) {
+            mark = "&";
+        }
+        this.iframe.src = `${this.verificationUrl.href}${mark}verificationIframeUid=${this.verificationIframeUid}&${QUERY_STRING_INSTALL_PAGE_URL}=${encodeURIComponent(getCurrentUrl())}&${QUERY_STRING_INSTALL_TYPE}=${this.installType}`;
+        this.iframe.onload = () => this.onLoad();
+        return this.iframe;
+    }
+    // If iFrame hasn't loaded yet, queue up the callback
+    // otherwise call it immediately
+    addOnLoadEvent(callback) {
+        try {
+            assertValidFunction(callback);
+        }
+        catch (e) {
+            logger.error("Invalid callback provided to iFrame.onLoad()", e);
+            return;
+        }
+        if (this.hasLoaded) {
+            callback();
+        }
+        else {
+            this.onLoadEvents.push(callback);
+        }
+    }
+    onLoad() {
+        this.hasLoaded = true;
+        this.onLoadEvents.forEach((callback) => callback());
+    }
+    /**
+     * Using this to add parent window message listeners gives us
+     * - Event Cleanup for modals
+     * - verification of origin, verificationIframeUid, and message data structure
+     */
+    addWindowMessageListener(actionCb) {
+        const listener = (ev) => {
+            if (this.verificationUrl.origin !== ev.origin) {
+                return;
+            }
+            if (ev.data.verificationIframeUid !== this.verificationIframeUid) {
+                return;
+            }
+            if (ev.data.action && ev.data.action.type) {
+                actionCb(ev.data.action);
+            }
+        };
+        window.addEventListener("message", listener);
+        this.onCleanupEvents.push(() => window.removeEventListener("message", listener));
+    }
+    addVerificationSizeUpdatesListener() {
+        this.addWindowMessageListener((action) => {
+            if (action.type === "updateHeight") {
+                // UX-1129: If we are getting height updates, turn off scrolling for
+                // the iframe. This prevents browsers (Safari in particular) from
+                // re-wrapping because of different widths and constantly changing
+                // it's own height. `scrolling = "no"` is deprecated, but supported in
+                // all browsers and fixes the problem well.
+                this.iframe.scrolling = "no";
+                this.iframe.style.height = `${action.height}px`;
+            }
+        });
+    }
+    setViewModel(viewModel) {
+        const message = {
+            action: "setViewModel",
+            viewModel,
+        };
+        this.addOnLoadEvent(() => {
+            this.iframe.contentWindow.postMessage(message, this.verificationUrl.origin);
+        });
+    }
+    setOptions(options) {
+        const message = {
+            action: "setOptions",
+            options,
+        };
+        this.addOnLoadEvent(() => {
+            this.iframe.contentWindow.postMessage(message, this.verificationUrl.origin);
+        });
+    }
+    setInstallType(installType) {
+        this.installType = installType;
+    }
+    init() {
+        this.containerElement.appendChild(this.iframe);
+    }
+}
+/**
+ * All post messages from inside our iframes and modals should use this function
+ * to post messages to the parent window. It strongly types the data and makes
+ * sure we're only listening to events that have the iframeUid
+ */
+function postMessageFromIframe(action) {
+    const origin = "*";
+    const verificationUrl = new URL(window.location.href);
+    const verificationIframeUid = verificationUrl.searchParams.get("verificationIframeUid");
+    window.parent.postMessage({
+        verificationIframeUid,
+        action,
+    }, origin);
+}
+
 /*
   Trap focus in the lightbox by sending and receiving postMessages, here and from the modal script, while tabbing through the program.
 */
 const trapFocus = () => {
+    let lastFocusableElement = null;
     document.addEventListener("keydown", (e) => {
-        const focusableElements = 'button, .sid-link, input, select, textarea, [tabindex]:not([tabindex="-1"]';
-        const focusableContent = document.querySelectorAll(focusableElements);
-        const lastFocusableElement = focusableContent[focusableContent.length - 1];
         const isTabPressed = e.key === "Tab";
         if (!isTabPressed) {
             return;
         }
+        const focusableElements = 'button, .sid-link, input, select, textarea, [tabindex]:not([tabindex="-1"]';
+        const focusableContent = document.querySelectorAll(focusableElements);
+        lastFocusableElement = focusableContent[focusableContent.length - 1];
         if (lastFocusableElement) {
-            window.addEventListener("message", (event) => {
-                const message = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
-                if (message.focusOn === "lastElement") {
-                    lastFocusableElement.focus();
-                    e.preventDefault();
-                }
-            });
             if (!e.shiftKey && document.activeElement === lastFocusableElement) {
-                window.parent.postMessage({ focusOn: "firstElement" }, "*");
+                postMessageFromIframe({ type: "focus", focusOn: "firstElement" });
                 e.preventDefault();
             }
         }
     });
+    window.addEventListener("message", (event) => {
+        const message = event.data;
+        if (message.focusOn === "lastElement" && lastFocusableElement) {
+            lastFocusableElement.focus();
+        }
+    });
     // set inital focus to lightbox close button
-    window.parent.postMessage({ focusOn: "firstElement" }, "*");
+    postMessageFromIframe({ type: "focus", focusOn: "firstElement" });
 };
 const maintainFocusInLightbox = () => {
     window.addEventListener("message", (event) => {
-        const message = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+        const message = event.data;
         if (message.isInLightBox === "true") {
             trapFocus();
         }
@@ -22457,146 +22624,6 @@ const postalCodeMatchers = {
     GB: "^GIR ?0AA|(?:(?:AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|BX|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(?:\\d[\\dA-Z]? ?\\d[ABD-HJLN-UW-Z]{2}))|BFPO ?\\d{1,4}$",
 };
 
-const fadeInElements = (elements) => {
-    elements.forEach((element) => {
-        element.classList.add("fade-in");
-    });
-};
-const removeElement = (element, transitionTimeout) => {
-    element.classList.remove("fade-in");
-    window.setTimeout(() => {
-        document.body.style.overflow = "auto";
-        element.parentNode.removeChild(element);
-    }, transitionTimeout);
-};
-const getVerificationUrl = (url) => {
-    const newUrl = new URL(url);
-    const parentUrl = new URL(window.location.href);
-    // Combine query parameters from parent window and provided url.
-    // If duplicates, provided url parameters supercede.
-    parentUrl.searchParams.forEach((value, key) => {
-        if (!newUrl.searchParams.has(key)) {
-            newUrl.searchParams.set(key, value);
-        }
-    });
-    return newUrl.href;
-};
-
-class Iframe {
-    constructor(containerElement, url) {
-        this.hasLoaded = false;
-        this.onLoadEvents = [];
-        this.installType = "cdn_inline_iframe";
-        if (Iframe.isValidHttpUrl(url)) {
-            const options = {
-                className: iframeConstants.CLASS_NAMES.INLINE_IFRAME_CONTENT,
-                title: iframeTitle,
-            };
-            this.containerElement = containerElement;
-            this.verificationUrl = new URL(getVerificationUrl(url));
-            this.verificationIframeUid = Iframe.createUniqueId();
-            this.createIframe(options);
-            this.addVerificationSizeUpdatesListener();
-        }
-        else {
-            logger.error("Invalid URL. Provide a proper URL: https://example.com/", "iframe url");
-        }
-    }
-    static createUniqueId() {
-        return Math.random().toString(36).substr(2, 9);
-    }
-    static isValidHttpUrl(urlString) {
-        try {
-            const url = new URL(urlString);
-            return url.protocol === "http:" || url.protocol === "https:";
-        }
-        catch {
-            return false;
-        }
-    }
-    createIframe(options) {
-        this.iframe = document.createElement("iframe");
-        this.iframe.classList.add(options.className);
-        this.iframe.title = options.title;
-        let mark = "?";
-        if (this.verificationUrl.search) {
-            mark = "&";
-        }
-        this.iframe.src = `${this.verificationUrl.href}${mark}verificationIframeUid=${this.verificationIframeUid}&${QUERY_STRING_INSTALL_PAGE_URL}=${encodeURIComponent(getCurrentUrl())}&${QUERY_STRING_INSTALL_TYPE}=${this.installType}`;
-        this.iframe.onload = () => this.onLoad();
-        return this.iframe;
-    }
-    // If iFrame hasn't loaded yet, queue up the callback
-    // otherwise call it immediately
-    addOnLoadEvent(callback) {
-        try {
-            assertValidFunction(callback);
-        }
-        catch (e) {
-            logger.error("Invalid callback provided to iFrame.onLoad()", e);
-            return;
-        }
-        if (this.hasLoaded) {
-            callback();
-        }
-        else {
-            this.onLoadEvents.push(callback);
-        }
-    }
-    onLoad() {
-        this.hasLoaded = true;
-        this.onLoadEvents.forEach((callback) => callback());
-    }
-    addVerificationSizeUpdatesListener() {
-        window.addEventListener("message", (event) => {
-            if (this.verificationUrl.origin !== event.origin) {
-                return;
-            }
-            const message = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
-            if (message.verificationIframeUid !== this.verificationIframeUid) {
-                return;
-            }
-            switch (message.action) {
-                case "updateHeight":
-                    // UX-1129: If we are getting height updates, turn off scrolling for
-                    // the iframe. This prevents browsers (Safari in particular) from
-                    // re-wrapping because of different widths and constantly changing
-                    // it's own height. `scrolling = "no"` is deprecated, but supported in
-                    // all browsers and fixes the problem well.
-                    this.iframe.scrolling = "no";
-                    this.iframe.style.height = `${message.height}px`;
-                    break;
-                default:
-                    logger.error("Unsupported message.action");
-            }
-        });
-    }
-    setViewModel(viewModel) {
-        const message = {
-            action: "setViewModel",
-            viewModel,
-        };
-        this.addOnLoadEvent(() => {
-            this.iframe.contentWindow.postMessage(message, this.verificationUrl.origin);
-        });
-    }
-    setOptions(options) {
-        const message = {
-            action: "setOptions",
-            options,
-        };
-        this.addOnLoadEvent(() => {
-            this.iframe.contentWindow.postMessage(message, this.verificationUrl.origin);
-        });
-    }
-    setInstallType(installType) {
-        this.installType = installType;
-    }
-    init() {
-        this.containerElement.appendChild(this.iframe);
-    }
-}
-
 class Modal {
     constructor(url, userConfig) {
         this.popStateEventHandler = () => this.closeModal();
@@ -22641,6 +22668,7 @@ class Modal {
         const transitionTimeout = iframeConstants.MODAL_OPACITY_TRANSITION_PERIOD;
         removeElement(this.overlay, transitionTimeout);
         removeElement(this.wrapper, transitionTimeout);
+        this.iframeInstance.cleanup();
     }
     static createOverlay() {
         const overlay = document.createElement("div");
@@ -22667,9 +22695,8 @@ class Modal {
         window.addEventListener("popstate", this.popStateEventHandler);
     }
     addFocusListener() {
-        window.addEventListener("message", (event) => {
-            const message = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
-            if (message.focusOn === "firstElement") {
+        this.iframeInstance.addWindowMessageListener((action) => {
+            if (action.type === "focus" && action.focusOn === "firstElement") {
                 this.closeButton.focus();
             }
         });
@@ -22735,13 +22762,7 @@ function postVerificationSizeUpdates(options = { origin: "*", interval: 100 }) {
                 const heightWithComputedMargins = bodyHeight +
                     parseInt(window.getComputedStyle(document.body).marginTop, 10) +
                     parseInt(window.getComputedStyle(document.body).marginBottom, 10);
-                const verificationUrl = new URL(window.location.href);
-                const verificationIframeUid = verificationUrl.searchParams.get("verificationIframeUid");
-                window.parent.postMessage({
-                    verificationIframeUid,
-                    action: "updateHeight",
-                    height: heightWithComputedMargins,
-                }, options.origin);
+                postMessageFromIframe({ type: "updateHeight", height: heightWithComputedMargins });
             }
         }, options.interval);
         return () => clearInterval(interval);