Merge branch 'develop' of github.com:martini/zammad into develop
This commit is contained in:
commit
5749e841f8
3 changed files with 669 additions and 525 deletions
|
@ -64,20 +64,22 @@ do($ = window.jQuery, window) ->
|
||||||
@el = $(@view('chat')(@options))
|
@el = $(@view('chat')(@options))
|
||||||
@options.target.append @el
|
@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('.js-chat-close').click @close
|
||||||
@el.find('.zammad-chat-controls').on 'submit', @onSubmit
|
@el.find('.zammad-chat-controls').on 'submit', @onSubmit
|
||||||
@el.find('.zammad-chat-input').on
|
@input.on
|
||||||
keydown: @checkForEnter
|
keydown: @checkForEnter
|
||||||
input: @onInput
|
input: @onInput
|
||||||
|
|
||||||
if !window.WebSocket
|
if !window.WebSocket or !sessionStorage
|
||||||
@log 'notice', 'Chat: Browser not supported!'
|
@log 'notice', 'Chat: Browser not supported!'
|
||||||
return
|
return
|
||||||
|
|
||||||
@connect()
|
@connect()
|
||||||
|
|
||||||
@onReady()
|
#@onReady()
|
||||||
|
|
||||||
checkForEnter: (event) =>
|
checkForEnter: (event) =>
|
||||||
if not event.shiftKey and event.keyCode is 13
|
if not event.shiftKey and event.keyCode is 13
|
||||||
|
@ -104,10 +106,9 @@ do($ = window.jQuery, window) ->
|
||||||
return if pipe.data.self_written
|
return if pipe.data.self_written
|
||||||
@onAgentTypingStart()
|
@onAgentTypingStart()
|
||||||
when 'chat_session_start'
|
when 'chat_session_start'
|
||||||
@onConnectionEstablished pipe.data.agent
|
@onConnectionEstablished pipe.data
|
||||||
when 'chat_session_queue'
|
when 'chat_session_queue'
|
||||||
@sessionId = pipe.data.session_id
|
@onQueue pipe.data
|
||||||
@onQueueScreen pipe.data
|
|
||||||
when 'chat_session_closed'
|
when 'chat_session_closed'
|
||||||
@onSessionClosed pipe.data
|
@onSessionClosed pipe.data
|
||||||
when 'chat_session_left'
|
when 'chat_session_left'
|
||||||
|
@ -124,20 +125,41 @@ do($ = window.jQuery, window) ->
|
||||||
when 'no_seats_available'
|
when 'no_seats_available'
|
||||||
@log 'debug', 'Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue
|
@log 'debug', 'Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue
|
||||||
when 'reconnect'
|
when 'reconnect'
|
||||||
# old messages
|
|
||||||
@log 'debug', 'old messages', pipe.data.session
|
@log 'debug', 'old messages', pipe.data.session
|
||||||
|
@openSession pipe.data.session
|
||||||
|
|
||||||
onReady: =>
|
onReady: =>
|
||||||
if @options.show
|
if @options.show
|
||||||
@show()
|
@show()
|
||||||
@el.find('.zammad-chat-input').autoGrow
|
|
||||||
extraLine: false
|
openSession: (session) =>
|
||||||
|
unfinishedMessage = sessionStorage.getItem 'unfinished_message'
|
||||||
|
|
||||||
|
for message in session
|
||||||
|
console.log "message in session", message
|
||||||
|
@renderMessage
|
||||||
|
message: message.content
|
||||||
|
id: message.id
|
||||||
|
from: if message.created_by_id then 'agent' else 'customer'
|
||||||
|
|
||||||
|
if unfinishedMessage
|
||||||
|
@input.val unfinishedMessage
|
||||||
|
|
||||||
|
@show()
|
||||||
|
@open
|
||||||
|
showLoader: false
|
||||||
|
animate: false
|
||||||
|
|
||||||
|
if unfinishedMessage
|
||||||
|
@input.focus()
|
||||||
|
|
||||||
onInput: =>
|
onInput: =>
|
||||||
# remove unread-state from messages
|
# remove unread-state from messages
|
||||||
@el.find('.zammad-chat-message--unread')
|
@el.find('.zammad-chat-message--unread')
|
||||||
.removeClass 'zammad-chat-message--unread'
|
.removeClass 'zammad-chat-message--unread'
|
||||||
|
|
||||||
|
sessionStorage.setItem 'unfinished_message', @input.val()
|
||||||
|
|
||||||
@onTypingStart()
|
@onTypingStart()
|
||||||
|
|
||||||
onTypingStart: ->
|
onTypingStart: ->
|
||||||
|
@ -161,10 +183,12 @@ do($ = window.jQuery, window) ->
|
||||||
@sendMessage()
|
@sendMessage()
|
||||||
|
|
||||||
sendMessage: ->
|
sendMessage: ->
|
||||||
message = @el.find('.zammad-chat-input').val()
|
message = @input.val()
|
||||||
|
|
||||||
return if !message
|
return if !message
|
||||||
|
|
||||||
|
sessionStorage.removeItem 'unfinished_message'
|
||||||
|
|
||||||
messageElement = @view('message')
|
messageElement = @view('message')
|
||||||
message: message
|
message: message
|
||||||
from: 'customer'
|
from: 'customer'
|
||||||
|
@ -180,7 +204,7 @@ do($ = window.jQuery, window) ->
|
||||||
@lastAddedType = 'message--customer'
|
@lastAddedType = 'message--customer'
|
||||||
@el.find('.zammad-chat-body').append messageElement
|
@el.find('.zammad-chat-body').append messageElement
|
||||||
|
|
||||||
@el.find('.zammad-chat-input').val('')
|
@input.val('')
|
||||||
@scrollToBottom()
|
@scrollToBottom()
|
||||||
|
|
||||||
@isTyping = false
|
@isTyping = false
|
||||||
|
@ -197,22 +221,31 @@ do($ = window.jQuery, window) ->
|
||||||
|
|
||||||
@maybeAddTimestamp()
|
@maybeAddTimestamp()
|
||||||
|
|
||||||
@lastAddedType = 'message--agent'
|
@renderMessage
|
||||||
unread = document.hidden ? " zammad-chat-message--unread" : ""
|
|
||||||
@el.find('.zammad-chat-body').append @view('message')
|
|
||||||
message: data.message.content
|
message: data.message.content
|
||||||
id: data.id
|
id: data.id
|
||||||
from: 'agent'
|
from: 'agent'
|
||||||
|
|
||||||
|
renderMessage: (data) =>
|
||||||
|
@lastAddedType = "message--#{ data.from }"
|
||||||
|
unread = document.hidden ? " zammad-chat-message--unread" : ""
|
||||||
|
@el.find('.zammad-chat-body').append @view('message')(data)
|
||||||
@scrollToBottom()
|
@scrollToBottom()
|
||||||
|
|
||||||
open: =>
|
open: (options = { showLoader: true, animate: true }) =>
|
||||||
return if @isOpen
|
return if @isOpen
|
||||||
|
|
||||||
|
if options.showLoader
|
||||||
@showLoader()
|
@showLoader()
|
||||||
|
|
||||||
@el
|
@el
|
||||||
.addClass('zammad-chat-is-open')
|
.addClass('zammad-chat-is-open')
|
||||||
.animate { bottom: 0 }, 500, @onOpenAnimationEnd
|
|
||||||
|
if options.animate
|
||||||
|
@el.animate { bottom: 0 }, 500, @onOpenAnimationEnd
|
||||||
|
else
|
||||||
|
@el.css 'bottom', 0
|
||||||
|
@onOpenAnimationEnd()
|
||||||
|
|
||||||
@isOpen = true
|
@isOpen = true
|
||||||
|
|
||||||
|
@ -225,6 +258,15 @@ do($ = window.jQuery, window) ->
|
||||||
|
|
||||||
close: (event) =>
|
close: (event) =>
|
||||||
event.stopPropagation() if event
|
event.stopPropagation() if event
|
||||||
|
|
||||||
|
@ws.close()
|
||||||
|
|
||||||
|
sessionStorage.removeItem 'sessionId'
|
||||||
|
sessionStorage.removeItem 'unfinished_message'
|
||||||
|
|
||||||
|
@closeWindow()
|
||||||
|
|
||||||
|
closeWindow: =>
|
||||||
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
|
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
|
||||||
@el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
|
@el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
|
||||||
|
|
||||||
|
@ -246,12 +288,15 @@ do($ = window.jQuery, window) ->
|
||||||
|
|
||||||
@el.css 'bottom', -remainerHeight
|
@el.css 'bottom', -remainerHeight
|
||||||
|
|
||||||
|
@input.autoGrow
|
||||||
|
extraLine: false
|
||||||
|
|
||||||
disableInput: ->
|
disableInput: ->
|
||||||
@el.find('.zammad-chat-input').prop('disabled', true)
|
@input.prop('disabled', true)
|
||||||
@el.find('.zammad-chat-send').prop('disabled', true)
|
@el.find('.zammad-chat-send').prop('disabled', true)
|
||||||
|
|
||||||
enableInput: ->
|
enableInput: ->
|
||||||
@el.find('.zammad-chat-input').prop('disabled', false)
|
@input.prop('disabled', false)
|
||||||
@el.find('.zammad-chat-send').prop('disabled', false)
|
@el.find('.zammad-chat-send').prop('disabled', false)
|
||||||
|
|
||||||
onQueueScreen: (data) =>
|
onQueueScreen: (data) =>
|
||||||
|
@ -273,9 +318,10 @@ do($ = window.jQuery, window) ->
|
||||||
onQueue: (position) =>
|
onQueue: (position) =>
|
||||||
@log 'notice', 'onQueue', position
|
@log 'notice', 'onQueue', position
|
||||||
@inQueue = true
|
@inQueue = true
|
||||||
|
@setSessionId data.session_id
|
||||||
|
|
||||||
@el.find('.zammad-chat-body').html @view('waiting')
|
@el.find('.zammad-chat-body').html @view('waiting')
|
||||||
position: position
|
position: data.position
|
||||||
|
|
||||||
onAgentTypingStart: =>
|
onAgentTypingStart: =>
|
||||||
if @stopTypingId
|
if @stopTypingId
|
||||||
|
@ -332,11 +378,7 @@ do($ = window.jQuery, window) ->
|
||||||
connect: =>
|
connect: =>
|
||||||
@log 'notice', "Connecting to #{@host}"
|
@log 'notice', "Connecting to #{@host}"
|
||||||
@ws = new window.WebSocket(@host)
|
@ws = new window.WebSocket(@host)
|
||||||
@ws.onopen = =>
|
@ws.onopen = @onWebSocketOpen
|
||||||
@log 'debug', 'ws connected'
|
|
||||||
@send 'chat_status_customer',
|
|
||||||
session_id: @sessionId
|
|
||||||
@setAgentOnlineState(true)
|
|
||||||
|
|
||||||
@ws.onmessage = @onWebSocketMessage
|
@ws.onmessage = @onWebSocketMessage
|
||||||
|
|
||||||
|
@ -348,6 +390,16 @@ do($ = window.jQuery, window) ->
|
||||||
@ws.onerror = (e) =>
|
@ws.onerror = (e) =>
|
||||||
@log 'debug', 'ws:onerror', e
|
@log 'debug', 'ws:onerror', e
|
||||||
|
|
||||||
|
onWebSocketOpen: =>
|
||||||
|
@sessionId = sessionStorage.getItem('sessionId')
|
||||||
|
|
||||||
|
@log 'debug', 'ws connected'
|
||||||
|
|
||||||
|
@send 'chat_status_customer',
|
||||||
|
session_id: @sessionId
|
||||||
|
|
||||||
|
@setAgentOnlineState(true)
|
||||||
|
|
||||||
reconnect: =>
|
reconnect: =>
|
||||||
# set status to connecting
|
# set status to connecting
|
||||||
@log 'notice', 'reconnecting'
|
@log 'notice', 'reconnecting'
|
||||||
|
@ -376,17 +428,22 @@ do($ = window.jQuery, window) ->
|
||||||
@el.find('.zammad-chat-agent').addClass('zammad-chat-is-hidden')
|
@el.find('.zammad-chat-agent').addClass('zammad-chat-is-hidden')
|
||||||
@el.find('.zammad-chat-agent-status').addClass('zammad-chat-is-hidden')
|
@el.find('.zammad-chat-agent-status').addClass('zammad-chat-is-hidden')
|
||||||
|
|
||||||
onConnectionEstablished: (agent) =>
|
setSessionId: (id) =>
|
||||||
|
@sessionId = id
|
||||||
|
sessionStorage.setItem 'sessionId', id
|
||||||
|
|
||||||
|
onConnectionEstablished: (data) =>
|
||||||
|
|
||||||
# stop delay of initial queue position
|
# stop delay of initial queue position
|
||||||
if @onInitialQueueDelayId
|
if @onInitialQueueDelayId
|
||||||
clearTimeout(@onInitialQueueDelayId)
|
clearTimeout @onInitialQueueDelayId
|
||||||
|
|
||||||
@inQueue = false
|
@inQueue = false
|
||||||
@agent = agent
|
@agent = data.agent
|
||||||
|
@setSessionId data.session_id
|
||||||
|
|
||||||
@el.find('.zammad-chat-agent').html @view('agent')
|
@el.find('.zammad-chat-agent').html @view('agent')
|
||||||
agent: agent
|
agent: @agent
|
||||||
|
|
||||||
@enableInput()
|
@enableInput()
|
||||||
|
|
||||||
|
@ -394,7 +451,7 @@ do($ = window.jQuery, window) ->
|
||||||
@el.find('.zammad-chat-welcome').addClass('zammad-chat-is-hidden')
|
@el.find('.zammad-chat-welcome').addClass('zammad-chat-is-hidden')
|
||||||
@el.find('.zammad-chat-agent').removeClass('zammad-chat-is-hidden')
|
@el.find('.zammad-chat-agent').removeClass('zammad-chat-is-hidden')
|
||||||
@el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden')
|
@el.find('.zammad-chat-agent-status').removeClass('zammad-chat-is-hidden')
|
||||||
@el.find('.zammad-chat-input').focus()
|
@input.focus()
|
||||||
|
|
||||||
showLoader: ->
|
showLoader: ->
|
||||||
@el.find('.zammad-chat-body').html @view('loader')()
|
@el.find('.zammad-chat-body').html @view('loader')()
|
||||||
|
|
File diff suppressed because it is too large
Load diff
2
public/assets/chat/chat.min.js
vendored
2
public/assets/chat/chat.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue