Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chat client: disable chat button until websocket connected

Browse source
This commit is contained in:
Felix Niklas 2015-11-16 13:08:32 +01:00
parent d301fddf88
commit 21f717c619
6 changed files with 96 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/assets/chat/chat.coffee
View file

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

1
public/assets/chat/chat.css
View file

@ -30,6 +30,7 @@
background: #379ad7; background: #379ad7;
color: white; color: white;
line-height: 2.5em; 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); 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; position: relative;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;

154
public/assets/chat/chat.js
View file

@ -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); }; }, var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
slice = [].slice; slice = [].slice;
@ -14,7 +75,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
port: 6042, port: 6042,
debug: false, debug: false,
fontSize: void 0, fontSize: void 0,
buttonSelector: '.open-zammad-chat' buttonSelector: '.open-zammad-chat',
hiddenButtonClass: 'is-inactive'
}; };
ZammadChat.prototype._messageCount = 0; 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.log = bind(this.log, this);
this.T = bind(this.T, this); this.T = bind(this.T, this);
if (!window.WebSocket || !sessionStorage) { if (!window.WebSocket || !sessionStorage) {
this.state = 'unsupported';
this.log('notice', 'Chat: Browser not supported!'); this.log('notice', 'Chat: Browser not supported!');
return; return;
} }
@ -148,7 +211,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
keydown: this.checkForEnter, keydown: this.checkForEnter,
input: this.onInput input: this.onInput
}); });
$(this.options.buttonSelector).click(this.open);
this.wsConnect(); this.wsConnect();
} }
@ -209,16 +271,19 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
break; break;
case 'offline': case 'offline':
this.onError('Zammad Chat: No agent online'); this.onError('Zammad Chat: No agent online');
this.state = 'off';
this.hide(); this.hide();
this.wsClose(); this.wsClose();
break; break;
case 'chat_disabled': case 'chat_disabled':
this.onError('Zammad Chat: Chat is disabled'); this.onError('Zammad Chat: Chat is disabled');
this.state = 'off';
this.hide(); this.hide();
this.wsClose(); this.wsClose();
break; break;
case 'no_seats_available': case 'no_seats_available':
this.onError('Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue); this.onError('Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue);
this.state = 'off';
this.hide(); this.hide();
this.wsClose(); this.wsClose();
break; break;
@ -231,6 +296,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
}; };
ZammadChat.prototype.onReady = function() { ZammadChat.prototype.onReady = function() {
$(this.options.buttonSelector).click(this.open).removeClass(this.hiddenButtonClass);
if (this.options.show) { if (this.options.show) {
return this.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.onOpenAnimationEnd = function() {};
ZammadChat.prototype.close = function(event) { ZammadChat.prototype.close = function(event) {
if (this.state === 'off' || this.state === 'unsupported') {
return this.state;
}
if (event) { if (event) {
event.stopPropagation(); event.stopPropagation();
} }
@ -411,6 +480,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.show = function() { ZammadChat.prototype.show = function() {
var remainerHeight; var remainerHeight;
if (this.state === 'off' || this.state === 'unsupported') {
return this.state;
}
this.el.addClass('zammad-chat-is-visible'); this.el.addClass('zammad-chat-is-visible');
this.input.autoGrow({ this.input.autoGrow({
extraLine: false extraLine: false
@ -647,67 +719,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return window.ZammadChat = ZammadChat; return window.ZammadChat = ZammadChat;
})(window.jQuery, window); })(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): * "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.fontFamily = jQuery(this).css('font-family');
mirror.style.fontSize = jQuery(this).css('font-size'); mirror.style.fontSize = jQuery(this).css('font-size');
mirror.style.lineHeight = jQuery(this).css('line-height'); mirror.style.lineHeight = jQuery(this).css('line-height');
mirror.style.boxSizing = jQuery(this).css('box-sizing');
// Style the textarea // Style the textarea
this.style.overflow = "hidden"; this.style.overflow = "hidden";
@ -915,11 +925,11 @@ window.zammadChatTemplates["loader"] = function (__obj) {
} }
(function() { (function() {
(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(__sanitize(this.T('Connecting')));
__out.push('\n </div>\n </div>\n</div>'); __out.push('</span>\n</div>');
}).call(this); }).call(this);
@ -1090,11 +1100,11 @@ window.zammadChatTemplates["timeout"] = function (__obj) {
} }
(function() { (function() {
(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(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) { if (this.background) {
__out.push(__sanitize(" style='background: " + 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(__sanitize(this.T('Start new conversation')));
__out.push('</div>\n </div>\n </div>\n</div>'); __out.push('</div>\n </div>\n</div>');
}).call(this); }).call(this);
@ -1265,15 +1275,15 @@ window.zammadChatTemplates["waiting"] = function (__obj) {
} }
(function() { (function() {
(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(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(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); }).call(this);

2
public/assets/chat/chat.min.js vendored
View file

File diff suppressed because one or more lines are too long

1
public/assets/chat/chat.scss
View file

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

3
public/assets/chat/index.html
View file

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