@placetopay/lightbox-sdk 0.1.0 → 0.2.1

package/dist/LightboxApp/index.d.ts

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

package/dist/LightboxApp/index.js

@@ -0,0 +1,9 @@
+import { LightboxAppEvents } from '../constants';
+export var LightboxApp = {
+    emit: function (type, 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/LightboxClient/assemblers.d.ts

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

package/dist/LightboxClient/assemblers.js

@@ -0,0 +1,64 @@
+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 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);
+    };
+    globalThis.addEventListener('message', callbacksListener);
+    globalThis.addEventListener('message', stylesListener);
+};
+export var mountIFrameElement = function (url, styles) {
+    var wrapper = document.createElement('div');
+    wrapper.id = ElementIds.WRAPPER_ID;
+    var iframe = document.createElement('iframe');
+    iframe.src = url;
+    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, _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(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 → LightboxClient}/index.d.ts

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

package/dist/LightboxClient/index.js

@@ -0,0 +1,22 @@
+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 () {
+                if (lightbox.allowRedirects)
+                    redirectBasedOnDriver(url);
+                mountListeners(lightbox.callbacks, lightbox.styles);
+                mountIFrameElement(url, lightbox.styles);
+            },
+        };
+        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.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 var Config = {
+    defaultDimension: Dimensions.MD,
+};

package/dist/constants.d.ts

@@ -0,0 +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 Dimensions: {
+    SM: {
+        height: number;
+        width: number;
+    };
+    MD: {
+        height: number;
+        width: number;
+    };
+    LG: {
+        height: number;
+        width: number;
+    };
+};

package/dist/constants.js

@@ -0,0 +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 Dimensions = {
+    SM: { height: 400, width: 320 },
+    MD: { height: 640, width: 512 },
+    LG: { height: 1000, width: 800 },
+};

package/dist/helpers.d.ts

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

package/dist/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/index.d.ts → index.d.ts}

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

package/dist/{lib/core/index.js → index.js}

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

package/dist/{lib/styles → 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/dist/{lib/core/types.d.ts → 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/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@placetopay/lightbox-sdk",
-  "version": "0.1.0",
+  "version": "0.2.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/lib"
+    "/dist"
   ],
   "scripts": {
-    "dev": "vite",
     "prebuild": "npm run clean-build",
     "build": "tsc",
     "postbuild": "copyfiles -u 1 src/**/*.css dist/",
@@ -28,6 +27,7 @@
   "keywords": [
     "lightbox",
     "sdk",
+    "placetopay",
     "javascript",
     "typescript"
   ],
@@ -38,19 +38,12 @@
   },
   "homepage": "https://bitbucket.org/placetopay/lightbox-sdk#readme",
   "devDependencies": {
-    "@types/node": "^18.7.23",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
-    "@vitejs/plugin-react": "^2.1.0",
     "copyfiles": "^2.4.1",
     "eslint": "^8.24.0",
     "prettier": "^2.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "typescript": "^4.8.3",
-    "vite": "^3.1.4"
+    "typescript": "^4.8.3"
   }
 }

package/README.md

@@ -1,19 +0,0 @@
-# Lightbox-sdk
-Small javascript library to encapsulate websites in a lightbox with configurable styles and behaviors.
-
-The library consists of 2 parts:
-
-- LightboxClient
-- LightboxApp
-
-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 style of 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/lib/core/LightboxApp/index.d.ts

@@ -1,3 +0,0 @@
-export declare const LightboxApp: {
-    emit: (type: string, data: unknown) => void;
-};

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

@@ -1,5 +0,0 @@
-export var LightboxApp = {
-    emit: function (type, data) {
-        globalThis.parent.postMessage({ type: type, data: data }, '*');
-    },
-};

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

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

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

@@ -1,35 +0,0 @@
-import { Styles, Ids } from '@/constants';
-export var mountListener = function (callbacks) {
-    if (!callbacks)
-        return;
-    var listener = function (event) {
-        var _a;
-        (_a = callbacks[event.data.type]) === null || _a === void 0 ? void 0 : _a.call(callbacks, event.data.data);
-        unmountLightbox(listener);
-    };
-    globalThis.addEventListener('message', listener);
-};
-export var mountIFrameElement = function (url, styles) {
-    var wrapper = document.createElement('div');
-    wrapper.id = Ids.WRAPPER_ID;
-    var iframe = document.createElement('iframe');
-    iframe.src = url;
-    iframe.id = Ids.IFRAME_ID;
-    mountStyles(styles);
-    document.body.appendChild(wrapper);
-    wrapper.appendChild(iframe);
-};
-var mountStyles = function (styles) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    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 unmountLightbox = function (listener) {
-    var _a;
-    (_a = document.getElementById(Ids.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,18 +0,0 @@
-import { mountIFrameElement, mountListener } from './assemblers';
-export var LightboxClient = {
-    init: function (url, options) {
-        var _a, _b;
-        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 : {},
-            open: function () {
-                mountListener(lightbox.callbacks);
-                mountIFrameElement(url, lightbox.styles);
-            },
-        };
-        if (options === null || options === void 0 ? void 0 : options.dispatch)
-            lightbox.open();
-        console.log("lightbox-sdk | client initialized (".concat(url, ")"));
-        return lightbox;
-    },
-};

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

@@ -1,9 +0,0 @@
-export declare const Styles: {
-    BACKGROUND_COLOR: string;
-    ROUNDED: string;
-};
-export declare const Ids: {
-    WRAPPER_ID: string;
-    IFRAME_ID: string;
-    STYLES_ID: string;
-};

package/dist/lib/core/constants.js

@@ -1,9 +0,0 @@
-export var Styles = {
-    BACKGROUND_COLOR: '--placetopay-lightbox-background-color',
-    ROUNDED: '--placetopay-lightbox-border-radius',
-};
-export var Ids = {
-    WRAPPER_ID: 'placetopay_lightbox_wrapper',
-    IFRAME_ID: 'placetopay_lightbox',
-    STYLES_ID: 'placetopay-lightbox',
-};