From 54bbc3e0b95483b2f7d9afeff99c5470735c2674 Mon Sep 17 00:00:00 2001 From: Bernard Gatt Date: Tue, 25 Feb 2025 11:13:02 +0100 Subject: [PATCH 1/2] Added exitClick handling --- src/managers/gist-properties-manager.js | 6 ++++++ src/managers/message-component-manager.js | 15 +++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/src/managers/gist-properties-manager.js b/src/managers/gist-properties-manager.js index 7f543e0..3e36de8 100644 --- a/src/managers/gist-properties-manager.js +++ b/src/managers/gist-properties-manager.js @@ -8,6 +8,7 @@ export function resolveMessageProperties(message) { var shouldScale = false; var campaignId = null; var persistent = false; + var exitClick = false; var overlayColor = "#00000033"; var messageWidth = 414; var hasCustomWidth = false; @@ -42,6 +43,10 @@ export function resolveMessageProperties(message) { { persistent = true } + if (message.properties.gist.exitClick) + { + exitClick = true + } } return { isEmbedded: isEmbedded, @@ -55,6 +60,7 @@ export function resolveMessageProperties(message) { messageWidth: messageWidth, overlayColor: overlayColor, persistent: persistent, + exitClick: exitClick, hasCustomWidth: hasCustomWidth } } \ No newline at end of file diff --git a/src/managers/message-component-manager.js b/src/managers/message-component-manager.js index 10560da..2f5e843 100644 --- a/src/managers/message-component-manager.js +++ b/src/managers/message-component-manager.js @@ -1,3 +1,4 @@ +import Gist from '../gist'; import { log } from "../utilities/log"; import { v4 as uuidv4 } from 'uuid'; import { embedMessage } from "./message-manager"; @@ -5,6 +6,7 @@ import { resolveMessageProperties } from "./gist-properties-manager"; import { embedHTMLTemplate } from "../templates/embed"; import { messageHTMLTemplate } from "../templates/message"; import { positions } from "./page-component-manager"; + const delay = ms => new Promise(res => setTimeout(res, ms)); const wideOverlayPositions = ["x-gist-top", "x-gist-bottom", "x-gist-floating-top", "x-gist-floating-bottom"]; @@ -118,6 +120,7 @@ function sendOptionsToIframe(iframeId, options) { } export function showOverlayComponent(message) { + var messageProperties = resolveMessageProperties(message); var mainMessageElement = document.querySelector("#gist-overlay"); if (mainMessageElement) { mainMessageElement.classList.add("visible"); @@ -128,11 +131,23 @@ export function showOverlayComponent(message) { messageElement.classList.add("center"); } setTimeout(showMessage, 100); + // If exitClick is set to true, we add a dismiss listener after a 1-second delay to prevent accidental dismissals. + if (messageProperties.exitClick) { setTimeout(() => addDismissListener(message.instanceId), 1000); } } else { removeOverlayComponent(); } } +function addDismissListener(instanceId) { + // We check if the overlay is still active before adding the dismiss listener + var mainMessageElement = document.querySelector("#gist-overlay"); + if (mainMessageElement) { + mainMessageElement.addEventListener("click", function() { + Gist.dismissMessage(instanceId); + }); + } +} + export async function hideOverlayComponent() { var message = document.querySelector(".gist-message"); if (message) { From 2f3edbdaece54891e65b3e41c77f113ebb974d49 Mon Sep 17 00:00:00 2001 From: Bernard Gatt Date: Tue, 25 Feb 2025 18:19:32 +0100 Subject: [PATCH 2/2] Addresses PR feedback. --- src/managers/gist-properties-manager.js | 94 +++++++++---------------- 1 file changed, 32 insertions(+), 62 deletions(-) diff --git a/src/managers/gist-properties-manager.js b/src/managers/gist-properties-manager.js index 3e36de8..134ec65 100644 --- a/src/managers/gist-properties-manager.js +++ b/src/managers/gist-properties-manager.js @@ -1,66 +1,36 @@ export function resolveMessageProperties(message) { - var elementId = ""; - var routeRule = ""; - var position = ""; - var isEmbedded = false; - var hasRouteRule = false; - var hasPosition = false; - var shouldScale = false; - var campaignId = null; - var persistent = false; - var exitClick = false; - var overlayColor = "#00000033"; - var messageWidth = 414; - var hasCustomWidth = false; + const defaults = { + isEmbedded: false, + elementId: "", + hasRouteRule: false, + routeRule: "", + position: "", + hasPosition: false, + shouldScale: false, + campaignId: null, + messageWidth: 414, + overlayColor: "#00000033", + persistent: false, + exitClick: false, + hasCustomWidth: false + }; + + const gist = message?.properties?.gist; + if (!gist) return defaults; - if (message.properties && message.properties.gist) { - if (message.properties.gist.campaignId) { - campaignId = message.properties.gist.campaignId; - } - if (message.properties.gist.elementId) { - elementId = message.properties.gist.elementId; - isEmbedded = true; - } - if (message.properties.gist.routeRuleWeb) { - routeRule = message.properties.gist.routeRuleWeb; - hasRouteRule = true; - } - if (message.properties.gist.position) { - position = message.properties.gist.position; - hasPosition = true; - } - 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 - } - if (message.properties.gist.exitClick) - { - exitClick = true - } - } return { - isEmbedded: isEmbedded, - elementId: elementId, - hasRouteRule: hasRouteRule, - routeRule: routeRule, - position: position, - hasPosition: hasPosition, - shouldScale: shouldScale, - campaignId: campaignId, - messageWidth: messageWidth, - overlayColor: overlayColor, - persistent: persistent, - exitClick: exitClick, - hasCustomWidth: hasCustomWidth - } + isEmbedded: !!gist.elementId, + elementId: gist.elementId || "", + hasRouteRule: !!gist.routeRuleWeb, + routeRule: gist.routeRuleWeb || "", + position: gist.position || "", + hasPosition: !!gist.position, + shouldScale: !!gist.scale, + campaignId: gist.campaignId ?? null, + messageWidth: gist.messageWidth > 0 ? gist.messageWidth : defaults.messageWidth, + hasCustomWidth: gist.messageWidth > 0, + overlayColor: gist.overlayColor || defaults.overlayColor, + persistent: !!gist.persistent, + exitClick: !!gist.exitClick + }; } \ No newline at end of file