@placetopay/lightbox-sdk 2.1.0 → 2.1.2

package/dist/constants.d.ts

@@ -13,5 +13,8 @@ export declare enum Styles {
     BACKDROP_COLOR = "--placetopay-lightbox-backdrop-color",
     RADIUS = "--placetopay-lightbox-border-radius",
     MAX_HEIGHT = "--placetopay-lightbox-max-height",
-    MAX_WIDTH = "--placetopay-lightbox-max-width"
+    MAX_WIDTH = "--placetopay-lightbox-max-width",
+    POSITION = "--placetopay-lightbox-position",
+    WRAPPER_WIDTH = "--placetopay-lightbox-wrapper-width",
+    WRAPPER_HEIGHT = "--placetopay-lightbox-wrapper-height"
 }

package/dist/constants.js

@@ -17,4 +17,7 @@ export var Styles;
     Styles["RADIUS"] = "--placetopay-lightbox-border-radius";
     Styles["MAX_HEIGHT"] = "--placetopay-lightbox-max-height";
     Styles["MAX_WIDTH"] = "--placetopay-lightbox-max-width";
+    Styles["POSITION"] = "--placetopay-lightbox-position";
+    Styles["WRAPPER_WIDTH"] = "--placetopay-lightbox-wrapper-width";
+    Styles["WRAPPER_HEIGHT"] = "--placetopay-lightbox-wrapper-height";
 })(Styles || (Styles = {}));

package/dist/core/assemblers.d.ts

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

package/dist/core/assemblers.js

@@ -1,15 +1,21 @@
 import { Styles, ElementIds, LightboxEvents as LE } from '../constants';
 import { setStyle, unsetStyle } from '../helpers';
 let listener;
