@placetopay/lightbox-sdk 2.0.3 → 2.1.0

package/dist/constants.d.ts

@@ -11,21 +11,7 @@ export declare enum LightboxEvents {
 }
 export declare enum Styles {
     BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",
-    ROUNDED = "--placetopay-lightbox-border-radius",
+    RADIUS = "--placetopay-lightbox-border-radius",
     MAX_HEIGHT = "--placetopay-lightbox-max-height",
     MAX_WIDTH = "--placetopay-lightbox-max-width"
 }
-export declare const Dimensions: {
-    SM: {
-        height: string;
-        width: string;
-    };
-    MD: {
-        height: string;
-        width: string;
-    };
-    LG: {
-        height: string;
-        width: string;
-    };
-};

package/dist/constants.js

@@ -14,12 +14,7 @@ export var LightboxEvents;
 export var Styles;
 (function (Styles) {
     Styles["BACKDROP_COLOR"] = "--placetopay-lightbox-backdrop-color";
-    Styles["ROUNDED"] = "--placetopay-lightbox-border-radius";
+    Styles["RADIUS"] = "--placetopay-lightbox-border-radius";
     Styles["MAX_HEIGHT"] = "--placetopay-lightbox-max-height";
     Styles["MAX_WIDTH"] = "--placetopay-lightbox-max-width";
 })(Styles || (Styles = {}));
-export const Dimensions = {
-    SM: { height: '400', width: '320' },
-    MD: { height: '640', width: '512' },
-    LG: { height: '1000', width: '800' },
-};

package/dist/core/assemblers.d.ts

@@ -1,3 +1,3 @@
-import { ClientCallbacks, LightboxStyles } from '../types';
-export declare const mountListener: (callbacks: ClientCallbacks, styles: LightboxStyles) => void;
-export declare const mountLightbox: (url: string, styles: LightboxStyles, closeButtonEnabled: boolean) => void;
+import { MountLightboxOptions } from '../types';
+export declare const mountLightbox: ({ url, callbacks, styles, closeButtonEnabled, enforceStyles }: MountLightboxOptions) => void;
+export declare const unmountLightbox: (target: string) => void;

package/dist/core/assemblers.js

