chat client: disable chat button until websocket connected

public/assets/chat/chat.coffee

@@ -15,6 +15,7 @@ do($ = window.jQuery, window) ->
       debug: false
       fontSize: undefined
       buttonSelector: '.open-zammad-chat'
+      hiddenButtonClass: 'is-inactive'
 
     _messageCount: 0
     isOpen: true
@@ -74,6 +75,7 @@ do($ = window.jQuery, window) ->
 
       # check prerequisites
       if !window.WebSocket or !sessionStorage
+        @state = 'unsupported'
         @log 'notice', 'Chat: Browser not supported!'
         return
 
@@ -90,8 +92,6 @@ do($ = window.jQuery, window) ->
         keydown: @checkForEnter
         input: @onInput
 
-      $(@options.buttonSelector).click @open
-
       @wsConnect()
 
     checkForEnter: (event) =>
@@ -134,14 +134,17 @@ do($ = window.jQuery, window) ->
                 @log 'debug', 'Zammad Chat: ready'
               when 'offline'
                 @onError 'Zammad Chat: No agent online'
+                @state = 'off'
                 @hide()
                 @wsClose()
               when 'chat_disabled'
                 @onError 'Zammad Chat: Chat is disabled'
+                @state = 'off'
                 @hide()
                 @wsClose()
               when 'no_seats_available'
                 @onError 'Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue
+                @state = 'off'
                 @hide()
                 @wsClose()
               when 'reconnect'
@@ -149,6 +152,8 @@ do($ = window.jQuery, window) ->
                 @reopenSession pipe.data
 
     onReady: =>
+      $(@options.buttonSelector).click(@open).removeClass(@hiddenButtonClass)
+
       if @options.show
         @show()
 
@@ -287,6 +292,7 @@ do($ = window.jQuery, window) ->
       #@showTimeout()
 
     close: (event) =>
+      return @state if @state is 'off' or @state is 'unsupported'
       event.stopPropagation() if event
 
       # only close if session_id exists
@@ -320,6 +326,8 @@ do($ = window.jQuery, window) ->
       @el.removeClass('zammad-chat-is-visible')
 
     show: ->
+      return @state if @state is 'off' or @state is 'unsupported'
+
       @el.addClass('zammad-chat-is-visible')
 
       @input.autoGrow

public/assets/chat/chat.css

@@ -30,6 +30,7 @@
   background: #379ad7;
   color: white;
   line-height: 2.5em;
+  height: 2.5em;
   box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset, 0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
   position: relative;
   border-radius: 5px 5px 0 0;

public/assets/chat/chat.js

@@ -1,3 +1,64 @@
+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;
 
@@ -14,7 +75,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       port: 6042,
       debug: false,
       fontSize: void 0,
-      buttonSelector: '.open-zammad-chat'
+      buttonSelector: '.open-zammad-chat',
+      hiddenButtonClass: 'is-inactive'
     };
 
     ZammadChat.prototype._messageCount = 0;
@@ -134,6 +196,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       this.log = bind(this.log, this);
       this.T = bind(this.T, this);
       if (!window.WebSocket || !sessionStorage) {
+        this.state = 'unsupported';
         this.log('notice', 'Chat: Browser not supported!');
         return;
       }
@@ -148,7 +211,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         keydown: this.checkForEnter,
         input: this.onInput
       });
-      $(this.options.buttonSelector).click(this.open);
       this.wsConnect();
     }
 
@@ -209,16 +271,19 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
                 break;
               case 'offline':
                 this.onError('Zammad Chat: No agent online');
+                this.state = 'off';
                 this.hide();
                 this.wsClose();
                 break;
               case 'chat_disabled':
                 this.onError('Zammad Chat: Chat is disabled');
