server/files/chat/iframe.ejs

   1 (function() {
   2     'use strict';
   3     var iframe = document.createElement('iframe');
   4     // Attributes
   5     iframe['id'] = 'motion-chat-iframe';
   6     iframe['src'] = '{{{remote}}}/snippet?location=' + btoa(window.location.host) + '&version=3.0.0&{{{query}}}';
   7
   8     var  alignment="<%=alignment%>";
   9     var  verticalAlignment="<%=verticalAlignment%>";
  10     var  iframe_status = false;
  11
  12     document.documentElement.style.setProperty('--xc-ws-div-color', '<%=div_color%>');
  13     document.documentElement.style.setProperty('--xc-ws-text-color', '<%=text_color%>');
  14     document.documentElement.style.setProperty('--xc-ws-button_color', '<%=button_color%>');
  15     document.documentElement.style.setProperty('--xc-ws-background-color', '<%=background_color%>');
  16
  17     var link_mobile = document.createElement('link');
  18     link_mobile.href = '{{{remote}}}/snippet/styles/mobile.css?version=3.0.0';
  19     link_mobile.rel='stylesheet';
  20     link_mobile.type = "text/css";
  21     document.head.appendChild(link_mobile);
  22    <% if (alignment == 'bottom_right') { -%> // Bottom, right
  23         iframe.className = 'motion-chat-iframe-bottom_right';
  24         verticalAlignment = 0;
  25         document.body.appendChild(iframe);
  26
  27     <% } else if (alignment == 'right') { -%> // Right
  28         iframe.className = 'motion-chat-iframe-right';
  29         iframe.style['top'] = verticalAlignment+'%';
  30         var  iframe_h = topIframe_calc();
  31         topIframe_set(iframe_h);
  32         var  div_tab = document.createElement('div');
  33         div_tab['id'] = 'motion-chat-iframe-tab';
  34         div_tab.className = 'motion-chat-div-right';
  35         var  tab_status=0;
  36
  37     <% } else if (alignment == 'left') { -%> // Left
  38         iframe.className = 'motion-chat-iframe-left';
  39         iframe.style['top'] = verticalAlignment+'%';
  40         var  iframe_h = topIframe_calc();
  41         topIframe_set(iframe_h);
  42         var  div_tab = document.createElement('div');
  43          div_tab.className = 'motion-chat-div-left';
  44          div_tab['id'] ='motion-chat-iframe-tab';
  45          var  tab_status=0;
  46
  47     <% } -%>
  48
  49     <% if (alignment == 'right') { -%> // Right
  50         topChat_set(iframe_h, verticalAlignment);
  51         document.body.appendChild(div_tab);
  52         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><%=labelText%></strong></span>';
  53         div_tab.innerHTML = html;
  54
  55         div_tab.style.backgroundColor="<%=div_color%>";
  56         document.getElementById("chat_tab_text").style.color= "<%=text_color%>";
  57         document.getElementById("chat_tab_arrow").style.color="<%=div_color%>";
  58         document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>";
  59         document.getElementById("motion-chat-iframe-tab").style.display="flex";
  60
  61         function appendLink(){
  62             if(iframe_status == false){
  63                 document.body.appendChild(iframe);
  64                 iframe_status=true;
  65             }
  66         }
  67
  68         function expandChatRight(){
  69             appendLink()
  70             div_tab.style.right = '295px';
  71             iframe.style.right = '0px';
  72             document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
  73             var iframeEl = document.getElementById('motion-chat-iframe');
  74             iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
  75         }
  76
  77         function collapseChatRight(){
  78             appendLink()
  79             div_tab.style.right = '0px';
  80             iframe.style.right = '-312px';
  81             document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
  82             var iframeEl = document.getElementById('motion-chat-iframe');
  83             iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
  84         }
  85
  86         function toggleChatExpandedRight(){
  87             if(tab_status % 2 === 0) {
  88                 expandChatRight()
  89             }
  90             else {
  91                 collapseChatRight()
  92             }
  93             tab_status++;
  94         }
  95
  96         document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
  97     <% } else if (alignment == 'left') { -%>
  98         topChat_set(iframe_h, verticalAlignment);
  99         document.body.appendChild(div_tab);
 100         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><%=labelText%></strong></span>';
 101         div_tab.innerHTML=html;
 102
 103         div_tab.style.backgroundColor="<%=div_color%>";
 104         document.getElementById("chat_tab_text").style.color= "<%=text_color%>";
 105         document.getElementById("chat_tab_arrow").style.color="<%=div_color%>";
 106         document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>";
 107         document.getElementById("motion-chat-iframe-tab").style.display="flex";
 108
 109         function appendLink(){
 110             if(iframe_status == false){
 111                 document.body.appendChild(iframe);
 112                 iframe_status=true;
 113             }
 114         }
 115
 116         function expandChatLeft(){
 117             appendLink()
 118             div_tab.style.left = '295px';
 119             iframe.style.left = '0px';
 120             document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
 121             var iframeEl = document.getElementById('motion-chat-iframe');
 122             iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
 123         }
 124
 125         function collapseChatLeft(){
 126             appendLink()
 127             div_tab.style.left = '0px';
 128             iframe.style.left = '-312px';
 129             document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
 130             var iframeEl = document.getElementById('motion-chat-iframe');
 131             iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
 132         }
 133
 134         function toggleChatExpandedLeft(){
 135             if(tab_status % 2 === 0) {
 136                 expandChatLeft()
 137             }
 138             else {
 139                 collapseChatLeft()
 140             }
 141             tab_status++;
 142         }
 143
 144         document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft);
 145
 146         <% } -%>
 147
 148     // START Events management
 149     window.addEventListener('message', function(evt) {
 150         switch (evt.data.cmd) {
 151             case 'show':
 152                 <% if (alignment == 'bottom_right') { -%> // Bottom, right
 153                     iframe.style.top = 'auto';
 154                     iframe.style.bottom = '0px';
 155                 <% } else if (alignment == 'right') { -%> // Right
 156                     iframe.style.right = '0px';
 157                     div_tab.style.right = '295px';
 158                 <% } else if (alignment == 'left') { -%> // Left
 159                     iframe.style.left = '0px';
 160                     div_tab.style.left = '295px';
 161                 // Left
 162                 <% } -%>                break;
 163             case 'hide':
 164                 <% if (alignment == 'bottom_right') { -%> // Bottom, right
 165                 iframe.style.top = 'calc(100% - 50px)';
 166                 <% } else if (alignment == 'right') { -%> // Right
 167                     iframe.style.right = '-312px';
 168                     div_tab.style['right'] = '0px';
 169                 <% } else if (alignment == 'left') { -%> // Left
 170                     iframe.style.left = '-312px';
 171                     div_tab.style.left = '0px';
 172                 <% } -%>                break;
 173             case "init":
 174                 <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
 175                     div_tab.style.backgroundColor="<%=div_color%>";
 176                     document.getElementById("chat_tab_text").style.color= "<%=text_color%>";
 177                     document.getElementById("chat_tab_arrow").style.color="<%=div_color%>";
 178                     document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>";
 179                     document.getElementById("motion-chat-iframe-tab").style.display="flex";
 180                 <% } -%>                break;
 181             case "offline":
 182                 <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
 183                     document.getElementById("motion-chat-iframe-tab").style.display="none";
 184                 <% } -%>                break;
 185             default:
 186         }
 187
 188     }, false);
 189     // END Events management
 190
 191     // START Proactive action management
 192     <% proactiveActions.forEach(function(action, index) { -%>        <% if (action.type == 'timeout') { -%>
 193         setTimeout(function() {
 194             <% if (alignment == 'right') { -%>            expandChatRight();
 195             tab_status++;
 196             <% } else if (alignment == 'left') { -%>
 197             expandChatLeft();
 198             tab_status++;
 199             <% } else { -%>
 200             iframe.style.bottom = '0px';
 201             iframe.contentWindow?.postMessage({
 202                 evt: 'show'
 203             }, '*');
 204             <% } -%>
 205         }, <%- action.timeout %> * 1000);
 206     <% } -%>    <% if (action.type == 'mouseOver') { -%>    var  elements<%- index %> = document.querySelectorAll("<%- action.selector %>");
 207     for (var  i = 0; i < elements<%- index %>.length; i++) {
 208         elements<%- index %>[i].onmouseover = function() {
 209             <% if (alignment == 'right') { -%>            expandChatRight();
 210             tab_status++;
 211             <% } else if (alignment == 'left') { -%>
 212             expandChatLeft();
 213             tab_status++;
 214             <% } else { -%>
 215             iframe.style.bottom = '0px';
 216             iframe.contentWindow?.postMessage({
 217                 evt: 'show'
 218             }, '*');
 219             <% } -%>
 220         }
 221     }
 222     <% } -%>    <% }); -%>    // END Proactive action management
 223
 224
 225     if (window.DeviceOrientationEvent) {
 226         window.addEventListener('orientationchange', function() {
 227           if (alignment == 'right'){
 228             document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
 229             var  iframeEl = document.getElementById('motion-chat-iframe');
 230             iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
 231             tab_status = 0;
 232             iframe_h = topIframe_calc();
 233             topIframe_set(iframe_h);
 234             if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
 235           }
 236           else if (alignment == 'left'){
 237             document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
 238             var  iframeEl = document.getElementById('motion-chat-iframe');
 239             iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
 240             tab_status = 0;
 241             iframe_h = topIframe_calc();
 242             topIframe_set(iframe_h);
 243             if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
 244           } }, false);
 245     }
 246
 247     window.addEventListener("resize", function(event) {
 248       var  iframe_h = topIframe_calc();
 249       topIframe_set(iframe_h);
 250       if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
 251     });
 252
 253     function topIframe_calc(){
 254       var height_iframe
 255       var  heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 256       var  iframeT = ((heightD/100)*verticalAlignment) + 450;
 257       if (heightD < iframeT) {
 258          height_iframe = 450 - (iframeT - heightD);
 259       }
 260       else { height_iframe = 450; }
 261       return height_iframe;
 262     }
 263
 264     function topIframe_set(height_iframe){
 265         if( height_iframe > 340){
 266           iframe.style['height'] = height_iframe +'px';
 267           if (alignment == "right" || alignment == "left" )
 268           { iframe.style['top'] = verticalAlignment + "%"; }
 269           else{ iframe.style['bottom'] = "0%"; }
 270
 271         }
 272         else {
 273           iframe.style['height'] = '340px';
 274           if (alignment == "right" || alignment == "left" )
 275           { iframe.style['top'] = "calc(100% - 340px)"; }
 276           else{ iframe.style['bottom'] = "0%"; }
 277
 278         }
 279       }
 280
 281       function topChat_set(height_iframe, verticalAlignment){
 282
 283        if( height_iframe > 340){
 284          div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)";
 285        }
 286        else {
 287          div_tab.style['top'] = "auto";
 288          div_tab.style['bottom'] = "0px";
 289        }
 290     }
 291
 292
 293 }());