X-Git-Url: http://repos.xcallymotion.com/?a=blobdiff_plain;f=server%2Ffiles%2Fchat%2Fiframe.ejs;h=ae77249f94b60e73585738d38501b7f60f4c73da;hb=795c8454f12f8a41fb2cd31a1270c087e5e59e94;hp=d0a41558ea5f8e0174fc2680649a666c00310c31;hpb=c9bea7b5fb8c2c40aa3c8a89531d666691350a10;p=motion2.git diff --git a/server/files/chat/iframe.ejs b/server/files/chat/iframe.ejs index d0a4155..ae77249 100644 --- a/server/files/chat/iframe.ejs +++ b/server/files/chat/iframe.ejs @@ -1,296 +1,420 @@ (function() { - 'use strict'; - var iframe = document.createElement('iframe'); - // Attributes - iframe['id'] = 'motion-chat-iframe'; - iframe['src'] = '{{{remote}}}/snippet?location=' + btoa(window.location.host) + '&version=3.0.0&{{{query}}}'; + 'use strict'; + try { + const chatWebsiteAddress = new URL('{{{chatWebsiteAddressOrigin}}}'); + if (chatWebsiteAddress.origin !== window.location.origin){ + throw new Error(`Domain "${window.location.origin}"" can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`); + } + } catch (error) { + console.warn(`Domain ${window.location.origin} can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`); + return; + } - var alignment="<%=alignment%>"; - var verticalAlignment="<%=verticalAlignment%>"; - var iframe_status = false; + // Init all URLs + const remoteURL = new URL('{{{remote}}}'); + const chatOrigin = remoteURL.origin; + const chatPath = '/snippet/'; + const chatStylesPath = chatPath + 'styles/'; + const chatVersion = '{{{chatVersion}}}'; - document.documentElement.style.setProperty('--xc-ws-div-color', '<%=div_color%>'); - document.documentElement.style.setProperty('--xc-ws-text-color', '<%=text_color%>'); - document.documentElement.style.setProperty('--xc-ws-button_color', '<%=button_color%>'); - document.documentElement.style.setProperty('--xc-ws-background-color', '<%=background_color%>'); - - var link_mobile = document.createElement('link'); - link_mobile.href = '{{{remote}}}/snippet/styles/mobile.css?version=3.0.0'; - link_mobile.rel='stylesheet'; - link_mobile.type = "text/css"; - document.head.appendChild(link_mobile); - <% if (alignment == 'bottom_right') { -%> // Bottom, right - iframe.className = 'motion-chat-iframe-bottom_right'; - verticalAlignment = 0; - document.body.appendChild(iframe); + // Style setttings + const divColor = '<%=div_color%>'; + const textColor = '<%=text_color%>'; + const buttonColor = '<%=button_color%>'; + const backgroungColor = '<%=background_color%>'; + let alignment = "<%=alignment%>"; + let verticalAlignment = "<%=verticalAlignment%>"; - <% } else if (alignment == 'right') { -%> // Right - iframe.className = 'motion-chat-iframe-right'; - iframe.style['top'] = verticalAlignment+'%'; - var iframe_h = topIframe_calc(); - topIframe_set(iframe_h); - var div_tab = document.createElement('div'); - div_tab['id'] = 'motion-chat-iframe-tab'; - div_tab.className = 'motion-chat-div-right'; - var tab_status=0; + // iframe URL settings + const iframeId = 'motion-chat-iframe'; + const iframeSrcURL = new URL(chatPath, chatOrigin); + const iframeSearchParams = new URLSearchParams('{{{query}}}'); + iframeSearchParams.append('version', chatVersion); + iframeSearchParams.append('location', btoa(window.location.host)); + iframeSrcURL.search = iframeSearchParams; - <% } else if (alignment == 'left') { -%> // Left - iframe.className = 'motion-chat-iframe-left'; - iframe.style['top'] = verticalAlignment+'%'; - var iframe_h = topIframe_calc(); - topIframe_set(iframe_h); - var div_tab = document.createElement('div'); - div_tab.className = 'motion-chat-div-left'; - div_tab['id'] ='motion-chat-iframe-tab'; - var tab_status=0; + // Style URL settings + const linkURL = new URL(chatStylesPath + 'mobile.css', chatOrigin); + linkURL.search = new URLSearchParams({ version: chatVersion }); + const linkMobile = document.createElement('link'); + linkMobile.type = "text/css"; + linkMobile.rel='stylesheet'; + linkMobile.href = linkURL.toString(); - <% } -%> + // Iframe localstorage whitelisting + const allowedOrigins = [chatOrigin]; - <% if (alignment == 'right') { -%> // Right - topChat_set(iframe_h, verticalAlignment); - document.body.appendChild(div_tab); - var html = '
<
<%=labelText%>'; - div_tab.innerHTML = html; - - div_tab.style.backgroundColor="<%=div_color%>"; - document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; - document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; - document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; - document.getElementById("motion-chat-iframe-tab").style.display="flex"; - - function appendLink(){ - if(iframe_status == false){ - document.body.appendChild(iframe); - iframe_status=true; - } + function remoteLocalStorageEventHandler(event) { + if (allowedOrigins.includes(event.origin)) { + const { action, key, value } = event.data; + const localStorage = window.localStorage; + switch(action) { + case 'setItem': { + localStorage.setItem(key, JSON.stringify(value)) + event.source.postMessage( + { action: 'setItemResult', key }, + event.origin + ); + break; + } + case 'getItem': { + let item = localStorage.getItem(key); + if (item) { + try { + item = JSON.parse(item); + } catch (error) { + console.error('Cannot read data from localstorage', error); + } + } + event.source.postMessage( + { action: 'getItemResult', key, item }, + event.origin + ); + break; } - - function expandChatRight(){ - appendLink() - div_tab.style.right = '295px'; - iframe.style.right = '0px'; - document.getElementById("chat_tab_arrow").innerHTML = " > "; - var iframeEl = document.getElementById('motion-chat-iframe'); - iframeEl.contentWindow?.postMessage({"evt":"show"}, '*'); + case 'removeItem': { + localStorage.removeItem(key); + event.source.postMessage( + { action: 'removeItemResult', key }, + event.origin + ); + break; } + default: + typeof action === 'string' && console.debug('Unsupported action', action); + break; + } + } + } - function collapseChatRight(){ - appendLink() - div_tab.style.right = '0px'; - iframe.style.right = '-312px'; - document.getElementById("chat_tab_arrow").innerHTML = " < "; - var iframeEl = document.getElementById('motion-chat-iframe'); - iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); - } + // DOM Manipulation + let iframe = document.createElement('iframe'); + // Attributes + iframe['id'] = iframeId; + iframe['src'] = iframeSrcURL.toString() - function toggleChatExpandedRight(){ - if(tab_status % 2 === 0) { - expandChatRight() - } - else { - collapseChatRight() - } - tab_status++; - } + let iframe_status = false; - document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight); - <% } else if (alignment == 'left') { -%> - topChat_set(iframe_h, verticalAlignment); - document.body.appendChild(div_tab); - var html='
>
<%=labelText%>'; - div_tab.innerHTML=html; + document.documentElement.style.setProperty('--xc-ws-div-color', divColor); + document.documentElement.style.setProperty('--xc-ws-text-color', textColor); + document.documentElement.style.setProperty('--xc-ws-button-color', buttonColor); + document.documentElement.style.setProperty('--xc-ws-background-color', backgroungColor); - div_tab.style.backgroundColor="<%=div_color%>"; - document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; - document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; - document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; - document.getElementById("motion-chat-iframe-tab").style.display="flex"; + document.head.appendChild(linkMobile); + document.body.appendChild(iframe); - function appendLink(){ - if(iframe_status == false){ - document.body.appendChild(iframe); - iframe_status=true; - } - } + <% if (alignment == 'bottom_right') { -%> + // Bottom, right + iframe.className = 'motion-chat-iframe-bottom_right'; + verticalAlignment = 0; + <% } else if (alignment == 'right') { -%> + // Right + iframe.className = 'motion-chat-iframe-right'; + iframe.style['top'] = verticalAlignment+'%'; + let iframe_h = topIframe_calc(); + topIframe_set(iframe_h); + let div_tab = document.createElement('div'); + div_tab['id'] = 'motion-chat-iframe-tab'; + div_tab.className = 'motion-chat-div-right'; + let tab_status=0; + <% } else if (alignment == 'left') { -%> + // Left + iframe.className = 'motion-chat-iframe-left'; + iframe.style['top'] = verticalAlignment+'%'; + let iframe_h = topIframe_calc(); + topIframe_set(iframe_h); + let div_tab = document.createElement('div'); + div_tab.className = 'motion-chat-div-left'; + div_tab['id'] ='motion-chat-iframe-tab'; + let tab_status=0; + <% } -%> - function expandChatLeft(){ - appendLink() - div_tab.style.left = '295px'; - iframe.style.left = '0px'; - document.getElementById("chat_tab_arrow").innerHTML = " < "; - var iframeEl = document.getElementById('motion-chat-iframe'); - iframeEl.contentWindow?.postMessage({"evt":"show"}, '*'); - } - - function collapseChatLeft(){ - appendLink() - div_tab.style.left = '0px'; - iframe.style.left = '-312px'; - document.getElementById("chat_tab_arrow").innerHTML = " > "; - var iframeEl = document.getElementById('motion-chat-iframe'); - iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); - } + <% if (alignment == 'right') { -%> + // RIGHT + topChat_set(iframe_h, verticalAlignment); + document.body.appendChild(div_tab); + let html = '
<
<%=labelText%>'; + div_tab.innerHTML = html; + + div_tab.style.backgroundColor = divColor; + document.getElementById("chat_tab_text").style.color = textColor; + document.getElementById("chat_tab_arrow").style.color = divColor; + document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; + document.getElementById("motion-chat-iframe-tab").style.display = "flex"; + + function appendLink(){ + if(iframe_status == false){ + document.body.appendChild(iframe); + iframe_status=true; + } + } - function toggleChatExpandedLeft(){ - if(tab_status % 2 === 0) { - expandChatLeft() - } - else { - collapseChatLeft() - } - tab_status++; - } + function expandChatRight(){ + appendLink(); + div_tab.style.right = '295px'; + iframe.style.right = '0px'; + document.getElementById("chat_tab_arrow").innerHTML = " > "; + let iframeEl = document.getElementById('motion-chat-iframe'); + iframeEl.contentWindow?.postMessage({"evt":"show"}, '*'); + } - document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); + function collapseChatRight(){ + appendLink(); + div_tab.style.right = '0px'; + iframe.style.right = '-312px'; + document.getElementById("chat_tab_arrow").innerHTML = " < "; + let iframeEl = document.getElementById('motion-chat-iframe'); + iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); + } - <% } -%> + function toggleChatExpandedRight(){ + if (tab_status % 2 === 0) { + expandChatRight(); + } + else { + collapseChatRight(); + } + tab_status++; + } - // START Events management - window.addEventListener('message', function(evt) { - switch (evt.data.cmd) { - case 'show': - <% if (alignment == 'bottom_right') { -%> // Bottom, right - iframe.style.top = 'auto'; - iframe.style.bottom = '0px'; - <% } else if (alignment == 'right') { -%> // Right - iframe.style.right = '0px'; - div_tab.style.right = '295px'; - <% } else if (alignment == 'left') { -%> // Left - iframe.style.left = '0px'; - div_tab.style.left = '295px'; - // Left - <% } -%> break; - case 'hide': - <% if (alignment == 'bottom_right') { -%> // Bottom, right - iframe.style.top = 'calc(100% - 50px)'; - <% } else if (alignment == 'right') { -%> // Right - iframe.style.right = '-312px'; - div_tab.style['right'] = '0px'; - <% } else if (alignment == 'left') { -%> // Left - iframe.style.left = '-312px'; - div_tab.style.left = '0px'; - <% } -%> break; - case "init": - <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right - div_tab.style.backgroundColor="<%=div_color%>"; - document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; - document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; - document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; - document.getElementById("motion-chat-iframe-tab").style.display="flex"; - <% } -%> break; - case "offline": - <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right - document.getElementById("motion-chat-iframe-tab").style.display="none"; - <% } -%> break; - default: - } + document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight); + <% } else if (alignment == 'left') { -%> + // LEFT + topChat_set(iframe_h, verticalAlignment); + document.body.appendChild(div_tab); + let html='
>
<%=labelText%>'; + div_tab.innerHTML = html; - }, false); - // END Events management + div_tab.style.backgroundColor = divColor; + document.getElementById("chat_tab_text").style.color = textColor; + document.getElementById("chat_tab_arrow").style.color = divColor; + document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; + document.getElementById("motion-chat-iframe-tab").style.display="flex"; - // START Proactive action management - <% proactiveActions.forEach(function(action, index) { -%> <% if (action.type == 'timeout') { -%> - setTimeout(function() { - <% if (alignment == 'right') { -%> expandChatRight(); - tab_status++; - <% } else if (alignment == 'left') { -%> - expandChatLeft(); - tab_status++; - <% } else { -%> - iframe.style.bottom = '0px'; - iframe.contentWindow?.postMessage({ - evt: 'show' - }, '*'); - <% } -%> - }, <%- action.timeout %> * 1000); - <% } -%> <% if (action.type == 'mouseOver') { -%> var elements<%- index %> = document.querySelectorAll("<%- action.selector %>"); - for (var i = 0; i < elements<%- index %>.length; i++) { - elements<%- index %>[i].onmouseover = function() { - <% if (alignment == 'right') { -%> expandChatRight(); - tab_status++; - <% } else if (alignment == 'left') { -%> - expandChatLeft(); - tab_status++; - <% } else { -%> - iframe.style.bottom = '0px'; - iframe.contentWindow?.postMessage({ - evt: 'show' - }, '*'); - <% } -%> - } + function appendLink() { + if (iframe_status == false){ + document.body.appendChild(iframe); + iframe_status=true; + } } - <% } -%> <% }); -%> // END Proactive action management - - if (window.DeviceOrientationEvent) { - window.addEventListener('orientationchange', function() { - if (alignment == 'right'){ - document.getElementById("chat_tab_arrow").innerHTML = " < "; - var iframeEl = document.getElementById('motion-chat-iframe'); - iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); - tab_status = 0; - iframe_h = topIframe_calc(); - topIframe_set(iframe_h); - if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment); - } - else if (alignment == 'left'){ - document.getElementById("chat_tab_arrow").innerHTML = " > "; - var iframeEl = document.getElementById('motion-chat-iframe'); - iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); - tab_status = 0; - iframe_h = topIframe_calc(); - topIframe_set(iframe_h); - if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment); - } }, false); + function expandChatLeft() { + appendLink(); + div_tab.style.left = '295px'; + iframe.style.left = '0px'; + document.getElementById("chat_tab_arrow").innerHTML = " < "; + let iframeEl = document.getElementById('motion-chat-iframe'); + iframeEl.contentWindow?.postMessage({"evt":"show"}, '*'); } - window.addEventListener("resize", function(event) { - var iframe_h = topIframe_calc(); - topIframe_set(iframe_h); - if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment); - }); + function collapseChatLeft() { + appendLink(); + div_tab.style.left = '0px'; + iframe.style.left = '-312px'; + document.getElementById("chat_tab_arrow").innerHTML = " > "; + let iframeEl = document.getElementById('motion-chat-iframe'); + iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); + } - function topIframe_calc(){ - var height_iframe - var heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); - var iframeT = ((heightD/100)*verticalAlignment) + 450; - if (heightD < iframeT) { - height_iframe = 450 - (iframeT - heightD); + function toggleChatExpandedLeft() { + if (tab_status % 2 === 0) { + expandChatLeft(); } - else { height_iframe = 450; } - return height_iframe; + else { + collapseChatLeft(); + } + tab_status++; } - function topIframe_set(height_iframe){ - if( height_iframe > 340){ - iframe.style['height'] = height_iframe +'px'; - if (alignment == "right" || alignment == "left" ) - { iframe.style['top'] = verticalAlignment + "%"; } - else{ iframe.style['bottom'] = "0%"; } + document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); + <% } -%> - } - else { - iframe.style['height'] = '340px'; - if (alignment == "right" || alignment == "left" ) - { iframe.style['top'] = "calc(100% - 340px)"; } - else{ iframe.style['bottom'] = "0%"; } + // START Events management + window.addEventListener( + 'message', + function(evt) { + remoteLocalStorageEventHandler(evt) + switch (evt.data.cmd) { + case 'show': + <% if (alignment == 'bottom_right') { -%> + // Bottom, right + iframe.style.top = 'auto'; + iframe.style.bottom = '0px'; + <% } else if (alignment == 'right') { -%> + // Right + iframe.style.right = '0px'; + div_tab.style.right = '295px'; + <% } else if (alignment == 'left') { -%> + // Left + iframe.style.left = '0px'; + div_tab.style.left = '295px'; + <% } -%> + break; + case 'hide': + <% if (alignment == 'bottom_right') { -%> + // Bottom, right + iframe.style.top = 'calc(100% - 50px)'; + <% } else if (alignment == 'right') { -%> + // Right + iframe.style.right = '-312px'; + div_tab.style['right'] = '0px'; + <% } else if (alignment == 'left') { -%> + // Left + iframe.style.left = '-312px'; + div_tab.style.left = '0px'; + <% } -%> + break; + case "init": + <% if (alignment == 'right' || alignment == 'left') { -%> + // Bottom, right + div_tab.style.backgroundColor = divColor; + document.getElementById("chat_tab_text").style.color = textColor; + document.getElementById("chat_tab_arrow").style.color = divColor; + document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; + document.getElementById("motion-chat-iframe-tab").style.display = "flex"; + <% } -%> + break; + case "offline": + <% if (alignment == 'right' || alignment == 'left') { -%> + // Bottom, right + document.getElementById("motion-chat-iframe-tab").style.display = "none"; + <% } -%> + break; + default: + } + }, + false + ); + // END Events management + // START Proactive action management + <% proactiveActions.forEach(function(action, index) { -%> + <% if (action.type == 'timeout') { -%> + setTimeout(function() { + <% if (alignment == 'right') { -%> + expandChatRight(); + tab_status++; + <% } else if (alignment == 'left') { -%> + expandChatLeft(); + tab_status++; + <% } else { -%> + iframe.style.bottom = '0px'; + iframe.contentWindow?.postMessage({ + evt: 'show' + }, '*'); + <% } -%> + }, <%- action.timeout %> * 1000); + <% } -%> + <% if (action.type == 'mouseOver') { -%> + let elements<%- index %> = document.querySelectorAll("<%- action.selector %>"); + for (let i = 0; i < elements<%- index %>.length; i++) { + elements<%- index %>[i].onmouseover = function() { + <% if (alignment == 'right') { -%> + expandChatRight(); + tab_status++; + <% } else if (alignment == 'left') { -%> + expandChatLeft(); + tab_status++; + <% } else { -%> + iframe.style.bottom = '0px'; + iframe.contentWindow?.postMessage({ + evt: 'show' + }, '*'); + <% } -%> + } + } + <% } -%> <% }); -%> + // END Proactive action management + + if (window.DeviceOrientationEvent) { + window.addEventListener( + 'orientationchange', + function() { + if (alignment == 'right') { + document.getElementById("chat_tab_arrow").innerHTML = " < "; + let iframeEl = document.getElementById('motion-chat-iframe'); + iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); + tab_status = 0; + iframe_h = topIframe_calc(); + topIframe_set(iframe_h); + if (typeof div_tab != "undefined") { + topChat_set(iframe_h, verticalAlignment); + } } + else if (alignment == 'left') { + document.getElementById("chat_tab_arrow").innerHTML = " > "; + let iframeEl = document.getElementById('motion-chat-iframe'); + iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*'); + tab_status = 0; + iframe_h = topIframe_calc(); + topIframe_set(iframe_h); + if (typeof div_tab != "undefined") { + topChat_set(iframe_h, verticalAlignment); + } + } + }, + false + ); + } + + window.addEventListener( + "resize", + function(event) { + let iframe_h = topIframe_calc(); + topIframe_set(iframe_h); + if(typeof div_tab != "undefined") { + topChat_set(iframe_h, verticalAlignment); } - - function topChat_set(height_iframe, verticalAlignment){ - - if( height_iframe > 340){ - div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)"; - } - else { - div_tab.style['top'] = "auto"; - div_tab.style['bottom'] = "0px"; - } } + ); + + function topIframe_calc(){ + let height_iframe + let heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); + let iframeT = ((heightD/100)*verticalAlignment) + 450; + if (heightD < iframeT) { + height_iframe = 450 - (iframeT - heightD); + } + else { + height_iframe = 450; + } + return height_iframe; + } - <% if (hideWhenOffline && interval != null) { -%> // hide template - document.getElementById("motion-chat-iframe-tab").style.display="none"; - <% } -%> + function topIframe_set(height_iframe) { + if (height_iframe > 340) { + iframe.style['height'] = height_iframe +'px'; + if (alignment == "right" || alignment == "left") { + iframe.style['top'] = verticalAlignment + "%"; + } + else { + iframe.style['bottom'] = "0%"; + } + } + else { + iframe.style['height'] = '340px'; + if (alignment == "right" || alignment == "left") { + iframe.style['top'] = "calc(100% - 340px)"; + } + else { + iframe.style['bottom'] = "0%"; + } + } + } + + function topChat_set(height_iframe, verticalAlignment) { + if (height_iframe > 340) { + div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)"; + } + else { + div_tab.style['top'] = "auto"; + div_tab.style['bottom'] = "0px"; + } + } + // hide chat + <% if (hideWhenOffline && intervalId != null) { -%> + // hide template + document.getElementById("motion-chat-iframe-tab").style.display = "none"; + <% } -%> }()); \ No newline at end of file