chat client: fix auto-open chat on slow connections

public/assets/chat/chat.coffee

@@ -261,6 +261,7 @@ do($ = window.jQuery, window) ->
         onMessage: @onWebSocketMessage
         onError: @onError
       )
+
       @io.connect()
 
     getScrollRoot: ->
@@ -354,7 +355,11 @@ do($ = window.jQuery, window) ->
             switch pipe.data.state
               when 'online'
                 @sessionId = undefined
+
+                if !@options.cssAutoload || @cssLoaded
                   @onReady()
+                else
+                  @socketReady = true
               when 'offline'
                 @onError 'Zammad Chat: No agent online'
               when 'chat_disabled'
@@ -590,11 +595,12 @@ do($ = window.jQuery, window) ->
       return if @isOpen
       if @el
         @el.removeClass('zammad-chat-is-shown')
+        @el.removeClass('zammad-chat-is-loaded')
 
     show: ->
       return if @state is 'offline'
 
-      @el.addClass('zammad-chat-is-shown')
+      @el.addClass('zammad-chat-is-loaded')
 
       if !@inputInitialized
         @inputInitialized = true
@@ -603,7 +609,11 @@ do($ = window.jQuery, window) ->
 
       remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
 
+      console.log "el", @el.height()
+      console.log "header", @el.find('.zammad-chat-header').outerHeight()
+
       @el.css 'bottom', -remainerHeight
+      @el.addClass('zammad-chat-is-shown')
 
     disableInput: ->
       @input.prop('disabled', true)
@@ -827,10 +837,17 @@ do($ = window.jQuery, window) ->
       @log.debug "load css from '#{url}'"
       styles = "@import url('#{url}');"
       newSS = document.createElement('link')
+      newSS.onload = @onCssLoaded
       newSS.rel = 'stylesheet'
       newSS.href = 'data:text/css,' + escape(styles)
       document.getElementsByTagName('head')[0].appendChild(newSS)
 
+    onCssLoaded: =>
+      if @socketReady
+        @onReady()
+      else
+        @cssLoaded = true
+
     startTimeoutObservers: =>
       @idleTimeout = new Timeout(
         logPrefix: 'idleTimeout'

public/assets/chat/chat.css

@@ -27,10 +27,14 @@
       border-radius: 0 !important;
       font-size: 16px; } }
 
