chat close icon

public/assets/chat/chat.coffee

@@ -44,7 +44,8 @@ do($ = window.jQuery, window) ->
 
       @setAgentOnlineState @isOnline
 
-      @el.find('.zammad-chat-header').click @toggle
+      @el.find('.js-chat-open').click @open
+      @el.find('.js-chat-close').click @close
       @el.find('.zammad-chat-controls').on 'submit', @onSubmit
       @el.find('.zammad-chat-input').on
         keydown: @checkForEnter
@@ -72,6 +73,8 @@ do($ = window.jQuery, window) ->
       @ws.onerror = (e) =>
         console.log 'debug', 'ws:onerror', e
 
+      @onReady()
+
     checkForEnter: (event) =>
       if not event.shiftKey and event.keyCode is 13
         event.preventDefault()
@@ -202,25 +205,26 @@ do($ = window.jQuery, window) ->
         from: 'agent'
       @scrollToBottom()
 
-    toggle: =>
-      if @isOpen then @close() else @open()
+    open: =>
+      return if @isOpen
 
-    open: ->
       @showLoader()
 
       @el
         .addClass('zammad-chat-is-open')
         .animate { bottom: 0 }, 500, @onOpenAnimationEnd
 
-    onOpenAnimationEnd: =>
       @isOpen = true
+
+    onOpenAnimationEnd: =>
       #setTimeout @onQueue, 1180
       # setTimeout @onConnectionEstablished, 1180
       # setTimeout @onAgentTypingStart, 2000
       # setTimeout @receiveMessage, 5000, "Hello! How can I help you?"
       @connect()
 
-    close: ->
+    close: (event) =>
+      event.stopPropagation() if event
       remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
       @el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
 

public/assets/chat/chat.css

@@ -36,28 +36,36 @@
   overflow: hidden;
   cursor: pointer; }
 
+.zammad-chat.zammad-chat-is-open .zammad-chat-header {
+  cursor: default; }
+
 .zammad-chat-welcome-text {
   font-size: 1.2em; }
 
-.zammad-chat-toggle {
+.zammad-chat-header-icon {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   width: 3.4em;
   text-align: center;
-  line-height: 3.5em; }
+  line-height: 3.5em;
+  cursor: pointer; }
 
-.zammad-chat-toggle-icon-open,
-.zammad-chat-toggle-icon-close {
+.zammad-chat-header-icon-open,
+.zammad-chat-header-icon-close {
   fill: currentColor;
-  height: 0.85em; }
+  width: 1.6em;
+  vertical-align: middle; }
+
+.zammad-chat-header-icon-close {
+  width: 1.3em; }
 
-.zammad-chat-toggle-icon-close,
-.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-open {
+.zammad-chat-header-icon-close,
+.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
   display: none; }
 
