@placetopay/lightbox-sdk 0.3.0 → 0.3.2

package/dist/LightboxApp/index.d.ts

@@ -0,0 +1,9 @@
+import { LightboxStyles } from '../types';
+export declare const LightboxApp: {
+    close: () => void;
+    emit: (type: string, payload: unknown) => {
+        close: () => void;
+    };
+    sendStyles: (styles: LightboxStyles) => void;
+    hideCloseButton: () => void;
+};

package/dist/LightboxApp/index.js

@@ -0,0 +1,16 @@
+import { LightboxAppEvents } from '../constants';
+export const LightboxApp = {
+    close: () => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.CLOSE }, '*');
+    },
+    emit: (type, payload) => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.EMIT, payload: { type, payload } }, '*');
+        return { close: LightboxApp.close };
+    },
+    sendStyles: (styles) => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.SEND_STYLES, payload: styles }, '*');
+    },
+    hideCloseButton: () => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.HIDE_CLOSE_BUTTON }, '*');
+    },
+};

package/dist/LightboxClient/assemblers.d.ts

@@ -0,0 +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;

package/dist/LightboxClient/assemblers.js

@@ -0,0 +1,68 @@
+import { Config } from '../config';
+import { Styles, ElementIds, Dimensions, LightboxAppEvents } from '../constants';
+export const mountListener = (callbacks, styles) => {
+    if (!callbacks)
+        return;
+    const listener = (event) => {
+        var _a, _b;
+        switch (event.data.type) {
+            case LightboxAppEvents.CLOSE:
+                unmountLightbox(listener);
+                break;
+            case LightboxAppEvents.EMIT:
+                (_a = callbacks[event.data.payload.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.payload.payload);
+                break;
+            case LightboxAppEvents.SEND_STYLES:
+                mountStyles(Object.assign(Object.assign(Object.assign({}, event.data.payload), styles), { background: Object.assign(Object.assign({}, event.data.payload.background), styles.background) }));
+                break;
+            case LightboxAppEvents.HIDE_CLOSE_BUTTON:
+                (_b = document.getElementById(ElementIds.CLOSE_BUTTON_ID)) === null || _b === void 0 ? void 0 : _b.remove();
+                break;
+        }
+    };
+    globalThis.addEventListener('message', listener);
+};
+export const mountLightbox = (url, styles, closeButtonEnabled) => {
+    const wrapper = document.createElement('div');
+    wrapper.id = ElementIds.WRAPPER_ID;
+    const iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.id = ElementIds.IFRAME_ID;
+    mountStyles(styles);
+    document.body.appendChild(wrapper);
+    wrapper.appendChild(iframe);
+    if (closeButtonEnabled) {
+        const closeButton = document.createElement('button');
+        closeButton.id = ElementIds.CLOSE_BUTTON_ID;
+        closeButton.addEventListener('click', () => {
+            globalThis.postMessage({ type: LightboxAppEvents.CLOSE }, '*');
+        });
+        const closeButtonContent = document.createElement('span');
+        closeButtonContent.classList.add('placetopay-close-button-content');
+        closeButtonContent.textContent = 'x';
+        closeButton.appendChild(closeButtonContent);
+        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) => {
+    var _a;
+    (_a = document.getElementById(ElementIds.WRAPPER_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+    globalThis.removeEventListener('message', listener);
+    document.documentElement.style.removeProperty(Styles.BACKGROUND_COLOR);
+};

package/dist/LightboxClient/index.d.ts

@@ -0,0 +1,4 @@
+import { InitOptions, LightboxInstance } from '../types';
+export declare const LightboxClient: {
+    init: (url: string, options?: InitOptions) => LightboxInstance;
+};

package/dist/LightboxClient/index.js

@@ -0,0 +1,20 @@
+import { redirectBasedOnDriver } from '../helpers';
+import { mountLightbox, mountListener } from './assemblers';
+export const LightboxClient = {
+    init: (url, options) => {
+        var _a, _b, _c, _d;
+        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 : {},
+            open: () => {
+                if (lightbox.allowRedirects)
+                    redirectBasedOnDriver(url);
+                mountListener(lightbox.callbacks, lightbox.styles);
+                mountLightbox(url, lightbox.styles, lightbox.closeButton);
+            },
+        };
+        return lightbox;
+    },
+};

package/dist/config.d.ts

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

package/dist/config.js

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

package/dist/constants.d.ts

@@ -0,0 +1,32 @@
+export declare enum ElementIds {
+    WRAPPER_ID = "placetopay_lightbox_wrapper",
+    IFRAME_ID = "placetopay_lightbox",
+    CLOSE_BUTTON_ID = "placetopay_close_button",
+    STYLES_ID = "placetopay-lightbox"
+}
+export declare enum LightboxAppEvents {
+    CLOSE = "close",
+    EMIT = "emit",
+    SEND_STYLES = "sendStyles",
+    HIDE_CLOSE_BUTTON = "hideCloseButton"
+}
+export declare enum Styles {
+    BACKGROUND_COLOR = "--placetopay-lightbox-background-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;
+    };
+    MD: {
+        height: number;
+        width: number;
+    };
+    LG: {
+        height: number;
+        width: number;
+    };
+};

package/dist/constants.js

@@ -0,0 +1,26 @@
+export var ElementIds;
+(function (ElementIds) {
+    ElementIds["WRAPPER_ID"] = "placetopay_lightbox_wrapper";
+    ElementIds["IFRAME_ID"] = "placetopay_lightbox";
+    ElementIds["CLOSE_BUTTON_ID"] = "placetopay_close_button";
+    ElementIds["STYLES_ID"] = "placetopay-lightbox";
+})(ElementIds || (ElementIds = {}));
+export var LightboxAppEvents;
+(function (LightboxAppEvents) {
+    LightboxAppEvents["CLOSE"] = "close";
+    LightboxAppEvents["EMIT"] = "emit";
+    LightboxAppEvents["SEND_STYLES"] = "sendStyles";
+    LightboxAppEvents["HIDE_CLOSE_BUTTON"] = "hideCloseButton";
+})(LightboxAppEvents || (LightboxAppEvents = {}));
+export var Styles;
+(function (Styles) {
+    Styles["BACKGROUND_COLOR"] = "--placetopay-lightbox-background-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 },
+};

package/dist/css/close_button.css

@@ -0,0 +1,34 @@
+/* Initial design from uiverse.io by @Voxybuns */
+#placetopay_close_button {
+    /* Variables */
+    --button_radius: 100%;
+    --button_color: #e8e8e8;
+    --button_outline_color: #000000;
+    cursor: pointer;
+    padding: 0;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    font-size: 17px;
+    font-weight: bold;
+    border: none;
+    border-radius: var(--button_radius);
+    background: var(--button_outline_color);
+}
+
+.placetopay-close-button-content {
+    display: block;
+    box-sizing: border-box;
+    border: 2px solid var(--button_outline_color);
+    border-radius: var(--button_radius);
+    padding: 2px 7px;
+    background: var(--button_color);
+    color: var(--button_outline_color);
+    transform: translateY(-0.1em);
+    transition: transform 0.1s ease;
+}
+
+button:active .placetopay-close-button-content {
+    /* Push the button downwards when pressed */
+    transform: translateY(0);
+}

package/dist/css/styles.css

@@ -0,0 +1,28 @@
+@import url('./close_button.css');
+
+#placetopay_lightbox_wrapper {
+    background: var(--placetopay-lightbox-background-color);
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    user-select: none;
+}
+
+#placetopay_lightbox {
+    border: 0;
+    border-radius: var(--placetopay-lightbox-border-radius);
+    overflow: hidden;
+    background-color: white;
+    height: 100%;
+    width: 100%;
+    max-height: var(--placetopay-lightbox-max-height);
+    max-width: var(--placetopay-lightbox-max-width);
+    overflow: auto;
+    box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5);
+}