-export const mountLightbox = ({ url, callbacks, styles, closeButtonEnabled, enforceStyles }) => {
+export const mountLightbox = ({ id, url, element, callbacks, styles, closeButtonEnabled, enforceStyles, }) => {
     const wrapper = document.createElement('div');
-    wrapper.id = new URL(url).origin;
+    wrapper.id = id;
     wrapper.className = ElementIds.WRAPPER_ID;
+    if (element !== document.body) {
+        wrapper.style.setProperty(Styles.POSITION, 'absolute');
+        wrapper.style.setProperty(Styles.WRAPPER_HEIGHT, '100%');
+        wrapper.style.setProperty(Styles.WRAPPER_WIDTH, '100%');
+    }
     const iframe = document.createElement('iframe');
     iframe.src = url;
     iframe.id = ElementIds.IFRAME_ID;
     updateStyles(styles);
-    document.body.appendChild(wrapper);
+    console.log({ isBody: element === document.body });
+    element.appendChild(wrapper);
     wrapper.appendChild(iframe);
     let closeButton;
     if (closeButtonEnabled) {
@@ -17,17 +23,17 @@ export const mountLightbox = ({ url, callbacks, styles, closeButtonEnabled, enfo
         closeButton.id = ElementIds.CLOSE_BUTTON_ID;
         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', () => {
-            unmountLightbox(new URL(url).origin);
+            unmountLightbox(id);
         });
         wrapper.appendChild(closeButton);
     }
-    mountListener({ callbacks, styles, closeButton, enforceStyles });
+    mountListener({ id, callbacks, styles, closeButton, enforceStyles });
 };
-const mountListener = ({ callbacks, styles, closeButton, enforceStyles }) => {
+const mountListener = ({ id, callbacks, styles, closeButton, enforceStyles }) => {
     listener = (event) => {
         var _a;
         if (event.data.type === LE.CLOSE)
-            unmountLightbox(event.origin);
+            unmountLightbox(id);
         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);
@@ -56,11 +62,14 @@ const clearStyles = () => {
     unsetStyle(Styles.MAX_WIDTH);
 };
 const updateStyles = (styles) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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));
+    setStyle(Styles.POSITION, (_f = styles.position) !== null && _f !== void 0 ? _f : 'fixed');
+    setStyle(Styles.WRAPPER_WIDTH, buildDimension('width', (_g = styles.wrapperWidth) !== null && _g !== void 0 ? _g : '100vw'));
+    setStyle(Styles.WRAPPER_HEIGHT, buildDimension('height', (_h = styles.wrapperHeight) !== null && _h !== void 0 ? _h : '100vh'));
 };
 const buildBackdrop = (color, opacity) => {
     var _a;
@@ -70,7 +79,7 @@ const buildBackdrop = (color, opacity) => {
 };
 const buildDimension = (type, value) => {
     const result = String(value);
-    if (result.match(/^\d+%$/) || result.match(/^\d+px$/))
+    if (result.match(/^\d+(vh|vw|px|%)$/))
         return result;
     if (result.match(/^\d+$/))
         return `${result}px`;

package/dist/core/index.js

@@ -9,12 +9,14 @@ export const emitClose = (payload, preventClose) => {
 };
 export const emit = ({ type, payload, preventClose }) => postMessage(type, payload, preventClose);
 export const createLightbox = (url, options) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const lightbox = {
-        allowRedirects: (_a = options === null || options === void 0 ? void 0 : options.allowRedirects) !== null && _a !== void 0 ? _a : true,
-        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 : {},
+        id: (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : new URL(url).origin,
+        element: (_b = options === null || options === void 0 ? void 0 : options.element) !== null && _b !== void 0 ? _b : document.body,
+        allowRedirects: (_c = options === null || options === void 0 ? void 0 : options.allowRedirects) !== null && _c !== void 0 ? _c : true,
+        callbacks: (_d = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _d !== void 0 ? _d : {},
+        closeButton: (_e = options === null || options === void 0 ? void 0 : options.closeButton) !== null && _e !== void 0 ? _e : true,
+        styles: (_f = options === null || options === void 0 ? void 0 : options.styles) !== null && _f !== void 0 ? _f : {},
         url: url,
         close: () => unmountLightbox(url),
         updateStyles,
@@ -27,7 +29,9 @@ export const createLightbox = (url, options) => {
             if (lightbox.allowRedirects)
                 redirectBasedOnDriver(url);
             mountLightbox({
+                id: lightbox.id,
                 url,
+                element: lightbox.element,
                 callbacks: lightbox.callbacks,
                 styles: lightbox.styles,
                 closeButtonEnabled: lightbox.closeButton,

package/dist/helpers.js

@@ -11,6 +11,9 @@ 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
     ) {
+        if (window.self !== window.top) {
+            window.parent.postMessage({ type: "placetopay-lightbox:redirect", url }, "*"); // dont change this, it would be a broken change
+        }
         location.href = url;
     }
 };

package/dist/styles.css

@@ -1,13 +1,13 @@
 .placetopay_lightbox_wrapper {
     background: var(--placetopay-lightbox-backdrop-color);
-    position: fixed;
+    position: var(--placetopay-lightbox-position);
     display: flex;
     justify-content: center;
     align-items: center;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    width: var(--placetopay-lightbox-wrapper-width);
+    height: var(--placetopay-lightbox-wrapper-height);
     z-index: 999;
     user-select: none;
 }

package/dist/types.d.ts

@@ -6,6 +6,9 @@ export type LightboxStyles = Partial<{
     height: string | number;
     width: string | number;
     radius: number;
+    position: 'absolute' | 'fixed';
+    wrapperWidth: string | number;
+    wrapperHeight: string | number;
 }>;
 export type ApiStructure = {
     type: string;
@@ -17,6 +20,8 @@ export type InternalOptions = Partial<{
     enforceStyles: boolean;
 }>;
 export type ExposedOptions = Partial<{
+    id: string;
+    element: HTMLElement;
     allowRedirects: boolean;
     callbacks: ClientCallbacks;
     closeButton: boolean;
@@ -24,13 +29,16 @@ export type ExposedOptions = Partial<{
 }>;
 export type InitialOptions = ExposedOptions & InternalOptions;
 export type MountLightboxOptions = {
+    id: string;
     url: string;
+    element: HTMLElement;
     callbacks: ClientCallbacks;
     styles: LightboxStyles;
     closeButtonEnabled: boolean;
     enforceStyles: boolean;
 };
 export type MountListenerOptions = {
+    id: string;
     callbacks: ClientCallbacks;
     styles: LightboxStyles;
     closeButton: HTMLButtonElement;

package/package.json

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