-.zammad-chat.zammad-chat-is-shown {
+.zammad-chat.zammad-chat-is-loaded {
   display: -webkit-flex;
   display: -ms-flexbox;
-  display: flex; }
+  display: flex;
+  opacity: 0; }
+
+.zammad-chat.zammad-chat-is-shown {
+  opacity: 1; }
 
 .zammad-chat-icon {
   height: 2em;
@@ -77,6 +81,7 @@
 .zammad-chat-header-icon-close {
   fill: currentColor;
   width: 1.6em;
+  height: auto;
   vertical-align: middle; }
 
 .zammad-chat-header-icon-close {

public/assets/chat/chat.js

@@ -1,64 +1,3 @@
-if (!window.zammadChatTemplates) {
-  window.zammadChatTemplates = {};
-}
-window.zammadChatTemplates["agent"] = function (__obj) {
-  if (!__obj) __obj = {};
-  var __out = [], __capture = function(callback) {
-    var out = __out, result;
-    __out = [];
-    callback.call(this);
-    result = __out.join('');
-    __out = out;
-    return __safe(result);
-  }, __sanitize = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else if (typeof value !== 'undefined' && value != null) {
-      return __escape(value);
-    } else {
-      return '';
-    }
-  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
-  __safe = __obj.safe = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else {
-      if (!(typeof value !== 'undefined' && value != null)) value = '';
-      var result = new String(value);
-      result.ecoSafe = true;
-      return result;
-    }
-  };
-  if (!__escape) {
-    __escape = __obj.escape = function(value) {
-      return ('' + value)
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-    };
-  }
-  (function() {
-    (function() {
-      if (this.agent.avatar) {
-        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
-        __out.push(__sanitize(this.agent.avatar));
-        __out.push('">\n');
-      }
-    
-      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
-    
-      __out.push(__sanitize(this.agent.name));
-    
-      __out.push('</span>\n</span>');
-    
-    }).call(this);
-    
-  }).call(__obj);
-  __obj.safe = __objSafe, __obj.escape = __escape;
-  return __out.join('');
-};
-
 var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
   slice = [].slice,
   extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -425,6 +364,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
 
     function ZammadChat(options) {
       this.startTimeoutObservers = bind(this.startTimeoutObservers, this);
+      this.onCssLoaded = bind(this.onCssLoaded, this);
       this.setAgentOnlineState = bind(this.setAgentOnlineState, this);
       this.onConnectionEstablished = bind(this.onConnectionEstablished, this);
       this.setSessionId = bind(this.setSessionId, this);
@@ -619,7 +559,11 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
             switch (pipe.data.state) {
               case 'online':
                 this.sessionId = void 0;
+                if (!this.options.cssAutoload || this.cssLoaded) {
                   this.onReady();
+                } else {
+                  this.socketReady = true;
+                }
                 break;
               case 'offline':
                 this.onError('Zammad Chat: No agent online');
@@ -874,7 +818,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         return;
       }
       if (this.el) {
-        return this.el.removeClass('zammad-chat-is-shown');
+        this.el.removeClass('zammad-chat-is-shown');
+        return this.el.removeClass('zammad-chat-is-loaded');
       }
     };
 
@@ -883,7 +828,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       if (this.state === 'offline') {
         return;
       }
-      this.el.addClass('zammad-chat-is-shown');
+      this.el.addClass('zammad-chat-is-loaded');
       if (!this.inputInitialized) {
         this.inputInitialized = true;
         this.input.autoGrow({
@@ -891,7 +836,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         });
       }
       remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
-      return this.el.css('bottom', -remainerHeight);
+      console.log("el", this.el.height());
+      console.log("header", this.el.find('.zammad-chat-header').outerHeight());
+      this.el.css('bottom', -remainerHeight);
+      return this.el.addClass('zammad-chat-is-shown');
     };
 
     ZammadChat.prototype.disableInput = function() {
@@ -1147,11 +1095,20 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       this.log.debug("load css from '" + url + "'");
       styles = "@import url('" + url + "');";
       newSS = document.createElement('link');
+      newSS.onload = this.onCssLoaded;
       newSS.rel = 'stylesheet';
       newSS.href = 'data:text/css,' + escape(styles);
       return document.getElementsByTagName('head')[0].appendChild(newSS);
     };
 
