@letscooee/web-sdk 0.0.4 → 0.0.8

package/dist/renderer/block-processor.js

@@ -0,0 +1,233 @@
+import { Renderer } from './renderer';
+import UAParser from 'ua-parser-js';
+import { ClickActionExecutor } from '../models/trigger/action/click-action-executor';
+import { getScalingFactor } from './index';
+import { Container } from '../models/trigger/inapp/container';
+/**
+ * Process all the block of in-app
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var BlockProcessor = /** @class */ (function () {
+    function BlockProcessor(parentHTMLEl, inappElement) {
+        this.renderer = Renderer.get();
+        this.screenWidth = 0;
+        this.screenHeight = 0;
+        this.scalingFactor = getScalingFactor();
+        this.parentHTMLEl = parentHTMLEl;
+        this.inappElement = inappElement;
+        this.screenWidth = this.renderer.getWidth();
+        this.screenHeight = this.renderer.getHeight();
+    }
+    BlockProcessor.prototype.getHTMLElement = function () {
+        return this.inappHTMLEl;
+    };
+    BlockProcessor.prototype.insertElement = function () {
+        this.renderer.appendChild(this.parentHTMLEl, this.inappHTMLEl);
+    };
+    /**
+     * Process all the common blocks that can be placed in layer and container
+     */
+    BlockProcessor.prototype.processCommonBlocks = function () {
+        this.processWidthAndHeight();
+        this.processPositionBlock();
+        this.processBorderBlock();
+        this.processBackgroundBlock();
+        this.processSpaceBlock();
+        this.processTransformBlock();
+        this.registerAction();
+        this.renderer.setStyle(this.inappHTMLEl, 'outline', 'none');
+    };
+    /**
+     * Process width and height
+     */
+    BlockProcessor.prototype.processWidthAndHeight = function () {
+        this.renderer.setStyle(this.inappHTMLEl, 'box-sizing', 'border-box');
+        if (this.inappElement.w) {
+            this.renderer.setStyle(this.inappHTMLEl, 'width', this.getSizePx(this.inappElement.w));
+        }
+        if (this.inappElement.h) {
+            this.renderer.setStyle(this.inappHTMLEl, 'height', this.getSizePx(this.inappElement.h));
+        }
+    };
+    /**
+     * Get calculated size according to the device by multiplying it with scaling factor.
+     * @param {number} value size passed in payload
+     * @return number calculated size
+     */
+    BlockProcessor.prototype.getSizePx = function (value) {
+        return (value * this.scalingFactor) + 'px';
+    };
+    /**
+     * Process position block of the element
+     */
+    BlockProcessor.prototype.processPositionBlock = function () {
+        if (!this.inappElement.x) {
+            return;
+        }
+        this.renderer.setStyle(this.inappHTMLEl, 'position', 'absolute');
+        if (this.inappElement.x)
+            this.renderer.setStyle(this.inappHTMLEl, 'top', this.getSizePx(this.inappElement.y));
+        if (this.inappElement.y)
+            this.renderer.setStyle(this.inappHTMLEl, 'left', this.getSizePx(this.inappElement.x));
+    };
+    /**
+     * Process border block of the element
+     */
+    BlockProcessor.prototype.processBorderBlock = function () {
+        var _a;
+        var border = this.inappElement.br;
+        if (!border) {
+            return;
+        }
+        // Just to make sure radius is not a negative number
+        if (border.radius && border.radius > 0) {
+            this.renderer.setStyle(this.inappHTMLEl, 'border-radius', this.getSizePx(border.radius));
+        }
+        // Just to make sure width is not a negative number
+        if (border.width && border.width > 0) {
+            this.renderer.setStyle(this.inappHTMLEl, 'border-width', this.getSizePx(border.width));
+            this.renderer.setStyle(this.inappHTMLEl, 'border-style', (_a = border.style) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            if (border.color) {
+                this.processColourBlock(border.color, 'border-color');
+            }
+            else {
+                this.renderer.setStyle(this.inappHTMLEl, 'border-color', 'black');
+            }
+        }
+    };
+    /**
+     * Process space block of the element which include margin and padding.
+     */
+    BlockProcessor.prototype.processSpaceBlock = function () {
+        var space = this.inappElement.spc;
+        if (!space) {
+            return;
+        }
+        if (space.p)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding', this.getSizePx(space.p));
+        if (space.pt)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-top', this.getSizePx(space.pt));
+        if (space.pb)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-bottom', this.getSizePx(space.pb));
+        if (space.pl)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-left', this.getSizePx(space.pl));
+        if (space.pr)
+            this.renderer.setStyle(this.inappHTMLEl, 'padding-right', this.getSizePx(space.pr));
+        this.renderer.setStyle(this.inappHTMLEl, 'margin', '0 !important');
+    };
+    /**
+     * Process transform block of the element
+     */
+    BlockProcessor.prototype.processTransformBlock = function () {
+        var transform = this.inappElement.trf;
+        if (!transform) {
+            return;
+        }
+        if (transform.rotate) {
+            this.renderer.setStyle(this.inappHTMLEl, 'transform', "rotate(" + transform.rotate + "deg)");
+        }
+    };
+    /**
+     * Register click-to-action(CTA) block of the element
+     */
+    BlockProcessor.prototype.registerAction = function () {
+        var action = this.inappElement.clc;
+        if (!action) {
+            return;
+        }
+        this.inappHTMLEl.addEventListener('click', function () {
+            new ClickActionExecutor(action).execute();
+        });
+    };
+    /**
+     * Process background block of the element
+     */
+    BlockProcessor.prototype.processBackgroundBlock = function () {
+        var _a;
+        var bg = this.inappElement.bg;
+        if (!bg) {
+            return;
+        }
+        var htmlElement = this.inappHTMLEl;
+        // For container, the background must be applied to its parent i.e. root container
+        if (this.inappElement instanceof Container) {
+            htmlElement = htmlElement.parentElement;
+        }
+        var prefix = '';
+        if ((_a = new UAParser().getBrowser().name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('safari')) {
+            prefix = '-webkit-';
+        }
+        if (bg.glossy) {
+            this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "blur(" + bg.glossy.radius + "px)");
+            if (bg.glossy.color) {
+                this.processColourBlock(bg.glossy.color, 'background', htmlElement);
+            }
+        }
+        else if (bg.solid) {
+            if (bg.solid.grad) {
+                this.processGradient(bg.solid.grad, 'background');
+            }
+            else if (bg.solid.hex) {
+                this.renderer.setStyle(htmlElement, 'background', bg.solid.rgba);
+            }
+        }
+        else if (bg.img) {
+            if (!bg.img.src) {
+                return;
+            }
+            var value = "url(\"" + bg.img.src + "\") no-repeat center";
+            this.renderer.setStyle(htmlElement, 'background', value);
+            this.renderer.setStyle(htmlElement, 'background-size', 'cover');
+            if (bg.img.a) {
+                this.renderer.setStyle(htmlElement, prefix + 'backdrop-filter', "opacity(" + bg.img.a + ")");
+            }
+        }
+    };
+    /**
+     * Process linear gradient and add to the element
+     * @param {Gradient} grad gradient value
+     * @param {string} attribute attribute on which gradient needs to be applied
+     * @private
+     */
+    BlockProcessor.prototype.processGradient = function (grad, attribute) {
+        if (grad.type === 'LINEAR') {
+            var linearFunctionString = "linear-gradient(" + grad.ang + "deg, " + grad.c1 + ", " + grad.c2;
+            if (grad.c3) {
+                linearFunctionString += ", " + grad.c3;
+            }
+            if (grad.c4) {
+                linearFunctionString += ", " + grad.c4;
+            }
+            if (grad.c5) {
+                linearFunctionString += ", " + grad.c5;
+            }
+            linearFunctionString += ")";
+            var gradient = linearFunctionString;
+            this.renderer.setStyle(this.inappHTMLEl, attribute, gradient);
+        }
+    };
+    /**
+     * Process colour block of the element
+     * @param {Color} colour colour data of the element
+     * @param {string} attribute attribute on which colour data need to be applied
+     * @param {HTMLElement} element Any other element to apply the color apart from {@link inappHTMLEl}
+     * @private
+     */
+    BlockProcessor.prototype.processColourBlock = function (colour, attribute, element) {
+        if (attribute === void 0) { attribute = 'color'; }
+        if (element === void 0) { element = this.inappHTMLEl; }
+        if (!colour) {
+            return;
+        }
+        if (colour.grad) {
+            this.processGradient(colour.grad, attribute);
+        }
+        else if (colour.hex) {
+            this.renderer.setStyle(element, attribute, colour.rgba);
+        }
+    };
+    return BlockProcessor;
+}());
+export { BlockProcessor };

package/dist/renderer/block-renderer.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BlockProcessor } from './block-processor';
+/**
+ * Base class for rendering any block from in-app.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var BlockRenderer = /** @class */ (function (_super) {
+    __extends(BlockRenderer, _super);
+    /**
+     * Public constructor
+     */
+    function BlockRenderer() {
+        return _super.call(this) || this;
+    }
+    /**
+     * Process all the common block in in-app.
+     * @param {HTMLElement} element element to be processed
+     * @param {BaseElement} baseElement style and attributes data of the element
+     */
+    BlockRenderer.prototype.commonRenderingFunction = function (element, baseElement) {
+        this.processCommonBlocks(element, baseElement);
+        if (baseElement.type) {
+            element.classList.add(baseElement.type);
+        }
+    };
+    return BlockRenderer;
+}(BlockProcessor));
+export { BlockRenderer };

