@placetopay/lightbox-sdk 2.0.0 → 2.0.1

package/dist/config.d.ts

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

package/dist/constants.d.ts

@@ -10,22 +10,22 @@ export declare enum LightboxEvents {
     HIDE_CLOSE_BUTTON = "hideCloseButton"
 }
 export declare enum Styles {
-    BACKGROUND_COLOR = "--placetopay-lightbox-background-color",
+    BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",
     ROUNDED = "--placetopay-lightbox-border-radius",
     MAX_HEIGHT = "--placetopay-lightbox-max-height",
     MAX_WIDTH = "--placetopay-lightbox-max-width"
 }
 export declare const Dimensions: {
     SM: {
-        height: number;
-        width: number;
+        height: string;
+        width: string;
     };
     MD: {
-        height: number;
-        width: number;
+        height: string;
+        width: string;
     };
     LG: {
-        height: number;
-        width: number;
+        height: string;
+        width: string;
     };
 };

package/dist/constants.js

@@ -13,13 +13,13 @@ export var LightboxEvents;
 })(LightboxEvents || (LightboxEvents = {}));
 export var Styles;
 (function (Styles) {
-    Styles["BACKGROUND_COLOR"] = "--placetopay-lightbox-background-color";
+    Styles["BACKDROP_COLOR"] = "--placetopay-lightbox-backdrop-color";
     Styles["ROUNDED"] = "--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 },
+    SM: { height: '400', width: '320' },
+    MD: { height: '640', width: '512' },
+    LG: { height: '1000', width: '800' },
 };

package/dist/core/assemblers.js

@@ -1,17 +1,15 @@
 import { Config } from '../config';
-import { Styles, ElementIds, Dimensions, LightboxEvents } from '../constants';
+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 === LightboxEvents.CLOSE)
+        if (event.data.type === LE.CLOSE)
             unmountLightbox(listener, (_a = event.data.target) !== null && _a !== void 0 ? _a : event.origin);
-        if (event.data.type === LightboxEvents.UPDATE_STYLES) {
-            const receivedStyles = event.data.payload;
-            mountStyles(Object.assign(Object.assign(Object.assign({}, receivedStyles), styles), { background: Object.assign(Object.assign({}, receivedStyles === null || receivedStyles === void 0 ? void 0 : receivedStyles.background), styles.background) }));
-        }
-        if (event.data.type === LightboxEvents.HIDE_CLOSE_BUTTON) {
+        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);
@@ -34,34 +32,45 @@ export const mountLightbox = (url, styles, closeButtonEnabled) => {
         </svg>
         `;
         closeButton.addEventListener('click', () => {
-            globalThis.postMessage({ type: LightboxEvents.CLOSE, target: new URL(url).origin }, '*');
+            globalThis.postMessage({ type: LE.CLOSE, target: new URL(url).origin }, '*');
         });
         wrapper.appendChild(closeButton);
     }
 };
-const mountStyles = (styles) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const background = (_d = (_c = (_b = (_a = styles.background) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.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 || _c === void 0 ? void 0 : _c.map((x) => parseInt(x, 16))) !== null && _d !== void 0 ? _d : [107, 114, 128];
-    background.push((_f = (_e = styles.background) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : 0.75);
-    document.documentElement.style.setProperty(Styles.BACKGROUND_COLOR, `rgb(${background.join(', ')})`);
-    const rounded = (_g = styles.rounded) !== null && _g !== void 0 ? _g : 0;
-    document.documentElement.style.setProperty(Styles.ROUNDED, `${rounded.toString()}px`);
-    let height = (_h = styles.height) !== null && _h !== void 0 ? _h : Config.defaultDimension.height;
-    if (styles.dimension)
-        height = Dimensions[styles.dimension.toUpperCase()].height;
-    document.documentElement.style.setProperty(Styles.MAX_HEIGHT, `${height.toString()}px`);
-    let width = (_j = styles.width) !== null && _j !== void 0 ? _j : Config.defaultDimension.width;
-    if (styles.dimension)
-        width = Dimensions[styles.dimension.toUpperCase()].width;
-    document.documentElement.style.setProperty(Styles.MAX_WIDTH, `${width.toString()}px`);
-};
 const unmountLightbox = (listener, origin) => {
     const element = document.getElementById(origin);
     if (element) {
         element.remove();
         globalThis.removeEventListener('message', listener);
-        document.documentElement.style.removeProperty(Styles.BACKGROUND_COLOR);
+        document.documentElement.style.removeProperty(Styles.BACKDROP_COLOR);
     }
     else
         throw new Error(`Frame from "${origin}" not found`);
 };
+const mountStyles = (styles) => {
+    var _a;
+    console.log('mountStyles', styles);
+    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 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);
+    return `rgba(${backdrop.join(', ')})`;
+};
+const buildDimension = (type, value = '', dimension) => {
+    let result = value;
+    if (dimension)
+        result = Dimensions[dimension.toUpperCase()][type];
+    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`;
+};

package/dist/core/index.js

@@ -16,6 +16,7 @@ export const createLightbox = (url, options) => {
         callbacks: (_b = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _b !== void 0 ? _b : {},
         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,

package/dist/helpers.d.ts

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

package/dist/helpers.js

@@ -1,6 +1,9 @@
 export const postMessage = (type, payload, preventClose) => {
     return globalThis.parent.postMessage({ type, preventClose, payload }, '*');
 };
+export const setStyle = (name, value) => {
+    document.documentElement.style.setProperty(name, value);
+};
 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/styles.css

@@ -1,5 +1,5 @@
 .placetopay_lightbox_wrapper {
-    background: var(--placetopay-lightbox-background-color);
+    background: var(--placetopay-lightbox-backdrop-color);
     position: fixed;
     display: flex;
     justify-content: center;

package/dist/types.d.ts

@@ -3,14 +3,12 @@ export declare type ClientCallbacks = {
     [key: string]: ClientCallback | undefined;
 };
 export declare type LightboxStyles = {
-    background?: {
-        color?: string;
-        opacity?: number;
-    };
+    backdropColor?: string;
+    backdropOpacity?: number;
     dimension?: 'sm' | 'md' | 'lg';
-    height?: number;
+    height?: string;
+    width?: string;
     rounded?: number;
-    width?: number;
 };
 export declare type InitOptions = {
     allowRedirects?: boolean;
@@ -25,6 +23,7 @@ export declare type ApiStructure = {
     preventClose?: boolean;
 };
 export declare type LightboxInstance = Required<InitOptions> & {
+    url: string;
     on: (name: string, callback: ClientCallback) => void;
     open: () => void;
     close: (payload?: unknown) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",