@placetopay/lightbox-sdk 0.2.1 → 0.3.1

package/README.md

@@ -0,0 +1,18 @@
+# Lightbox-sdk
+Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors.
+
+The library consists of 2 parts:
+
+- LightboxApp
+- LightboxClient
+
+If you have a site A, and within it you want to display a site B using Lightbox-sdk:
+
+On site A the LightboxClient will be used (site that will display a lightbox)
+
+- It will define which site will be displayed in the lightbox
+- It will define the callbacks for each lightbox event
+
+On site B LightboxApp will be used (site that will be shown in a lightbox)
+
+- Define the event emission logic

package/dist/LightboxApp/index.d.ts

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

package/dist/LightboxApp/index.js

@@ -1,9 +1,16 @@
 import { LightboxAppEvents } from '../constants';
-export var LightboxApp = {
-    emit: function (type, data) {
-        globalThis.parent.postMessage({ event: LightboxAppEvents.EMIT, type: type, data: data }, '*');
+export const LightboxApp = {
+    close: () => {
+        globalThis.parent.postMessage({ type: LightboxAppEvents.CLOSE }, '*');
     },
-    sendStyles: function (styles) {
-        globalThis.parent.postMessage({ event: LightboxAppEvents.SEND_STYLES, styles: styles }, '*');
+    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

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

package/dist/LightboxClient/assemblers.js

@@ -1,62 +1,66 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { Config } from '../config';
 import { Styles, ElementIds, Dimensions, LightboxAppEvents } from '../constants';
-export var mountListeners = function (callbacks, styles) {
+export const mountListener = (callbacks, styles) => {
     if (!callbacks)
         return;
-    var callbacksListener = function (event) {
-        var _a;
-        if (event.data.event !== LightboxAppEvents.EMIT)
-            return;
-        (_a = callbacks[event.data.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.data);
-        unmountLightbox(callbacksListener);
-    };
-    var stylesListener = function (event) {
-        if (event.data.event !== LightboxAppEvents.SEND_STYLES)
-            return;
-        mountStyles(__assign(__assign(__assign({}, event.data.styles), styles), { background: __assign(__assign({}, event.data.styles.background), styles.background) }));
-        globalThis.removeEventListener('message', stylesListener);
+    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', callbacksListener);
-    globalThis.addEventListener('message', stylesListener);
+    globalThis.addEventListener('message', listener);
 };
-export var mountIFrameElement = function (url, styles) {
-    var wrapper = document.createElement('div');
+export const mountLightbox = (url, styles, closeButtonEnabled) => {
+    const wrapper = document.createElement('div');
     wrapper.id = ElementIds.WRAPPER_ID;
-    var iframe = document.createElement('iframe');
+    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);
+    }
 };
-var mountStyles = function (styles) {
+const mountStyles = (styles) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var 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, function (m, r, g, b) { return '#' + r + r + g + g + b + b; }).substring(1).match(/.{2}/g)) === null || _c === void 0 ? void 0 : _c.map(function (x) { return parseInt(x, 16); })) !== null && _d !== void 0 ? _d : [107, 114, 128];
+    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(".concat(background.join(', '), ")"));
-    var rounded = (_g = styles.rounded) !== null && _g !== void 0 ? _g : 0;
-    document.documentElement.style.setProperty(Styles.ROUNDED, "".concat(rounded.toString(), "px"));
-    var height = (_h = styles.height) !== null && _h !== void 0 ? _h : Config.defaultDimension.height;
+    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, "".concat(height.toString(), "px"));
-    var width = (_j = styles.width) !== null && _j !== void 0 ? _j : Config.defaultDimension.width;
+    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, "".concat(width.toString(), "px"));
+    document.documentElement.style.setProperty(Styles.MAX_WIDTH, `${width.toString()}px`);
 };
-var unmountLightbox = function (listener) {
+const unmountLightbox = (listener) => {
     var _a;
     (_a = document.getElementById(ElementIds.WRAPPER_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     globalThis.removeEventListener('message', listener);

package/dist/LightboxClient/index.js

@@ -1,22 +1,20 @@
 import { redirectBasedOnDriver } from '../helpers';
-import { mountIFrameElement, mountListeners } from './assemblers';
-export var LightboxClient = {
-    init: function (url, options) {
-        var _a, _b, _c;
-        var lightbox = {
-            callbacks: (_a = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _a !== void 0 ? _a : {},
-            allowRedirects: (_b = options === null || options === void 0 ? void 0 : options.allowRedirects) !== null && _b !== void 0 ? _b : true,
-            styles: (_c = options === null || options === void 0 ? void 0 : options.styles) !== null && _c !== void 0 ? _c : {},
-            open: function () {
+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);
-                mountListeners(lightbox.callbacks, lightbox.styles);
-                mountIFrameElement(url, lightbox.styles);
+                mountListener(lightbox.callbacks, lightbox.styles);
+                mountLightbox(url, lightbox.styles, lightbox.closeButton);
             },
         };
-        if (options === null || options === void 0 ? void 0 : options.dispatch)
-            lightbox.open();
-        console.log("lightbox-sdk | client initialized (".concat(url, ")"));
         return lightbox;
     },
 };

package/dist/config.js

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

package/dist/constants.d.ts

@@ -1,18 +1,21 @@
-export declare const ElementIds: {
-    WRAPPER_ID: string;
-    IFRAME_ID: string;
-    STYLES_ID: string;
-};
+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"
+    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 Styles: {
-    BACKGROUND_COLOR: string;
-    ROUNDED: string;
-    MAX_HEIGHT: string;
-    MAX_WIDTH: string;
-};
 export declare const Dimensions: {
     SM: {
         height: number;

package/dist/constants.js

@@ -1,20 +1,25 @@
-export var ElementIds = {
-    WRAPPER_ID: 'placetopay_lightbox_wrapper',
-    IFRAME_ID: 'placetopay_lightbox',
-    STYLES_ID: 'placetopay-lightbox',
-};
+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 = {
-    BACKGROUND_COLOR: '--placetopay-lightbox-background-color',
-    ROUNDED: '--placetopay-lightbox-border-radius',
-    MAX_HEIGHT: '--placetopay-lightbox-max-height',
-    MAX_WIDTH: '--placetopay-lightbox-max-width',
-};
-export var Dimensions = {
+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/{styles → css}/styles.css

@@ -1,3 +1,5 @@
+@import url('./close_button.css');
+
 #placetopay_lightbox_wrapper {
     background: var(--placetopay-lightbox-background-color);
     position: fixed;

package/dist/helpers.js

@@ -1,4 +1,4 @@
-export var redirectBasedOnDriver = function (url) {
+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

@@ -8,25 +8,32 @@ export declare type ClientStyles = {
         color?: string;
         opacity?: number;
     };
-    rounded?: number;
     dimension?: 'sm' | 'md' | 'lg';
     height?: number;
+    rounded?: number;
     width?: number;
 };
 export declare type InitOptions = {
-    dispatch?: boolean;
-    callbacks?: ClientCallbacks;
     allowRedirects?: boolean;
+    callbacks?: ClientCallbacks;
+    closeButton?: boolean;
     styles?: ClientStyles;
 };
 export declare type ApiStructure = {
-    event: LightboxAppEvents;
-    data: unknown;
+    payload: unknown;
     type: string;
 };
-export declare type LightboxInstance = {
-    styles: ClientStyles;
-    allowRedirects: boolean;
-    callbacks: ClientCallbacks;
+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: ClientStyles;
+} | {
+    type: LightboxAppEvents.HIDE_CLOSE_BUTTON;
+};

package/package.json

@@ -1,25 +1,12 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "0.2.1",
+  "version": "0.3.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",
   "files": [
     "/dist"
   ],
-  "scripts": {
-    "prebuild": "npm run clean-build",
-    "build": "tsc",
-    "postbuild": "copyfiles -u 1 src/**/*.css dist/",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "clean-build": "rimraf dist/",
-    "format": "npx prettier --write .",
-    "format:check": "npx prettier --check .",
-    "lint": "npx eslint --ext .ts --fix ./",
-    "lint:check": "npx eslint --ext .ts .",
-    "foli": "npm run format & npm run lint",
-    "foli:check": "npm run format:check & npm run lint:check"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://JuanZea@bitbucket.org/placetopay/lightbox-sdk.git"
@@ -38,12 +25,6 @@
   },
   "homepage": "https://bitbucket.org/placetopay/lightbox-sdk#readme",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.24.0",
-    "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
     "typescript": "^4.8.3"
   }
 }