+    ZammadChat.prototype.onCssLoaded = function() {
+      if (this.socketReady) {
+        return this.onReady();
+      } else {
+        return this.cssLoaded = true;
+      }
+    };
+
     ZammadChat.prototype.startTimeoutObservers = function() {
       this.idleTimeout = new Timeout({
         logPrefix: 'idleTimeout',
@@ -1221,6 +1178,67 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
   return window.ZammadChat = ZammadChat;
 })(window.jQuery, window);
 
+if (!window.zammadChatTemplates) {
+  window.zammadChatTemplates = {};
+}
+window.zammadChatTemplates["agent"] = function (__obj) {
+  if (!__obj) __obj = {};
+  var __out = [], __capture = function(callback) {
+    var out = __out, result;
+    __out = [];
+    callback.call(this);
+    result = __out.join('');
+    __out = out;
+    return __safe(result);
+  }, __sanitize = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else if (typeof value !== 'undefined' && value != null) {
+      return __escape(value);
+    } else {
+      return '';
+    }
+  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
+  __safe = __obj.safe = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else {
+      if (!(typeof value !== 'undefined' && value != null)) value = '';
+      var result = new String(value);
+      result.ecoSafe = true;
+      return result;
+    }
+  };
+  if (!__escape) {
+    __escape = __obj.escape = function(value) {
+      return ('' + value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    };
+  }
+  (function() {
+    (function() {
+      if (this.agent.avatar) {
+        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
+        __out.push(__sanitize(this.agent.avatar));
+        __out.push('">\n');
+      }
+    
+      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
+    
+      __out.push(__sanitize(this.agent.name));
+    
+      __out.push('</span>\n</span>');
+    
+    }).call(this);
+    
+  }).call(__obj);
+  __obj.safe = __objSafe, __obj.escape = __escape;
+  return __out.join('');
+};
+
 /*!
  * ----------------------------------------------------------------------------
  * "THE BEER-WARE LICENSE" (Revision 42):
@@ -1366,7 +1384,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
         __out.push(__sanitize(" style='background: " + this.background + "'"));
       }
     
-      __out.push('>\n    <div class="zammad-chat-header-controls js-chat-toggle">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n      <span class="zammad-chat-header-icon">\n        <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n        <svg class="zammad-chat-header-icon-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n      </span>\n    </div>\n    <div class="zammad-chat-agent zammad-chat-is-hidden">\n    </div>\n    <div class="zammad-chat-welcome">\n      <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>\n      <span class="zammad-chat-welcome-text">');
+      __out.push('>\n    <div class="zammad-chat-header-controls js-chat-toggle">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n      <span class="zammad-chat-header-icon">\n        <svg class="zammad-chat-header-icon-open" width="13" height="7" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n        <svg class="zammad-chat-header-icon-close" width="13" height="13" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n      </span>\n    </div>\n    <div class="zammad-chat-agent zammad-chat-is-hidden">\n    </div>\n    <div class="zammad-chat-welcome">\n      <svg class="zammad-chat-icon" viewBox="0 0 24 24" width="24" height="24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z"/></svg>\n      <span class="zammad-chat-welcome-text">');
     
       __out.push(this.T(this.title));
     

public/assets/chat/chat.scss

@@ -28,8 +28,12 @@
     font-size: 16px;
   }
 }
-.zammad-chat.zammad-chat-is-shown {
+.zammad-chat.zammad-chat-is-loaded {
   display: flex;
+  opacity: 0;
+}
+.zammad-chat.zammad-chat-is-shown {
+  opacity: 1;
 }
 
 .zammad-chat-icon {
@@ -88,6 +92,7 @@
 .zammad-chat-header-icon-close {
   fill: currentColor;
   width: 1.6em;
+  height: auto;
   vertical-align: middle;
 }
 

public/assets/chat/index.html

@@ -2,7 +2,6 @@
 <meta charset="utf-8">
 <title>Zammad Chat</title>
 <meta name="viewport" content="width=device-width">
-<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
 <style>
   body {
     margin: 0;

public/assets/chat/views/chat.eco

@@ -3,14 +3,14 @@
     <div class="zammad-chat-header-controls js-chat-toggle">
       <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>
       <span class="zammad-chat-header-icon">
-        <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>
-        <svg class="zammad-chat-header-icon-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>
+        <svg class="zammad-chat-header-icon-open" width="13" height="7" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>
+        <svg class="zammad-chat-header-icon-close" width="13" height="13" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>
       </span>
     </div>
     <div class="zammad-chat-agent zammad-chat-is-hidden">
     </div>
     <div class="zammad-chat-welcome">
-      <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>
+      <svg class="zammad-chat-icon" viewBox="0 0 24 24" width="24" height="24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z"/></svg>
       <span class="zammad-chat-welcome-text"><%- @T(@title) %></span>
     </div>
   </div>

public/assets/chat/znuny.html

@@ -5,7 +5,6 @@
   <title>Zammad Chat</title>
   <link rel="stylesheet" href="znuny.css">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
   <style>
     body {
       margin: 0;