chat client: add unread state

This commit is contained in:
Felix Niklas 2015-11-26 10:52:10 +01:00
parent faea9d3936
commit 4a9230f2ea
4 changed files with 94 additions and 93 deletions

View file

@ -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()

View file

@ -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 : {
' zammad-chat-message--unread': ''
};
data.unreadClass = document.hidden ? ' 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') {

File diff suppressed because one or more lines are too long

View file

@ -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>