@civic/auth 0.6.0 → 0.6.1-beta.2

package/dist/vanillajs/iframe/IframeManager.js

@@ -0,0 +1,614 @@
+import { CivicIframeResizer } from "./IframeResizer.js";
+import { createIframeShimmerLoader, createCloseButton, } from "../ui/LoadingComponents.js";
+import { createLogger } from "../utils/logger.js";
+/**
+ * IframeManager - Manages iframe visual presentation and DOM lifecycle
+ * Handles styling, positioning, UI components, and iframe element creation/cleanup
+ */
+export class IframeManager {
+    // Constants for styling and configuration
+    static MODAL_Z_INDEX = "1050";
+    static MODAL_WIDTH = "20rem"; // 320px
+    static MODAL_BACKDROP_COLOR = "rgba(17, 24, 39, 0.5)";
+    static MODAL_BACKDROP_BLUR = "blur(4px)";
+    static BORDER_RADIUS = "24px";
+    static TRANSITION_DURATION = "250ms";
+    static MODAL_MIN_HEIGHT = "26px";
+    static EMBEDDED_MIN_HEIGHT = "225px";
+    static IFRAME_READY_DELAY = 100; // ms
+    iframe = null;
+    container;
+    resizer = null;
+    displayMode;
+    keydownHandler;
+    clickHandler;
+    iframeId;
+    onClose;
+    shimmerLoader = null;
+    closeButton = null;
+    isIframeLoaded = false;
+    iframeReadyMessageListener;
+    logger;
+    // Store references to wrapper elements for styling control
+    contentWrapper = null;
+    iframeWrapper = null;
+    constructor(config) {
+        this.container = config.container;
+        this.displayMode = config.displayMode;
+        this.iframeId = config.iframeId || "civic-auth-iframe";
+        this.onClose = config.onClose;
+        this.logger = createLogger("iframe");
+        this.initializeContainer(config);
+        this.setupKeyboardHandlers();
+    }
+    initializeContainer(config) {
+        if (this.displayMode === "modal") {
+            this.applyModalStyles();
+            return;
+        }
+        // Embedded mode
+        this.container.style.position = "relative";
+        this.container.style.width = config.width || "auto";
+        this.container.style.height = config.height || "auto";
+        this.container.style.backgroundColor = "white";
+        this.container.style.borderRadius = IframeManager.BORDER_RADIUS;
+        this.container.style.overflow = "hidden";
+        this.container.style.transition = "all 0.5s ease-in-out";
+    }
+    /**
+     * Applies modal backdrop styles to create a full-screen overlay
+     * Uses !important to override any existing styles
+     */
+    applyModalStyles() {
+        const modalStyles = {
+            position: "fixed",
+            left: "0",
+            top: "0",
+            width: "100vw",
+            height: "100vh",
+            "z-index": IframeManager.MODAL_Z_INDEX,
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "background-color": IframeManager.MODAL_BACKDROP_COLOR,
+            "backdrop-filter": IframeManager.MODAL_BACKDROP_BLUR,
+            opacity: "1",
+            transition: `opacity ${IframeManager.TRANSITION_DURATION} ease`,
+            // Reset any conflicting styles that might prevent modal from working
+            margin: "0",
+            padding: "0",
+            border: "none",
+            "border-radius": "0",
+            "min-height": "100vh",
+        };
+        Object.entries(modalStyles).forEach(([property, value]) => {
+            this.container.style.setProperty(property, value, "important");
+        });
+    }
+    setupKeyboardHandlers() {
+        if (this.displayMode === "modal") {
+            this.keydownHandler = (event) => {
+                if (event.key === "Escape") {
+                    this.onClose?.();
+                }
+            };
+            window.addEventListener("keydown", this.keydownHandler);
+        }
+    }
+    createIframe(url) {
+        // Clean up any existing iframe content, but preserve container styles for modal mode
+        this.cleanupIframeOnly();
+        // Create new iframe
+        this.iframe = document.createElement("iframe");
+        this.iframe.id = this.iframeId;
+        this.iframe.src = url;
+        this.iframe.setAttribute("data-testid", "civic-auth-iframe-with-resizer");
+        // Apply iframe styles
+        this.applyIframeStyles();
+        // Add attributes that prevent scrollbars
+        this.setIframeAttributes();
+        // Add CSS to prevent scrollbars
+        this.addScrollbarHidingStyles();
+        // Set up message listener for iframe ready events (more reliable than onload)
+        this.setupIframeMessageListener();
+        // Set up iframe onload handler
+        this.setupIframeOnloadHandler();
+        if (this.displayMode === "modal") {
+            this.setupModalIframe();
+        }
+        else {
+            this.setupEmbeddedIframe();
+        }
+        // Initialize resizer - this will handle all the message-based resizing
+        this.resizer = new CivicIframeResizer(this.iframe, this.container);
+        return this.iframe;
+    }
+    /**
+     * Applies base styles to the iframe element
+     */
+    applyIframeStyles() {
+        if (!this.iframe)
+            return;
+        const baseStyles = {
+            border: "none",
+            display: "block",
+            pointerEvents: "auto",
+            width: "100%",
+            minWidth: "100%",
+            overflow: "hidden",
+            overflowX: "hidden",
+            overflowY: "hidden",
+            opacity: "0",
+            transition: `opacity ${IframeManager.TRANSITION_DURATION} ease, height ${IframeManager.TRANSITION_DURATION} ease`,
+        };
+        Object.entries(baseStyles).forEach(([property, value]) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Required to handle dynamic CSS property assignment since CSSStyleDeclaration type doesn't fully capture all possible properties
+            this.iframe.style[property] = value;
+        });
+        // Set initial height based on display mode
+        if (this.displayMode === "modal") {
+            this.iframe.style.height = IframeManager.MODAL_MIN_HEIGHT;
+            this.iframe.style.minHeight = IframeManager.MODAL_MIN_HEIGHT;
+        }
+        else {
+            this.iframe.style.height = "auto";
+            this.iframe.style.minHeight = IframeManager.EMBEDDED_MIN_HEIGHT; // Embedded mode minimum
+        }
+    }
+    /**
+     * Sets iframe attributes to prevent scrollbars
+     */
+    setIframeAttributes() {
+        if (!this.iframe)
+            return;
+        this.iframe.setAttribute("scrolling", "no");
+        this.iframe.setAttribute("frameborder", "0");
+        this.iframe.setAttribute("seamless", "seamless");
+        // Add additional CSS to prevent scrollbars
+        this.iframe.style.cssText +=
+            "; -ms-overflow-style: none; scrollbar-width: none;";
+    }
+    /**
+     * Adds CSS styles to hide scrollbars across different browsers
+     */
+    addScrollbarHidingStyles() {
+        const iframeStyle = document.createElement("style");
+        iframeStyle.textContent = `
+      iframe[id="${this.iframeId}"] {
+        -webkit-overflow-scrolling: touch !important;
+      }
+      iframe[id="${this.iframeId}"]::webkit-scrollbar {
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+      }
+    `;
+        document.head.appendChild(iframeStyle);
+    }
+    /**
+     * Sets up the message listener for iframe ready events
+     */
+    setupIframeMessageListener() {
+        this.iframeReadyMessageListener = (event) => {
+            try {
+                // Only handle messages from our iframe
+                if (!this.iframe?.contentWindow ||
+                    event.source !== this.iframe.contentWindow) {
+                    return;
+                }
+                const message = event.data;
+                // Handle ready message from iframe resizer
+                if (message.type === "civic-iframe-ready") {
+                    this.logger.debug("Iframe content is ready - hiding shimmer loader");
+                    this.markIframeAsLoaded();
+                }
+            }
+            catch (error) {
+                this.logger.debug("Error processing iframe ready message:", error);
+            }
+        };
+        window.addEventListener("message", this.iframeReadyMessageListener);
+    }
+    /**
+     * Sets up the iframe onload handler with CSS injection
+     */
+    setupIframeOnloadHandler() {
+        if (!this.iframe)
+            return;
+        this.iframe.onload = () => {
+            // Use a small delay to allow ready message to arrive first
+            setTimeout(() => {
+                if (!this.isIframeLoaded) {
+                    this.logger.debug("Iframe onload fired - hiding shimmer loader (fallback)");
+                    this.markIframeAsLoaded();
+                }
+            }, IframeManager.IFRAME_READY_DELAY);
+            try {
+                const iframeDoc = this.iframe?.contentDocument || this.iframe?.contentWindow?.document;
+                if (iframeDoc && iframeDoc.head) {
+                    const style = iframeDoc.createElement("style");
+                    style.textContent = `
+            html, body {
+              overflow: hidden !important;
+              overflow-x: hidden !important;
+              overflow-y: hidden !important;
+              -ms-overflow-style: none !important;
+              scrollbar-width: none !important;
+              margin: 0 !important;
+              padding: 0 !important;
+            }
+            body::-webkit-scrollbar {
+              display: none !important;
+            }
+            * {
+              box-sizing: border-box !important;
+            }
+          `;
+                    iframeDoc.head.appendChild(style);
+                }
+            }
+            catch (error) {
+                this.logger.debug("Could not inject CSS into iframe (likely cross-origin):", error);
+            }
+        };
+    }
+    /**
+     * Sets up the iframe for modal display mode
+     */
+    setupModalIframe() {
+        if (!this.iframe)
+            return;
+        // Ensure modal is visible (in case it was hidden by cleanup)
+        this.container.style.setProperty("display", "flex", "important");
+        // Create content wrapper for modal
+        this.contentWrapper = document.createElement("div");
+        this.contentWrapper.style.position = "relative";
+        this.contentWrapper.style.overflow = "hidden";
+        this.contentWrapper.style.width = IframeManager.MODAL_WIDTH; // 320px like React version
+        // Apply initial visual styling
+        this.applyModalVisualStyling();
+        // Stop propagation on content wrapper to prevent backdrop clicks
+        this.contentWrapper.addEventListener("click", (e) => {
+            e.stopPropagation();
+        });
+        // Create inner iframe wrapper to match React structure
+        this.iframeWrapper = document.createElement("div");
+        this.iframeWrapper.style.position = "relative";
+        this.iframeWrapper.style.overflow = "hidden";
+        this.iframeWrapper.style.overflowX = "hidden";
+        this.iframeWrapper.style.overflowY = "hidden";
+        this.iframeWrapper.style.transition = `all ${IframeManager.TRANSITION_DURATION} ease`;
+        this.iframeWrapper.style.width = "100%";
+        this.iframeWrapper.style.height = "auto";
+        this.iframeWrapper.style.minHeight = IframeManager.MODAL_MIN_HEIGHT; // Start small for modal mode
+        // Apply initial wrapper styling
+        this.applyIframeWrapperStyling();
+        // Add shimmer loader for modal mode
+        this.showShimmerLoader(this.iframeWrapper, "white");
+        // Add close button for modal mode (initially hidden)
+        if (this.onClose) {
+            this.closeButton = createCloseButton(this.onClose);
+            this.contentWrapper.appendChild(this.closeButton);
+        }
+        // Add iframe to wrapper, then wrapper to content, then content to container
+        this.iframeWrapper.appendChild(this.iframe);
+        this.contentWrapper.appendChild(this.iframeWrapper);
+        this.container.appendChild(this.contentWrapper);
+        // Add click-to-close functionality after content is added
+        this.clickHandler = (e) => {
+            if (e.target === this.container) {
+                // Only close if clicking the backdrop, not the iframe content
+                this.onClose?.();
+            }
+        };
+        this.container.addEventListener("click", this.clickHandler);
+    }
+    /**
+     * Sets up the iframe for embedded display mode
+     */
+    setupEmbeddedIframe() {
+        if (!this.iframe)
+            return;
+        // Embedded mode - create wrapper with border radius and overflow hidden
+        this.iframeWrapper = document.createElement("div");
+        this.iframeWrapper.style.position = "relative";
+        this.iframeWrapper.style.overflow = "hidden";
+        this.iframeWrapper.style.overflowX = "hidden";
+        this.iframeWrapper.style.overflowY = "hidden";
+        this.iframeWrapper.style.transition = "all 0.5s ease-in-out";
+        this.iframeWrapper.style.width = "100%";
+        this.iframeWrapper.style.height = "auto";
+        this.iframeWrapper.style.minHeight = IframeManager.EMBEDDED_MIN_HEIGHT; // Embedded mode minimum
+        // Apply initial wrapper styling
+        this.applyIframeWrapperStyling();
+        // Add shimmer loader for embedded mode with max width
+        this.showShimmerLoader(this.iframeWrapper, "white", IframeManager.MODAL_WIDTH);
+        // Add iframe to wrapper, then wrapper to container
+        this.iframeWrapper.appendChild(this.iframe);
+        this.container.appendChild(this.iframeWrapper);
+    }
+    showShimmerLoader(parentElement, backgroundColor = "white", maxWidth) {
+        if (!this.isIframeLoaded && !this.shimmerLoader) {
+            this.shimmerLoader = createIframeShimmerLoader(backgroundColor, maxWidth);
+            parentElement.appendChild(this.shimmerLoader);
+        }
+    }
+    hideShimmerLoader() {
+        if (this.shimmerLoader && this.shimmerLoader.parentNode) {
+            // Add fade-out transition before removing
+            this.shimmerLoader.style.opacity = "0";
+            this.shimmerLoader.style.transition = `opacity ${IframeManager.TRANSITION_DURATION} ease`;
+            // Remove after transition completes
+            setTimeout(() => {
+                if (this.shimmerLoader && this.shimmerLoader.parentNode) {
+                    this.shimmerLoader.parentNode.removeChild(this.shimmerLoader);
+                    this.shimmerLoader = null;
+                }
+            }, parseInt(IframeManager.TRANSITION_DURATION));
+        }
+    }
+    markIframeAsLoaded() {
+        if (!this.isIframeLoaded) {
+            this.isIframeLoaded = true;
+            this.hideShimmerLoader();
+            this.updateWrapperForLoadedContent();
+        }
+    }
+    updateWrapperForLoadedContent() {
+        // Fade in the iframe
+        if (this.iframe) {
+            this.iframe.style.opacity = "1";
+        }
+        // Show close button for modal mode when content is loaded
+        if (this.displayMode === "modal" && this.closeButton) {
+            this.closeButton.style.opacity = "1";
+        }
+        // Find the iframe wrapper and update its styles for loaded content
+        const iframeWrapper = this.iframe?.parentElement;
+        if (iframeWrapper) {
+            // Remove minimum height constraints to allow natural sizing
+            if (this.displayMode === "modal") {
+                iframeWrapper.style.minHeight = "auto";
+            }
+            else {
+                // For embedded mode, keep some minimum but allow natural growth
+                iframeWrapper.style.minHeight = "auto";
+            }
+            // Add border radius transition for loaded state (matching React implementation)
+            iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;
+        }
+    }
+    hide() {
+        if (this.displayMode === "modal") {
+            // Add fade-out transition for modal backdrop
+            this.container.style.opacity = "0";
+            this.container.style.transition = `opacity ${IframeManager.TRANSITION_DURATION} ease`;
+            // Hide after transition completes
+            setTimeout(() => {
+                this.container.style.display = "none";
+            }, parseInt(IframeManager.TRANSITION_DURATION));
+        }
+        else {
+            // For embedded mode, just hide immediately
+            this.container.style.display = "none";
+        }
+    }
+    cleanupIframeOnly() {
+        if (this.resizer) {
+            this.resizer.cleanup();
+            this.resizer = null;
+        }
+        // Clean up shimmer loader
+        this.hideShimmerLoader();
+        // Clean up close button
+        if (this.closeButton && this.closeButton.parentNode) {
+            this.closeButton.parentNode.removeChild(this.closeButton);
+            this.closeButton = null;
+        }
+        // Clean up message listener
+        if (this.iframeReadyMessageListener) {
+            window.removeEventListener("message", this.iframeReadyMessageListener);
+            this.iframeReadyMessageListener = undefined;
+        }
+        if (this.iframe && this.iframe.parentNode) {
+            this.iframe.parentNode.removeChild(this.iframe);
+            this.iframe = null;
+        }
+        // Reset loading state
+        this.isIframeLoaded = false;
+        // Clear wrapper references
+        this.contentWrapper = null;
+        this.iframeWrapper = null;
+        // Clear container content but DON'T reset styles for modal mode
+        this.container.innerHTML = "";
+    }
+    cleanup() {
+        if (this.resizer) {
+            this.resizer.cleanup();
+            this.resizer = null;
+        }
+        // Clean up shimmer loader
+        this.hideShimmerLoader();
+        // Clean up close button
+        if (this.closeButton && this.closeButton.parentNode) {
+            this.closeButton.parentNode.removeChild(this.closeButton);
+            this.closeButton = null;
+        }
+        // Clean up message listener
+        if (this.iframeReadyMessageListener) {
+            window.removeEventListener("message", this.iframeReadyMessageListener);
+            this.iframeReadyMessageListener = undefined;
+        }
+        if (this.iframe && this.iframe.parentNode) {
+            this.iframe.parentNode.removeChild(this.iframe);
+            this.iframe = null;
+        }
+        // Reset loading state
+        this.isIframeLoaded = false;
+        // Remove keyboard event listener
+        if (this.keydownHandler) {
+            window.removeEventListener("keydown", this.keydownHandler);
+            this.keydownHandler = undefined;
+        }
+        // Remove click event listener
+        if (this.clickHandler) {
+            this.container.removeEventListener("click", this.clickHandler);
+            this.clickHandler = undefined;
+        }
+        // Clear wrapper references
+        this.contentWrapper = null;
+        this.iframeWrapper = null;
+        // Clear container content and reset styles
+        this.container.innerHTML = "";
+        if (this.displayMode === "modal") {
+            // Reset all modal-specific styles to ensure clean state
+            this.resetModalStyles();
+        }
+    }
+    /**
+     * Resets all modal-specific styles by removing CSS properties that were set with !important
+     */
+    resetModalStyles() {
+        const modalStyleProperties = [
+            "position",
+            "left",
+            "top",
+            "width",
+            "height",
+            "z-index",
+            "display",
+            "align-items",
+            "justify-content",
+            "background-color",
+            "backdrop-filter",
+            "opacity",
+            "transition",
+            "margin",
+            "padding",
+            "border",
+            "border-radius",
+            "min-height",
+        ];
+        modalStyleProperties.forEach((property) => {
+            this.container.style.removeProperty(property);
+        });
+    }
+    resize() {
+        if (this.resizer) {
+            this.resizer.resize();
+        }
+    }
+    /**
+     * Force show the shimmer loader and hide iframe content
+     * Used when we want to mask non-login content
+     */
+    forceShowLoader() {
+        // Reset loading state to show shimmer
+        this.isIframeLoaded = false;
+        // Hide iframe content
+        if (this.iframe) {
+            this.iframe.style.opacity = "0";
+        }
+        // Hide close button
+        if (this.displayMode === "modal" && this.closeButton) {
+            this.closeButton.style.opacity = "0";
+        }
+        // Hide visual decorations (borders, shadows) when masking content
+        if (this.displayMode === "modal") {
+            this.removeModalVisualStyling();
+        }
+        this.removeIframeWrapperStyling();
+        // Show shimmer loader
+        if (this.iframeWrapper && !this.shimmerLoader) {
+            this.showShimmerLoader(this.iframeWrapper, "white", this.displayMode === "embedded" ? IframeManager.MODAL_WIDTH : undefined);
+        }
+    }
+    /**
+     * Force hide the shimmer loader and show iframe content
+     * Used when we want to show the login app
+     */
+    forceHideLoader() {
+        // Restore visual decorations when showing content
+        if (this.displayMode === "modal") {
+            this.applyModalVisualStyling();
+        }
+        this.applyIframeWrapperStyling();
+        this.markIframeAsLoaded();
+    }
+    /**
+     * Applies visual styling (borders, shadows) to modal content wrapper
+     */
+    applyModalVisualStyling() {
+        if (!this.contentWrapper)
+            return;
+        this.contentWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;
+        this.contentWrapper.style.boxShadow =
+            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    }
+    /**
+     * Removes visual styling (borders, shadows) from modal content wrapper
+     */
+    removeModalVisualStyling() {
+        if (!this.contentWrapper)
+            return;
+        this.contentWrapper.style.borderRadius = "0";
+        this.contentWrapper.style.boxShadow = "none";
+    }
+    /**
+     * Applies visual styling (borders) to iframe wrapper
+     */
+    applyIframeWrapperStyling() {
+        if (!this.iframeWrapper)
+            return;
+        this.iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;
+    }
+    /**
+     * Removes visual styling (borders) from iframe wrapper
+     */
+    removeIframeWrapperStyling() {
+        if (!this.iframeWrapper)
+            return;
+        this.iframeWrapper.style.borderRadius = "0";
+    }
+    showSubtlePopupFallbackIndicator() {
+        if (!this.iframeWrapper && !this.contentWrapper) {
+            this.logger.warn("Cannot show popup fallback indicator, no iframe wrapper or content wrapper found.");
+            return;
+        }
+        const targetElement = this.iframeWrapper || this.contentWrapper;
+        if (targetElement) {
+            this.logger.debug("Showing popup fallback overlay.");
+            // Create overlay element
+            const overlay = document.createElement("div");
+            overlay.id = "civic-popup-fallback-overlay";
+            overlay.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+        border-radius: ${IframeManager.BORDER_RADIUS};
+        backdrop-filter: blur(.4px);
+        opacity: 1;
+      `;
+            // Add overlay to target element
+            targetElement.style.position = "relative";
+            targetElement.appendChild(overlay);
+            // Remove overlay quickly
+            setTimeout(() => {
+                if (overlay.parentNode) {
+                    overlay.parentNode.removeChild(overlay);
+                }
+                this.logger.debug("Popup fallback overlay removed.");
+            }, 500); // Remove after 500ms
+            this.logger.debug("Popup fallback overlay displayed.");
+        }
+    }
+}
+//# sourceMappingURL=IframeManager.js.map