chat client: add unread state

public/assets/chat/chat.coffee

@@ -264,6 +264,7 @@ do($ = window.jQuery, window) ->
         message: message
         from: 'customer'
         id: @_messageCount++
+        unreadClass: ''
 
       @maybeAddTimestamp()
 
@@ -299,7 +300,7 @@ do($ = window.jQuery, window) ->
 
     renderMessage: (data) =>
       @lastAddedType = "message--#{ data.from }"
-      unread = document.hidden ? ' zammad-chat-message--unread' : ''
+      data.unreadClass = if document.hidden then ' zammad-chat-message--unread' else ''
       @el.find('.zammad-chat-body').append @view('message')(data)
       @scrollToBottom()
 

public/assets/chat/chat.js

@@ -1,88 +1,3 @@
-/*!
- * ----------------------------------------------------------------------------
- * "THE BEER-WARE LICENSE" (Revision 42):
- * <jevin9@gmail.com> wrote this file. As long as you retain this notice you
- * can do whatever you want with this stuff. If we meet some day, and you think
- * this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
- * ----------------------------------------------------------------------------
- *
- * Autogrow Textarea Plugin Version v3.0
- * http://www.technoreply.com/autogrow-textarea-plugin-3-0
- * 
- * THIS PLUGIN IS DELIVERD ON A PAY WHAT YOU WHANT BASIS. IF THE PLUGIN WAS USEFUL TO YOU, PLEASE CONSIDER BUYING THE PLUGIN HERE :
- * https://sites.fastspring.com/technoreply/instant/autogrowtextareaplugin
- *
- * Date: October 15, 2012
- *
- * Zammad modification: remove overflow:hidden when maximum height is reached
- *
- */
-
-jQuery.fn.autoGrow = function(options) {
-  return this.each(function() {
-    var settings = jQuery.extend({
-      extraLine: true,
-    }, options);
-
-    var createMirror = function(textarea) {
-      jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
-      return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
-    }
-
-    var sendContentToMirror = function (textarea) {
-      mirror.innerHTML = String(textarea.value)
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/ /g, '&nbsp;')
-        .replace(/\n/g, '<br />') +
-        (settings.extraLine? '.<br/>.' : '')
-      ;
-
-      if (jQuery(textarea).height() != jQuery(mirror).height()) {
-        jQuery(textarea).height(jQuery(mirror).height());
-
-        var maxHeight = parseInt(jQuery(textarea).css('max-height'), 10);
-        var overflow = jQuery(mirror).height() > maxHeight ? '' : 'hidden'
-        jQuery(textarea).css('overflow', overflow);
-      }
-    }
-
-    var growTextarea = function () {
-      sendContentToMirror(this);
-    }
-
-    // Create a mirror
-    var mirror = createMirror(this);
-    
-    // Style the mirror
-    mirror.style.display = 'none';
-    mirror.style.wordWrap = 'break-word';
-    mirror.style.whiteSpace = 'normal';
-    mirror.style.padding = jQuery(this).css('paddingTop') + ' ' + 
-      jQuery(this).css('paddingRight') + ' ' + 
-      jQuery(this).css('paddingBottom') + ' ' + 
-      jQuery(this).css('paddingLeft');
-      
-    mirror.style.width = jQuery(this).css('width');
-    mirror.style.fontFamily = jQuery(this).css('font-family');
-    mirror.style.fontSize = jQuery(this).css('font-size');
-    mirror.style.lineHeight = jQuery(this).css('line-height');
-
-    // Style the textarea
-    this.style.overflow = "hidden";
-    this.style.minHeight = this.rows+"em";
-
-    // Bind the textarea's event
-    this.onkeyup = growTextarea;
-
-    // Fire the event for text already present
-    sendContentToMirror(this);
-
-  });
-};
 if (!window.zammadChatTemplates) {
   window.zammadChatTemplates = {};
 }
@@ -506,7 +421,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       messageElement = this.view('message')({
         message: message,
         from: 'customer',
-        id: this._messageCount++
+        id: this._messageCount++,
+        unreadClass: ''
       });
       this.maybeAddTimestamp();
       if (this.el.find('.zammad-chat-message--typing').size()) {
@@ -537,11 +453,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.renderMessage = function(data) {
-      var ref, unread;
       this.lastAddedType = "message--" + data.from;
-      unread = (ref = document.hidden) != null ? ref : {
+      data.unreadClass = document.hidden ? ' zammad-chat-message--unread' : '';
-        ' zammad-chat-message--unread': ''
-      };
       this.el.find('.zammad-chat-body').append(this.view('message')(data));
       return this.scrollToBottom();
     };
@@ -935,6 +848,91 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
   return window.ZammadChat = ZammadChat;
 })(window.jQuery, window);
 
