Built motion from commit f0a64034.|2.6.11
[motion2.git] / server / files / chat / iframe.ejs
index d0a4155..220645c 100644 (file)
 (function() {
     'use strict';
-    var iframe = document.createElement('iframe');
-    // Attributes
-    iframe['id'] = 'motion-chat-iframe';
-    iframe['src'] = '{{{remote}}}/snippet?location=' + btoa(window.location.host) + '&version=3.0.0&{{{query}}}';
-
-    var  alignment="<%=alignment%>";
-    var  verticalAlignment="<%=verticalAlignment%>";
-    var  iframe_status = false;
-
-    document.documentElement.style.setProperty('--xc-ws-div-color', '<%=div_color%>');
-    document.documentElement.style.setProperty('--xc-ws-text-color', '<%=text_color%>');
-    document.documentElement.style.setProperty('--xc-ws-button_color', '<%=button_color%>');
-    document.documentElement.style.setProperty('--xc-ws-background-color', '<%=background_color%>');
-    
-    var link_mobile = document.createElement('link');
-    link_mobile.href = '{{{remote}}}/snippet/styles/mobile.css?version=3.0.0';
-    link_mobile.rel='stylesheet';
-    link_mobile.type = "text/css";
-    document.head.appendChild(link_mobile);
-   <% if (alignment == 'bottom_right') { -%> // Bottom, right
-        iframe.className = 'motion-chat-iframe-bottom_right';
-        verticalAlignment = 0;
-        document.body.appendChild(iframe);
-
-    <% } else if (alignment == 'right') { -%> // Right
-        iframe.className = 'motion-chat-iframe-right';
-        iframe.style['top'] = verticalAlignment+'%';
-        var  iframe_h = topIframe_calc();
-        topIframe_set(iframe_h);
-        var  div_tab = document.createElement('div');
-        div_tab['id'] = 'motion-chat-iframe-tab';
-        div_tab.className = 'motion-chat-div-right';
-        var  tab_status=0;
-
-    <% } else if (alignment == 'left') { -%> // Left   
-        iframe.className = 'motion-chat-iframe-left';
-        iframe.style['top'] = verticalAlignment+'%';
-        var  iframe_h = topIframe_calc();
-        topIframe_set(iframe_h);
-        var  div_tab = document.createElement('div');
-         div_tab.className = 'motion-chat-div-left';
-         div_tab['id'] ='motion-chat-iframe-tab';
-         var  tab_status=0;
-
-    <% } -%>   
-
-    <% if (alignment == 'right') { -%> // Right
-        topChat_set(iframe_h, verticalAlignment);
-        document.body.appendChild(div_tab);
-        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>';
-        div_tab.innerHTML = html;
-        
-        div_tab.style.backgroundColor="<%=div_color%>";
-        document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; 
-        document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; 
-        document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; 
-        document.getElementById("motion-chat-iframe-tab").style.display="flex";
-        
-        function appendLink(){
-            if(iframe_status == false){
-                document.body.appendChild(iframe);
-                iframe_status=true;
-            }      
-        }
+    const chatWebsiteAddressOrigin = '{{{chatWebsiteAddressOrigin}}}'
+    if(chatWebsiteAddressOrigin !== window.location.origin){
+        alert(`The current location does not match ${chatWebsiteAddressOrigin}. Please check your website domain in the current XCALLY Chat Website settings.`)
+    }
+    else
+    {
+        // Init all URLs
+        const remoteURL = new URL('{{{remote}}}')
+        const chatOrigin = remoteURL.origin
+        const chatPath = '/snippet/'
+        const chatStylesPath = chatPath + 'styles/'
+        const chatVersion = '{{{chatVersion}}}'
 
-        function expandChatRight(){
-            appendLink()
-            div_tab.style.right = '295px';
-            iframe.style.right = '0px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
-        }
+        // Style setttings
+        const divColor = '<%=div_color%>'
+        const textColor = '<%=text_color%>'
+        const buttonColor = '<%=button_color%>'
+        const backgroungColor = '<%=background_color%>'
+        let alignment = "<%=alignment%>";
+        let verticalAlignment = "<%=verticalAlignment%>";
+
+        // iframe URL settings
+        const iframeId = 'motion-chat-iframe'
+        const iframeSrcURL = new URL(chatPath, chatOrigin)
+        const iframeSearchParams = new URLSearchParams('{{{query}}}')
+        iframeSearchParams.append('version', chatVersion)
+        iframeSearchParams.append('location', btoa(window.location.host))
+        iframeSrcURL.search = iframeSearchParams
 
-        function collapseChatRight(){
-            appendLink()
-            div_tab.style.right = '0px';
-            iframe.style.right = '-312px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+        // Style URL settings
+        const linkURL =  new URL(chatStylesPath + 'mobile.css', chatOrigin)
+        linkURL.search = new URLSearchParams({ version: chatVersion })
+        const linkMobile = document.createElement('link');
+        linkMobile.type = "text/css";
+        linkMobile.rel='stylesheet';
+        linkMobile.href = linkURL.toString()
+
+        // Iframe localstorage whitelisting
+        const allowedOrigins = [chatOrigin]
+
+        function remoteLocalStorageEventHandler(event){
+            if (allowedOrigins.includes(event.origin)) {
+                const { action, key, value } = event.data
+                const localStorage = window.localStorage
+                switch(action){
+                    case 'setItem':
+                        {
+                            localStorage.setItem(key, JSON.stringify(value))
+                            event.source.postMessage(
+                                {
+                                action: 'setItemResult',
+                                key
+                                }, event.origin)
+                        }
+                        break
+                    case 'getItem':
+                        {
+                            let item = localStorage.getItem(key)
+                            if(item){
+                                try {
+                                    item = JSON.parse(item)
+                                } catch (error) {
+                                    console.error('Cannot read data from localstorage', error)
+                                }
+                            }
+                            event.source.postMessage(
+                                {
+                                action: 'getItemResult',
+                                key,
+                                item
+                                }, event.origin)
+                        }
+                        break
+                    case 'removeItem':
+                        {   
+                            localStorage.removeItem(key)
+                            event.source.postMessage(
+                                {
+                                action: 'removeItemResult',
+                                key
+                                }, event.origin)
+                        }
+                        break
+                    default:
+                        typeof action === 'string' && console.debug('Unsupported action', action)
+                    break;
+                }
+            }
         }
 
-        function toggleChatExpandedRight(){    
-            if(tab_status % 2 === 0) {
-                expandChatRight()
+        // DOM Manipulation
+        let iframe = document.createElement('iframe');
+        // Attributes
+        iframe['id'] = iframeId;
+        iframe['src'] = iframeSrcURL.toString()
+
+        let  iframe_status = false;
+
+        document.documentElement.style.setProperty('--xc-ws-div-color', divColor);
+        document.documentElement.style.setProperty('--xc-ws-text-color', textColor);
+        document.documentElement.style.setProperty('--xc-ws-button-color', buttonColor);
+        document.documentElement.style.setProperty('--xc-ws-background-color', backgroungColor);
+    
+        document.head.appendChild(linkMobile);
+
+        <% if (alignment == 'bottom_right') { -%> // Bottom, right
+            iframe.className = 'motion-chat-iframe-bottom_right';
+            verticalAlignment = 0;
+            document.body.appendChild(iframe);
+
+        <% } else if (alignment == 'right') { -%> // Right
+            iframe.className = 'motion-chat-iframe-right';
+            iframe.style['top'] = verticalAlignment+'%';
+            let  iframe_h = topIframe_calc();
+            topIframe_set(iframe_h);
+            let  div_tab = document.createElement('div');
+            div_tab['id'] = 'motion-chat-iframe-tab';
+            div_tab.className = 'motion-chat-div-right';
+            let  tab_status=0;
+
+        <% } else if (alignment == 'left') { -%> // Left   
+            iframe.className = 'motion-chat-iframe-left';
+            iframe.style['top'] = verticalAlignment+'%';
+            let  iframe_h = topIframe_calc();
+            topIframe_set(iframe_h);
+            let  div_tab = document.createElement('div');
+            div_tab.className = 'motion-chat-div-left';
+            div_tab['id'] ='motion-chat-iframe-tab';
+            let  tab_status=0;
+
+        <% } -%>   
+
+        <% if (alignment == 'right') { -%> // Right
+            topChat_set(iframe_h, verticalAlignment);
+            document.body.appendChild(div_tab);
+            let  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>';
+            div_tab.innerHTML = html;
+            
+            div_tab.style.backgroundColor = divColor;
+            document.getElementById("chat_tab_text").style.color = textColor; 
+            document.getElementById("chat_tab_arrow").style.color = divColor 
+            document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
+            document.getElementById("motion-chat-iframe-tab").style.display = "flex";
+            
+            function appendLink(){
+                if(iframe_status == false){
+                    document.body.appendChild(iframe);
+                    iframe_status=true;
+                }      
             }
-            else {
-                collapseChatRight()
+
+            function expandChatRight(){
+                appendLink()
+                div_tab.style.right = '295px';
+                iframe.style.right = '0px';
+                document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+                let iframeEl = document.getElementById('motion-chat-iframe');
+                iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
             }
-            tab_status++;
-        }
 
-        document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
-    <% } else if (alignment == 'left') { -%> 
-        topChat_set(iframe_h, verticalAlignment);
-        document.body.appendChild(div_tab);
-        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>';
-        div_tab.innerHTML=html;
-
-        div_tab.style.backgroundColor="<%=div_color%>";
-        document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; 
-        document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; 
-        document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; 
-        document.getElementById("motion-chat-iframe-tab").style.display="flex";
-
-        function appendLink(){
-            if(iframe_status == false){
-                document.body.appendChild(iframe);
-                iframe_status=true;
-            }   
-        }
+            function collapseChatRight(){
+                appendLink()
+                div_tab.style.right = '0px';
+                iframe.style.right = '-312px';
+                document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+                let iframeEl = document.getElementById('motion-chat-iframe');
+                iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+            }
 
-        function expandChatLeft(){
-            appendLink()
-            div_tab.style.left = '295px';
-            iframe.style.left = '0px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
-        }
+            function toggleChatExpandedRight(){    
+                if(tab_status % 2 === 0) {
+                    expandChatRight()
+                }
+                else {
+                    collapseChatRight()
+                }
+                tab_status++;
+            }
 
-        function collapseChatLeft(){
-            appendLink()
-            div_tab.style.left = '0px';
-            iframe.style.left = '-312px';
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
-            var iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
-        }
+            document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedRight);
+        <% } else if (alignment == 'left') { -%> 
+            topChat_set(iframe_h, verticalAlignment);
+            document.body.appendChild(div_tab);
+            let  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>';
+            div_tab.innerHTML=html;
 
-        function toggleChatExpandedLeft(){
-            if(tab_status % 2 === 0) {
-                expandChatLeft()
-            }   
-            else {
-                collapseChatLeft()
-            }   
-            tab_status++;
+            div_tab.style.backgroundColor = divColor;
+            document.getElementById("chat_tab_text").style.color = textColor; 
+            document.getElementById("chat_tab_arrow").style.color = divColor; 
+            document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
+            document.getElementById("motion-chat-iframe-tab").style.display="flex";
+
+            function appendLink(){
+                if(iframe_status == false){
+                    document.body.appendChild(iframe);
+                    iframe_status=true;
+                }   
+            }
+
+            function expandChatLeft(){
+                appendLink()
+                div_tab.style.left = '295px';
+                iframe.style.left = '0px';
+                document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+                let iframeEl = document.getElementById('motion-chat-iframe');
+                iframeEl.contentWindow?.postMessage({"evt":"show"}, '*');
+            }
+
+            function collapseChatLeft(){
+                appendLink()
+                div_tab.style.left = '0px';
+                iframe.style.left = '-312px';
+                document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+                let iframeEl = document.getElementById('motion-chat-iframe');
+                iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+            }
+
+            function toggleChatExpandedLeft(){
+                if(tab_status % 2 === 0) {
+                    expandChatLeft()
+                }   
+                else {
+                    collapseChatLeft()
+                }   
+                tab_status++;
+            }
+
+            document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); 
+
+            <% } -%>    
+
+        // START Events management
+        window.addEventListener('message', function(evt) {
+            remoteLocalStorageEventHandler(evt)
+            switch (evt.data.cmd) {
+                case 'show':
+                    <% if (alignment == 'bottom_right') { -%> // Bottom, right
+                        iframe.style.top = 'auto';
+                        iframe.style.bottom = '0px';
+                    <% } else if (alignment == 'right') { -%> // Right
+                        iframe.style.right = '0px';
+                        div_tab.style.right = '295px';
+                    <% } else if (alignment == 'left') { -%> // Left
+                        iframe.style.left = '0px';
+                        div_tab.style.left = '295px';
+                    // Left    
+                    <% } -%>                break;
+                case 'hide':
+                    <% if (alignment == 'bottom_right') { -%> // Bottom, right
+                    iframe.style.top = 'calc(100% - 50px)';
+                    <% } else if (alignment == 'right') { -%> // Right
+                        iframe.style.right = '-312px';
+                        div_tab.style['right'] = '0px';
+                    <% } else if (alignment == 'left') { -%> // Left
+                        iframe.style.left = '-312px';
+                        div_tab.style.left = '0px';
+                    <% } -%>                break;
+                case "init": 
+                    <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
+                        div_tab.style.backgroundColor = textColor;
+                        document.getElementById("chat_tab_text").style.color = textColor; 
+                        document.getElementById("chat_tab_arrow").style.color = textColor; 
+                        document.getElementById("chat_tab_arrow").style.backgroundColor = textColor; 
+                        document.getElementById("motion-chat-iframe-tab").style.display = "flex";
+                    <% } -%>                break;
+                case "offline": 
+                    <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
+                        document.getElementById("motion-chat-iframe-tab").style.display = "none";
+                    <% } -%>                break;
+                default:
+            }
+
+        }, false);
+        // END Events management
+
+        // START Proactive action management
+        <% proactiveActions.forEach(function(action, index) { -%>
+            <% if (action.type == 'timeout') { -%>        
+            setTimeout(function() {
+                <% if (alignment == 'right') { -%>
+                expandChatRight();
+                tab_status++;
+                <% } else if (alignment == 'left') { -%> 
+                expandChatLeft();
+                tab_status++;
+                <% } else { -%> 
+                iframe.style.bottom = '0px';
+                iframe.contentWindow?.postMessage({
+                    evt: 'show'
+                }, '*');
+                <% } -%> 
+            }, <%- action.timeout %> * 1000);
+        <% } -%>
+        <% if (action.type == 'mouseOver') { -%>
+        let  elements<%- index %> = document.querySelectorAll("<%- action.selector %>");
+        for (let  i = 0; i < elements<%- index %>.length; i++) {
+            elements<%- index %>[i].onmouseover = function() {
+                <% if (alignment == 'right') { -%>
+                expandChatRight();
+                tab_status++;
+                <% } else if (alignment == 'left') { -%> 
+                expandChatLeft();
+                tab_status++;
+                <% } else { -%> 
+                iframe.style.bottom = '0px';
+                iframe.contentWindow?.postMessage({
+                    evt: 'show'
+                }, '*');
+                <% } -%> 
+            }
         }
+        <% } -%>    <% }); -%>
+        // END Proactive action management
+        
 
-        document.getElementById("motion-chat-iframe-tab").addEventListener("click", toggleChatExpandedLeft); 
-
-        <% } -%>    
-
-    // START Events management
-    window.addEventListener('message', function(evt) {
-        switch (evt.data.cmd) {
-            case 'show':
-                <% if (alignment == 'bottom_right') { -%> // Bottom, right
-                    iframe.style.top = 'auto';
-                    iframe.style.bottom = '0px';
-                <% } else if (alignment == 'right') { -%> // Right
-                    iframe.style.right = '0px';
-                    div_tab.style.right = '295px';
-                <% } else if (alignment == 'left') { -%> // Left
-                    iframe.style.left = '0px';
-                    div_tab.style.left = '295px';
-                // Left    
-                <% } -%>                break;
-            case 'hide':
-                <% if (alignment == 'bottom_right') { -%> // Bottom, right
-                iframe.style.top = 'calc(100% - 50px)';
-                <% } else if (alignment == 'right') { -%> // Right
-                    iframe.style.right = '-312px';
-                    div_tab.style['right'] = '0px';
-                <% } else if (alignment == 'left') { -%> // Left
-                    iframe.style.left = '-312px';
-                    div_tab.style.left = '0px';
-                <% } -%>                break;
-            case "init": 
-                <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
-                    div_tab.style.backgroundColor="<%=div_color%>";
-                    document.getElementById("chat_tab_text").style.color= "<%=text_color%>"; 
-                    document.getElementById("chat_tab_arrow").style.color="<%=div_color%>"; 
-                    document.getElementById("chat_tab_arrow").style.backgroundColor="<%=text_color%>"; 
-                    document.getElementById("motion-chat-iframe-tab").style.display="flex";
-                <% } -%>                break;
-            case "offline": 
-                <% if (alignment == 'right' || alignment == 'left') { -%> // Bottom, right
-                    document.getElementById("motion-chat-iframe-tab").style.display="none";
-                <% } -%>                break;
-            default:
+        if (window.DeviceOrientationEvent) {
+            window.addEventListener('orientationchange', function() {
+            if (alignment == 'right'){
+                document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
+                let  iframeEl = document.getElementById('motion-chat-iframe');
+                iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+                tab_status = 0;
+                iframe_h = topIframe_calc();
+                topIframe_set(iframe_h);
+                if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
+            }
+            else if (alignment == 'left'){
+                document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
+                let  iframeEl = document.getElementById('motion-chat-iframe');
+                iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
+                tab_status = 0;
+                iframe_h = topIframe_calc();
+                topIframe_set(iframe_h);
+                if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
+            } }, false);
         }
 
-    }, false);
-    // END Events management
-
-    // START Proactive action management
-    <% proactiveActions.forEach(function(action, index) { -%>        <% if (action.type == 'timeout') { -%>        
-        setTimeout(function() {
-            <% if (alignment == 'right') { -%>            expandChatRight();
-            tab_status++;
-            <% } else if (alignment == 'left') { -%> 
-            expandChatLeft();
-            tab_status++;
-            <% } else { -%> 
-            iframe.style.bottom = '0px';
-            iframe.contentWindow?.postMessage({
-                evt: 'show'
-            }, '*');
-            <% } -%> 
-        }, <%- action.timeout %> * 1000);
-    <% } -%>    <% if (action.type == 'mouseOver') { -%>    var  elements<%- index %> = document.querySelectorAll("<%- action.selector %>");
-    for (var  i = 0; i < elements<%- index %>.length; i++) {
-        elements<%- index %>[i].onmouseover = function() {
-            <% if (alignment == 'right') { -%>            expandChatRight();
-            tab_status++;
-            <% } else if (alignment == 'left') { -%> 
-            expandChatLeft();
-            tab_status++;
-            <% } else { -%> 
-            iframe.style.bottom = '0px';
-            iframe.contentWindow?.postMessage({
-                evt: 'show'
-            }, '*');
-            <% } -%> 
+        window.addEventListener("resize", function(event) {
+        let  iframe_h = topIframe_calc();
+        topIframe_set(iframe_h);
+        if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
+        });
+
+        function topIframe_calc(){
+        let height_iframe
+        let  heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        let  iframeT = ((heightD/100)*verticalAlignment) + 450;
+        if (heightD < iframeT) {
+            height_iframe = 450 - (iframeT - heightD);
+        }
+        else { height_iframe = 450; }
+        return height_iframe;
         }
-    }
-    <% } -%>    <% }); -%>    // END Proactive action management
-    
 
-    if (window.DeviceOrientationEvent) {
-        window.addEventListener('orientationchange', function() {
-          if (alignment == 'right'){
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> < </strong>";
-            var  iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
-            tab_status = 0;
-            iframe_h = topIframe_calc();
-            topIframe_set(iframe_h);
-            if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
-          }
-          else if (alignment == 'left'){
-            document.getElementById("chat_tab_arrow").innerHTML = "<strong> > </strong>";
-            var  iframeEl = document.getElementById('motion-chat-iframe');
-            iframeEl.contentWindow?.postMessage({"evt":"hide"}, '*');
-            tab_status = 0;
-            iframe_h = topIframe_calc();
-            topIframe_set(iframe_h);
-            if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
-          } }, false);
-    }
+        function topIframe_set(height_iframe){
+            if( height_iframe > 340){
+            iframe.style['height'] = height_iframe +'px';
+            if (alignment == "right" || alignment == "left" )
+            { iframe.style['top'] = verticalAlignment + "%"; }
+            else{ iframe.style['bottom'] = "0%"; }
 
-    window.addEventListener("resize", function(event) {
-      var  iframe_h = topIframe_calc();
-      topIframe_set(iframe_h);
-      if(typeof div_tab != "undefined") topChat_set(iframe_h, verticalAlignment);
-    });
-
-    function topIframe_calc(){
-      var height_iframe
-      var  heightD = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-      var  iframeT = ((heightD/100)*verticalAlignment) + 450;
-      if (heightD < iframeT) {
-         height_iframe = 450 - (iframeT - heightD);
-      }
-      else { height_iframe = 450; }
-      return height_iframe;
-    }
+            }
+            else {
+            iframe.style['height'] = '340px';
+            if (alignment == "right" || alignment == "left" )
+            { iframe.style['top'] = "calc(100% - 340px)"; }
+            else{ iframe.style['bottom'] = "0%"; }
 
-    function topIframe_set(height_iframe){
+            }
+        }
+    
+        function topChat_set(height_iframe, verticalAlignment){
+    
         if( height_iframe > 340){
-          iframe.style['height'] = height_iframe +'px';
-          if (alignment == "right" || alignment == "left" )
-          { iframe.style['top'] = verticalAlignment + "%"; }
-          else{ iframe.style['bottom'] = "0%"; }
-
+            div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)";
         }
         else {
-          iframe.style['height'] = '340px';
-          if (alignment == "right" || alignment == "left" )
-          { iframe.style['top'] = "calc(100% - 340px)"; }
-          else{ iframe.style['bottom'] = "0%"; }
-
+            div_tab.style['top'] = "auto";
+            div_tab.style['bottom'] = "0px";
+        }
         }
-      }
-   
-      function topChat_set(height_iframe, verticalAlignment){
-  
-       if( height_iframe > 340){
-         div_tab.style['top'] = "calc("+ verticalAlignment +"% + " + (height_iframe - 100) + "px)";
-       }
-       else {
-         div_tab.style['top'] = "auto";
-         div_tab.style['bottom'] = "0px";
-       }
-    }
-
-    <% if (hideWhenOffline && interval != null) { -%> // hide template
-        document.getElementById("motion-chat-iframe-tab").style.display="none";
-    <% } -%>
 
+        // hide chat
+        <% if (hideWhenOffline && intervalId != null) { -%> // hide template
+            document.getElementById("motion-chat-iframe-tab").style.display = "none";
+        <% } -%>
+    }
 }()); 
\ No newline at end of file