+                this.state = 'off';
                 this.hide();
                 this.wsClose();
                 break;
               case 'no_seats_available':
                 this.onError('Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue);
+                this.state = 'off';
                 this.hide();
                 this.wsClose();
                 break;
@@ -231,6 +296,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.onReady = function() {
+      $(this.options.buttonSelector).click(this.open).removeClass(this.hiddenButtonClass);
       if (this.options.show) {
         return this.show();
       }
@@ -373,6 +439,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     ZammadChat.prototype.onOpenAnimationEnd = function() {};
 
     ZammadChat.prototype.close = function(event) {
+      if (this.state === 'off' || this.state === 'unsupported') {
+        return this.state;
+      }
       if (event) {
         event.stopPropagation();
       }
@@ -411,6 +480,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
 
     ZammadChat.prototype.show = function() {
       var remainerHeight;
+      if (this.state === 'off' || this.state === 'unsupported') {
+        return this.state;
+      }
       this.el.addClass('zammad-chat-is-visible');
       this.input.autoGrow({
         extraLine: false
@@ -647,67 +719,6 @@ 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):
@@ -772,7 +783,6 @@ jQuery.fn.autoGrow = function(options) {
     mirror.style.fontFamily = jQuery(this).css('font-family');
     mirror.style.fontSize = jQuery(this).css('font-size');
     mirror.style.lineHeight = jQuery(this).css('line-height');
-    mirror.style.boxSizing = jQuery(this).css('box-sizing');
 
     // Style the textarea
     this.style.overflow = "hidden";
@@ -915,11 +925,11 @@ window.zammadChatTemplates["loader"] = function (__obj) {
   }
   (function() {
     (function() {
-      __out.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-center">\n    <div class="zammad-chat-modal-text">\n      <span class="zammad-chat-loading-animation">\n        <span class="zammad-chat-loading-circle"></span>\n        <span class="zammad-chat-loading-circle"></span>\n        <span class="zammad-chat-loading-circle"></span>\n      </span>\n      ');
+      __out.push('<div class="zammad-chat-modal">\n  <span class="zammad-chat-loading-animation">\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n    <span class="zammad-chat-loading-circle"></span>\n  </span>\n  <span class="zammad-chat-modal-text">');
     
       __out.push(__sanitize(this.T('Connecting')));
     
-      __out.push('\n    </div>\n  </div>\n</div>');
+      __out.push('</span>\n</div>');
     
     }).call(this);
     
@@ -1090,11 +1100,11 @@ window.zammadChatTemplates["timeout"] = function (__obj) {
   }
   (function() {
     (function() {
-      __out.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-center">\n    <div class="zammad-chat-modal-text">\n      ');
+      __out.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-text">\n    ');
     
       __out.push(this.T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', this.delay + " " + this.unit, this.agent));
     
-      __out.push('<br>\n      <div class="zammad-chat-button"');
+      __out.push('<br>\n    <div class="zammad-chat-button"');
     
       if (this.background) {
         __out.push(__sanitize(" style='background: " + this.background + "'"));
@@ -1104,7 +1114,7 @@ window.zammadChatTemplates["timeout"] = function (__obj) {
     
       __out.push(__sanitize(this.T('Start new conversation')));
     
-      __out.push('</div>\n    </div>\n  </div>\n</div>');
+      __out.push('</div>\n  </div>\n</div>');
     
     }).call(this);
     
@@ -1265,15 +1275,15 @@ window.zammadChatTemplates["waiting"] = function (__obj) {
   }
   (function() {
     (function() {
-      __out.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-center">\n    <div class="zammad-chat-modal-text">\n      <span class="zammad-chat-loading-animation">\n        <span class="zammad-chat-loading-circle"></span>\n        <span class="zammad-chat-loading-circle"></span>\n        <span class="zammad-chat-loading-circle"></span>\n      </span>\n      ');
+      __out.push('<div class="zammad-chat-modal">\n  <div class="zammad-chat-modal-text">\n    <span class="zammad-chat-loading-animation">\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n      <span class="zammad-chat-loading-circle"></span>\n    </span>\n    ');
     
       __out.push(this.T('All colleges are busy.'));
     
-      __out.push('<br>\n      ');
+      __out.push('<br>\n    ');
     
       __out.push(this.T('You are on waiting list position <strong>%s</strong>.', this.position));
     
-      __out.push('\n    </div>\n  </div>\n</div>');
+      __out.push('\n  </div>\n</div>');
     
     }).call(this);
     

public/assets/chat/chat.scss

@@ -28,6 +28,7 @@
   background: hsl(203,67%,53%);
   color: white;
   line-height: 2.5em;
+  height: 2.5em;
   box-shadow: 
     0 -1px rgba(0,0,0,.1),
     0 1px rgba(255,255,255,.3) inset,

public/assets/chat/index.html

@@ -140,8 +140,7 @@
   var chat = new ZammadChat({
     host: 'ws://localhost',
     port: 6042,
-    debug: true,
-    fontSize: 11
+    debug: true
   });
 
   $('.settings :input').on({