package/dist/renderer/container-renderer.js

@@ -0,0 +1,46 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BlockProcessor } from './block-processor';
+/**
+ * Renders container element.
+ *
+ * @author Shashank Agrawal
+ * @version 0.0.5
+ */
+var ContainerRenderer = /** @class */ (function (_super) {
+    __extends(ContainerRenderer, _super);
+    function ContainerRenderer(parentElement, inappElement) {
+        var _this = _super.call(this, parentElement, inappElement) || this;
+        _this.inappHTMLEl = _this.renderer.createElement('div');
+        _this.insertElement();
+        // Need to figure out the best way of doing this
+        _this.inappElement.w = 1080;
+        _this.inappElement.h = 1920;
+        return _this;
+    }
+    /**
+     * Render group element from layers list in {@link InAppTrigger} block.
+     * @return The instance of this renderer.
+     */
+    ContainerRenderer.prototype.render = function () {
+        this.processCommonBlocks();
+        this.renderer.setStyle(this.inappHTMLEl, 'position', 'relative');
+        Object.assign(this.inappHTMLEl.style, this.inappElement.getStyles());
+        return this;
+    };
+    return ContainerRenderer;
+}(BlockProcessor));
+export { ContainerRenderer };

package/dist/renderer/group-renderer.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BlockRenderer } from './block-renderer';
+/**
+ * Renders group element present in in-app layer block.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var GroupRenderer = /** @class */ (function (_super) {
+    __extends(GroupRenderer, _super);
+    function GroupRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Render group element from layers list in {@link InAppTrigger} block.
+     * @param {HTMLElement} parent
+     * @param {GroupElement} elementData style and attributes data of the group element
+     * @return {HTMLElement} rendered group element
+     */
+    GroupRenderer.prototype.render = function (parent, elementData) {
+        var newElement = this.renderer.createElement('div');
+        // By default the parents will be relative
+        this.renderer.setStyle(newElement, 'position', 'relative');
+        this.commonRenderingFunction(newElement, elementData);
+        this.renderer.appendChild(parent, newElement);
+        return newElement;
+    };
+    return GroupRenderer;
+}(BlockRenderer));
+export { GroupRenderer };

