@letscooee/web-sdk 0.0.12 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 0.0.13
+
+### Features
+
+1. Support dynamic canvas size.
+2. Ability to set colors on in-app and container separately.
+
+### Improvements
+
+1. Add hand pointer for CTAs.
+2. Add push prompt CTA.
+
 ## 0.0.11, 0.0.12
 
 ### Fixes

package/dist/models/trigger/action/click-action-executor.js

@@ -35,11 +35,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { Constants } from '../../../constants';
-import { IFrameRenderer, RootContainerRenderer } from '../../../renderer';
+import { IFrameRenderer } from '../../../renderer';
+import { Renderer } from '../../../renderer/renderer';
 import { SafeHttpService } from '../../../services/safe-http-service';
+import { LocalStorageHelper } from '../../../utils/local-storage-helper';
 import { Log } from '../../../utils/log';
 import { Event } from '../../event/event';
-import { LocalStorageHelper } from '../../../utils/local-storage-helper';
 import { Permission } from '../blocks/click-action';
 /**
  * Performs click to action on in-app elements
@@ -128,7 +129,7 @@ var ClickActionExecutor = /** @class */ (function () {
         if (!this.action.close) {
             return;
         }
-        new RootContainerRenderer().removeInApp();
+        Renderer.get().removeInApp();
         var startTime = LocalStorageHelper.getNumber(Constants.STORAGE_TRIGGER_START_TIME, new Date().getTime());
         var triggerID = (_a = LocalStorageHelper.getObject(Constants.STORAGE_ACTIVE_TRIGGER)) === null || _a === void 0 ? void 0 : _a.triggerID;
         var diffInSeconds = (new Date().getTime() - startTime) / 1000;

package/dist/models/trigger/blocks/click-action.js

@@ -5,5 +5,5 @@ export var Permission;
     // eslint-disable-next-line no-unused-vars
     Permission[Permission["LOCATION"] = 2] = "LOCATION";
     // eslint-disable-next-line no-unused-vars
-    Permission[Permission["PUSH"] = 6] = "PUSH";
+    Permission[Permission["PUSH"] = 3] = "PUSH";
 })(Permission || (Permission = {}));

package/dist/models/trigger/inapp/container.js