+/*!
+ * ----------------------------------------------------------------------------
+ * "THE BEER-WARE LICENSE" (Revision 42):
+ * <jevin9@gmail.com> wrote this file. As long as you retain this notice you
+ * can do whatever you want with this stuff. If we meet some day, and you think
+ * this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
+ * ----------------------------------------------------------------------------
+ *
+ * Autogrow Textarea Plugin Version v3.0
+ * http://www.technoreply.com/autogrow-textarea-plugin-3-0
+ * 
+ * THIS PLUGIN IS DELIVERD ON A PAY WHAT YOU WHANT BASIS. IF THE PLUGIN WAS USEFUL TO YOU, PLEASE CONSIDER BUYING THE PLUGIN HERE :
+ * https://sites.fastspring.com/technoreply/instant/autogrowtextareaplugin
+ *
+ * Date: October 15, 2012
+ *
+ * Zammad modification: remove overflow:hidden when maximum height is reached
+ *
+ */
+
+jQuery.fn.autoGrow = function(options) {
+  return this.each(function() {
+    var settings = jQuery.extend({
+      extraLine: true,
+    }, options);
+
+    var createMirror = function(textarea) {
+      jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
+      return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
+    }
+
+    var sendContentToMirror = function (textarea) {
+      mirror.innerHTML = String(textarea.value)
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/ /g, '&nbsp;')
+        .replace(/\n/g, '<br />') +
+        (settings.extraLine? '.<br/>.' : '')
+      ;
+
+      if (jQuery(textarea).height() != jQuery(mirror).height()) {
+        jQuery(textarea).height(jQuery(mirror).height());
+
+        var maxHeight = parseInt(jQuery(textarea).css('max-height'), 10);
+        var overflow = jQuery(mirror).height() > maxHeight ? '' : 'hidden'
+        jQuery(textarea).css('overflow', overflow);
+      }
+    }
+
+    var growTextarea = function () {
+      sendContentToMirror(this);
+    }
+
+    // Create a mirror
+    var mirror = createMirror(this);
+    
+    // Style the mirror
+    mirror.style.display = 'none';
+    mirror.style.wordWrap = 'break-word';
+    mirror.style.whiteSpace = 'normal';
+    mirror.style.padding = jQuery(this).css('paddingTop') + ' ' + 
+      jQuery(this).css('paddingRight') + ' ' + 
+      jQuery(this).css('paddingBottom') + ' ' + 
+      jQuery(this).css('paddingLeft');
+      
+    mirror.style.width = jQuery(this).css('width');
+    mirror.style.fontFamily = jQuery(this).css('font-family');
+    mirror.style.fontSize = jQuery(this).css('font-size');
+    mirror.style.lineHeight = jQuery(this).css('line-height');
+
+    // Style the textarea
+    this.style.overflow = "hidden";
+    this.style.minHeight = this.rows+"em";
+
+    // Bind the textarea's event
+    this.onkeyup = growTextarea;
+
+    // Fire the event for text already present
+    sendContentToMirror(this);
+
+  });
+};
 if (!window.zammadChatTemplates) {
   window.zammadChatTemplates = {};
 }
@@ -1123,6 +1121,8 @@ window.zammadChatTemplates["message"] = function (__obj) {
     
       __out.push(__sanitize(this.from));
     
+      __out.push(__sanitize(this.unreadClass));
+    
       __out.push('">\n  <span class="zammad-chat-message-body"');
     
       if (this.background && this.from === 'customer') {

public/assets/chat/views/message.eco

@@ -1,3 +1,3 @@
-<div class="zammad-chat-message zammad-chat-message--<%= @from %>">
+<div class="zammad-chat-message zammad-chat-message--<%= @from %><%= @unreadClass %>">
   <span class="zammad-chat-message-body"<%= " style='background: #{ @background }'" if @background and @from is 'customer' %>><%- @message %></span>
 </div>