-(function(global) {
+(function() {
'use strict';
var iframe = document.createElement('iframe');
// Attributes
iframe['id'] = 'motion-chat-iframe';
- iframe['src'] = '{{{remote}}}/snippet?location=' + btoa(window.location.host) + '&version=1.0.16&{{{query}}}';
+ iframe['src'] = '{{{remote}}}/snippet?location=' + btoa(window.location.host) + '&version=3.0.0&{{{query}}}';
- var alignment="<%=alignment%>";
- var verticalAlignment="<%=verticalAlignment%>";
+ var alignment="<%=alignment%>";
+ var verticalAlignment="<%=verticalAlignment%>";
- var iframe_status = false;
+ var iframe_status = false;
+
+ 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=1.0.16';
+ 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;
- iframe.appendChild(link_mobile);
document.body.appendChild(iframe);
<% } else if (alignment == 'right') { -%> // Right
iframe.className = 'motion-chat-iframe-right';
iframe.style['top'] = verticalAlignment+'%';
- var iframe_h = topIframe_calc();
+ var iframe_h = topIframe_calc();
topIframe_set(iframe_h);
- var div_tab = document.createElement('div');
+ var div_tab = document.createElement('div');
div_tab['id'] = 'motion-chat-iframe-tab';
div_tab.className = 'motion-chat-div-right';
- var tab_status=0;
+ var tab_status=0;
<% } else if (alignment == 'left') { -%> // Left
iframe.className = 'motion-chat-iframe-left';
iframe.style['top'] = verticalAlignment+'%';
- var iframe_h = topIframe_calc();
+ var iframe_h = topIframe_calc();
topIframe_set(iframe_h);
- var div_tab = document.createElement('div');
+ var div_tab = document.createElement('div');
div_tab.className = 'motion-chat-div-left';
div_tab['id'] ='motion-chat-iframe-tab';
- var tab_status=0;
+ var tab_status=0;
<% } -%>
- <% if (alignment == 'right') { -%> // Bottom, right
+ <% if (alignment == 'right') { -%> // Right
topChat_set(iframe_h, verticalAlignment);
document.body.appendChild(div_tab);
- var html = '<div id="chat_tab_arrow"> <strong><</strong> </div> <span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong> CHAT </strong></span>';
+ var html = '<div id="chat_tab_arrow"> <strong><</strong> </div> <span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong> CHAT </strong></span>';
div_tab.innerHTML = html;
- div_tab.appendChild(link_mobile);
- chat_tab_text.appendChild(link_mobile);
- chat_tab_arrow.appendChild(link_mobile);
- <% 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="block";
- <% } -%>
-
- document.getElementById("motion-chat-iframe-tab").addEventListener("click", function(){
+
+ 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){
-
- iframe.appendChild(link_mobile);
document.body.appendChild(iframe);
iframe_status=true;
- }
- if(tab_status%2==0) {
- div_tab.style.right = '295px';
- iframe.style.right = '0px';
- document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
- var iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow.postMessage({"evt":"show"}, '*');
+ }
+ }
+
+ function expandChatRight(){
+ appendLink()
+ div_tab.style.right = '295px';
+ iframe.style.right = '0px';
+ document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+ var 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>";
+ var iframeEl = document.getElementById('motion-chat-iframe');
+ iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+ }
+
+ function toggleChatExpandedRight(){
+ if(tab_status % 2 === 0) {
+ expandChatRight()
}
else {
- div_tab.style.right = '0px';
- iframe.style.right = '-312px';
- document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
- var iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow.postMessage({"evt":"hide"}, '*');
+ collapseChatRight()
}
tab_status++;
- });
+ }
+
+ 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='<div id="chat_tab_arrow"> <strong>></strong> </div><span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong> CHAT </strong></span>';
+ var html='<div id="chat_tab_arrow"> <strong>></strong> </div><span id="chat_tab_text" style="writing-mode: tb-rl; transform: rotate(-180deg);" flex><strong> CHAT </strong></span>';
div_tab.innerHTML=html;
- div_tab.appendChild(link_mobile);
- chat_tab_text.appendChild(link_mobile);
- chat_tab_arrow.appendChild(link_mobile);
- <% 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="block";
- <% } -%>
- document.getElementById("motion-chat-iframe-tab").addEventListener("click", function(){
-
+ 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){
-
- iframe.appendChild(link_mobile);
document.body.appendChild(iframe);
iframe_status=true;
}
+ }
- if(tab_status%2==0) {
- div_tab.style.left = '295px';
- iframe.style.left = '0px';
- document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
- var iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow.postMessage({"evt":"show"}, '*');
+ function expandChatLeft(){
+ appendLink()
+ div_tab.style.left = '295px';
+ iframe.style.left = '0px';
+ document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+ 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 = "<strong> > </strong>";
+ var iframeEl = document.getElementById('motion-chat-iframe');
+ iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+ }
+
+ function toggleChatExpandedLeft(){
+ if(tab_status % 2 === 0) {
+ expandChatLeft()
}
else {
-
- div_tab.style.left = '0px';
- iframe.style.left = '-312px';
- document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
- var iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow.postMessage({"evt":"hide"}, '*');
+ collapseChatLeft()
}
tab_status++;
- });
+ }
+
+ document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft);
<% } -%>
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="block";
+ document.getElementById("motion-chat-iframe-tab").style.display="flex";
<% } -%> break;
case "offline":
<% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
// END Events management
// START Proactive action management
- <% proactiveActions.forEach(function(action) { -%> <% if (action.type == 'timeout') { -%> setTimeout(function() {
+ <% 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({
+ iframe.contentWindow?.postMessage({
evt: 'show'
}, '*');
+ <% } -%>
}, <%- action.timeout %> * 1000);
- <% } -%> <% if (action.type == 'mouseOver') { -%> var elements = document.querySelectorAll("<%- action.selector %>");
- for (var i = 0; i < elements.length; i++) {
- elements[i].onmouseover = function() {
+ <% } -%> <% 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({
+ iframe.contentWindow?.postMessage({
evt: 'show'
}, '*');
+ <% } -%>
}
}
- <% } -%> <% }); -%> // END Proactive action management
+ <% } -%> <% }); -%> // END Proactive action management
if (window.DeviceOrientationEvent) {
window.addEventListener('orientationchange', function() {
if (alignment == 'right'){
document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
- var iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow.postMessage({"evt":"hide"}, '*');
+ var iframeEl = document.getElementById('motion-chat-iframe');
+ iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
tab_status = 0;
iframe_h = topIframe_calc();
topIframe_set(iframe_h);
}
else if (alignment == 'left'){
document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
- var iframeEl = document.getElementById('motion-chat-iframe');
- iframeEl.contentWindow.postMessage({"evt":"hide"}, '*');
+ var iframeEl = document.getElementById('motion-chat-iframe');
+ iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
tab_status = 0;
iframe_h = topIframe_calc();
topIframe_set(iframe_h);
}
window.addEventListener("resize", function(event) {
- var iframe_h = topIframe_calc();
+ var iframe_h = topIframe_calc();
topIframe_set(iframe_h);
if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
});
function topIframe_calc(){
- var heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
- var iframeT = ((heightD/100)*verticalAlignment) + 450;
+ var height_iframe
+ var heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+ var iframeT = ((heightD/100)*verticalAlignment) + 450;
if (heightD < iframeT) {
- var height_iframe = 450 - (iframeT - heightD);
-
+ height_iframe = 450 - (iframeT - heightD);
}
else { height_iframe = 450; }
return height_iframe;
git://repos.xcallymotion.com / motion2.git / blobdiff