Merge branch 'release/3.6.0'

Author: BernardGatt

dist/gist.min.js

@@ -1,4 +1,4 @@
-export function resolveMessageProperies(message) {
+export function resolveMessageProperties(message) {
     var elementId = "";
     var routeRule = "";
     var position = "";
@@ -8,6 +8,9 @@ export function resolveMessageProperies(message) {
     var shouldScale = false;
     var campaignId = null;
     var persistent = false;
+    var overlayColor = "#00000033";
+    var messageWidth = 414;
+    var hasCustomWidth = false;
 
     if (message.properties && message.properties.gist) {
         if (message.properties.gist.campaignId) {
@@ -28,6 +31,13 @@ export function resolveMessageProperies(message) {
         if (message.properties.gist.scale) {
             shouldScale = message.properties.gist.scale;
         }
+        if (message.properties.gist.overlayColor) {
+            overlayColor = message.properties.gist.overlayColor;
+        }
+        if (message.properties.gist.messageWidth && message.properties.gist.messageWidth > 0) {
+            messageWidth = message.properties.gist.messageWidth;
+            hasCustomWidth = true;
+        }
         if (message.properties.gist.persistent)
         {
             persistent = true
@@ -42,6 +52,9 @@ export function resolveMessageProperies(message) {
         hasPosition: hasPosition,
         shouldScale: shouldScale,
         campaignId: campaignId,
-        persistent: persistent
+        messageWidth: messageWidth,
+        overlayColor: overlayColor,
+        persistent: persistent,
+        hasCustomWidth: hasCustomWidth
     }
 }

src/managers/gist-properties-manager.js

@@ -1,6 +1,7 @@
 import { log } from "../utilities/log";
 import { v4 as uuidv4 } from 'uuid';
 import { embedMessage } from "./message-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
 const delay = ms => new Promise(res => setTimeout(res, ms));
 
 export function isElementLoaded(elementId) {
@@ -23,13 +24,13 @@ export async function preloadRenderer() {
   embedMessage({messageId: ""}, preloadFrameId);
 }
 
-export function loadEmbedComponent(elementId, url) {
+export function loadEmbedComponent(elementId, url, message) {
   var element = safelyFetchElement(elementId);
   if (element) {
     if (!elementHasHeight(elementId)) {
       element.style.height = "0px";
     }
-    element.innerHTML = embed(url);
+    element.innerHTML = embed(url, message);
   } else {
     log(`Message could not be embedded, elementId ${elementId} not found.`);
   }
@@ -78,8 +79,8 @@ export function resizeComponent(elementId, size, shouldScale) {
   }
 }
 
-export function loadOverlayComponent(url, instanceId) {
-  document.body.insertAdjacentHTML('beforeend', component(url, instanceId));
+export function loadOverlayComponent(url, message) {
+  document.body.insertAdjacentHTML('beforeend', component(url, message));
 }
 
 export function showOverlayComponent(message) {
@@ -115,20 +116,43 @@ export function removeOverlayComponent() {
 }
 
 function showMessage() {
-  var message = document.querySelector("#gist-message");
-  if (message) message.classList.add("visible");
+  var messageElement = document.querySelector("#gist-message");
+  if (messageElement) messageElement.classList.add("visible");
 }
 
-function embed(url) {
+function embed(url, message) {
+  const wideOverlayPositions = ["x-gist-bottom", "x-gist-bottom", "x-gist-floating-top", "x-gist-floating-bottom"];
+  var messageProperties = resolveMessageProperties(message);
+  var maxWidthBreakpoint = 800;
+  if (messageProperties.messageWidth > maxWidthBreakpoint) {
+    maxWidthBreakpoint = messageProperties.messageWidth;
+  }
+
+  var messageWidth = messageProperties.messageWidth + "px";
+  if (wideOverlayPositions.includes(messageProperties.elementId) && !messageProperties.hasCustomWidth) {
+    messageWidth = "100%";
+  }
+
   var template = require("html-loader!../templates/embed.html");
+  template = template.replace("'${topBottomMessageWidth}'", messageWidth);
+  template = template.replace("'${cornersMessageWidth}'", messageWidth);
+  template = template.replace("'${maxWidth}'", maxWidthBreakpoint + "px");
   template = template.replace("${url}", url);
   return template;
 }
 
-function component(url, instanceId) {
+function component(url, message) {
+  var messageProperties = resolveMessageProperties(message);
+  var maxWidthBreakpoint = 600;
+  if (messageProperties.messageWidth > maxWidthBreakpoint) {
+    maxWidthBreakpoint = messageProperties.messageWidth;    
+  }
   var template = require("html-loader!../templates/message.html");
+  template = template.replace("'${messageWidth}'", messageProperties.messageWidth + "px");
+  template = template.replace("'${maxWidth}'", maxWidthBreakpoint + "px");
+  template = template.replace("'${overlayColor}'", messageProperties.overlayColor);
   template = template.replace("${url}", url);
-  template = template.replace("${instanceId}", instanceId);
+  template = template.replace("${instanceId}", message.instanceId);
   return template;
 }
 

src/managers/message-component-manager.js

@@ -15,7 +15,7 @@ import {
   elementHasHeight,
   isElementLoaded
 } from "./message-component-manager";
-import { resolveMessageProperies } from "./gist-properties-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
 import { positions, addPageElement } from "./page-component-manager";
 import { checkMessageQueue } from "./queue-manager";
 
@@ -27,7 +27,7 @@ export async function showMessage(message) {
       log(`Message ${Gist.overlayInstanceId} already showing.`);
       return null;
     } else {
-      var properties = resolveMessageProperies(message)
+      var properties = resolveMessageProperties(message)
       message.instanceId = uuidv4();
       message.overlay = true;
       message.firstLoad = true;
@@ -78,7 +78,7 @@ export async function hideMessage(message) {
 }
 
 export async function removePersistentMessage(message) {
-  var messageProperties = resolveMessageProperies(message);
+  var messageProperties = resolveMessageProperties(message);
   if (message) {
     if (messageProperties.persistent) {
       log(`Persistent message dismissed, logging view`);
@@ -130,9 +130,9 @@ function loadMessageComponent(message, elementId = null) {
 
   if (elementId) {
     if (positions.includes(elementId)) { addPageElement(elementId); }
-    loadEmbedComponent(elementId, url);
+    loadEmbedComponent(elementId, url, message);
   } else {
-    loadOverlayComponent(url, message.instanceId);
+    loadOverlayComponent(url, message);
   }
 
   return message;
@@ -185,7 +185,7 @@ async function handleGistEvents(e) {
     var currentInstanceId = e.data.gist.instanceId;
     var currentMessage = fetchMessageByInstanceId(currentInstanceId);
     if (!currentMessage) { return; }
-    var messageProperties = resolveMessageProperies(currentMessage);
+    var messageProperties = resolveMessageProperties(currentMessage);
     switch (e.data.gist.method) {
       case "routeLoaded": {
         var timeElapsed = (new Date().getTime() - currentMessage.renderStartTime) * 0.001;

src/managers/message-manager.js

@@ -3,7 +3,7 @@ import { log } from "../utilities/log";
 import { getUserToken } from "./user-manager";
 import { getUserQueue } from "../services/queue-service";
 import { showMessage, embedMessage, hasMessageBeenShownBefore } from "./message-manager";
-import { resolveMessageProperies } from "./gist-properties-manager";
+import { resolveMessageProperties } from "./gist-properties-manager";
 import { preloadRenderer } from "./message-component-manager";
 import { setKeyWithExpiryToLocalStore, getKeyFromLocalStore } from '../utilities/local-storage';
 
@@ -54,7 +54,7 @@ async function handleMessage(message) {
     return;
   }
 
-  var messageProperties = resolveMessageProperies(message);
+  var messageProperties = resolveMessageProperties(message);
   if (messageProperties.hasRouteRule) {
     var currentUrl = Gist.currentRoute
     if (currentUrl == null) {

src/managers/queue-manager.js

@@ -10,12 +10,13 @@
       bottom: 0px;
       z-index: 1000000;
     }
-    #x-gist-bottom, #x-gist-bottom, #x-gist-floating-top, #x-gist-floating-bottom {
-      width: 100%;
+    #x-gist-bottom, #x-gist-top, #x-gist-floating-top, #x-gist-floating-bottom {
+      left: 50%;
+      transform: translate(-50%, 0%);
+      width: '${topBottomMessageWidth}';
     }
     #x-gist-floating-top-left, #x-gist-floating-top-right, #x-gist-floating-bottom-left, #x-gist-floating-bottom-right {
-      width: 40%;
-      max-width: 414px;
+      width: '${cornersMessageWidth}';
     }
     #x-gist-floating-top-right, #x-gist-floating-bottom-right {
       right: 0px;
@@ -35,8 +36,8 @@
       width: 100%;
       border: none;
     }
-    @media (max-width: 800px) {
-      #x-gist-floating-top-left, #x-gist-floating-top-right, #x-gist-floating-bottom-left, #x-gist-floating-bottom-right {
+    @media (max-width: '${maxWidth}') {
+      #x-gist-bottom, #x-gist-bottom, #x-gist-floating-top, #x-gist-floating-bottom, #x-gist-floating-top-left, #x-gist-floating-top-right, #x-gist-floating-bottom-left, #x-gist-floating-bottom-right {
         width: 100%;
       }
     }

src/templates/embed.html

@@ -7,7 +7,7 @@
       top: 0;
       width: 100%;
       height: 100%;
-      background-color: rgba(0, 0, 0, .2);
+      background-color: '${overlayColor}';
       visibility: hidden;
     }
     #gist-overlay.background.visible {
@@ -17,7 +17,7 @@
       display: block;
     }
     #gist-message {
-      width: 414px;
+      width: '${messageWidth}';
       position: absolute;
       border: none;
       opacity: 0;
@@ -39,7 +39,7 @@
     #gist-message.top {
       top: 0;
     }
-    @media (max-width: 600px) {
+    @media (max-width: '${maxWidth}') {
       #gist-message {
         width: 100%;
       }