@@ -1,75 +1,78 @@
-import { Config } from '../config';
-import { Styles, ElementIds, Dimensions, LightboxEvents as LE } from '../constants';
-import { setStyle } from '../helpers';
-export const mountListener = (callbacks, styles) => {
-    const listener = (event) => {
-        var _a, _b, _c;
-        if (event.data.type === LE.CLOSE)
-            unmountLightbox(listener, (_a = event.data.target) !== null && _a !== void 0 ? _a : event.origin);
-        if (event.data.type === LE.UPDATE_STYLES)
-            mountStyles(Object.assign(Object.assign({}, event.data.payload), styles));
-        if (event.data.type === LE.HIDE_CLOSE_BUTTON)
-            (_b = document.getElementById(ElementIds.CLOSE_BUTTON_ID)) === null || _b === void 0 ? void 0 : _b.remove();
-        (_c = callbacks[event.data.type]) === null || _c === void 0 ? void 0 : _c.call(callbacks, event.data.payload);
-    };
-    globalThis.addEventListener('message', listener);
-};
-export const mountLightbox = (url, styles, closeButtonEnabled) => {
+import { Styles, ElementIds, LightboxEvents as LE } from '../constants';
+import { setStyle, unsetStyle } from '../helpers';
+let listener;
+export const mountLightbox = ({ url, callbacks, styles, closeButtonEnabled, enforceStyles }) => {
     const wrapper = document.createElement('div');
     wrapper.id = new URL(url).origin;
     wrapper.className = ElementIds.WRAPPER_ID;
     const iframe = document.createElement('iframe');
     iframe.src = url;
     iframe.id = ElementIds.IFRAME_ID;
-    mountStyles(styles);
+    updateStyles(styles);
     document.body.appendChild(wrapper);
     wrapper.appendChild(iframe);
+    let closeButton;
     if (closeButtonEnabled) {
-        const closeButton = document.createElement('button');
+        closeButton = document.createElement('button');
         closeButton.id = ElementIds.CLOSE_BUTTON_ID;
-        closeButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#4b5563" height="24px" width="24px">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-        `;
+        closeButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#4b5563" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>`;
         closeButton.addEventListener('click', () => {
-            globalThis.postMessage({ type: LE.CLOSE, target: new URL(url).origin }, '*');
+            unmountLightbox(new URL(url).origin);
         });
         wrapper.appendChild(closeButton);
     }
+    mountListener({ callbacks, styles, closeButton, enforceStyles });
+};
+const mountListener = ({ callbacks, styles, closeButton, enforceStyles }) => {
+    listener = (event) => {
+        var _a;
+        if (event.data.type === LE.CLOSE)
+            unmountLightbox(event.origin);
+        if (event.data.type === LE.UPDATE_STYLES) {
+            const newStyles = enforceStyles
+                ? Object.assign(Object.assign({}, event.data.payload), styles) : Object.assign(Object.assign({}, styles), event.data.payload);
+            updateStyles(newStyles);
+        }
+        if (event.data.type === LE.HIDE_CLOSE_BUTTON)
+            closeButton === null || closeButton === void 0 ? void 0 : closeButton.remove();
+        (_a = callbacks[event.data.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.payload);
+    };
+    globalThis.addEventListener('message', listener);
 };
-const unmountLightbox = (listener, origin) => {
-    const element = document.getElementById(origin);
+export const unmountLightbox = (target) => {
+    const element = document.getElementById(target);
     if (element) {
         element.remove();
+        clearStyles();
         globalThis.removeEventListener('message', listener);
-        document.documentElement.style.removeProperty(Styles.BACKDROP_COLOR);
     }
     else
-        throw new Error(`Frame from "${origin}" not found`);
+        throw new Error(`Frame from "${target}" not found`);
 };
-const mountStyles = (styles) => {
-    var _a;
-    setStyle(Styles.BACKDROP_COLOR, buildBackdrop(styles.backdropColor, styles.backdropOpacity));
-    setStyle(Styles.ROUNDED, `${(_a = styles.rounded) !== null && _a !== void 0 ? _a : 0}px`);
-    setStyle(Styles.MAX_HEIGHT, buildDimension('height', styles.height, styles.dimension));
-    setStyle(Styles.MAX_WIDTH, buildDimension('width', styles.width, styles.dimension));
+const clearStyles = () => {
+    unsetStyle(Styles.BACKDROP_COLOR);
+    unsetStyle(Styles.RADIUS);
+    unsetStyle(Styles.MAX_HEIGHT);
+    unsetStyle(Styles.MAX_WIDTH);
+};
+const updateStyles = (styles) => {
+    var _a, _b, _c, _d, _e;
+    setStyle(Styles.BACKDROP_COLOR, buildBackdrop((_a = styles.backdropColor) !== null && _a !== void 0 ? _a : '#000000', (_b = styles.backdropOpacity) !== null && _b !== void 0 ? _b : 0.7));
+    setStyle(Styles.RADIUS, `${(_c = styles.radius) !== null && _c !== void 0 ? _c : 0}px`);
+    setStyle(Styles.MAX_HEIGHT, buildDimension('height', (_d = styles.height) !== null && _d !== void 0 ? _d : 640));
+    setStyle(Styles.MAX_WIDTH, buildDimension('width', (_e = styles.width) !== null && _e !== void 0 ? _e : 512));
 };
 const buildBackdrop = (color, opacity) => {
-    var _a, _b;
-    const backdrop = (_b = (_a = color === null || color === void 0 ? void 0 : color.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b).substring(1).match(/.{2}/g)) === null || _a === void 0 ? void 0 : _a.map((x) => parseInt(x, 16))) !== null && _b !== void 0 ? _b : [107, 114, 128];
-    backdrop.push(opacity !== null && opacity !== void 0 ? opacity : 0.75);
+    var _a;
+    const backdrop = (_a = color === null || color === void 0 ? void 0 : color.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b).substring(1).match(/.{2}/g)) === null || _a === void 0 ? void 0 : _a.map((x) => parseInt(x, 16));
+    backdrop.push(opacity);
     return `rgba(${backdrop.join(', ')})`;
 };
-const buildDimension = (type, value = '', dimension) => {
-    let result = value.toString();
-    if (dimension)
-        result = Dimensions[dimension.toUpperCase()][type];
+const buildDimension = (type, value) => {
+    const result = String(value);
     if (result.match(/^\d+%$/) || result.match(/^\d+px$/))
         return result;
     if (result.match(/^\d+$/))
         return `${result}px`;
-    if (value) {
-        console.warn(`Invalid ${type}. Must be a number, a number followed by "px", or a number followed by "%".`);
-    }
-    return `${Config.defaultDimension[type]}px`;
+    console.warn(`Invalid ${type}. Must be a number, a number followed by "px", or a number followed by "%".`);
 };

package/dist/core/index.d.ts

@@ -1,11 +1,7 @@
-import { InitOptions, LightboxInstance, ApiStructure, LightboxStyles } from '../types';
+import { InitialOptions, LightboxInstance, ApiStructure, LightboxStyles } from '../types';
 export declare const isInside: () => boolean;
-export declare const emitClose: (payload?: unknown) => void;
-export declare const emitUpdateStyles: (styles: LightboxStyles) => void;
-export declare const emitHideCloseButton: () => void;
-export declare const emit: ({ type, payload, preventClose }: ApiStructure) => {
-    close: (payload?: unknown) => void;
-};
-export declare const createLightbox: (url: string, options?: InitOptions & {
-    launch?: boolean;
-}) => LightboxInstance;
+export declare const updateStyles: (styles: LightboxStyles) => void;
+export declare const hideCloseButton: () => void;
+export declare const emitClose: (payload?: unknown, preventClose?: boolean) => void;
+export declare const emit: ({ type, payload, preventClose }: ApiStructure) => void;
+export declare const createLightbox: (url: string, options?: InitialOptions) => LightboxInstance;

package/dist/core/index.js

@@ -1,14 +1,13 @@
-import { LightboxEvents } from '../constants';
+import { LightboxEvents as LE } from '../constants';
 import { postMessage, redirectBasedOnDriver } from '../helpers';
-import { mountLightbox, mountListener } from './assemblers';
+import { mountLightbox, unmountLightbox } from './assemblers';
 export const isInside = () => globalThis.location !== globalThis.parent.location;
-export const emitClose = (payload) => postMessage(LightboxEvents.CLOSE, payload);
-export const emitUpdateStyles = (styles) => postMessage(LightboxEvents.UPDATE_STYLES, styles);
-export const emitHideCloseButton = () => postMessage(LightboxEvents.HIDE_CLOSE_BUTTON);
-export const emit = ({ type, payload, preventClose }) => {
-    postMessage(type, payload, preventClose);
-    return { close: emitClose };
+export const updateStyles = (styles) => postMessage(LE.UPDATE_STYLES, styles);
+export const hideCloseButton = () => postMessage(LE.HIDE_CLOSE_BUTTON);
+export const emitClose = (payload, preventClose) => {
+    postMessage(LE.CLOSE, payload, preventClose);
 };
+export const emit = ({ type, payload, preventClose }) => postMessage(type, payload, preventClose);
 export const createLightbox = (url, options) => {
     var _a, _b, _c, _d;
     const lightbox = {
@@ -17,17 +16,23 @@ export const createLightbox = (url, options) => {
         closeButton: (_c = options === null || options === void 0 ? void 0 : options.closeButton) !== null && _c !== void 0 ? _c : true,
         styles: (_d = options === null || options === void 0 ? void 0 : options.styles) !== null && _d !== void 0 ? _d : {},
         url: url,
-        close: emitClose,
-        updateStyles: emitUpdateStyles,
-        hideCloseButton: emitHideCloseButton,
+        close: () => unmountLightbox(url),
+        updateStyles,
+        hideCloseButton,
         on: (name, callback) => {
             lightbox.callbacks[name] = callback;
         },
         open: () => {
+            var _a;
             if (lightbox.allowRedirects)
                 redirectBasedOnDriver(url);
-            mountListener(lightbox.callbacks, lightbox.styles);
-            mountLightbox(url, lightbox.styles, lightbox.closeButton);
+            mountLightbox({
+                url,
+                callbacks: lightbox.callbacks,
+                styles: lightbox.styles,
+                closeButtonEnabled: lightbox.closeButton,
+                enforceStyles: (_a = options === null || options === void 0 ? void 0 : options.enforceStyles) !== null && _a !== void 0 ? _a : false,
+            });
         },
     };
     if (options === null || options === void 0 ? void 0 : options.launch)

package/dist/helpers.d.ts

@@ -1,3 +1,4 @@
 export declare const postMessage: (type: string, payload?: unknown, preventClose?: boolean) => void;
 export declare const setStyle: (name: string, value: string) => void;
+export declare const unsetStyle: (name: string) => void;
 export declare const redirectBasedOnDriver: (url: string) => void;

package/dist/helpers.js

@@ -4,6 +4,9 @@ export const postMessage = (type, payload, preventClose) => {
 export const setStyle = (name, value) => {
     document.documentElement.style.setProperty(name, value);
 };
+export const unsetStyle = (name) => {
+    document.documentElement.style.removeProperty(name);
+};
 export const redirectBasedOnDriver = (url) => {
     if (navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
         /^((?!chrome|android).)*safari/i.test(navigator.userAgent) // regex from https://stackoverflow.com/a/23522755

package/dist/types.d.ts

@@ -1,28 +1,42 @@
-export declare type ClientCallback = (payload?: unknown) => void;
-export declare type ClientCallbacks = {
-    [key: string]: ClientCallback | undefined;
-};
-export declare type LightboxStyles = {
-    backdropColor?: string;
-    backdropOpacity?: number;
-    dimension?: 'sm' | 'md' | 'lg';
-    height?: string | number;
-    width?: string | number;
-    rounded?: number;
-};
-export declare type InitOptions = {
-    allowRedirects?: boolean;
-    callbacks?: ClientCallbacks;
-    closeButton?: boolean;
-    styles?: LightboxStyles;
-};
-export declare type ApiStructure = {
+export type ClientCallback = (payload?: unknown) => void;
+export type ClientCallbacks = Record<string, ClientCallback | undefined>;
+export type LightboxStyles = Partial<{
+    backdropColor: string;
+    backdropOpacity: number;
+    height: string | number;
+    width: string | number;
+    radius: number;
+}>;
+export type ApiStructure = {
     type: string;
-    target?: string;
     payload?: unknown;
     preventClose?: boolean;
 };
-export declare type LightboxInstance = Required<InitOptions> & {
+export type InternalOptions = Partial<{
+    launch: boolean;
+    enforceStyles: boolean;
+}>;
+export type ExposedOptions = Partial<{
+    allowRedirects: boolean;
+    callbacks: ClientCallbacks;
+    closeButton: boolean;
+    styles: LightboxStyles;
+}>;
+export type InitialOptions = ExposedOptions & InternalOptions;
+export type MountLightboxOptions = {
+    url: string;
+    callbacks: ClientCallbacks;
+    styles: LightboxStyles;
+    closeButtonEnabled: boolean;
+    enforceStyles: boolean;
+};
+export type MountListenerOptions = {
+    callbacks: ClientCallbacks;
+    styles: LightboxStyles;
+    closeButton: HTMLButtonElement;
+    enforceStyles: boolean;
+};
+export type LightboxInstance = Required<ExposedOptions> & {
     url: string;
     on: (name: string, callback: ClientCallback) => void;
     open: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,6 +25,6 @@
   },
   "homepage": "https://placetopay-org.github.io/lightbox-sdk",
   "devDependencies": {
-    "typescript": "^4.8.3"
+    "typescript": "^5.1.6"
   }
 }

package/dist/config.d.ts

@@ -1,6 +0,0 @@
-export declare const Config: {
-    defaultDimension: {
-        height: string;
-        width: string;
-    };
-};

package/dist/config.js

@@ -1,4 +0,0 @@
-import { Dimensions } from './constants';
-export const Config = {
-    defaultDimension: Dimensions.MD,
-};