server/files/chat/iframe.js

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