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