package/dist/helpers.d.ts

@@ -0,0 +1 @@
+export declare const redirectBasedOnDriver: (url: string) => void;

package/dist/helpers.js

@@ -0,0 +1,7 @@
+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
+    ) {
+        location.href = url;
+    }
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { LightboxApp } from './LightboxApp';
+export { LightboxClient } from './LightboxClient';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { LightboxApp } from './LightboxApp';
+export { LightboxClient } from './LightboxClient';
+export * from './types';

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+import { LightboxAppEvents } from './constants';
+export declare type ClientCallback = (data: unknown) => void;
+export declare type ClientCallbacks = {
+    [key: string]: ClientCallback | undefined;
+};
+export declare type LightboxStyles = {
+    background?: {
+        color?: string;
+        opacity?: number;
+    };
+    dimension?: 'sm' | 'md' | 'lg';
+    height?: number;
+    rounded?: number;
+    width?: number;
+};
+export declare type InitOptions = {
+    allowRedirects?: boolean;
+    callbacks?: ClientCallbacks;
+    closeButton?: boolean;
+    styles?: LightboxStyles;
+};
+export declare type ApiStructure = {
+    payload: unknown;
+    type: string;
+};
+export declare type LightboxInstance = Required<InitOptions> & {
+    open: () => void;
+};
+export declare type LightboxEvents = {
+    type: LightboxAppEvents.CLOSE;
+} | {
+    type: LightboxAppEvents.EMIT;
+    payload: ApiStructure;
+} | {
+    type: LightboxAppEvents.SEND_STYLES;
+    payload: LightboxStyles;
+} | {
+    type: LightboxAppEvents.HIDE_CLOSE_BUTTON;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "0.3.0",
+  "version": "0.3.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",