chat.js: make chat fixed position more robust

public/assets/chat/chat.coffee

@@ -516,6 +516,10 @@ do($ = window.jQuery, window) ->
 
       @el.addClass('zammad-chat-is-open')
 
+      remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
+
+      @el.css 'bottom', -remainerHeight
+
       if !@sessionId
         @el.animate { bottom: 0 }, 500, @onOpenAnimationEnd
         @send('chat_session_init')
@@ -573,12 +577,12 @@ do($ = window.jQuery, window) ->
         @enableScrollOnRoot()
 
       # close window
-      @el.removeClass('zammad-chat-is-open')
       remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
       @el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
 
     onCloseAnimationEnd: =>
-      @el.removeClass('zammad-chat-is-visible')
+      @el.css 'bottom', ''
+      @el.removeClass('zammad-chat-is-open')
 
       @showLoader()
       @el.find('.zammad-chat-welcome').removeClass('zammad-chat-is-hidden')
@@ -605,9 +609,6 @@ do($ = window.jQuery, window) ->
         @input.autoGrow
           extraLine: false
 
-      remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
-
-      @el.css 'bottom', -remainerHeight
       @el.addClass('zammad-chat-is-shown')
 
     disableInput: ->

public/assets/chat/chat.css

@@ -5,7 +5,7 @@
   bottom: 0;
   font-size: 12px;
   width: 33em;
-  height: 30em;
+  height: 3.5em;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   border-radius: 5px 5px 0 0;
   will-change: bottom;
@@ -14,16 +14,10 @@
   -ms-flex-direction: column;
   flex-direction: column;
   z-index: 999; }
-  .zammad-chat.is-fullscreen {
-    right: 0;
-    width: 100%;
-    height: 100vh;
-    border-radius: 0 !important; }
   @media only screen and (max-width: 768px) {
     .zammad-chat {
       right: 0;
       width: 100%;
-      height: 100%;
       border-radius: 0 !important;
       font-size: 16px; } }
 
@@ -36,6 +30,12 @@
 .zammad-chat.zammad-chat-is-shown {
   opacity: 1; }
 
+.zammad-chat.zammad-chat-is-open {
+  height: 30em; }
+  @media only screen and (max-width: 768px) {
+    .zammad-chat.zammad-chat-is-open {
+      height: 100%; } }
+
 .zammad-chat-icon {
   height: 2em;
   width: 2em;
@@ -201,6 +201,7 @@
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
+  display: none;
   -webkit-overflow-scrolling: touch; }
   @media only screen and (max-width: 768px) {
     .zammad-chat-body {
@@ -209,6 +210,9 @@
       -ms-flex: 1;
       flex: 1; } }
 
+.zammad-chat-is-open .zammad-chat-body {
+  display: block; }
+
 .zammad-chat-timestamp {
   text-align: center;
   color: #999999;
@@ -299,9 +303,7 @@
 
 .zammad-chat-controls {
   overflow: hidden;
-  display: -webkit-flex;
+  display: none;
-  display: -ms-flexbox;
-  display: flex;
   -webkit-align-items: flex-start;
   -ms-flex-align: start;
   align-items: flex-start;
@@ -313,6 +315,11 @@
   position: relative;
   background: white; }
 
+.zammad-chat-is-open .zammad-chat-controls {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
 .zammad-chat-input {
   margin: 0;
   padding: 1em 2em;
@@ -367,9 +374,6 @@
 .zammad-chat-is-hidden {
   display: none; }
 
-.zammad-chat-is-visible {
-  display: block; }
-
 /*
   # Flat Design
 */

public/assets/chat/chat.js

@@ -720,6 +720,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.open = function() {
+      var remainerHeight;
       if (this.isOpen) {
         this.log.debug('widget already open, block');
         return;
@@ -730,6 +731,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         this.showLoader();
       }
       this.el.addClass('zammad-chat-is-open');
+      remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
+      this.el.css('bottom', -remainerHeight);
       if (!this.sessionId) {
         this.el.animate({
           bottom: 0
@@ -790,7 +793,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       if (this.isFullscreen) {
         this.enableScrollOnRoot();
       }
-      this.el.removeClass('zammad-chat-is-open');
       remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
       return this.el.animate({
         bottom: -remainerHeight
@@ -798,7 +800,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.onCloseAnimationEnd = function() {
-      this.el.removeClass('zammad-chat-is-visible');
+      this.el.css('bottom', '');
+      this.el.removeClass('zammad-chat-is-open');
       this.showLoader();
       this.el.find('.zammad-chat-welcome').removeClass('zammad-chat-is-hidden');
       this.el.find('.zammad-chat-agent').addClass('zammad-chat-is-hidden');
@@ -818,7 +821,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.show = function() {
-      var remainerHeight;
       if (this.state === 'offline') {
         return;
       }
@@ -829,8 +831,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
           extraLine: false
         });
       }
-      remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
-      this.el.css('bottom', -remainerHeight);
       return this.el.addClass('zammad-chat-is-shown');
     };
 
@@ -1170,67 +1170,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, '&')
-        .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):
@@ -1316,6 +1255,67 @@ 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>\n</span>');
+    
+    }).call(this);
+    
+  }).call(__obj);
+  __obj.safe = __objSafe, __obj.escape = __escape;
+  return __out.join('');
+};
+
 if (!window.zammadChatTemplates) {
   window.zammadChatTemplates = {};
 }

public/assets/chat/chat.scss

@@ -5,7 +5,7 @@
   bottom: 0;
   font-size: 12px;
   width: 33em;
-  height: 30em;
+  height: 3.5em;
   box-shadow: 0 3px 10px rgba(0,0,0,.3);
   border-radius: 5px 5px 0 0;
   will-change: bottom;
@@ -13,17 +13,9 @@
   flex-direction: column;
   z-index: 999;
 
-  &.is-fullscreen {
-    right: 0;
-    width: 100%;
-    height: 100vh;
-    border-radius: 0 !important;
-  }
-
   @media only screen and (max-width: 768px) {
     right: 0;
     width: 100%;
-    height: 100%;
     border-radius: 0 !important;
     font-size: 16px;
   }
@@ -35,6 +27,13 @@
 .zammad-chat.zammad-chat-is-shown {
   opacity: 1;
 }
+.zammad-chat.zammad-chat-is-open {
+  height: 30em;
+  
+  @media only screen and (max-width: 768px) {
+    height: 100%;
+  }
+}
 
 .zammad-chat-icon {
   height: 2em;
@@ -209,6 +208,7 @@
   overflow: auto;
   background: white;
   flex: 1;
+  display: none;
   -webkit-overflow-scrolling: touch;
 
   @media only screen and (max-width: 768px) {
@@ -217,6 +217,10 @@
   }
 }
 
+.zammad-chat-is-open .zammad-chat-body {
+  display: block;
+}
+
 .zammad-chat-timestamp {
   text-align: center;
   color: hsl(0,0%,60%);
@@ -308,7 +312,7 @@
 
 .zammad-chat-controls {
   overflow: hidden;
-  display: flex;
+  display: none;
   align-items: flex-start;
   border-top: 1px solid hsl(0,0%,93%);
   padding: 0;
@@ -321,6 +325,10 @@
   background: white;
 }
 
+.zammad-chat-is-open .zammad-chat-controls {
+  display: flex;
+}
+
 .zammad-chat-input {
   margin: 0;
   padding: 1em 2em;
@@ -378,10 +386,6 @@
   display: none;
 }
 
-.zammad-chat-is-visible {
-  display: block;
-}
-
 /*
   # Flat Design
 */