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