(function() {
- '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) {
- window.alert(`Domain ${window.location.origin} can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`)
- return
+ '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.`);
}
- // Init all URLs
- const remoteURL = new URL('{{{remote}}}')
- const chatOrigin = remoteURL.origin
- const chatPath = '/snippet/'
- const chatStylesPath = chatPath + 'styles/'
- const chatVersion = '{{{chatVersion}}}'
-
- // Style setttings
- const divColor = '<%=div_color%>'
- const textColor = '<%=text_color%>'
- const buttonColor = '<%=button_color%>'
- const backgroungColor = '<%=background_color%>'
- let alignment = "<%=alignment%>";
- let verticalAlignment = "<%=verticalAlignment%>";
-
- // 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
-
- // 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]
-
- 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
- case 'removeItem':
- {
- localStorage.removeItem(key)
- event.source.postMessage(
- {
- action: 'removeItemResult',
- key
- }, event.origin)
- }
- break
- default:
- typeof action === 'string' && console.debug('Unsupported action', action)
- break;
- }
+ } catch (error) {
+ window.alert(`Domain ${window.location.origin} can't load snippet for '{{{chatWebsiteAddressOrigin}}}'. Please check your website domain in the current XCALLY Chat Website settings.`);
+ return;
+ }
+
+ // Init all URLs
+ const remoteURL = new URL('{{{remote}}}');
+ const chatOrigin = remoteURL.origin;
+ const chatPath = '/snippet/';
+ const chatStylesPath = chatPath + 'styles/';
+ const chatVersion = '{{{chatVersion}}}';
+
+ // Style setttings
+ const divColor = '<%=div_color%>';
+ const textColor = '<%=text_color%>';
+ const buttonColor = '<%=button_color%>';
+ const backgroungColor = '<%=background_color%>';
+ let alignment = "<%=alignment%>";
+ let verticalAlignment = "<%=verticalAlignment%>";
+
+ // 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;
+
+ // 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];
+
+ 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;
}
-
- // DOM Manipulation
- let iframe = document.createElement('iframe');
- // Attributes
- iframe['id'] = iframeId;
- iframe['src'] = iframeSrcURL.toString()
-
- let iframe_status = false;
-
- 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);
+ case 'removeItem': {
+ localStorage.removeItem(key);
+ event.source.postMessage(
+ { action: 'removeItemResult', key },
+ event.origin
+ );
+ break;
+ }
+ default:
+ typeof action === 'string' && console.debug('Unsupported action', action);
+ break;
+ }
+ }
+ }
+
+ // DOM Manipulation
+ let iframe = document.createElement('iframe');
+ // Attributes
+ iframe['id'] = iframeId;
+ iframe['src'] = iframeSrcURL.toString()
+
+ let iframe_status = false;
+
+ 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);
+
+ document.head.appendChild(linkMobile);
+ document.body.appendChild(iframe);
+
+ <% 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;
+ <% } -%>
+
+ <% if (alignment == 'right') { -%>
+ // RIGHT
+ topChat_set(iframe_h, verticalAlignment);
+ document.body.appendChild(div_tab);
+ let html = '<div id="chat_tab_arrow"> <strong><</strong> </div> <span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
+ div_tab.innerHTML = html;
- document.head.appendChild(linkMobile);
-
- <% if (alignment == 'bottom_right') { -%> // Bottom, right
- iframe.className = 'motion-chat-iframe-bottom_right';
- verticalAlignment = 0;
- document.body.appendChild(iframe);
-
- <% } 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;
+ 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;
+ }
+ }
- <% } 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 expandChatRight(){
+ appendLink();
+ div_tab.style.right = '295px';
+ iframe.style.right = '0px';
+ document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+ let iframeEl = document.getElementById('motion-chat-iframe');
+ iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
+ }
- <% } -%>
+ function collapseChatRight(){
+ appendLink();
+ div_tab.style.right = '0px';
+ iframe.style.right = '-312px';
+ document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+ let 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 = '<div id="chat_tab_arrow"> <strong><</strong> </div> <span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
- 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 toggleChatExpandedRight(){
+ if (tab_status % 2 === 0) {
+ expandChatRight();
+ }
+ else {
+ collapseChatRight();
+ }
+ tab_status++;
+ }
- function expandChatRight(){
- appendLink()
- div_tab.style.right = '295px';
- iframe.style.right = '0px';
- document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
- let iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
- }
+ 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='<div id="chat_tab_arrow"> <strong>></strong> </div><span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
+ 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 collapseChatRight(){
- appendLink()
- div_tab.style.right = '0px';
- iframe.style.right = '-312px';
- document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
- let iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
- }
+ function expandChatLeft() {
+ appendLink();
+ div_tab.style.left = '295px';
+ iframe.style.left = '0px';
+ document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+ let iframeEl = document.getElementById('motion-chat-iframe');
+ iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
+ }
- function toggleChatExpandedRight(){
- if(tab_status % 2 === 0) {
- expandChatRight()
- }
- else {
- collapseChatRight()
- }
- tab_status++;
- }
+ function collapseChatLeft() {
+ appendLink();
+ div_tab.style.left = '0px';
+ iframe.style.left = '-312px';
+ document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+ let iframeEl = document.getElementById('motion-chat-iframe');
+ iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+ }
- document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
- <% } else if (alignment == 'left') { -%>
- topChat_set(iframe_h, verticalAlignment);
- document.body.appendChild(div_tab);
- let html='<div id="chat_tab_arrow"> <strong>></strong> </div><span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong><%=labelText%></strong></span>';
- div_tab.innerHTML=html;
+ function toggleChatExpandedLeft() {
+ if (tab_status % 2 === 0) {
+ expandChatLeft();
+ }
+ else {
+ collapseChatLeft();
+ }
+ tab_status++;
+ }
+ document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft);
+ <% } -%>
+
+ // 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";
-
- function appendLink(){
- if(iframe_status == false){
- document.body.appendChild(iframe);
- iframe_status=true;
- }
- }
-
- function expandChatLeft(){
- appendLink()
- div_tab.style.left = '295px';
- iframe.style.left = '0px';
- document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
- let 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 = "<strong> > </strong>";
- let iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
- }
-
- function toggleChatExpandedLeft(){
- if(tab_status % 2 === 0) {
- expandChatLeft()
- }
- else {
- collapseChatLeft()
- }
- tab_status++;
- }
-
- document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft);
-
- <% } -%>
-
- // 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';
- // 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 = 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 = "<strong> < </strong>";
- 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 = "<strong> > </strong>";
- 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 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);
+ 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 = "<strong> < </strong>";
+ 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 { height_iframe = 450; }
- return height_iframe;
+ else if (alignment == 'left') {
+ document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+ 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 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;
+ }
+
+ 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 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";
- }
- }
+ 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";
- <% } -%>
+ // hide chat
+ <% if (hideWhenOffline && intervalId != null) { -%>
+ // hide template
+ document.getElementById("motion-chat-iframe-tab").style.display = "none";
+ <% } -%>
}());
\ No newline at end of file
git://repos.xcallymotion.com / motion2.git / blobdiff