Feature #2888: Added Chat JS callback hooks: onReady, onCloseAnimationEnd, onError, onOpenAnimationEnd, onConnectionReestablished, onSessionClosed, onConnectionEstablished, onCssLoaded. Thanks to @ma-jahn ❤️
This commit is contained in:
parent
9472af70f1
commit
965218ac8c
6 changed files with 247 additions and 138 deletions
|
@ -172,6 +172,15 @@ do(window) ->
|
|||
inactiveTimeoutIntervallCheck: 0.5
|
||||
waitingListTimeout: 4
|
||||
waitingListTimeoutIntervallCheck: 0.5
|
||||
# Callbacks
|
||||
onReady: undefined
|
||||
onCloseAnimationEnd: undefined
|
||||
onError: undefined
|
||||
onOpenAnimationEnd: undefined
|
||||
onConnectionReestablished: undefined
|
||||
onSessionClosed: undefined
|
||||
onConnectionEstablished: undefined
|
||||
onCssLoaded: undefined
|
||||
|
||||
logPrefix: 'chat'
|
||||
_messageCount: 0
|
||||
|
@ -766,6 +775,8 @@ do(window) ->
|
|||
btn.addEventListener('click', @open)
|
||||
btn.classList.remove(@inactiveClass)
|
||||
|
||||
@options.onReady?()
|
||||
|
||||
if @options.show
|
||||
@show()
|
||||
|
||||
|
@ -782,6 +793,8 @@ do(window) ->
|
|||
else
|
||||
@destroy(remove: true)
|
||||
|
||||
@options.onError?(message)
|
||||
|
||||
onReopenSession: (data) =>
|
||||
@log.debug 'old messages', data.session
|
||||
@inactiveTimeout.start()
|
||||
|
@ -906,7 +919,7 @@ do(window) ->
|
|||
@el.clientHeight
|
||||
|
||||
if !@sessionId
|
||||
@el.addEventListener 'transitionend', @onOpenTransitionend
|
||||
@el.addEventListener 'transitionend', @onOpenAnimationEnd
|
||||
@el.classList.add 'zammad-chat--animate'
|
||||
# force redraw
|
||||
@el.clientHeight
|
||||
|
@ -918,15 +931,16 @@ do(window) ->
|
|||
)
|
||||
else
|
||||
@el.style.transform = ''
|
||||
@onOpenTransitionend()
|
||||
@onOpenAnimationEnd()
|
||||
|
||||
onOpenTransitionend: =>
|
||||
@el.removeEventListener 'transitionend', @onOpenTransitionend
|
||||
onOpenAnimationEnd: =>
|
||||
@el.removeEventListener 'transitionend', @onOpenAnimationEnd
|
||||
@el.classList.remove 'zammad-chat--animate'
|
||||
@idleTimeout.stop()
|
||||
|
||||
if @isFullscreen
|
||||
@disableScrollOnRoot()
|
||||
@options.onOpenAnimationEnd?()
|
||||
|
||||
sessionClose: =>
|
||||
# send close
|
||||
|
@ -973,15 +987,15 @@ do(window) ->
|
|||
|
||||
# close window
|
||||
remainerHeight = @el.clientHeight - @el.querySelector('.zammad-chat-header').offsetHeight
|
||||
@el.addEventListener 'transitionend', @onCloseTransitionend
|
||||
@el.addEventListener 'transitionend', @onCloseAnimationEnd
|
||||
@el.classList.add 'zammad-chat--animate'
|
||||
# force redraw
|
||||
document.offsetHeight
|
||||
# animate out
|
||||
@el.style.transform = "translateY(#{remainerHeight}px)"
|
||||
|
||||
onCloseTransitionend: =>
|
||||
@el.removeEventListener 'transitionend', @onCloseTransitionend
|
||||
onCloseAnimationEnd: =>
|
||||
@el.removeEventListener 'transitionend', @onCloseAnimationEnd
|
||||
@el.classList.remove 'zammad-chat-is-open', 'zammad-chat--animate'
|
||||
@el.style.transform = ''
|
||||
|
||||
|
@ -991,6 +1005,7 @@ do(window) ->
|
|||
@el.querySelector('.zammad-chat-agent-status').classList.add('zammad-chat-is-hidden')
|
||||
|
||||
@isOpen = false
|
||||
@options.onCloseAnimationEnd?()
|
||||
|
||||
@io.reconnect()
|
||||
|
||||
|
@ -1157,12 +1172,14 @@ do(window) ->
|
|||
@lastAddedType = 'status'
|
||||
@setAgentOnlineState 'online'
|
||||
@addStatus @T('Connection re-established')
|
||||
@options.onConnectionReestablished?()
|
||||
|
||||
onSessionClosed: (data) ->
|
||||
@addStatus @T('Chat closed by %s', data.realname)
|
||||
@disableInput()
|
||||
@setAgentOnlineState 'offline'
|
||||
@inactiveTimeout.stop()
|
||||
@options.onSessionClosed?(data)
|
||||
|
||||
setSessionId: (id) =>
|
||||
@sessionId = id
|
||||
|
@ -1202,6 +1219,7 @@ do(window) ->
|
|||
@waitingListTimeout.stop()
|
||||
@idleTimeout.stop()
|
||||
@inactiveTimeout.start()
|
||||
@options.onConnectionEstablished?(data)
|
||||
|
||||
showCustomerTimeout: ->
|
||||
@el.querySelector('.zammad-chat-modal').innerHTML = @view('customer_timeout')
|
||||
|
@ -1254,6 +1272,7 @@ do(window) ->
|
|||
@cssLoaded = true
|
||||
if @socketReady
|
||||
@onReady()
|
||||
@options.onCssLoaded?()
|
||||
|
||||
startTimeoutObservers: =>
|
||||
@idleTimeout = new Timeout(
|
||||
|
|
|
@ -59,6 +59,97 @@ window.zammadChatTemplates["agent"] = function(__obj) {
|
|||
return __out.join('');
|
||||
};
|
||||
|
||||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["chat"] = 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, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
};
|
||||
}
|
||||
(function() {
|
||||
(function() {
|
||||
__out.push('<div class="zammad-chat');
|
||||
|
||||
if (this.flat) {
|
||||
__out.push(__sanitize(' zammad-chat--flat'));
|
||||
}
|
||||
|
||||
__out.push('"');
|
||||
|
||||
if (this.fontSize) {
|
||||
__out.push(__sanitize(" style='font-size: " + this.fontSize + "'"));
|
||||
}
|
||||
|
||||
__out.push('>\n <div class="zammad-chat-header js-chat-open"');
|
||||
|
||||
if (this.background) {
|
||||
__out.push(__sanitize(" style='background: " + this.background + "'"));
|
||||
}
|
||||
|
||||
__out.push('>\n <div class="zammad-chat-header-controls js-chat-toggle">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden js-chat-status" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" width="13" height="7" 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" width="13" height="13" 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 </div>\n <div class="zammad-chat-welcome">\n <svg class="zammad-chat-icon" viewBox="0 0 24 24" width="24" height="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"/></svg>\n <span class="zammad-chat-welcome-text">');
|
||||
|
||||
__out.push(this.T(this.title));
|
||||
|
||||
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-modal"></div>\n <div class="zammad-scroll-hint is-hidden">\n <svg class="zammad-scroll-hint-icon" width="20" height="18" viewBox="0 0 20 18"><path d="M0,2.00585866 C0,0.898053512 0.898212381,0 1.99079514,0 L18.0092049,0 C19.1086907,0 20,0.897060126 20,2.00585866 L20,11.9941413 C20,13.1019465 19.1017876,14 18.0092049,14 L1.99079514,14 C0.891309342,14 0,13.1029399 0,11.9941413 L0,2.00585866 Z M10,14 L16,18 L16,14 L10,14 Z" fill-rule="evenodd"/></svg>\n ');
|
||||
|
||||
__out.push(this.T(this.scrollHint));
|
||||
|
||||
__out.push('\n </div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <div class="zammad-chat-input" rows="1" placeholder="');
|
||||
|
||||
__out.push(this.T('Compose your message...'));
|
||||
|
||||
__out.push('" contenteditable="true"></div>\n <button type="submit" class="zammad-chat-button zammad-chat-send"');
|
||||
|
||||
if (this.background) {
|
||||
__out.push(__sanitize(" style='background: " + this.background + "'"));
|
||||
}
|
||||
|
||||
__out.push('>');
|
||||
|
||||
__out.push(this.T('Send'));
|
||||
|
||||
__out.push('</button>\n </form>\n</div>');
|
||||
|
||||
}).call(this);
|
||||
|
||||
}).call(__obj);
|
||||
__obj.safe = __objSafe, __obj.escape = __escape;
|
||||
return __out.join('');
|
||||
};
|
||||
|
||||
var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
|
||||
hasProp = {}.hasOwnProperty,
|
||||
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
||||
|
@ -363,7 +454,15 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
inactiveTimeout: 8,
|
||||
inactiveTimeoutIntervallCheck: 0.5,
|
||||
waitingListTimeout: 4,
|
||||
waitingListTimeoutIntervallCheck: 0.5
|
||||
waitingListTimeoutIntervallCheck: 0.5,
|
||||
onReady: void 0,
|
||||
onCloseAnimationEnd: void 0,
|
||||
onError: void 0,
|
||||
onOpenAnimationEnd: void 0,
|
||||
onConnectionReestablished: void 0,
|
||||
onSessionClosed: void 0,
|
||||
onConnectionEstablished: void 0,
|
||||
onCssLoaded: void 0
|
||||
};
|
||||
|
||||
ZammadChat.prototype.logPrefix = 'chat';
|
||||
|
@ -660,11 +759,11 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
this.onQueue = bind(this.onQueue, this);
|
||||
this.onQueueScreen = bind(this.onQueueScreen, this);
|
||||
this.onWebSocketClose = bind(this.onWebSocketClose, this);
|
||||
this.onCloseTransitionend = bind(this.onCloseTransitionend, this);
|
||||
this.onCloseAnimationEnd = bind(this.onCloseAnimationEnd, this);
|
||||
this.close = bind(this.close, this);
|
||||
this.toggle = bind(this.toggle, this);
|
||||
this.sessionClose = bind(this.sessionClose, this);
|
||||
this.onOpenTransitionend = bind(this.onOpenTransitionend, this);
|
||||
this.onOpenAnimationEnd = bind(this.onOpenAnimationEnd, this);
|
||||
this.open = bind(this.open, this);
|
||||
this.renderMessage = bind(this.renderMessage, this);
|
||||
this.receiveMessage = bind(this.receiveMessage, this);
|
||||
|
@ -1079,20 +1178,23 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onReady = function() {
|
||||
var btn;
|
||||
var base, btn;
|
||||
this.log.debug('widget ready for use');
|
||||
btn = document.querySelector("." + this.options.buttonClass);
|
||||
if (btn) {
|
||||
btn.addEventListener('click', this.open);
|
||||
btn.classList.remove(this.inactiveClass);
|
||||
}
|
||||
if (typeof (base = this.options).onReady === "function") {
|
||||
base.onReady();
|
||||
}
|
||||
if (this.options.show) {
|
||||
return this.show();
|
||||
}
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onError = function(message) {
|
||||
var btn;
|
||||
var base, btn;
|
||||
this.log.debug(message);
|
||||
this.addStatus(message);
|
||||
btn = document.querySelector("." + this.options.buttonClass);
|
||||
|
@ -1101,14 +1203,15 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
}
|
||||
if (this.isOpen) {
|
||||
this.disableInput();
|
||||
return this.destroy({
|
||||
this.destroy({
|
||||
remove: false
|
||||
});
|
||||
} else {
|
||||
return this.destroy({
|
||||
this.destroy({
|
||||
remove: true
|
||||
});
|
||||
}
|
||||
return typeof (base = this.options).onError === "function" ? base.onError(message) : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onReopenSession = function(data) {
|
||||
|
@ -1237,7 +1340,7 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
this.el.style.transform = "translateY(" + remainerHeight + "px)";
|
||||
this.el.clientHeight;
|
||||
if (!this.sessionId) {
|
||||
this.el.addEventListener('transitionend', this.onOpenTransitionend);
|
||||
this.el.addEventListener('transitionend', this.onOpenAnimationEnd);
|
||||
this.el.classList.add('zammad-chat--animate');
|
||||
this.el.clientHeight;
|
||||
this.el.style.transform = '';
|
||||
|
@ -1246,17 +1349,19 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
});
|
||||
} else {
|
||||
this.el.style.transform = '';
|
||||
return this.onOpenTransitionend();
|
||||
return this.onOpenAnimationEnd();
|
||||
}
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onOpenTransitionend = function() {
|
||||
this.el.removeEventListener('transitionend', this.onOpenTransitionend);
|
||||
ZammadChat.prototype.onOpenAnimationEnd = function() {
|
||||
var base;
|
||||
this.el.removeEventListener('transitionend', this.onOpenAnimationEnd);
|
||||
this.el.classList.remove('zammad-chat--animate');
|
||||
this.idleTimeout.stop();
|
||||
if (this.isFullscreen) {
|
||||
return this.disableScrollOnRoot();
|
||||
this.disableScrollOnRoot();
|
||||
}
|
||||
return typeof (base = this.options).onOpenAnimationEnd === "function" ? base.onOpenAnimationEnd() : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.sessionClose = function() {
|
||||
|
@ -1302,14 +1407,15 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
this.enableScrollOnRoot();
|
||||
}
|
||||
remainerHeight = this.el.clientHeight - this.el.querySelector('.zammad-chat-header').offsetHeight;
|
||||
this.el.addEventListener('transitionend', this.onCloseTransitionend);
|
||||
this.el.addEventListener('transitionend', this.onCloseAnimationEnd);
|
||||
this.el.classList.add('zammad-chat--animate');
|
||||
document.offsetHeight;
|
||||
return this.el.style.transform = "translateY(" + remainerHeight + "px)";
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onCloseTransitionend = function() {
|
||||
this.el.removeEventListener('transitionend', this.onCloseTransitionend);
|
||||
ZammadChat.prototype.onCloseAnimationEnd = function() {
|
||||
var base;
|
||||
this.el.removeEventListener('transitionend', this.onCloseAnimationEnd);
|
||||
this.el.classList.remove('zammad-chat-is-open', 'zammad-chat--animate');
|
||||
this.el.style.transform = '';
|
||||
this.showLoader();
|
||||
|
@ -1317,6 +1423,9 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
this.el.querySelector('.zammad-chat-agent').classList.add('zammad-chat-is-hidden');
|
||||
this.el.querySelector('.zammad-chat-agent-status').classList.add('zammad-chat-is-hidden');
|
||||
this.isOpen = false;
|
||||
if (typeof (base = this.options).onCloseAnimationEnd === "function") {
|
||||
base.onCloseAnimationEnd();
|
||||
}
|
||||
return this.io.reconnect();
|
||||
};
|
||||
|
||||
|
@ -1520,16 +1629,20 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onConnectionReestablished = function() {
|
||||
var base;
|
||||
this.lastAddedType = 'status';
|
||||
this.setAgentOnlineState('online');
|
||||
return this.addStatus(this.T('Connection re-established'));
|
||||
this.addStatus(this.T('Connection re-established'));
|
||||
return typeof (base = this.options).onConnectionReestablished === "function" ? base.onConnectionReestablished() : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onSessionClosed = function(data) {
|
||||
var base;
|
||||
this.addStatus(this.T('Chat closed by %s', data.realname));
|
||||
this.disableInput();
|
||||
this.setAgentOnlineState('offline');
|
||||
return this.inactiveTimeout.stop();
|
||||
this.inactiveTimeout.stop();
|
||||
return typeof (base = this.options).onSessionClosed === "function" ? base.onSessionClosed(data) : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.setSessionId = function(id) {
|
||||
|
@ -1542,6 +1655,7 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onConnectionEstablished = function(data) {
|
||||
var base;
|
||||
if (this.onInitialQueueDelayId) {
|
||||
clearTimeout(this.onInitialQueueDelayId);
|
||||
}
|
||||
|
@ -1567,7 +1681,8 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
this.setAgentOnlineState('online');
|
||||
this.waitingListTimeout.stop();
|
||||
this.idleTimeout.stop();
|
||||
return this.inactiveTimeout.start();
|
||||
this.inactiveTimeout.start();
|
||||
return typeof (base = this.options).onConnectionEstablished === "function" ? base.onConnectionEstablished(data) : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.showCustomerTimeout = function() {
|
||||
|
@ -1635,10 +1750,12 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onCssLoaded = function() {
|
||||
var base;
|
||||
this.cssLoaded = true;
|
||||
if (this.socketReady) {
|
||||
return this.onReady();
|
||||
this.onReady();
|
||||
}
|
||||
return typeof (base = this.options).onCssLoaded === "function" ? base.onCssLoaded() : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.startTimeoutObservers = function() {
|
||||
|
@ -1958,97 +2075,6 @@ var extend = function(child, parent) { for (var key in parent) { if (hasProp.cal
|
|||
return window.ZammadChat = ZammadChat;
|
||||
})(window);
|
||||
|
||||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["chat"] = 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, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
};
|
||||
}
|
||||
(function() {
|
||||
(function() {
|
||||
__out.push('<div class="zammad-chat');
|
||||
|
||||
if (this.flat) {
|
||||
__out.push(__sanitize(' zammad-chat--flat'));
|
||||
}
|
||||
|
||||
__out.push('"');
|
||||
|
||||
if (this.fontSize) {
|
||||
__out.push(__sanitize(" style='font-size: " + this.fontSize + "'"));
|
||||
}
|
||||
|
||||
__out.push('>\n <div class="zammad-chat-header js-chat-open"');
|
||||
|
||||
if (this.background) {
|
||||
__out.push(__sanitize(" style='background: " + this.background + "'"));
|
||||
}
|
||||
|
||||
__out.push('>\n <div class="zammad-chat-header-controls js-chat-toggle">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden js-chat-status" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" width="13" height="7" 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" width="13" height="13" 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 </div>\n <div class="zammad-chat-welcome">\n <svg class="zammad-chat-icon" viewBox="0 0 24 24" width="24" height="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"/></svg>\n <span class="zammad-chat-welcome-text">');
|
||||
|
||||
__out.push(this.T(this.title));
|
||||
|
||||
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-modal"></div>\n <div class="zammad-scroll-hint is-hidden">\n <svg class="zammad-scroll-hint-icon" width="20" height="18" viewBox="0 0 20 18"><path d="M0,2.00585866 C0,0.898053512 0.898212381,0 1.99079514,0 L18.0092049,0 C19.1086907,0 20,0.897060126 20,2.00585866 L20,11.9941413 C20,13.1019465 19.1017876,14 18.0092049,14 L1.99079514,14 C0.891309342,14 0,13.1029399 0,11.9941413 L0,2.00585866 Z M10,14 L16,18 L16,14 L10,14 Z" fill-rule="evenodd"/></svg>\n ');
|
||||
|
||||
__out.push(this.T(this.scrollHint));
|
||||
|
||||
__out.push('\n </div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <div class="zammad-chat-input" rows="1" placeholder="');
|
||||
|
||||
__out.push(this.T('Compose your message...'));
|
||||
|
||||
__out.push('" contenteditable="true"></div>\n <button type="submit" class="zammad-chat-button zammad-chat-send"');
|
||||
|
||||
if (this.background) {
|
||||
__out.push(__sanitize(" style='background: " + this.background + "'"));
|
||||
}
|
||||
|
||||
__out.push('>');
|
||||
|
||||
__out.push(this.T('Send'));
|
||||
|
||||
__out.push('</button>\n </form>\n</div>');
|
||||
|
||||
}).call(this);
|
||||
|
||||
}).call(__obj);
|
||||
__obj.safe = __objSafe, __obj.escape = __escape;
|
||||
return __out.join('');
|
||||
};
|
||||
|
||||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
|
|
2
public/assets/chat/chat-no-jquery.min.js
vendored
2
public/assets/chat/chat-no-jquery.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -170,6 +170,15 @@ do($ = window.jQuery, window) ->
|
|||
inactiveTimeoutIntervallCheck: 0.5
|
||||
waitingListTimeout: 4
|
||||
waitingListTimeoutIntervallCheck: 0.5
|
||||
# Callbacks
|
||||
onReady: undefined
|
||||
onCloseAnimationEnd: undefined
|
||||
onError: undefined
|
||||
onOpenAnimationEnd: undefined
|
||||
onConnectionReestablished: undefined
|
||||
onSessionClosed: undefined
|
||||
onConnectionEstablished: undefined
|
||||
onCssLoaded: undefined
|
||||
|
||||
logPrefix: 'chat'
|
||||
_messageCount: 0
|
||||
|
@ -794,6 +803,8 @@ do($ = window.jQuery, window) ->
|
|||
@log.debug 'widget ready for use'
|
||||
$(".#{ @options.buttonClass }").click(@open).removeClass(@inactiveClass)
|
||||
|
||||
@options.onReady?()
|
||||
|
||||
if @options.show
|
||||
@show()
|
||||
|
||||
|
@ -807,6 +818,8 @@ do($ = window.jQuery, window) ->
|
|||
else
|
||||
@destroy(remove: true)
|
||||
|
||||
@options.onError?(message)
|
||||
|
||||
onReopenSession: (data) =>
|
||||
@log.debug 'old messages', data.session
|
||||
@inactiveTimeout.start()
|
||||
|
@ -957,6 +970,7 @@ do($ = window.jQuery, window) ->
|
|||
|
||||
if @isFullscreen
|
||||
@disableScrollOnRoot()
|
||||
@options.onOpenAnimationEnd?()
|
||||
|
||||
sessionClose: =>
|
||||
# send close
|
||||
|
@ -1015,6 +1029,7 @@ do($ = window.jQuery, window) ->
|
|||
@el.find('.zammad-chat-agent-status').addClass('zammad-chat-is-hidden')
|
||||
|
||||
@isOpen = false
|
||||
@options.onCloseAnimationEnd?()
|
||||
|
||||
@io.reconnect()
|
||||
|
||||
|
@ -1181,12 +1196,14 @@ do($ = window.jQuery, window) ->
|
|||
@lastAddedType = 'status'
|
||||
@setAgentOnlineState 'online'
|
||||
@addStatus @T('Connection re-established')
|
||||
@options.onConnectionReestablished?()
|
||||
|
||||
onSessionClosed: (data) ->
|
||||
@addStatus @T('Chat closed by %s', data.realname)
|
||||
@disableInput()
|
||||
@setAgentOnlineState 'offline'
|
||||
@inactiveTimeout.stop()
|
||||
@options.onSessionClosed?(data)
|
||||
|
||||
setSessionId: (id) =>
|
||||
@sessionId = id
|
||||
|
@ -1226,6 +1243,7 @@ do($ = window.jQuery, window) ->
|
|||
@waitingListTimeout.stop()
|
||||
@idleTimeout.stop()
|
||||
@inactiveTimeout.start()
|
||||
@options.onConnectionEstablished?(data)
|
||||
|
||||
showCustomerTimeout: ->
|
||||
@el.find('.zammad-chat-modal').html @view('customer_timeout')
|
||||
|
@ -1284,6 +1302,7 @@ do($ = window.jQuery, window) ->
|
|||
@cssLoaded = true
|
||||
if @socketReady
|
||||
@onReady()
|
||||
@options.onCssLoaded?()
|
||||
|
||||
startTimeoutObservers: =>
|
||||
@idleTimeout = new Timeout(
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["agent"] = function (__obj) {
|
||||
window.zammadChatTemplates["agent"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -342,7 +342,15 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
inactiveTimeout: 8,
|
||||
inactiveTimeoutIntervallCheck: 0.5,
|
||||
waitingListTimeout: 4,
|
||||
waitingListTimeoutIntervallCheck: 0.5
|
||||
waitingListTimeoutIntervallCheck: 0.5,
|
||||
onReady: void 0,
|
||||
onCloseAnimationEnd: void 0,
|
||||
onError: void 0,
|
||||
onOpenAnimationEnd: void 0,
|
||||
onConnectionReestablished: void 0,
|
||||
onSessionClosed: void 0,
|
||||
onConnectionEstablished: void 0,
|
||||
onCssLoaded: void 0
|
||||
};
|
||||
|
||||
ZammadChat.prototype.logPrefix = 'chat';
|
||||
|
@ -567,6 +575,24 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
'Since you didn\'t respond in the last %s minutes your conversation with %s got closed.': 'Поскольку вы не отвечали в течение последних %s минут, ваш разговор с %s был закрыт.',
|
||||
'Since you didn\'t respond in the last %s minutes your conversation got closed.': 'Поскольку вы не отвечали в течение последних %s минут, ваш разговор был закрыт.',
|
||||
'We are sorry, it takes longer as expected to get an empty slot. Please try again later or send us an email. Thank you!': 'К сожалению, ожидание свободного места требует больше времени. Повторите попытку позже или отправьте нам электронное письмо. Спасибо!'
|
||||
},
|
||||
'sv': {
|
||||
'<strong>Chat</strong> with us!': '<strong>Chatta</strong> med oss!',
|
||||
'Scroll down to see new messages': 'Rulla ner för att se nya meddelanden',
|
||||
'Online': 'Online',
|
||||
'Offline': 'Offline',
|
||||
'Connecting': 'Ansluter',
|
||||
'Connection re-established': 'Anslutningen återupprättas',
|
||||
'Today': 'I dag',
|
||||
'Send': 'Skicka',
|
||||
'Chat closed by %s': 'Chatt stängd av %s',
|
||||
'Compose your message...': 'Skriv ditt meddelande...',
|
||||
'All colleagues are busy.': 'Alla kollegor är upptagna.',
|
||||
'You are on waiting list position <strong>%s</strong>.': 'Du är på väntelistan som position <strong>%s</strong>.',
|
||||
'Start new conversation': 'Starta ny konversation',
|
||||
'Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.': 'Eftersom du inte svarat inom %s minuterna i din konversation med <strong>%s</strong> så stängdes chatten.',
|
||||
'Since you didn\'t respond in the last %s minutes your conversation got closed.': 'Då du inte svarat inom de senaste %s minuterna så avslutades din chatt.',
|
||||
'We are sorry, it takes longer as expected to get an empty slot. Please try again later or send us an email. Thank you!': 'Vi är ledsna, det tar längre tid som förväntat att få en ledig plats. Försök igen senare eller skicka ett e-postmeddelande till oss. Tack!'
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1062,27 +1088,33 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onReady = function() {
|
||||
var base;
|
||||
this.log.debug('widget ready for use');
|
||||
$("." + this.options.buttonClass).click(this.open).removeClass(this.inactiveClass);
|
||||
if (typeof (base = this.options).onReady === "function") {
|
||||
base.onReady();
|
||||
}
|
||||
if (this.options.show) {
|
||||
return this.show();
|
||||
}
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onError = function(message) {
|
||||
var base;
|
||||
this.log.debug(message);
|
||||
this.addStatus(message);
|
||||
$("." + this.options.buttonClass).hide();
|
||||
if (this.isOpen) {
|
||||
this.disableInput();
|
||||
return this.destroy({
|
||||
this.destroy({
|
||||
remove: false
|
||||
});
|
||||
} else {
|
||||
return this.destroy({
|
||||
this.destroy({
|
||||
remove: true
|
||||
});
|
||||
}
|
||||
return typeof (base = this.options).onError === "function" ? base.onError(message) : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onReopenSession = function(data) {
|
||||
|
@ -1230,10 +1262,12 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onOpenAnimationEnd = function() {
|
||||
var base;
|
||||
this.idleTimeout.stop();
|
||||
if (this.isFullscreen) {
|
||||
return this.disableScrollOnRoot();
|
||||
this.disableScrollOnRoot();
|
||||
}
|
||||
return typeof (base = this.options).onOpenAnimationEnd === "function" ? base.onOpenAnimationEnd() : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.sessionClose = function() {
|
||||
|
@ -1285,6 +1319,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onCloseAnimationEnd = function() {
|
||||
var base;
|
||||
this.el.css('bottom', '');
|
||||
this.el.removeClass('zammad-chat-is-open');
|
||||
this.showLoader();
|
||||
|
@ -1292,6 +1327,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
this.el.find('.zammad-chat-agent').addClass('zammad-chat-is-hidden');
|
||||
this.el.find('.zammad-chat-agent-status').addClass('zammad-chat-is-hidden');
|
||||
this.isOpen = false;
|
||||
if (typeof (base = this.options).onCloseAnimationEnd === "function") {
|
||||
base.onCloseAnimationEnd();
|
||||
}
|
||||
return this.io.reconnect();
|
||||
};
|
||||
|
||||
|
@ -1487,16 +1525,20 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onConnectionReestablished = function() {
|
||||
var base;
|
||||
this.lastAddedType = 'status';
|
||||
this.setAgentOnlineState('online');
|
||||
return this.addStatus(this.T('Connection re-established'));
|
||||
this.addStatus(this.T('Connection re-established'));
|
||||
return typeof (base = this.options).onConnectionReestablished === "function" ? base.onConnectionReestablished() : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.onSessionClosed = function(data) {
|
||||
var base;
|
||||
this.addStatus(this.T('Chat closed by %s', data.realname));
|
||||
this.disableInput();
|
||||
this.setAgentOnlineState('offline');
|
||||
return this.inactiveTimeout.stop();
|
||||
this.inactiveTimeout.stop();
|
||||
return typeof (base = this.options).onSessionClosed === "function" ? base.onSessionClosed(data) : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.setSessionId = function(id) {
|
||||
|
@ -1509,6 +1551,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onConnectionEstablished = function(data) {
|
||||
var base;
|
||||
if (this.onInitialQueueDelayId) {
|
||||
clearTimeout(this.onInitialQueueDelayId);
|
||||
}
|
||||
|
@ -1534,7 +1577,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
this.setAgentOnlineState('online');
|
||||
this.waitingListTimeout.stop();
|
||||
this.idleTimeout.stop();
|
||||
return this.inactiveTimeout.start();
|
||||
this.inactiveTimeout.start();
|
||||
return typeof (base = this.options).onConnectionEstablished === "function" ? base.onConnectionEstablished(data) : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.showCustomerTimeout = function() {
|
||||
|
@ -1605,10 +1649,12 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
};
|
||||
|
||||
ZammadChat.prototype.onCssLoaded = function() {
|
||||
var base;
|
||||
this.cssLoaded = true;
|
||||
if (this.socketReady) {
|
||||
return this.onReady();
|
||||
this.onReady();
|
||||
}
|
||||
return typeof (base = this.options).onCssLoaded === "function" ? base.onCssLoaded() : void 0;
|
||||
};
|
||||
|
||||
ZammadChat.prototype.startTimeoutObservers = function() {
|
||||
|
@ -1945,7 +1991,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["chat"] = function (__obj) {
|
||||
window.zammadChatTemplates["chat"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2036,7 +2082,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["customer_timeout"] = function (__obj) {
|
||||
window.zammadChatTemplates["customer_timeout"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2109,7 +2155,7 @@ window.zammadChatTemplates["customer_timeout"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["loader"] = function (__obj) {
|
||||
window.zammadChatTemplates["loader"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2164,7 +2210,7 @@ window.zammadChatTemplates["loader"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["message"] = function (__obj) {
|
||||
window.zammadChatTemplates["message"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2231,7 +2277,7 @@ window.zammadChatTemplates["message"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["status"] = function (__obj) {
|
||||
window.zammadChatTemplates["status"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2286,7 +2332,7 @@ window.zammadChatTemplates["status"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["timestamp"] = function (__obj) {
|
||||
window.zammadChatTemplates["timestamp"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2345,7 +2391,7 @@ window.zammadChatTemplates["timestamp"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["typingIndicator"] = function (__obj) {
|
||||
window.zammadChatTemplates["typingIndicator"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2396,7 +2442,7 @@ window.zammadChatTemplates["typingIndicator"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["waiting"] = function (__obj) {
|
||||
window.zammadChatTemplates["waiting"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
@ -2455,7 +2501,7 @@ window.zammadChatTemplates["waiting"] = function (__obj) {
|
|||
if (!window.zammadChatTemplates) {
|
||||
window.zammadChatTemplates = {};
|
||||
}
|
||||
window.zammadChatTemplates["waiting_list_timeout"] = function (__obj) {
|
||||
window.zammadChatTemplates["waiting_list_timeout"] = function(__obj) {
|
||||
if (!__obj) __obj = {};
|
||||
var __out = [], __capture = function(callback) {
|
||||
var out = __out, result;
|
||||
|
|
3
public/assets/chat/chat.min.js
vendored
3
public/assets/chat/chat.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue