@placetopay/lightbox-sdk 0.1.0 → 0.2.0

package/dist/lib/core/LightboxApp/index.d.ts

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

package/dist/lib/core/LightboxApp/index.js

@@ -1,5 +1,9 @@
+import { LightboxAppEvents } from '@/constants';
 export var LightboxApp = {
     emit: function (type, data) {
-        globalThis.parent.postMessage({ type: type, data: data }, '*');
+        globalThis.parent.postMessage({ event: LightboxAppEvents.EMIT, type: type, data: data }, '*');
+    },
+    sendStyles: function (styles) {
+        globalThis.parent.postMessage({ event: LightboxAppEvents.SEND_STYLES, styles: styles }, '*');
     },
 };

package/dist/lib/core/LightboxClient/assemblers.d.ts

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

package/dist/lib/core/LightboxClient/assemblers.js

@@ -1,35 +1,64 @@
-import { Styles, Ids } from '@/constants';
-export var mountListener = function (callbacks) {
+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) {
     if (!callbacks)
         return;
-    var listener = function (event) {
+    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(listener);
+        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);
     };
-    globalThis.addEventListener('message', listener);
+    globalThis.addEventListener('message', callbacksListener);
+    globalThis.addEventListener('message', stylesListener);
 };
 export var mountIFrameElement = function (url, styles) {
     var wrapper = document.createElement('div');
-    wrapper.id = Ids.WRAPPER_ID;
+    wrapper.id = ElementIds.WRAPPER_ID;
     var iframe = document.createElement('iframe');
     iframe.src = url;
-    iframe.id = Ids.IFRAME_ID;
+    iframe.id = ElementIds.IFRAME_ID;
     mountStyles(styles);
     document.body.appendChild(wrapper);
     wrapper.appendChild(iframe);
 };
 var mountStyles = function (styles) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    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];
     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;
+    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;
+    if (styles.dimension)
+        width = Dimensions[styles.dimension.toUpperCase()].width;
+    document.documentElement.style.setProperty(Styles.MAX_WIDTH, "".concat(width.toString(), "px"));
 };
 var unmountLightbox = function (listener) {
     var _a;
-    (_a = document.getElementById(Ids.WRAPPER_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+    (_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/lib/core/LightboxClient/index.js

@@ -1,12 +1,16 @@
-import { mountIFrameElement, mountListener } from './assemblers';
+import { redirectBasedOnDriver } from '@/helpers';
+import { mountIFrameElement, mountListeners } from './assemblers';
 export var LightboxClient = {
     init: function (url, options) {
-        var _a, _b;
+        var _a, _b, _c;
         var lightbox = {
             callbacks: (_a = options === null || options === void 0 ? void 0 : options.callbacks) !== null && _a !== void 0 ? _a : {},
-            styles: (_b = options === null || options === void 0 ? void 0 : options.styles) !== null && _b !== void 0 ? _b : {},
+            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 () {
-                mountListener(lightbox.callbacks);
+                if (lightbox.allowRedirects)
+                    redirectBasedOnDriver(url);
+                mountListeners(lightbox.callbacks, lightbox.styles);
                 mountIFrameElement(url, lightbox.styles);
             },
         };

package/dist/lib/core/config.d.ts

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

package/dist/lib/core/config.js

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

package/dist/lib/core/constants.d.ts

@@ -1,9 +1,29 @@
+export declare const ElementIds: {
+    WRAPPER_ID: string;
+    IFRAME_ID: string;
+    STYLES_ID: string;
+};
+export declare enum LightboxAppEvents {
+    EMIT = "emit",
+    SEND_STYLES = "sendStyles"
+}
 export declare const Styles: {
     BACKGROUND_COLOR: string;
     ROUNDED: string;
+    MAX_HEIGHT: string;
+    MAX_WIDTH: string;
 };
-export declare const Ids: {
-    WRAPPER_ID: string;
-    IFRAME_ID: string;
-    STYLES_ID: string;
+export declare const Dimensions: {
+    SM: {
+        height: number;
+        width: number;
+    };
+    MD: {
+        height: number;
+        width: number;
+    };
+    LG: {
+        height: number;
+        width: number;
+    };
 };

package/dist/lib/core/constants.js

@@ -1,9 +1,21 @@
+export var ElementIds = {
+    WRAPPER_ID: 'placetopay_lightbox_wrapper',
+    IFRAME_ID: 'placetopay_lightbox',
+    STYLES_ID: 'placetopay-lightbox',
+};
+export var LightboxAppEvents;
+(function (LightboxAppEvents) {
+    LightboxAppEvents["EMIT"] = "emit";
+    LightboxAppEvents["SEND_STYLES"] = "sendStyles";
+})(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 Ids = {
-    WRAPPER_ID: 'placetopay_lightbox_wrapper',
-    IFRAME_ID: 'placetopay_lightbox',
-    STYLES_ID: 'placetopay-lightbox',
+export var Dimensions = {
+    SM: { height: 400, width: 320 },
+    MD: { height: 640, width: 512 },
+    LG: { height: 1000, width: 800 },
 };

package/dist/lib/core/helpers.d.ts

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

package/dist/lib/core/helpers.js

@@ -0,0 +1,7 @@
+export var redirectBasedOnDriver = function (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/lib/core/types.d.ts

@@ -1,3 +1,4 @@
+import { LightboxAppEvents } from './constants';
 export declare type ClientCallback = (data: unknown) => void;
 export declare type ClientCallbacks = {
     [key: string]: ClientCallback | undefined;
@@ -15,14 +16,17 @@ export declare type ClientStyles = {
 export declare type InitOptions = {
     dispatch?: boolean;
     callbacks?: ClientCallbacks;
+    allowRedirects?: boolean;
     styles?: ClientStyles;
 };
 export declare type ApiStructure = {
+    event: LightboxAppEvents;
     data: unknown;
     type: string;
 };
 export declare type LightboxInstance = {
     styles: ClientStyles;
+    allowRedirects: boolean;
     callbacks: ClientCallbacks;
     open: () => void;
 };

package/dist/lib/styles/styles.css

@@ -9,6 +9,7 @@
     width: 100vw;
     height: 100vh;
     z-index: 999;
+    user-select: none;
 }
 
 #placetopay_lightbox {
@@ -16,4 +17,10 @@
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "0.1.0",
+  "version": "0.2.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",
@@ -28,6 +28,7 @@
   "keywords": [
     "lightbox",
     "sdk",
+    "placetopay",
     "javascript",
     "typescript"
   ],