server/files/chat/iframe.js

   1 (function(global) {
   2     'use strict';
   3
   4     var iframe = document.createElement('iframe');
   5     iframe.setAttribute('src', '{{{remote}}}/snippet?version=1.0.8&{{{query}}}');
   6
   7     iframe.setAttribute('id', 'motion-chat-iframe');
   8     iframe.setAttribute('width', window.innerWidth < 350 ? '300px' : '370px');
   9     iframe.setAttribute('frameborder', '0');
  10     iframe.setAttribute('scrolling', 'no');
  11     iframe.setAttribute('style', 'position: fixed; \
  12     right:0; \
  13     height: 430px; \
  14     overflow: hidden; \
  15     margin-left: 10px; \
  16     margin-right: 10px; \
  17     -webkit-transition: all 0.7s ease-out; \
  18     -moz-transition: all 0.7s ease-out; \
  19     -ms-transition: all 0.7s ease-out; \
  20     -o-transition: all 0.7s ease-out; \
  21     z-index: 9999; \
  22     transition: all 0.7s ease-out;');
  23
  24     document.body.appendChild(iframe);
  25
  26     // START Events management
  27     window.addEventListener('message', function(evt) {
  28         switch (evt.data.cmd) {
  29             case 'show':
  30                 iframe.style.bottom = '0px';
  31                 break;
  32             case 'hide':
  33                 iframe.style.bottom = '-385px';
  34                 break;
  35             default:
  36         }
  37
  38     }, false);
  39     // END Events management
  40
  41     // START Proactive action management
  42     <% proactiveActions.forEach(function(action) { -%>
  43     <% if (action.type == 'timeout') { -%>
  44     setTimeout(function() {
  45         iframe.style.bottom = '0px';
  46         iframe.contentWindow.postMessage({
  47             evt: 'show'
  48         }, '*');
  49     }, <%- action.timeout %> * 1000);
  50     <% } -%>
  51     <% if (action.type == 'mouseOver') { -%>
  52     var elements = document.querySelectorAll("<%- action.selector %>");
  53
  54     for (var i = 0; i < elements.length; i++) {
  55         elements[i].onmouseover = function() {
  56             iframe.style.bottom = '0px';
  57             iframe.contentWindow.postMessage({
  58                 evt: 'show'
  59             }, '*');
  60         }
  61     }
  62     <% } -%>
  63     <% }); -%> // END Proactive action management
  64
  65 }());