@letscooee/web-sdk 0.0.3 → 0.0.7

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,85 @@
+import { Renderer } from './renderer';
+import { Constants } from '../constants';
+/**
+ * Renders iFrame element on CTAs.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var IFrameRenderer = /** @class */ (function () {
+    /**
+     * Constructor
+     */
+    function IFrameRenderer() {
+        this.renderer = new Renderer();
+    }
+    /**
+     * 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,81 @@
+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
+     */
+    function InAppRenderer() {
+        this.rootContainer = new RootContainerRenderer().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,25 @@
+import { Constants } from '../constants';
+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 screen sizes
+ * @return number scaling factor
+ */
+export function getScalingFactor() {
+    var screenWidth = document.documentElement.clientWidth;
+    var screenHeight = document.documentElement.clientHeight;
+    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);
+}

package/dist/renderer/renderer.js

@@ -0,0 +1,77 @@
+/**
+ * Utility class for creating and rendering elements.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var Renderer = /** @class */ (function () {
+    function Renderer() {
+        this.doc = document;
+    }
+    /**
+     * Get width of the browser
+     * @return {number} inner width of the browser
+     */
+    Renderer.prototype.getWidth = function () {
+        return document.documentElement.clientWidth;
+    };
+    /**
+     * Get height of the browser
+     * @return {number} inner height of the browser
+     */
+    Renderer.prototype.getHeight = function () {
+        return document.documentElement.clientHeight;
+    };
+    /**
+     * Creates an element
+     * @param {string} elementType element type to be created
+     * @return {HTMLElement} created element
+     */
+    Renderer.prototype.createElement = function (elementType) {
+        return this.doc.createElement(elementType);
+    };
+    /**
+     * Append a child to parent element
+     * @param {HTMLElement} parentElement element on which child is to be appended
+     * @param {HTMLElement} childElement element to to appended
+     */
+    Renderer.prototype.appendChild = function (parentElement, childElement) {
+        parentElement.appendChild(childElement);
+    };
+    /**
+     * Set style of the element
+     * @param {HTMLElement} element element on which styles is added
+     * @param {string} styleName style name
+     * @param {any} value style value
+     */
+    Renderer.prototype.setStyle = function (element, styleName, value) {
+        // Return if style or value is null or undefined
+        if (!styleName) {
+            return;
+        }
+        if (!value) {
+            element.style.removeProperty(styleName);
+            return;
+        }
+        element.style.setProperty(styleName, value);
+    };
+    /**
+     * Set style of the element
+     * @param {HTMLElement} element element on which attribute is added
+     * @param {string} attrName attribute name
+     * @param {any} value attribute value
+     */
+    Renderer.prototype.setAttribute = function (element, attrName, value) {
+        element.setAttribute(attrName, value);
+    };
+    /**
+     * Get element by tag id
+     * @param {string} id id of the element
+     * @return {HTMLElement | null} returns element if present, otherwise null
+     */
+    Renderer.prototype.getElementById = function (id) {
+        return this.doc.getElementById(id);
+    };
+    return Renderer;
+}());
+export { Renderer };

package/dist/renderer/root-container-renderer.js

@@ -0,0 +1,43 @@
+import { Constants } from '../constants';
+import { Renderer } from './renderer';
+/**
+ * Renders root container.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var RootContainerRenderer = /** @class */ (function () {
+    function RootContainerRenderer() {
+        this.renderer = new Renderer();
+    }
+    /**
+     * Render root container.
+     * @return {HTMLElement} rendered root container
+     */
+    RootContainerRenderer.prototype.render = function () {
+        this.removeInApp();
+        var rootDiv = this.renderer.createElement('div');
+        rootDiv.id = Constants.IN_APP_CONTAINER_NAME;
+        rootDiv.classList.add(Constants.IN_APP_CONTAINER_NAME);
+        this.renderer.setStyle(rootDiv, 'z-index', '10000000');
+        this.renderer.setStyle(rootDiv, 'position', 'fixed');
+        this.renderer.setStyle(rootDiv, 'top', '0');
+        this.renderer.setStyle(rootDiv, 'left', '0');
+        this.renderer.setStyle(rootDiv, 'width', '100%');
+        this.renderer.setStyle(rootDiv, 'height', '100%');
+        this.renderer.appendChild(document.body, rootDiv);
+        return rootDiv;
+    };
+    // noinspection JSMethodCanBeStatic
+    /**
+     * Remove InApp trigger.
+     */
+    RootContainerRenderer.prototype.removeInApp = function () {
+        var rootDiv = document.getElementById(Constants.IN_APP_CONTAINER_NAME);
+        if (rootDiv) {
+            rootDiv.parentElement.removeChild(rootDiv);
+        }
+    };
+    return RootContainerRenderer;
+}());
+export { RootContainerRenderer };

package/dist/renderer/shape-renderer.js

@@ -0,0 +1,39 @@
+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 group element present in in-app layer block.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var ShapeRenderer = /** @class */ (function (_super) {
+    __extends(ShapeRenderer, _super);
+    function ShapeRenderer(parentElement, inappElement) {
+        var _this = _super.call(this, parentElement, inappElement) || this;
+        _this.inappHTMLEl = _this.renderer.createElement('div');
+        _this.insertElement();
+        return _this;
+    }
+    /**
+     * Render group element from layers list in {@link InAppTrigger} block.
+     */
+    ShapeRenderer.prototype.render = function () {
+        this.processCommonBlocks();
+    };
+    return ShapeRenderer;
+}(BlockProcessor));
+export { ShapeRenderer };

package/dist/renderer/text-renderer.js

@@ -0,0 +1,48 @@
+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 { BaseTextRenderer } from './base-text-renderer';
+/**
+ * Renders text element present in in-app layer block.
+ *
+ * @author Abhishek Taparia
+ * @version 0.0.5
+ */
+var TextRenderer = /** @class */ (function (_super) {
+    __extends(TextRenderer, _super);
+    function TextRenderer(parentElement, inappElement) {
+        var _this = _super.call(this, parentElement, inappElement) || this;
+        _this.inappHTMLEl = _this.renderer.createElement('div');
+        _this.insertElement();
+        return _this;
+    }
+    /**
+     * Render text element from layers list in {@link ian} block.
+     */
+    TextRenderer.prototype.render = function () {
+        var _this = this;
+        var _a;
+        (_a = this.inappElement.parts) === null || _a === void 0 ? void 0 : _a.forEach(function (partData) {
+            var _a, _b;
+            var newPartElement = _this.renderer.createElement('span');
+            newPartElement.innerHTML = (_b = (_a = partData.txt) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(/\n/g, '<br />');
+            _this.processPart(newPartElement, partData);
+            _this.renderer.appendChild(_this.inappHTMLEl, newPartElement);
+        });
+        this.processCommonBlocks();
+    };
+    return TextRenderer;
+}(BaseTextRenderer));
+export { TextRenderer };