-.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-close {
+.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
   display: inline; }
 
 .zammad-chat-agent {

public/assets/chat/chat.js

@@ -1,68 +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> ');
-    
-      __out.push(this.agentPhrase);
-    
-      __out.push('\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); }; };
 
 (function($, window) {
@@ -128,8 +63,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       this.onAgentTypingStart = bind(this.onAgentTypingStart, this);
       this.onQueue = bind(this.onQueue, this);
       this.onCloseAnimationEnd = bind(this.onCloseAnimationEnd, this);
+      this.close = bind(this.close, this);
       this.onOpenAnimationEnd = bind(this.onOpenAnimationEnd, this);
-      this.toggle = bind(this.toggle, this);
+      this.open = bind(this.open, this);
       this.receiveMessage = bind(this.receiveMessage, this);
       this.onSubmit = bind(this.onSubmit, this);
       this.onTypingEnd = bind(this.onTypingEnd, this);
@@ -145,7 +81,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       this.el = $(this.view('chat')(this.options));
       this.options.target.append(this.el);
       this.setAgentOnlineState(this.isOnline);
-      this.el.find('.zammad-chat-header').click(this.toggle);
+      this.el.find('.js-chat-open').click(this.open);
+      this.el.find('.js-chat-close').click(this.close);
       this.el.find('.zammad-chat-controls').on('submit', this.onSubmit);
       this.el.find('.zammad-chat-input').on({
         keydown: this.checkForEnter,
@@ -176,6 +113,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
           return console.log('debug', 'ws:onerror', e);
         };
       })(this);
+      this.onReady();
     }
 
     ZammadChat.prototype.checkForEnter = function(event) {
@@ -339,28 +277,26 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       return this.scrollToBottom();
     };
 
-    ZammadChat.prototype.toggle = function() {
+    ZammadChat.prototype.open = function() {
       if (this.isOpen) {
-        return this.close();
-      } else {
-        return this.open();
+        return;
       }
-    };
-
-    ZammadChat.prototype.open = function() {
       this.showLoader();
-      return this.el.addClass('zammad-chat-is-open').animate({
+      this.el.addClass('zammad-chat-is-open').animate({
         bottom: 0
       }, 500, this.onOpenAnimationEnd);
+      return this.isOpen = true;
     };
 
     ZammadChat.prototype.onOpenAnimationEnd = function() {
-      this.isOpen = true;
       return this.connect();
     };
 
-    ZammadChat.prototype.close = function() {
+    ZammadChat.prototype.close = function(event) {
       var remainerHeight;
+      if (event) {
+        event.stopPropagation();
+      }
       remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
       return this.el.animate({
         bottom: -remainerHeight
@@ -570,6 +506,71 @@ jQuery.fn.autoGrow = function(options) {
 
   });
 };
+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> ');
+    
+      __out.push(this.agentPhrase);
+    
+      __out.push('\n</span>');
+    
+    }).call(this);
+    
+  }).call(__obj);
+  __obj.safe = __objSafe, __obj.escape = __escape;
+  return __out.join('');
+};
+
 if (!window.zammadChatTemplates) {
   window.zammadChatTemplates = {};
 }
@@ -612,7 +613,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
   }
   (function() {
     (function() {
-      __out.push('<div class="zammad-chat">\n  <div class="zammad-chat-header">\n    <div class="zammad-chat-header-controls">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online">Online</span>\n      <span class="zammad-chat-toggle">\n        <svg class="zammad-chat-toggle-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-toggle-icon-close" viewBox="0 0 13 7"><path d="M6.554 4.214L2.246 0l-1.4 1.428 5 4.9.708.693.7-.7 4.9-4.9L10.74.008 6.553 4.214z" fill-rule="evenodd"/></svg>\n      </span>\n    </div>\n    <div class="zammad-chat-agent zammad-chat-is-hidden">\n      \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('<div class="zammad-chat">\n  <div class="zammad-chat-header js-chat-open">\n    <div class="zammad-chat-header-controls">\n      <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online">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 js-chat-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      \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(this.invitationPhrase);
     

public/assets/chat/chat.scss

@@ -70,11 +70,15 @@ $baseTextColor: if($luminance < 0.2, white, black);
   cursor: pointer;
 }
 
+.zammad-chat.zammad-chat-is-open .zammad-chat-header {
+  cursor: default;
+}
+
 .zammad-chat-welcome-text {
   font-size: 1.2em;
 }
 
-.zammad-chat-toggle {
+.zammad-chat-header-icon {
   position: absolute;
   right: 0;
   top: 0;
@@ -82,20 +86,26 @@ $baseTextColor: if($luminance < 0.2, white, black);
   width: 3.4em;
   text-align: center;
   line-height: 3.5em;
+  cursor: pointer;
 }
 
-.zammad-chat-toggle-icon-open,
-.zammad-chat-toggle-icon-close {
+.zammad-chat-header-icon-open,
+.zammad-chat-header-icon-close {
   fill: currentColor;
-  height: 0.85em;
+  width: 1.6em;
+  vertical-align: middle;
+}
+
+.zammad-chat-header-icon-close {
+  width: 1.3em;
 }
 
-.zammad-chat-toggle-icon-close,
-.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-open {
+.zammad-chat-header-icon-close,
+.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
   display: none;
 }
 
-.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-close {
+.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
   display: inline;
 }
 

public/assets/chat/close.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><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="#fff"/></g></svg>

public/assets/chat/views/chat.eco

@@ -1,10 +1,10 @@
 <div class="zammad-chat">
-  <div class="zammad-chat-header">
+  <div class="zammad-chat-header js-chat-open">
     <div class="zammad-chat-header-controls">
       <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online">Online</span>
-      <span class="zammad-chat-toggle">
-        <svg class="zammad-chat-toggle-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-toggle-icon-close" viewBox="0 0 13 7"><path d="M6.554 4.214L2.246 0l-1.4 1.428 5 4.9.708.693.7-.7 4.9-4.9L10.74.008 6.553 4.214z" fill-rule="evenodd"/></svg>
+      <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 js-chat-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>
       </span>
     </div>
     <div class="zammad-chat-agent zammad-chat-is-hidden">