diff --git a/public/assets/chat/chat.coffee b/public/assets/chat/chat.coffee index ac57c6f6a..4d15ef45c 100644 --- a/public/assets/chat/chat.coffee +++ b/public/assets/chat/chat.coffee @@ -8,13 +8,12 @@ do($ = window.jQuery, window) -> class ZammadChat defaults: - invitationPhrase: 'Chat with us!' - agentPhrase: ' is helping you' show: true target: $('body') host: '' port: 6042 debug: false + buttonSelector: '.open-zammad-chat' _messageCount: 0 isOpen: true @@ -25,14 +24,15 @@ do($ = window.jQuery, window) -> lastAddedType: null inputTimeout: null isTyping: false - isOnline: true + state: 'offline' initialQueueDelay: 10000 wsReconnectEnable: true strings: + 'Chat with us!': 'Chatten sie mit uns!' 'Online': 'Online' 'Offline': 'Offline' 'Connecting': 'Verbinden' - 'Connection re-established': 'Connection re-established' + 'Connection re-established': 'Verbindung wiederhergestellt' 'Today': 'Heute' 'Send': 'Senden' 'Compose your message...': 'Ihre Nachricht...' @@ -64,6 +64,8 @@ do($ = window.jQuery, window) -> options = {} options.T = @T + options.background = @options.background + options.flat = @options.flat return window.zammadChatTemplates[name](options) constructor: (options) -> @@ -74,18 +76,20 @@ do($ = window.jQuery, window) -> return @options = $.extend {}, @defaults, options - @el = $(@view('chat')(@options)) + @el = $(@view('chat')()) @options.target.append @el @input = @el.find('.zammad-chat-input') - @el.find('.js-chat-open').click => @open() + @el.find('.js-chat-open').click @open @el.find('.js-chat-close').click @close @el.find('.zammad-chat-controls').on 'submit', @onSubmit @input.on keydown: @checkForEnter input: @onInput + $(@options.buttonSelector).click @open + @wsConnect() checkForEnter: (event) => @@ -127,13 +131,13 @@ do($ = window.jQuery, window) -> @onReady() @log 'debug', 'Zammad Chat: ready' when 'offline' - @log 'debug', 'Zammad Chat: No agent online' + @onError 'Zammad Chat: No agent online' @wsClose() when 'chat_disabled' - @log 'debug', 'Zammad Chat: Chat is disabled' + @onError 'Zammad Chat: Chat is disabled' @wsClose() when 'no_seats_available' - @log 'debug', '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 @wsClose() when 'reconnect' @log 'debug', 'old messages', pipe.data.session @@ -143,6 +147,10 @@ do($ = window.jQuery, window) -> if @options.show @show() + onError: (message) => + @log 'debug', message + $(@options.buttonSelector).hide() + reopenSession: (data) => unfinishedMessage = sessionStorage.getItem 'unfinished_message' @@ -421,7 +429,6 @@ do($ = window.jQuery, window) -> @log 'debug', 'close websocket connection' if @wsReconnectEnable @reconnect() - @setAgentOnlineState(false) @ws.onerror = (e) => @log 'debug', 'ws:onerror', e @@ -442,21 +449,21 @@ do($ = window.jQuery, window) -> @send 'chat_status_customer', session_id: @sessionId - @setAgentOnlineState(true) + @setAgentOnlineState 'online' reconnect: => # set status to connecting @log 'notice', 'reconnecting' @disableInput() @lastAddedType = 'status' - @el.find('.zammad-chat-agent-status').attr('data-status', 'connecting').text @T('Reconnecting') + @setAgentOnlineState 'connecting' @addStatus @T('Connection lost') @wsReconnect() onConnectionReestablished: => # set status back to online @lastAddedType = 'status' - @el.find('.zammad-chat-agent-status').attr('data-status', 'online').text @T('Online') + @setAgentOnlineState 'online' @addStatus @T('Connection re-established') onSessionClosed: (data) -> @@ -508,10 +515,11 @@ do($ = window.jQuery, window) -> @el.find('.zammad-chat-body').html @view('loader')() setAgentOnlineState: (state) => - @isOnline = state + @state = state + capitalizedState = state.charAt(0).toUpperCase() + state.slice(1) @el .find('.zammad-chat-agent-status') - .toggleClass('zammad-chat-is-online', state) - .text if state then @T('Online') else @T('Offline') + .attr('data-status', state) + .text @T(capitalizedState) window.ZammadChat = ZammadChat diff --git a/public/assets/chat/chat.css b/public/assets/chat/chat.css index 762778633..56fff2478 100644 --- a/public/assets/chat/chat.css +++ b/public/assets/chat/chat.css @@ -30,7 +30,7 @@ background: #379ad7; color: white; line-height: 2.5em; - box-shadow: 0 -1px #247fb7, 0 1px rgba(255, 255, 255, 0.3) inset, 0 -1px #247fb7 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; border-radius: 5px 5px 0 0; overflow: hidden; @@ -89,8 +89,8 @@ line-height: 2em; padding: 0 0.7em; border-radius: 1em; - background: #288ecc; - box-shadow: 0 0 0 1px #2582bb; } + background: rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); } .zammad-chat-agent-status:before { content: ""; @@ -101,7 +101,8 @@ border-radius: 100%; position: relative; margin-right: 0.3em; - box-shadow: 0 0 0 1px #2582bb; } + vertical-align: middle; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); } .zammad-chat-agent-status[data-status="online"]:before { background: #52c782; } @@ -185,7 +186,7 @@ padding: 0.5em 1em; line-height: 1.4; border-radius: 1em; - background: #f6f8f9; + background: #ededed; display: inline-block; max-width: 70%; white-space: pre-line; @@ -223,7 +224,7 @@ display: inline-block; } .zammad-chat-loading-circle { - background: #c5dded; + background: #d9d9d9; border-radius: 100%; height: 0.72em; width: 0.72em; @@ -267,7 +268,7 @@ -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; - border-top: 1px solid #e3f0f7; + border-top: 1px solid #ededed; padding: 0; line-height: 1.4em; box-shadow: 0 1px rgba(0, 0, 0, 0.01), 0 -1px rgba(0, 0, 0, 0.02); @@ -294,7 +295,7 @@ max-height: 6em; } .zammad-chat-input::-webkit-input-placeholder { - color: #bdc9d0; } + color: #d9d9d9; } .zammad-chat-button { -webkit-appearance: none; @@ -309,7 +310,7 @@ cursor: pointer; border: none; border-radius: 1.5em; - box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px #247fb7 inset, 0 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px rgba(0, 0, 0, 0.1); outline: none; display: inline-block; } @@ -332,10 +333,10 @@ border: none; } .zammad-chat--flat .zammad-chat-header { - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13); } + box-shadow: none; } .zammad-chat--flat .zammad-chat-message-body { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset; } + box-shadow: none; } .zammad-chat--flat .zammad-chat-agent-status, .zammad-chat--flat .zammad-chat-button, diff --git a/public/assets/chat/chat.js b/public/assets/chat/chat.js index 109d445c2..11a96fe29 100644 --- a/public/assets/chat/chat.js +++ b/public/assets/chat/chat.js @@ -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, '>') + .replace(/"/g, '"'); + }; + } + (function() { + (function() { + if (this.agent.avatar) { + __out.push('\n\n'); + } + + __out.push('\n\n '); + + __out.push(__sanitize(this.agent.name)); + + __out.push('\n'); + + }).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); }; }, slice = [].slice; @@ -8,17 +69,17 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); scriptHost = myScript.src.match(".*://([^:/]*).*")[1]; ZammadChat = (function() { ZammadChat.prototype.defaults = { - invitationPhrase: 'Chat with us!', - agentPhrase: ' is helping you', - show: false, + show: true, target: $('body'), host: '', - port: 6042 + port: 6042, + debug: false, + buttonSelector: '.open-zammad-chat' }; ZammadChat.prototype._messageCount = 0; - ZammadChat.prototype.isOpen = false; + ZammadChat.prototype.isOpen = true; ZammadChat.prototype.blinkOnlineInterval = null; @@ -34,19 +95,18 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); ZammadChat.prototype.isTyping = false; - ZammadChat.prototype.isOnline = true; + ZammadChat.prototype.state = 'offline'; ZammadChat.prototype.initialQueueDelay = 10000; - ZammadChat.prototype.debug = true; - ZammadChat.prototype.wsReconnectEnable = true; ZammadChat.prototype.strings = { + 'Chat with us!': 'Chatten sie mit uns!', 'Online': 'Online', 'Offline': 'Offline', 'Connecting': 'Verbinden', - 'Connection re-established': 'Connection re-established', + 'Connection re-established': 'Verbindung wiederhergestellt', 'Today': 'Heute', 'Send': 'Senden', 'Compose your message...': 'Ihre Nachricht...', @@ -78,7 +138,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); ZammadChat.prototype.log = function() { var level, string; level = arguments[0], string = 2 <= arguments.length ? slice.call(arguments, 1) : []; - if (!this.debug && level === 'debug') { + if (!this.options.debug && level === 'debug') { return; } string.unshift(level); @@ -92,6 +152,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); options = {}; } options.T = _this.T; + options.background = _this.options.background; + options.flat = _this.options.flat; return window.zammadChatTemplates[name](options); }; })(this); @@ -122,6 +184,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); this.onTypingEnd = bind(this.onTypingEnd, this); this.onInput = bind(this.onInput, this); this.reopenSession = bind(this.reopenSession, this); + this.onError = bind(this.onError, this); this.onReady = bind(this.onReady, this); this.onWebSocketMessage = bind(this.onWebSocketMessage, this); this.send = bind(this.send, this); @@ -129,25 +192,22 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); this.view = bind(this.view, this); this.log = bind(this.log, this); this.T = bind(this.T, this); + if (!window.WebSocket || !sessionStorage) { + this.log('notice', 'Chat: Browser not supported!'); + return; + } this.options = $.extend({}, this.defaults, options); - this.el = $(this.view('chat')(this.options)); + this.el = $(this.view('chat')()); this.options.target.append(this.el); this.input = this.el.find('.zammad-chat-input'); - this.el.find('.js-chat-open').click((function(_this) { - return function() { - return _this.open(); - }; - })(this)); + this.el.find('.js-chat-open').click(this.open); this.el.find('.js-chat-close').click(this.close); this.el.find('.zammad-chat-controls').on('submit', this.onSubmit); this.input.on({ keydown: this.checkForEnter, input: this.onInput }); - if (!window.WebSocket || !sessionStorage) { - this.log('notice', 'Chat: Browser not supported!'); - return; - } + $(this.options.buttonSelector).click(this.open); this.wsConnect(); } @@ -207,15 +267,15 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); this.log('debug', 'Zammad Chat: ready'); break; case 'offline': - this.log('debug', 'Zammad Chat: No agent online'); + this.onError('Zammad Chat: No agent online'); this.wsClose(); break; case 'chat_disabled': - this.log('debug', 'Zammad Chat: Chat is disabled'); + this.onError('Zammad Chat: Chat is disabled'); this.wsClose(); break; case 'no_seats_available': - this.log('debug', '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.wsClose(); break; case 'reconnect': @@ -232,21 +292,31 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); } }; + ZammadChat.prototype.onError = function(message) { + this.log('debug', message); + return $(this.options.buttonSelector).hide(); + }; + ZammadChat.prototype.reopenSession = function(data) { var i, len, message, ref, unfinishedMessage; unfinishedMessage = sessionStorage.getItem('unfinished_message'); - this.onConnectionEstablished(data); - ref = data.session; - for (i = 0, len = ref.length; i < len; i++) { - message = ref[i]; - this.renderMessage({ - message: message.content, - id: message.id, - from: message.created_by_id ? 'agent' : 'customer' - }); + if (data.agent) { + this.onConnectionEstablished(data); + ref = data.session; + for (i = 0, len = ref.length; i < len; i++) { + message = ref[i]; + this.renderMessage({ + message: message.content, + id: message.id, + from: message.created_by_id ? 'agent' : 'customer' + }); + } + if (unfinishedMessage) { + this.input.val(unfinishedMessage); + } } - if (unfinishedMessage) { - this.input.val(unfinishedMessage); + if (data.position) { + this.onQueue(data); } this.show(); this.open(); @@ -518,9 +588,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); return function(e) { _this.log('debug', 'close websocket connection'); if (_this.wsReconnectEnable) { - _this.reconnect(); + return _this.reconnect(); } - return _this.setAgentOnlineState(false); }; })(this); return this.ws.onerror = (function(_this) { @@ -548,21 +617,21 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); this.send('chat_status_customer', { session_id: this.sessionId }); - return this.setAgentOnlineState(true); + return this.setAgentOnlineState('online'); }; ZammadChat.prototype.reconnect = function() { this.log('notice', 'reconnecting'); this.disableInput(); this.lastAddedType = 'status'; - this.el.find('.zammad-chat-agent-status').attr('data-status', 'connecting').text(this.T('Reconnecting')); + this.setAgentOnlineState('connecting'); this.addStatus(this.T('Connection lost')); return this.wsReconnect(); }; ZammadChat.prototype.onConnectionReestablished = function() { this.lastAddedType = 'status'; - this.el.find('.zammad-chat-agent-status').attr('data-status', 'online').text(this.T('Online')); + this.setAgentOnlineState('online'); return this.addStatus(this.T('Connection re-established')); }; @@ -622,8 +691,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; ZammadChat.prototype.setAgentOnlineState = function(state) { - this.isOnline = state; - return this.el.find('.zammad-chat-agent-status').toggleClass('zammad-chat-is-online', state).text(state ? this.T('Online') : this.T('Offline')); + var capitalizedState; + this.state = state; + capitalizedState = state.charAt(0).toUpperCase() + state.slice(1); + return this.el.find('.zammad-chat-agent-status').attr('data-status', state).text(this.T(capitalizedState)); }; return ZammadChat; @@ -632,71 +703,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, '>') - .replace(/"/g, '"'); - }; - } - (function() { - (function() { - if (this.agent.avatar) { - __out.push('\n\n'); - } - - __out.push('\n\n '); - - __out.push(__sanitize(this.agent.name)); - - __out.push(' '); - - __out.push(this.agentPhrase); - - __out.push('\n'); - - }).call(this); - - }).call(__obj); - __obj.safe = __objSafe, __obj.escape = __escape; - return __out.join(''); -}; - /*! * ---------------------------------------------------------------------------- * "THE BEER-WARE LICENSE" (Revision 42): @@ -816,15 +822,33 @@ window.zammadChatTemplates["chat"] = function (__obj) { } (function() { (function() { - __out.push('
\n
\n
\n Online\n \n \n \n \n
\n
\n
\n
\n \n '); + __out.push('
\n
\n
\n \n \n \n \n \n
\n
\n
\n
\n \n '); + + __out.push(this.T('Chat with us!')); __out.push('\n
\n
\n
\n
\n \n \n
\n
")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.loader=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n \n \n \n \n \n '),s.push(n(this.T("Connecting"))),s.push("\n
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.message=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n '),s.push(this.message),s.push("\n
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.status=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
'),s.push(this.status),s.push("
")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timeout=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n
\n '),s.push(this.T("Since you didn't respond in the last %s your conversation with %s got closed.",this.delay+" "+this.unit,this.agent)),s.push('
\n
'),s.push(n(this.T("Start new conversation"))),s.push("
\n
\n
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timestamp=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
'),s.push(n(this.label)),s.push(" "),s.push(n(this.time)),s.push("
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.typingIndicator=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n \n \n \n \n \n \n \n
')}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.waiting=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n
\n \n \n \n \n \n '),s.push(this.T("All colleges are busy.")),s.push("
\n "),s.push(this.T("You are on waiting list position %s.",this.position)),s.push("\n
\n
")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")}; \ No newline at end of file +window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.agent=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){this.agent.avatar&&(s.push('\n\n')),s.push('\n\n '),s.push(n(this.agent.name)),s.push("\n")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")};var bind=function(t,e){return function(){return t.apply(e,arguments)}},slice=[].slice;!function(t,e){var s,n,i,a;return a=document.getElementsByTagName("script"),n=a[a.length-1],i=n.src.match(".*://([^:/]*).*")[1],s=function(){function s(s){return this.setAgentOnlineState=bind(this.setAgentOnlineState,this),this.onConnectionEstablished=bind(this.onConnectionEstablished,this),this.setSessionId=bind(this.setSessionId,this),this.onConnectionReestablished=bind(this.onConnectionReestablished,this),this.reconnect=bind(this.reconnect,this),this.onWebSocketOpen=bind(this.onWebSocketOpen,this),this.wsReconnect=bind(this.wsReconnect,this),this.wsClose=bind(this.wsClose,this),this.wsConnect=bind(this.wsConnect,this),this.onAgentTypingEnd=bind(this.onAgentTypingEnd,this),this.onAgentTypingStart=bind(this.onAgentTypingStart,this),this.onQueue=bind(this.onQueue,this),this.onQueueScreen=bind(this.onQueueScreen,this),this.onCloseAnimationEnd=bind(this.onCloseAnimationEnd,this),this.closeWindow=bind(this.closeWindow,this),this.close=bind(this.close,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),this.onSubmit=bind(this.onSubmit,this),this.onTypingEnd=bind(this.onTypingEnd,this),this.onInput=bind(this.onInput,this),this.reopenSession=bind(this.reopenSession,this),this.onError=bind(this.onError,this),this.onReady=bind(this.onReady,this),this.onWebSocketMessage=bind(this.onWebSocketMessage,this),this.send=bind(this.send,this),this.checkForEnter=bind(this.checkForEnter,this),this.view=bind(this.view,this),this.log=bind(this.log,this),this.T=bind(this.T,this),e.WebSocket&&sessionStorage?(this.options=t.extend({},this.defaults,s),this.el=t(this.view("chat")()),this.options.target.append(this.el),this.input=this.el.find(".zammad-chat-input"),this.el.find(".js-chat-open").click(this.open),this.el.find(".js-chat-close").click(this.close),this.el.find(".zammad-chat-controls").on("submit",this.onSubmit),this.input.on({keydown:this.checkForEnter,input:this.onInput}),t(this.options.buttonSelector).click(this.open),void this.wsConnect()):void this.log("notice","Chat: Browser not supported!")}return s.prototype.defaults={show:!0,target:t("body"),host:"",port:6042,debug:!1,buttonSelector:".open-zammad-chat"},s.prototype._messageCount=0,s.prototype.isOpen=!0,s.prototype.blinkOnlineInterval=null,s.prototype.stopBlinOnlineStateTimeout=null,s.prototype.showTimeEveryXMinutes=1,s.prototype.lastTimestamp=null,s.prototype.lastAddedType=null,s.prototype.inputTimeout=null,s.prototype.isTyping=!1,s.prototype.state="offline",s.prototype.initialQueueDelay=1e4,s.prototype.wsReconnectEnable=!0,s.prototype.strings={"Chat with us!":"Chatten sie mit uns!",Online:"Online",Offline:"Offline",Connecting:"Verbinden","Connection re-established":"Verbindung wiederhergestellt",Today:"Heute",Send:"Senden","Compose your message...":"Ihre Nachricht...","All colleges are busy.":"Alle Kollegen sind belegt.","You are on waiting list position %s.":"Sie sind in der Warteliste an der Position %s.","Start new conversation":"Neue Konversation starten","Since you didn't respond in the last %s your conversation with %s got closed.":"Da sie in den letzten %s nichts geschrieben haben wurde ihre Konversation mit %s geschlossen.",minutes:"Minuten"},s.prototype.sessionId=void 0,s.prototype.T=function(){var t,e,s,n,i,a;if(i=arguments[0],s=2<=arguments.length?slice.call(arguments,1):[],this.strings[i]||this.log("notice","Translation needed for '"+i+"'"),a=this.strings[i]||i,s)for(t=0,n=s.length;n>t;t++)e=s[t],a=a.replace(/%s/,e);return a},s.prototype.log=function(){var t,e;return t=arguments[0],e=2<=arguments.length?slice.call(arguments,1):[],this.options.debug||"debug"!==t?(e.unshift(t),console.log.apply(console,e)):void 0},s.prototype.view=function(t){return function(s){return function(n){return n||(n={}),n.T=s.T,n.background=s.options.background,n.flat=s.options.flat,e.zammadChatTemplates[t](n)}}(this)},s.prototype.checkForEnter=function(t){return t.shiftKey||13!==t.keyCode?void 0:(t.preventDefault(),this.sendMessage())},s.prototype.send=function(t,e){var s;return this.log("debug","ws:send",t,e),s=JSON.stringify({event:t,data:e}),this.ws.send(s)},s.prototype.onWebSocketMessage=function(t){var e,s,n,i;for(i=JSON.parse(t.data),e=0,s=i.length;s>e;e++)switch(n=i[e],this.log("debug","ws:onmessage",n),n.event){case"chat_session_message":if(n.data.self_written)return;this.receiveMessage(n.data);break;case"chat_session_typing":if(n.data.self_written)return;this.onAgentTypingStart();break;case"chat_session_start":this.onConnectionEstablished(n.data);break;case"chat_session_queue":this.onQueueScreen(n.data);break;case"chat_session_closed":this.onSessionClosed(n.data);break;case"chat_session_left":this.onSessionClosed(n.data);break;case"chat_status_customer":switch(n.data.state){case"online":this.sessionId=void 0,this.onReady(),this.log("debug","Zammad Chat: ready");break;case"offline":this.onError("Zammad Chat: No agent online"),this.wsClose();break;case"chat_disabled":this.onError("Zammad Chat: Chat is disabled"),this.wsClose();break;case"no_seats_available":this.onError("Zammad Chat: Too many clients in queue. Clients in queue: ",n.data.queue),this.wsClose();break;case"reconnect":this.log("debug","old messages",n.data.session),this.reopenSession(n.data)}}},s.prototype.onReady=function(){return this.options.show?this.show():void 0},s.prototype.onError=function(e){return this.log("debug",e),t(this.options.buttonSelector).hide()},s.prototype.reopenSession=function(t){var e,s,n,i,a;if(a=sessionStorage.getItem("unfinished_message"),t.agent){for(this.onConnectionEstablished(t),i=t.session,e=0,s=i.length;s>e;e++)n=i[e],this.renderMessage({message:n.content,id:n.id,from:n.created_by_id?"agent":"customer"});a&&this.input.val(a)}return t.position&&this.onQueue(t),this.show(),this.open(),this.scrollToBottom(),a?this.input.focus():void 0},s.prototype.onInput=function(){return this.el.find(".zammad-chat-message--unread").removeClass("zammad-chat-message--unread"),sessionStorage.setItem("unfinished_message",this.input.val()),this.onTypingStart()},s.prototype.onTypingStart=function(){return this.isTypingTimeout&&clearTimeout(this.isTypingTimeout),this.isTypingTimeout=setTimeout(this.onTypingEnd,1500),this.isTyping?void 0:(this.isTyping=!0,this.send("chat_session_typing",{session_id:this.sessionId}))},s.prototype.onTypingEnd=function(){return this.isTyping=!1},s.prototype.onSubmit=function(t){return t.preventDefault(),this.sendMessage()},s.prototype.sendMessage=function(){var t,e;return(t=this.input.val())?(sessionStorage.removeItem("unfinished_message"),e=this.view("message")({message:t,from:"customer",id:this._messageCount++}),this.maybeAddTimestamp(),this.el.find(".zammad-chat-message--typing").size()?(this.lastAddedType="typing-placeholder",this.el.find(".zammad-chat-message--typing").before(e)):(this.lastAddedType="message--customer",this.el.find(".zammad-chat-body").append(e)),this.input.val(""),this.scrollToBottom(),this.isTyping=!1,this.send("chat_session_message",{content:t,id:this._messageCount,session_id:this.sessionId})):void 0},s.prototype.receiveMessage=function(t){return this.onAgentTypingEnd(),this.maybeAddTimestamp(),this.renderMessage({message:t.message.content,id:t.id,from:"agent"})},s.prototype.renderMessage=function(t){var e,s;return this.lastAddedType="message--"+t.from,s=null!=(e=document.hidden)?e:{" zammad-chat-message--unread":""},this.el.find(".zammad-chat-body").append(this.view("message")(t)),this.scrollToBottom()},s.prototype.open=function(){return this.isOpen&&this.show(),this.sessionId||this.showLoader(),this.el.addClass("zammad-chat-is-open"),this.sessionId?(this.el.css("bottom",0),this.onOpenAnimationEnd()):this.el.animate({bottom:0},500,this.onOpenAnimationEnd),this.isOpen=!0,this.sessionId?void 0:this.session_init()},s.prototype.onOpenAnimationEnd=function(){},s.prototype.close=function(t){return t&&t.stopPropagation(),this.sessionId?(this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),sessionStorage.removeItem("sessionId"),sessionStorage.removeItem("unfinished_message"),this.closeWindow()):void 0},s.prototype.closeWindow=function(){var t;return t=this.el.height()-this.el.find(".zammad-chat-header").outerHeight(),this.el.animate({bottom:-t},500,this.onCloseAnimationEnd)},s.prototype.onCloseAnimationEnd=function(){return this.el.removeClass("zammad-chat-is-open"),this.disconnect(),this.isOpen=!1,this.send("chat_session_close",{session_id:this.sessionId}),this.setSessionId(void 0)},s.prototype.hide=function(){return this.el.removeClass("zammad-chat-is-visible")},s.prototype.show=function(){var t;return this.el.addClass("zammad-chat-is-visible"),this.input.autoGrow({extraLine:!1}),t=this.el.height()-this.el.find(".zammad-chat-header").outerHeight(),this.el.css("bottom",-t)},s.prototype.disableInput=function(){return this.input.prop("disabled",!0),this.el.find(".zammad-chat-send").prop("disabled",!0)},s.prototype.enableInput=function(){return this.input.prop("disabled",!1),this.el.find(".zammad-chat-send").prop("disabled",!1)},s.prototype.onQueueScreen=function(t){var e;return this.setSessionId(t.session_id),e=function(e){return function(){return e.onQueue(t)}}(this),this.initialQueueDelay&&!this.onInitialQueueDelayId?void(this.onInitialQueueDelayId=setTimeout(e,this.initialQueueDelay)):(this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),e())},s.prototype.onQueue=function(t){return this.log("notice","onQueue",t.position),this.inQueue=!0,this.el.find(".zammad-chat-body").html(this.view("waiting")({position:t.position}))},s.prototype.onAgentTypingStart=function(){return this.stopTypingId&&clearTimeout(this.stopTypingId),this.stopTypingId=setTimeout(this.onAgentTypingEnd,3e3),this.el.find(".zammad-chat-message--typing").size()?void 0:(this.maybeAddTimestamp(),this.el.find(".zammad-chat-body").append(this.view("typingIndicator")()),this.scrollToBottom())},s.prototype.onAgentTypingEnd=function(){return this.el.find(".zammad-chat-message--typing").remove()},s.prototype.maybeAddTimestamp=function(){var t,e,s;return s=Date.now(),!this.lastTimestamp||s-this.lastTimestamp>6e4*this.showTimeEveryXMinutes?(t=this.T("Today"),e=(new Date).toTimeString().substr(0,5),"timestamp"===this.lastAddedType?(this.updateLastTimestamp(t,e),this.lastTimestamp=s):(this.el.find(".zammad-chat-body").append(this.view("timestamp")({label:t,time:e})),this.lastTimestamp=s,this.lastAddedType="timestamp",this.scrollToBottom())):void 0},s.prototype.updateLastTimestamp=function(t,e){return this.el.find(".zammad-chat-body").find(".zammad-chat-timestamp").last().replaceWith(this.view("timestamp")({label:t,time:e}))},s.prototype.addStatus=function(t){return this.maybeAddTimestamp(),this.el.find(".zammad-chat-body").append(this.view("status")({status:t})),this.scrollToBottom()},s.prototype.scrollToBottom=function(){return this.el.find(".zammad-chat-body").scrollTop(t(".zammad-chat-body").prop("scrollHeight"))},s.prototype.session_init=function(){return this.send("chat_session_init")},s.prototype.detectHost=function(){return this.options.host="ws://"+i},s.prototype.wsConnect=function(){return this.options.host||this.detectHost(),this.log("notice","Connecting to "+this.options.host+":"+this.options.port),this.ws=new e.WebSocket(this.options.host+":"+this.options.port),this.ws.onopen=this.onWebSocketOpen,this.ws.onmessage=this.onWebSocketMessage,this.ws.onclose=function(t){return function(e){return t.log("debug","close websocket connection"),t.wsReconnectEnable?t.reconnect():void 0}}(this),this.ws.onerror=function(t){return function(e){return t.log("debug","ws:onerror",e)}}(this)},s.prototype.wsClose=function(){return this.wsReconnectEnable=!1,this.ws.close()},s.prototype.wsReconnect=function(){return this.reconnectDelayId&&clearTimeout(this.reconnectDelayId),this.reconnectDelayId=setTimeout(this.wsConnect,5e3)},s.prototype.onWebSocketOpen=function(){return this.sessionId=sessionStorage.getItem("sessionId"),this.log("debug","ws connected"),this.send("chat_status_customer",{session_id:this.sessionId}),this.setAgentOnlineState("online")},s.prototype.reconnect=function(){return this.log("notice","reconnecting"),this.disableInput(),this.lastAddedType="status",this.setAgentOnlineState("connecting"),this.addStatus(this.T("Connection lost")),this.wsReconnect()},s.prototype.onConnectionReestablished=function(){return this.lastAddedType="status",this.setAgentOnlineState("online"),this.addStatus(this.T("Connection re-established"))},s.prototype.onSessionClosed=function(t){return this.addStatus(this.T("Chat closed by %s",t.realname)),this.disableInput()},s.prototype.disconnect=function(){return this.showLoader(),this.el.find(".zammad-chat-welcome").removeClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent").addClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent-status").addClass("zammad-chat-is-hidden")},s.prototype.setSessionId=function(t){return this.sessionId=t,void 0===t?sessionStorage.removeItem("sessionId"):sessionStorage.setItem("sessionId",t)},s.prototype.onConnectionEstablished=function(t){return this.onInitialQueueDelayId&&clearTimeout(this.onInitialQueueDelayId),this.inQueue=!1,t.agent&&(this.agent=t.agent),t.session_id&&this.setSessionId(t.session_id),this.el.find(".zammad-chat-agent").html(this.view("agent")({agent:this.agent})),this.enableInput(),this.el.find(".zammad-chat-body").empty(),this.el.find(".zammad-chat-welcome").addClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent").removeClass("zammad-chat-is-hidden"),this.el.find(".zammad-chat-agent-status").removeClass("zammad-chat-is-hidden"),this.input.focus()},s.prototype.showTimeout=function(){return this.el.find(".zammad-chat-body").html(this.view("timeout")({agent:this.agent.name,delay:10,unit:this.T("minutes")}))},s.prototype.showLoader=function(){return this.el.find(".zammad-chat-body").html(this.view("loader")())},s.prototype.setAgentOnlineState=function(t){var e;return this.state=t,e=t.charAt(0).toUpperCase()+t.slice(1),this.el.find(".zammad-chat-agent-status").attr("data-status",t).text(this.T(e))},s}(),e.ZammadChat=s}(window.jQuery,window),jQuery.fn.autoGrow=function(t){return this.each(function(){var e=jQuery.extend({extraLine:!0},t),s=function(t){return jQuery(t).after('
'),jQuery(t).next(".autogrow-textarea-mirror")[0]},n=function(t){a.innerHTML=String(t.value).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">").replace(/ /g," ").replace(/\n/g,"
")+(e.extraLine?".
.":""),jQuery(t).height()!=jQuery(a).height()&&jQuery(t).height(jQuery(a).height())},i=function(){n(this)},a=s(this);a.style.display="none",a.style.wordWrap="break-word",a.style.whiteSpace="normal",a.style.padding=jQuery(this).css("paddingTop")+" "+jQuery(this).css("paddingRight")+" "+jQuery(this).css("paddingBottom")+" "+jQuery(this).css("paddingLeft"),a.style.width=jQuery(this).css("width"),a.style.fontFamily=jQuery(this).css("font-family"),a.style.fontSize=jQuery(this).css("font-size"),a.style.lineHeight=jQuery(this).css("line-height"),this.style.overflow="hidden",this.style.minHeight=this.rows+"em",this.onkeyup=i,n(this)})},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.chat=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n
\n
\n \n \n \n \n \n
\n
\n
\n
\n \n '),s.push(this.T("Chat with us!")),s.push('\n
\n
\n
\n
\n \n \n
\n
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.loader=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n \n \n \n \n \n '),s.push(n(this.T("Connecting"))),s.push("\n
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.message=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n "),s.push(this.message),s.push("\n
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.status=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
'),s.push(this.status),s.push("
")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timeout=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n
\n '),s.push(this.T("Since you didn't respond in the last %s your conversation with %s got closed.",this.delay+" "+this.unit,this.agent)),s.push('
\n
"),s.push(n(this.T("Start new conversation"))),s.push("
\n
\n
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.timestamp=function(t){t||(t={});var e,s=[],n=function(t){return t&&t.ecoSafe?t:"undefined"!=typeof t&&null!=t?a(t):""},i=t.safe,a=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},a||(a=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
'),s.push(n(this.label)),s.push(" "),s.push(n(this.time)),s.push("
")}).call(this)}.call(t),t.safe=i,t.escape=a,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.typingIndicator=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n \n \n \n \n \n \n \n
')}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")},window.zammadChatTemplates||(window.zammadChatTemplates={}),window.zammadChatTemplates.waiting=function(t){t||(t={});var e,s=[],n=t.safe,i=t.escape;return e=t.safe=function(t){if(t&&t.ecoSafe)return t;("undefined"==typeof t||null==t)&&(t="");var e=new String(t);return e.ecoSafe=!0,e},i||(i=t.escape=function(t){return(""+t).replace(/&/g,"&").replace(//g,">").replace(/"/g,""")}),function(){(function(){s.push('
\n
\n \n \n \n \n \n '),s.push(this.T("All colleges are busy.")),s.push("
\n "),s.push(this.T("You are on waiting list position %s.",this.position)),s.push("\n
\n
")}).call(this)}.call(t),t.safe=n,t.escape=i,s.join("")}; \ No newline at end of file diff --git a/public/assets/chat/chat.scss b/public/assets/chat/chat.scss index a67128230..0d898fb20 100644 --- a/public/assets/chat/chat.scss +++ b/public/assets/chat/chat.scss @@ -1,43 +1,12 @@ -/// Returns the luminance of `$color` as a float (between 0 and 1) -/// 1 is pure white, 0 is pure black -/// @param {Color} $color - Color -/// @return {Number} -/// @link http://stackoverflow.com/a/596241/731172 -@function luminance($color) { - @return (0.375 * red($color) + 0.5 * green($color) + 0.125 * blue($color)) / 255; -} - -/// Limits the lighten function to a maximum value -/// @param {Color} $color - Color -/// @param {Number} $amount - The amount to increase the lightness by, between 0% and 100% -/// @param {Number} $max - The maximal lightness amount -/// @return {Color} -@function lightenMax($color, $amount, $max) { - $enlightedColor: lighten($color, $amount); - @if lightness($enlightedColor) > $max { - @return change-color($color, $lightness: $max); - } @else { - @return $enlightedColor; - } -} - -$themeColor: hsl(203,67,53); -$fontSize: 12px; -$borderRadius: 5px; - -$luminance: luminance($themeColor); -$contrastTextColor: if($luminance > 0.5, inherit, white); -$baseTextColor: if($luminance < 0.2, white, black); - .zammad-chat { - color: $baseTextColor; + color: black; position: fixed; right: 30px; bottom: 0; - font-size: $fontSize; + font-size: 12px; width: 33em; box-shadow: 0 3px 10px rgba(0,0,0,.3); - border-radius: $borderRadius $borderRadius 0 0; + border-radius: 5px 5px 0 0; will-change: bottom; display: none; flex-direction: column; @@ -56,16 +25,16 @@ $baseTextColor: if($luminance < 0.2, white, black); .zammad-chat-header { padding: 0.5em 2.5em 0.5em 1em; - background: $themeColor; - color: $contrastTextColor; + background: hsl(203,67%,53%); + color: white; line-height: 2.5em; box-shadow: - 0 -1px darken($themeColor, 10%), + 0 -1px rgba(0,0,0,.1), 0 1px rgba(255,255,255,.3) inset, - 0 -1px darken($themeColor, 10%) inset, + 0 -1px rgba(0,0,0,.1) inset, 0 1px 1px rgba(0,0,0,.13); position: relative; - border-radius: $borderRadius $borderRadius 0 0; + border-radius: 5px 5px 0 0; overflow: hidden; cursor: pointer; } @@ -134,8 +103,8 @@ $baseTextColor: if($luminance < 0.2, white, black); line-height: 2em; padding: 0 .7em; border-radius: 1em; - background: darken($themeColor, 5%); - box-shadow: 0 0 0 1px darken($themeColor, 9%); + background: rgba(0,0,0,.1); + box-shadow: 0 0 0 1px rgba(0,0,0,.04); } .zammad-chat-agent-status:before { @@ -147,7 +116,8 @@ $baseTextColor: if($luminance < 0.2, white, black); border-radius: 100%; position: relative; margin-right: 0.3em; - box-shadow: 0 0 0 1px darken($themeColor, 9%); + vertical-align: middle; + box-shadow: 0 0 0 1px rgba(0,0,0,.04); } .zammad-chat-agent-status[data-status="online"]:before { @@ -222,7 +192,7 @@ $baseTextColor: if($luminance < 0.2, white, black); padding: 0.5em 1em; line-height: 1.4; border-radius: 1em; - background: desaturate(lightenMax($themeColor, 50%, 97%), 50%); + background: hsl(0,0%,93%); display: inline-block; max-width: 70%; white-space: pre-line; @@ -252,8 +222,8 @@ $baseTextColor: if($luminance < 0.2, white, black); } .zammad-chat-message--customer .zammad-chat-message-body { - background: $themeColor; - color: $contrastTextColor; + background: hsl(203,67%,53%); + color: white; } .zammad-chat-message--unread { @@ -269,7 +239,7 @@ $baseTextColor: if($luminance < 0.2, white, black); } .zammad-chat-loading-circle { - background: desaturate(lightenMax($themeColor, 50%, 85%), 15%); + background: hsl(0,0%, 85%); border-radius: 100%; height: 0.72em; width: 0.72em; @@ -294,7 +264,7 @@ $baseTextColor: if($luminance < 0.2, white, black); overflow: hidden; display: flex; align-items: flex-start; - border-top: 1px solid desaturate(lightenMax($themeColor, 80%, 93%), 10%); + border-top: 1px solid hsl(0,0%,93%); padding: 0; line-height: 1.4em; box-shadow: @@ -321,15 +291,15 @@ $baseTextColor: if($luminance < 0.2, white, black); } .zammad-chat-input::-webkit-input-placeholder { - color: desaturate(lightenMax($themeColor, 25%, 85%), 50%); + color: hsl(0,0%,85%); } .zammad-chat-button { appearance: none; font-family: inherit; font-size: inherit; - background: $themeColor; - color: $contrastTextColor; + background: hsl(203,67%,53%); + color: white; padding: 0.6em 1.2em; margin: 0.5em 1em 0.5em; cursor: pointer; @@ -337,7 +307,7 @@ $baseTextColor: if($luminance < 0.2, white, black); border-radius: 1.5em; box-shadow: 0 2px rgba(255,255,255,.25) inset, - 0 0 0 1px darken($themeColor, 10%) inset, + 0 0 0 1px rgba(0,0,0,.1) inset, 0 1px rgba(0,0,0,.1); outline: none; display: inline-block; @@ -366,10 +336,10 @@ $baseTextColor: if($luminance < 0.2, white, black); border: none; } .zammad-chat--flat .zammad-chat-header { - box-shadow: 0 1px 1px rgba(0,0,0,.13); + box-shadow: none; } .zammad-chat--flat .zammad-chat-message-body { - box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; + box-shadow: none; } .zammad-chat--flat .zammad-chat-agent-status, .zammad-chat--flat .zammad-chat-button, diff --git a/public/assets/chat/index.html b/public/assets/chat/index.html index 0fcb3460b..1bbc4360d 100644 --- a/public/assets/chat/index.html +++ b/public/assets/chat/index.html @@ -2,6 +2,7 @@ Zammad Chat + - +
@@ -94,6 +95,9 @@ px +
+
+
@@ -137,7 +141,10 @@ var chat = new ZammadChat({ host: 'ws://localhost', port: 6042, - debug: true + debug: true, + background: '#494d52', + flat: true, + show: false }); $('.settings :input').on({ diff --git a/public/assets/chat/views/agent.eco b/public/assets/chat/views/agent.eco index a68a1b19d..9f9efdca4 100644 --- a/public/assets/chat/views/agent.eco +++ b/public/assets/chat/views/agent.eco @@ -2,5 +2,5 @@ <% end %> - <%= @agent.name %> <%- @agentPhrase %> + <%= @agent.name %> \ No newline at end of file diff --git a/public/assets/chat/views/chat.eco b/public/assets/chat/views/chat.eco index ee146e78e..895430b8e 100644 --- a/public/assets/chat/views/chat.eco +++ b/public/assets/chat/views/chat.eco @@ -1,7 +1,7 @@ -
-
+
+
>
- Online + @@ -11,12 +11,12 @@
- <%- @invitationPhrase %> + <%- @T('Chat with us!') %>
- +
\ No newline at end of file diff --git a/public/assets/chat/views/message.eco b/public/assets/chat/views/message.eco index 4576122ca..344a3a1c0 100644 --- a/public/assets/chat/views/message.eco +++ b/public/assets/chat/views/message.eco @@ -1,3 +1,3 @@
- <%- @message %> + ><%- @message %>
\ No newline at end of file diff --git a/public/assets/chat/views/timeout.eco b/public/assets/chat/views/timeout.eco index 6a7ab1659..f67b9bdc1 100644 --- a/public/assets/chat/views/timeout.eco +++ b/public/assets/chat/views/timeout.eco @@ -1,6 +1,6 @@
<%- @T('Since you didn\'t respond in the last %s your conversation with %s got closed.', "#{ @delay } #{ @unit }", @agent) %>
-
<%= @T('Start new conversation') %>
+
><%= @T('Start new conversation') %>
\ No newline at end of file diff --git a/public/assets/chat/znuny.css b/public/assets/chat/znuny.css new file mode 100644 index 000000000..30596c896 --- /dev/null +++ b/public/assets/chat/znuny.css @@ -0,0 +1,3 @@ +.help { + background: hsl(213,6%,30%); +} \ No newline at end of file diff --git a/public/assets/chat/znuny.png b/public/assets/chat/znuny.png new file mode 100644 index 000000000..9baaa8f2c Binary files /dev/null and b/public/assets/chat/znuny.png differ