package/dist/renderer/iFrame-renderer.js

@@ -0,0 +1,82 @@
+import { Renderer } from './renderer';
+import { Constants } from '../constants';
+/**
+ * Renders iFrame element on CTAs.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var IFrameRenderer = /** @class */ (function () {
+    function IFrameRenderer() {
+        this.renderer = Renderer.get();
+    }
+    /**
+     * Render iFrame element on CTAs.
+     * @param {string} url URL for the iFrame.
+     * @return {HTMLElement} rendered iFrame
+     * @private
+     */
+    IFrameRenderer.prototype.render = function (url) {
+        var root = this.renderer.getElementById(Constants.IN_APP_CONTAINER_NAME);
+        var iFrameDiv = this.createIFrameContainer();
+        this.createIFrameElement(iFrameDiv, url);
+        // Create and render close button for iFrame with anchor tag
+        this.createAnchorElement(root, iFrameDiv);
+        this.renderer.appendChild(root, iFrameDiv);
+        return iFrameDiv;
+    };
+    /**
+     * Create and return iFrame container for iab CTA.
+     * @return {HTMLDivElement} iFrame container.
+     * @private
+     */
+    IFrameRenderer.prototype.createIFrameContainer = function () {
+        var iFrameDiv = this.renderer.createElement('div');
+        this.renderer.setAttribute(iFrameDiv, 'class', 'iframe-container');
+        this.renderer.setAttribute(iFrameDiv, 'id', 'iframe-container');
+        this.renderer.setStyle(iFrameDiv, 'width', '100%');
+        this.renderer.setStyle(iFrameDiv, 'height', '100%');
+        this.renderer.setStyle(iFrameDiv, 'position', 'absolute');
+        this.renderer.setStyle(iFrameDiv, 'top', '0px');
+        this.renderer.setStyle(iFrameDiv, 'left', '0px');
+        return iFrameDiv;
+    };
+    /**
+     * Create and return iFrame element for iab CTA.
+     * @param {HTMLDivElement} iFrameDiv iframe container
+     * @param {string} src source url to redirect
+     * @return {HTMLIFrameElement} iFrame element
+     * @private
+     */
+    IFrameRenderer.prototype.createIFrameElement = function (iFrameDiv, src) {
+        var iFrameElement = this.renderer.createElement('iframe');
+        this.renderer.setStyle(iFrameElement, 'width', '100%');
+        this.renderer.setStyle(iFrameElement, 'height', '100%');
+        this.renderer.setAttribute(iFrameElement, 'src', src);
+        this.renderer.setAttribute(iFrameElement, 'frameBorder', '0');
+        this.renderer.appendChild(iFrameDiv, iFrameElement);
+        return iFrameElement;
+    };
+    /**
+     * Create and return close button for iFrame element
+     * @param {HTMLDivElement} root root container of in-app
+     * @param {HTMLDivElement} iframeDiv iframe container
+     * @return {HTMLAnchorElement} close button
+     * @private
+     */
+    IFrameRenderer.prototype.createAnchorElement = function (root, iframeDiv) {
+        var iFrameClose = this.renderer.createElement('a');
+        this.renderer.setStyle(iFrameClose, 'position', 'absolute');
+        this.renderer.setStyle(iFrameClose, 'top', '0px');
+        this.renderer.setStyle(iFrameClose, 'right', '0px');
+        iFrameClose.href = '#';
+        iFrameClose.innerHTML = 'Close';
+        iFrameClose.onclick = function () {
+            root.removeChild(iframeDiv);
+        };
+        this.renderer.appendChild(iframeDiv, iFrameClose);
+        return iFrameClose;
+    };
+    return IFrameRenderer;
+}());
+export { IFrameRenderer };