@@ -17,9 +17,12 @@ import { BaseElement } from '../elements';
 var Container = /** @class */ (function (_super) {
     __extends(Container, _super);
     function Container(data) {
-        var _a;
+        var _a, _b, _c;
         var _this = _super.call(this, data) || this;
         _this.o = (_a = data.o) !== null && _a !== void 0 ? _a : ContainerOrigin.C;
+        // For backward compatibility
+        _this.w = (_b = _this.w) !== null && _b !== void 0 ? _b : 1080;
+        _this.h = (_c = _this.h) !== null && _c !== void 0 ? _c : 1920;
         return _this;
     }
     Container.prototype.getOrigin = function () {

package/dist/models/trigger/inapp/in-app-trigger.js

@@ -1,18 +1,41 @@
-import { Container } from './container';
-import { ImageElement, ShapeElement, TextElement } from '../elements';
+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 { BaseElement, ImageElement, ShapeElement, TextElement } from '../elements';
 import { ElementType } from '../elements/base-element';
+import { Container } from './container';
 /**
  * Stores data present in ian (In App) block in {@link TriggerData}
  *
  * @author Abhishek Taparia
  * @version 0.0.5
  */
-var InAppTrigger = /** @class */ (function () {
+var InAppTrigger = /** @class */ (function (_super) {
+    __extends(InAppTrigger, _super);
     function InAppTrigger(data) {
-        var _this = this;
-        this.elems = [];
-        this.cont = new Container(data.cont);
-        this.gvt = data.gvt;
+        var _this = 
+        // Only background is supported for in-apps
+        _super.call(this, { bg: data.bg }) || this;
+        _this.elems = [];
+        _this.cont = new Container(data.cont);
+        _this.gvt = data.gvt;
+        // Backward compatibility
+        if (!_this.bg) {
+            _this.bg = _this.cont.bg;
+            delete _this.cont.bg;
+        }
         data.elems.forEach(function (rawElement) {
             if (rawElement.t === ElementType.IMAGE) {
                 _this.elems.push(new ImageElement(rawElement));
@@ -27,6 +50,7 @@ var InAppTrigger = /** @class */ (function () {
                 _this.elems.push(new ShapeElement(rawElement));
             }
         });
+        return _this;
     }
     InAppTrigger.prototype.getStyles = function () {
         var styles;
@@ -94,7 +118,7 @@ var InAppTrigger = /** @class */ (function () {
         return styles;
     };
     return InAppTrigger;
-}());
+}(BaseElement));
 export { InAppTrigger };
 export var ContainerOrigin;
 (function (ContainerOrigin) {

package/dist/renderer/block-processor.js

@@ -1,8 +1,7 @@
-import { Renderer } from './renderer';
 import { ClickActionExecutor } from '../models/trigger/action/click-action-executor';
 import { Transform } from '../models/trigger/blocks';
-import { getScalingFactor } from './index';
 import { Container } from '../models/trigger/inapp/container';
+import { Renderer } from './renderer';
 /**
  * Process all the block of in-app
  *
@@ -14,9 +13,9 @@ var BlockProcessor = /** @class */ (function () {
         this.renderer = Renderer.get();
         this.screenWidth = 0;
         this.screenHeight = 0;
-        this.scalingFactor = getScalingFactor();
         this.parentHTMLEl = parentHTMLEl;
         this.inappElement = inappElement;
+        this.scalingFactor = this.renderer.getScalingFactor();
         this.screenWidth = this.renderer.getWidth();
         this.screenHeight = this.renderer.getHeight();
     }
@@ -131,13 +130,19 @@ var BlockProcessor = /** @class */ (function () {
      */
     BlockProcessor.prototype.registerAction = function () {
         var action = this.inappElement.clc;
-        if (!action) {
+        if (!action || Object.keys(action).length === 0) {
             return;
         }
         this.inappHTMLEl.addEventListener('click', function (event) {
             event.stopPropagation();
             new ClickActionExecutor(action).execute();
         });
+        if (!(this.inappElement instanceof Container)) {
+            this.renderer.setStyle(this.inappHTMLEl, 'cursor', "pointer");
+        }
+        else if (!(Object.keys(action).length === 1 && action.close !== undefined && action.close !== null)) {
+            this.renderer.setStyle(this.inappHTMLEl, 'cursor', "pointer");
+        }
     };
     /**
      * Process background block of the element
@@ -148,10 +153,6 @@ var BlockProcessor = /** @class */ (function () {
             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;
-        }
         if (bg.glossy) {
             // Style for Apple devices
             this.renderer.setStyle(htmlElement, '-webkit-backdrop-filter', "blur(" + bg.glossy.radius + "px)");

package/dist/renderer/container-renderer.js

@@ -26,9 +26,6 @@ var ContainerRenderer = /** @class */ (function (_super) {
         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;
     }
     /**

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

@@ -1,13 +1,14 @@
-import { Log } from '../utils/log';
+import { Constants } from '../constants';
+import { Event } from '../models/event/event';
 import { ImageElement, ShapeElement, TextElement } from '../models/trigger/elements/';
 import { TriggerData } from '../models/trigger/trigger-data';
+import { TriggerHelper } from '../models/trigger/trigger-helper';
+import { SafeHttpService } from '../services/safe-http-service';
 import { LocalStorageHelper } from '../utils/local-storage-helper';
-import { Constants } from '../constants';
+import { Log } from '../utils/log';
 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';
+import { Renderer } from './renderer';
 /**
  * Renders In App trigger
  *
@@ -21,8 +22,9 @@ var InAppRenderer = /** @class */ (function () {
      * @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();
+        this.renderer = Renderer.get();
+        this.parent = parent !== null && parent !== void 0 ? parent : document.body;
+        this.renderer.setParentContainer(this.parent);
     }
     /**
      * Renders in-app trigger from payload received
@@ -31,6 +33,8 @@ var InAppRenderer = /** @class */ (function () {
     InAppRenderer.prototype.render = function (triggerData) {
         triggerData = new TriggerData(triggerData);
         this.ian = triggerData.ian;
+        this.rootContainer = new RootContainerRenderer(this.parent, this.ian)
+            .render();
         try {
             this.renderContainer();
             var event_1 = new Event('CE Trigger Displayed', { 'triggerID': triggerData.id });
@@ -72,10 +76,11 @@ var InAppRenderer = /** @class */ (function () {
         if (!container) {
             return;
         }
+        this.renderer.calculateScalingFactor(container.w, container.h);
         var containerHTMLElement = new ContainerRenderer(this.rootContainer, container)
             .render()
             .getHTMLElement();
-        // Forward compatibility
+        // Backward compatibility
         if (!this.ian.gvt) {
             this.ian.gvt = this.ian.cont.getOrigin();
         }

package/dist/renderer/index.js

@@ -1,26 +1,5 @@
-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);
-}

package/dist/renderer/renderer.js

@@ -1,3 +1,4 @@
+import { Constants } from '../constants';
 /**
  * Utility class for creating and rendering elements.
  *
@@ -35,6 +36,24 @@ var Renderer = /** @class */ (function () {
         }
         return document.documentElement.clientHeight;
     };
+    /**
+     * Calculate scaling factor according to parent most container where the in-app's root container will be rendered.
+     *
+     * @param canvasWidth The width of the canvas to render.
+     * @param canvasHeight The height of the canvas to render.
+     */
+    Renderer.prototype.calculateScalingFactor = function (canvasWidth, canvasHeight) {
+        var screenWidth = Renderer.get().getWidth();
+        var screenHeight = Renderer.get().getHeight();
+        var longEdgeOfCanvas = Math.max(canvasWidth, canvasHeight);
+        var shortEdgeOfScreen = Math.min(screenWidth, screenHeight);
+        var scalingFactor = shortEdgeOfScreen / longEdgeOfCanvas;
+        // The in-app should not scale beyond 100%
+        this.scalingFactor = Math.min(scalingFactor, 1);
+    };
+    Renderer.prototype.getScalingFactor = function () {
+        return this.scalingFactor;
+    };
     /**
      * Creates an element
      * @param {string} elementType element type to be created
@@ -77,6 +96,15 @@ var Renderer = /** @class */ (function () {
     Renderer.prototype.setAttribute = function (element, attrName, value) {
         element.setAttribute(attrName, value);
     };
+    /**
+     * Remove InApp trigger.
+     */
+    Renderer.prototype.removeInApp = function () {
+        var rootDiv = document.querySelector("." + Constants.IN_APP_CONTAINER_NAME);
+        if (rootDiv) {
+            rootDiv.parentElement.removeChild(rootDiv);
+        }
+    };
     /**
      * Set the parent most container where the Cooee's In-App's root div will render.
      * @param container The HTML holder element.

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

@@ -1,17 +1,34 @@
+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 { Constants } from '../constants';
-import { Renderer } from './renderer';
 import { ClickActionExecutor } from '../models/trigger/action/click-action-executor';
+import { BlockProcessor } from './block-processor';
 /**
  * Renders root container.
  *
  * @author Abhishek Taparia
  * @version 0.0.5
  */
-var RootContainerRenderer = /** @class */ (function () {
-    function RootContainerRenderer(parent) {
-        this.parent = parent;
-        this.renderer = Renderer.get();
-        this.renderer.setParentContainer(parent);
+var RootContainerRenderer = /** @class */ (function (_super) {
+    __extends(RootContainerRenderer, _super);
+    function RootContainerRenderer(parent, inappElement) {
+        var _this = _super.call(this, parent, inappElement) || this;
+        _this.parent = parent;
+        _this.inappHTMLEl = _this.renderer.createElement('div');
+        return _this;
     }
     /**
      * Render root container.
@@ -19,37 +36,27 @@ var RootContainerRenderer = /** @class */ (function () {
      */
     RootContainerRenderer.prototype.render = function () {
         if (!this.parent) {
-            this.removeInApp();
+            this.renderer.removeInApp();
         }
-        var rootDiv = this.renderer.createElement('div');
-        rootDiv.classList.add(Constants.IN_APP_CONTAINER_NAME);
-        if (this.parent) {
-            this.renderer.setStyle(rootDiv, 'position', 'absolute');
+        this.processBackgroundBlock();
+        this.inappHTMLEl.classList.add(Constants.IN_APP_CONTAINER_NAME);
+        if (this.parent !== document.body) {
+            this.renderer.setStyle(this.inappHTMLEl, 'position', 'absolute');
         }
         else {
-            this.renderer.setStyle(rootDiv, 'position', 'fixed');
+            this.renderer.setStyle(this.inappHTMLEl, 'position', 'fixed');
         }
-        this.renderer.setStyle(rootDiv, 'z-index', '10000000');
-        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(this.parent || document.body, rootDiv);
-        rootDiv.addEventListener('click', function () {
+        this.renderer.setStyle(this.inappHTMLEl, 'z-index', '10000000');
+        this.renderer.setStyle(this.inappHTMLEl, 'top', '0');
+        this.renderer.setStyle(this.inappHTMLEl, 'left', '0');
+        this.renderer.setStyle(this.inappHTMLEl, 'width', '100%');
+        this.renderer.setStyle(this.inappHTMLEl, 'height', '100%');
+        this.insertElement();
+        this.inappHTMLEl.addEventListener('click', function () {
             new ClickActionExecutor({ close: true }).execute();
         });
-        return rootDiv;
-    };
-    // noinspection JSMethodCanBeStatic
-    /**
-     * Remove InApp trigger.
-     */
-    RootContainerRenderer.prototype.removeInApp = function () {
-        var rootDiv = document.querySelector("." + Constants.IN_APP_CONTAINER_NAME);
-        if (rootDiv) {
-            rootDiv.parentElement.removeChild(rootDiv);
-        }
+        return this.inappHTMLEl;
     };
     return RootContainerRenderer;
-}());
+}(BlockProcessor));
 export { RootContainerRenderer };