package/dist/renderer/image-renderer.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { BlockProcessor } from './block-processor';
+/**
+ * Renders image element present in in-app layer block.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var ImageRenderer = /** @class */ (function (_super) {
+    __extends(ImageRenderer, _super);
+    function ImageRenderer(parentElement, inappElement) {
+        var _this = _super.call(this, parentElement, inappElement) || this;
+        _this.inappHTMLEl = _this.renderer.createElement('img');
+        _this.insertElement();
+        return _this;
+    }
+    /**
+     * Render image element from layers list in {@link ian} block.
+     */
+    ImageRenderer.prototype.render = function () {
+        this.renderer.setAttribute(this.inappHTMLEl, 'src', this.inappElement.src);
+        this.renderer.setStyle(this.inappHTMLEl, 'max-width', '100%');
+        this.renderer.setStyle(this.inappHTMLEl, 'max-height', '100%');
+        this.renderer.setStyle(this.inappHTMLEl, 'display', 'block');
+        this.renderer.setStyle(this.inappHTMLEl, 'margin', '0 auto');
+        this.processCommonBlocks();
+    };
+    return ImageRenderer;
+}(BlockProcessor));
+export { ImageRenderer };

package/dist/renderer/in-app-renderer.js

@@ -0,0 +1,84 @@
+import { Log } from '../utils/log';
+import { ImageElement, ShapeElement, TextElement } from '../models/trigger/elements/';
+import { TriggerData } from '../models/trigger/trigger-data';
+import { LocalStorageHelper } from '../utils/local-storage-helper';
+import { Constants } from '../constants';
+import { ImageRenderer, RootContainerRenderer, ShapeRenderer, TextRenderer } from './';
+import { ContainerRenderer } from './container-renderer';
+import { TriggerHelper } from '../models/trigger/trigger-helper';
+import { SafeHttpService } from '../services/safe-http-service';
+import { Event } from '../models/event/event';
+/**
+ * Renders In App trigger
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var InAppRenderer = /** @class */ (function () {
+    /**
+     * Public constructor.
+     *
+     * @param parent Place the in-app in the given parent instead of the document.body.
+     */
+    function InAppRenderer(parent) {
+        this.parent = parent;
+        this.rootContainer = new RootContainerRenderer(parent).render();
+    }
+    /**
+     * Renders in-app trigger from payload received
+     * @param {TriggerData} triggerData {@link TriggerData}
+     */
+    InAppRenderer.prototype.render = function (triggerData) {
+        triggerData = new TriggerData(triggerData);
+        this.ian = triggerData.ian;
+        try {
+            this.renderContainer();
+            var event_1 = new Event('CE Trigger Displayed', { 'triggerID': triggerData.id });
+            SafeHttpService.getInstance().sendEvent(event_1);
+            LocalStorageHelper.setNumber(Constants.STORAGE_TRIGGER_START_TIME, new Date().getTime());
+            TriggerHelper.storeActiveTrigger(triggerData);
+        }
+        catch (e) {
+            Log.error(e);
+        }
+    };
+    /**
+     * Render elements.
+     * @param {HTMLElement} parentEl element to be rendered
+     * @param {BaseElement} inappElement style and attributes data of the element
+     */
+    InAppRenderer.prototype.renderElement = function (parentEl, inappElement) {
+        if (inappElement instanceof TextElement) {
+            new TextRenderer(parentEl, inappElement).render();
+        }
+        else if (inappElement instanceof ImageElement) {
+            new ImageRenderer(parentEl, inappElement).render();
+        }
+        else if (inappElement instanceof ShapeElement) {
+            new ShapeRenderer(parentEl, inappElement).render();
+        }
+        else {
+            Log.error('Unsupported element type- ' + inappElement.type);
+        }
+    };
+    /**
+     * Render container from {@link ian} block.
+     * @private
+     */
+    InAppRenderer.prototype.renderContainer = function () {
+        var _this = this;
+        var _a, _b;
+        var container = (_a = this.ian) === null || _a === void 0 ? void 0 : _a.cont;
+        if (!container) {
+            return;
+        }
+        var containerHTMLElement = new ContainerRenderer(this.rootContainer, container)
+            .render()
+            .getHTMLElement();
+        (_b = this.ian.elems) === null || _b === void 0 ? void 0 : _b.forEach(function (element) {
+            _this.renderElement(containerHTMLElement, element);
+        });
+    };
+    return InAppRenderer;
+}());
+export { InAppRenderer };

package/dist/renderer/index.js

@@ -0,0 +1,26 @@
+import { Constants } from '../constants';
+import { Renderer } from './renderer';
+export { TextRenderer } from './text-renderer';
+export { ShapeRenderer } from './shape-renderer';
+export { ImageRenderer } from './image-renderer';
+export { RootContainerRenderer } from './root-container-renderer';
+export { IFrameRenderer } from './iFrame-renderer';
+/**
+ * Calculate scaling factor according to parent most container where the in-app's root container will be rendered.
+ * @return number scaling factor
+ */
+export function getScalingFactor() {
+    var screenWidth = Renderer.get().getWidth();
+    var screenHeight = Renderer.get().getHeight();
+    var scalingFactor;
+    if (screenWidth < screenHeight) {
+        var shortEdge = Math.min(Constants.CANVAS_WIDTH, Constants.CANVAS_HEIGHT);
+        scalingFactor = screenWidth / shortEdge;
+    }
+    else {
+        var longEdge = Math.max(Constants.CANVAS_WIDTH, Constants.CANVAS_HEIGHT);
+        scalingFactor = screenHeight / longEdge;
+    }
+    // The in-app should not scale beyond 100%
+    return Math.min(scalingFactor, 1);
+}