Merge branch 'develop' of github.com:martini/zammad into develop

This commit is contained in:
Felix Niklas 2015-11-26 10:29:33 +01:00
commit 20abe7ff87
20 changed files with 610 additions and 323 deletions

View file

@ -443,25 +443,11 @@ class App.Controller extends Spine.Controller
}
processData: true,
success: (data, status, xhr) ->
App.SessionStorage.set( "user-ticket-popover::#{params.user_id}", data )
# load assets
App.Collection.loadAssets( data.assets )
show( params, { open: data.ticket_ids_open, closed: data.ticket_ids_closed } )
)
# get data
data = App.SessionStorage.get( "user-ticket-popover::#{params.user_id}" )
if data
show( params, { open: data.ticket_ids_open, closed: data.ticket_ids_closed } )
@delay(
->
fetch(params)
1000
'fetch'
)
else
fetch(params)
userTicketPopupsDestroy: =>

View file

@ -1,9 +1,5 @@
class App.ChannelChat extends App.Controller
events:
'click .js-add': 'new'
'click .js-edit': 'edit'
'click .js-remove': 'remove'
'click .js-widget': 'widget'
'change .js-params': 'updateParams'
'input .js-params': 'updateParams'
'submit .js-demo-head': 'onUrlSubmit'
@ -11,6 +7,7 @@ class App.ChannelChat extends App.Controller
'click .js-selectBrowserWidth': 'selectBrowserWidth'
'click .js-swatch': 'usePaletteColor'
'click .js-toggle-chat': 'toggleChat'
'click .js-chatSetting': 'toggleChatSetting'
elements:
'.js-browser': 'browser'
@ -27,13 +24,14 @@ class App.ChannelChat extends App.Controller
'.js-code': 'code'
'.js-palette': 'palette'
'.js-color': 'colorField'
'.js-chatSetting': 'chatSetting'
apiOptions: [
{
name: 'channel'
default: "'default'"
type: 'String'
description: 'Name of the chat-channel.'
name: 'chatId'
default: '1'
type: 'Number'
description: 'Identifier of the chat-topic.'
}
{
name: 'show'
@ -54,18 +52,18 @@ class App.ChannelChat extends App.Controller
description: "If left empty, the host gets auto-detected - in this case %s. The auto-detection reads out the host from the <script> tag. If you don't include it via a <script> tag you need to specify the host."
descriptionSubstitute: window.location.origin
}
{
name: 'port'
default: 6042
type: 'Int'
description: ''
}
{
name: 'debug'
default: false
type: 'Boolean'
description: 'Enables console logging.'
}
{
name: 'title'
default: "'<strong>Chat</strong> with us!'"
type: 'String'
description: 'Welcome Title shown on the closed chat. Can contain HTML.'
}
{
name: 'fontSize'
default: 'undefined'
@ -75,7 +73,7 @@ class App.ChannelChat extends App.Controller
{
name: 'flat'
default: 'false'
type: 'boolean'
type: 'Boolean'
description: 'Removes the shadows for a flat look.'
}
{
@ -91,18 +89,29 @@ class App.ChannelChat extends App.Controller
description: 'This class gets added to the button on initialization and gets removed once the chat connection got established.'
}
{
name: 'title'
default: "'<strong>Chat</strong> with us!'"
name: 'cssAutoload'
default: 'true'
type: 'Boolean'
description: 'Automatically loads the chat.css file. If you want to use your own css, just set it to false.'
}
{
name: 'cssUrl'
default: 'undefined'
type: 'String'
description: 'Welcome Title shown on the closed chat. Can contain HTML.'
description: 'Location of an external chat.css file.'
}
]
isOpen: true
browserWidth: 1280
previewUrl: ''
constructor: ->
super
@title 'Chat'
if @Session.get('email')
@previewUrl = "www.#{@Session.get('email').replace(/^.+?\@/, '')}"
@load()
@widgetDesignerPermanentParams =
@ -124,15 +133,15 @@ class App.ChannelChat extends App.Controller
)
render: (data = {}) =>
chats = []
for chat_id in data.chat_ids
chats.push App.Chat.find(chat_id)
@html App.view('channel/chat')(
baseurl: window.location.origin
chats: chats
apiOptions: @apiOptions
previewUrl: @previewUrl
chatSetting: @Config.get('chat')
)
new Topics(
el: @$('.js-topics')
)
@code.each (i, block) ->
@ -236,7 +245,7 @@ class App.ChannelChat extends App.Controller
palette = _.map palette, tinycolor
# filter white
palette = _.filter palette, (color) =>
palette = _.filter palette, (color) ->
color.getLuminance() < 0.85
htmlString = ''
@ -264,47 +273,12 @@ class App.ChannelChat extends App.Controller
@isOpen = @chat.hasClass('is-open')
@updatePreview()
new: (e) =>
new App.ControllerGenericNew(
pageData:
title: 'Chats'
object: 'Chat'
objects: 'Chats'
genericObject: 'Chat'
callback: @load
container: @el.closest('.content')
large: true
)
edit: (e) =>
e.preventDefault()
id = $(e.target).closest('tr').data('id')
new App.ControllerGenericEdit(
id: id
genericObject: 'Chat'
pageData:
object: 'Chat'
container: @el.closest('.content')
callback: @load
)
remove: (e) =>
e.preventDefault()
id = $(e.target).closest('tr').data('id')
item = App.Chat.find(id)
new App.ControllerGenericDestroyConfirm(
item: item
container: @el.closest('.content')
callback: @load
)
widget: (e) ->
e.preventDefault()
id = $(e.target).closest('.action').data('id')
new Widget(
permanent:
id: id
)
toggleChatSetting: =>
value = @chatSetting.prop('checked')
setting = App.Setting.findByAttribute('name', 'chat')
setting.state_current = { value: value }
setting.save()
@Config.set('chat', value)
updateParams: =>
quote = (value) ->
@ -347,4 +321,53 @@ class App.ChannelChat extends App.Controller
@paramsBlock.each (i, block) ->
hljs.highlightBlock block
App.Config.set( 'Chat Widget', { prio: 4000, name: 'Chat Widget', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )
App.Config.set( 'Chat', { prio: 4000, name: 'Chat', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )
class Topics extends App.Controller
events:
'click .js-add': 'new'
'click .js-edit': 'edit'
'click .js-remove': 'remove'
constructor: ->
super
@render()
render: =>
@html App.view('channel/topics')(
chats: App.Chat.all()
)
new: (e) =>
new App.ControllerGenericNew(
pageData:
title: 'Chats'
object: 'Chat'
objects: 'Chats'
genericObject: 'Chat'
callback: @render
container: @el.closest('.content')
large: true
)
edit: (e) =>
e.preventDefault()
id = $(e.target).closest('tr').data('id')
new App.ControllerGenericEdit(
id: id
genericObject: 'Chat'
pageData:
object: 'Chat'
container: @el.closest('.content')
callback: @render
)
remove: (e) =>
e.preventDefault()
id = $(e.target).closest('tr').data('id')
item = App.Chat.find(id)
new App.ControllerGenericDestroyConfirm(
item: item
container: @el.closest('.content')
callback: @render
)

View file

@ -3,22 +3,30 @@ class App.ChannelForm extends App.Controller
events:
'change form.js-params': 'updateParams'
'keyup form.js-params': 'updateParams'
'click .js-formSetting': 'toggleFormSetting'
elements:
'.js-paramsBlock': 'paramsBlock'
'.js-formSetting': 'formSetting'
constructor: ->
super
@title 'Form'
@render()
@updateParams()
new App.SettingsArea(
el: @$('.js-settings')
area: 'Form::Base'
)
@subscribeId = App.Setting.subscribe(@render, initFetch: true)
render: ->
render: =>
App.Setting.unsubscribe(@subscribeId)
setting = App.Setting.findByAttribute('name', 'form_ticket_create')
@html App.view('channel/form')(
baseurl: window.location.origin
formSetting: setting.state_current.value
)
@paramsBlock.each (i, block) ->
hljs.highlightBlock block
@updateParams()
updateParams: ->
quote = (string) ->
string = string.replace('\'', '\\\'')
@ -36,4 +44,10 @@ class App.ChannelForm extends App.Controller
paramString += " #{key}: '#{quote(value)}'"
@$('.js-modal-params').html(paramString)
toggleFormSetting: =>
value = @formSetting.prop('checked')
setting = App.Setting.findByAttribute('name', 'form_ticket_create')
setting.state_current = { value: value }
setting.save()
App.Config.set( 'Form', { prio: 2000, name: 'Form', parent: '#channels', target: '#channels/form', controller: App.ChannelForm, role: ['Admin'] }, 'NavBarAdmin' )

View file

@ -13,27 +13,17 @@ class App.WidgetTag extends App.Controller
constructor: ->
super
@cacheKey = "tags::#{@object_type}::#{@object.id}"
@key = "tags::#{@object_type}::#{@object.id}"
if @tags
@render()
return
@tags = App.SessionStorage.get( @cacheKey ) || []
if !_.isEmpty(@tags)
@render()
@delay(
=>
@fetch()
1000
'fetch'
)
else
@fetch()
fetch: =>
@ajax(
id: @cacheKey
id: @key
type: 'GET'
url: @apiPath + '/tags'
data:
@ -42,7 +32,6 @@ class App.WidgetTag extends App.Controller
processData: true
success: (data, status, xhr) =>
@tags = data.tags
App.SessionStorage.set( @cacheKey, @tags )
@render()
)

View file

@ -6,44 +6,17 @@
<div class="page-content">
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
<h2><%- @T('Enable') %>/<%- @T('Disable') %></h2>
<form>
<div class="zammad-switch">
<input name="chat" type="checkbox" id="setting-chat" class="js-chatSetting" <% if @chatSetting: %>checked<% end %>>
<label for="setting-chat"></label>
</div>
</form>
<h2><%- @T('Topics') %></h2>
<p><%- @T('You can create multiple chat topics.') %></p>
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('Name') %></th>
<th style="white-space: nowrap;"><%- @T('Note') %></th>
<th style="white-space: nowrap;"><%- @T('Max. clients in waitlist') %></th>
<th style="white-space: nowrap;"><%- @T('Delete') %></th>
</tr>
</thead>
<tbody>
<% for chat in @chats: %>
<tr data-id="<%= chat.id %>">
<td>
<label class="inline-label">
<a class="js-edit is-clickable"><%= chat.name %></a>
</label>
<td>
<label class="inline-label">
<%= chat.note %>
</label>
<td>
<label class="inline-label">
<%= chat.max_queue %>
</label>
<td>
<div class="settings-list-rowControls">
<div class="btn btn--text js-remove">
<%- @Icon('trash') %> <%- @T('Remove') %>
</div>
</div>
<% end %>
<tr>
<td colspan="4" class="settings-list-action-cell js-add">
<%- @Icon('plus-small') %> <%- @T('Add') %>
</tbody>
</table>
<div class="js-topics"></div>
<h2><%- @T('Designer') %></h2>
@ -62,7 +35,7 @@
<div class="browser chat-demo js-browser">
<form class="browser-head js-demo-head" novalidate>
<div class="browser-input">
<input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
<input type="url" class="js-testurl-input" id="preview-iframe" value="<%= @previewUrl %>" placeholder="www.zammad.org">
<div class="loading icon small muted"></div>
</div>
<input type="submit" class="btn" value="<%- @T('Load') %>">
@ -119,7 +92,7 @@
<label for="form-chat-title"><%- @T('Chat Title') %></label>
</div>
<div class="controls">
<input class="js-chatTitle" type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
<input class="js-chatTitle" type="text" id="form-chat-title" name="title" placeholder="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
</div>
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
</div>

View file

@ -6,15 +6,19 @@
<div class="page-content">
<p><%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %></p>
<div class="js-settings"></div>
<h2><%- @T('Enable') %>/<%- @T('Disable') %></h2>
<form>
<div class="zammad-switch">
<input name="form_ticket_create" type="checkbox" id="setting-form" class="js-formSetting" <% if @formSetting: %>checked<% end %>>
<label for="setting-form"></label>
</div>
</form>
<hr>
<h2><%- @T('Widget Designer') %></h2>
<h2><%- @T('Designer') %></h2>
<form class="js-params">
<fieldset>
<div class="input form-group">
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-message-title"><%- @T('Title of the form') %></label>
</div>
@ -22,7 +26,7 @@
<input type="text" id="form-message-title" name="messageTitle" value="<%- @Ti('Feedback Form') %>">
</div>
</div>
<div class="input form-group">
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
<label for="form-message-submit"><%- @T('Name of form submit button') %></label>
</div>
@ -95,8 +99,7 @@
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
<pre>
&lt;button id="feedback-form"&gt;Feedback&lt;/button&gt;
<pre><code class="language-html js-paramsBlock">&lt;button id="feedback-form"&gt;Feedback&lt;/button&gt;
&lt;script id="zammad_form_script" src="<%= @baseurl %>/assets/form/form.js"&gt;&lt;/script&gt;
@ -106,5 +109,5 @@ $(function() {
<span class="js-modal-params"></span>
});
});
&lt;/script&gt;</pre>
&lt;/script&gt;</code></pre>
</div>

View file

@ -0,0 +1,41 @@
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('chatId') %></th>
<th style="white-space: nowrap;"><%- @T('Name') %></th>
<th style="white-space: nowrap;"><%- @T('Note') %></th>
<th style="white-space: nowrap;"><%- @T('Max. clients in waitlist') %></th>
<th style="white-space: nowrap;"><%- @T('Delete') %></th>
</tr>
</thead>
<tbody>
<% for chat in @chats: %>
<tr data-id="<%= chat.id %>">
<td>
<label class="inline-label">
<%= chat.id %>
</label>
<td>
<label class="inline-label">
<a class="js-edit is-clickable"><%= chat.name %></a>
</label>
<td>
<label class="inline-label">
<%= chat.note %>
</label>
<td>
<label class="inline-label">
<%= chat.max_queue %>
</label>
<td>
<div class="settings-list-rowControls">
<div class="btn btn--text js-remove">
<%- @Icon('trash') %> <%- @T('Remove') %>
</div>
</div>
<% end %>
<tr>
<td colspan="5" class="settings-list-action-cell js-add">
<%- @Icon('plus-small') %> <%- @T('Add') %>
</tbody>
</table>

View file

@ -11,6 +11,8 @@ class ChatsController < ApplicationController
chat_ids.push chat.id
assets = chat.assets(assets)
}
setting = Setting.find_by(name: 'chat')
assets = setting.assets(assets)
render json: {
chat_ids: chat_ids,
assets: assets,

View file

@ -134,9 +134,10 @@ class Channel::EmailParser
if !data[:body].valid_encoding?
data[:body] = data[:body].encode('utf-8', 'binary', invalid: :replace, undef: :replace, replace: '?')
end
end
# html attachment/body may exists and will be converted to text
else
if !mail.text_part || !data[:body] || data[:body] == ''
filename = '-no name-'
if mail.html_part && mail.html_part.body
filename = 'message.html'

View file

@ -14,10 +14,15 @@ do($ = window.jQuery, window) ->
host: ''
debug: false
flat: false
lang: undefined
cssAutoload: true
cssUrl: undefined
fontSize: undefined
buttonClass: 'open-zammad-chat'
inactiveClass: 'is-inactive'
title: '<strong>Chat</strong> with us!'
idleTimeout: 8
inactiveTimeout: 20
_messageCount: 0
isOpen: true
@ -31,7 +36,10 @@ do($ = window.jQuery, window) ->
state: 'offline'
initialQueueDelay: 10000
wsReconnectEnable: true
strings:
translations:
de:
'<strong>Chat</strong> with us!': '<strong>Chat</strong> mit uns!'
'Online': 'Online'
'Online': 'Online'
'Offline': 'Offline'
'Connecting': 'Verbinden'
@ -42,19 +50,23 @@ do($ = window.jQuery, window) ->
'All colleges are busy.': 'Alle Kollegen sind belegt.'
'You are on waiting list position <strong>%s</strong>.': 'Sie sind in der Warteliste an der Position <strong>%s</strong>.'
'Start new conversation': 'Neue Konversation starten'
'Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.': 'Da sie in den letzten %s nichts geschrieben haben wurde ihre Konversation mit <strong>%s</strong> geschlossen.'
'minutes': 'Minuten'
'Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.': 'Da Sie in den letzten %s Minuten nichts geschrieben haben wurde Ihre Konversation mit <strong>%s</strong> geschlossen.'
'Since you didn\'t respond in the last %s minutes your conversation got closed.': 'Da Sie in den letzten %s Minuten nichts geschrieben haben wurde Ihre Konversation geschlossen.'
sessionId: undefined
T: (string, items...) =>
if !@strings[string]
if @options.lang && @options.lang isnt 'en'
if !@translations[@options.lang]
@log 'notice', "Translation '#{@options.lang}' needed!"
else
translations = @translations[@options.lang]
if !translations[string]
@log 'notice', "Translation needed for '#{string}'"
translation = @strings[string] || string
string = translations[string] || string
if items
for item in items
translation = translation.replace(/%s/, item)
translation
string = string.replace(/%s/, item)
string
log: (level, string...) =>
return if !@options.debug && level is 'debug'
@ -76,16 +88,26 @@ do($ = window.jQuery, window) ->
@options = $.extend {}, @defaults, options
# check prerequisites
if !$
@state = 'unsupported'
@log 'notice', 'Chat: no jquery found!'
return
if !window.WebSocket or !sessionStorage
@state = 'unsupported'
@log 'notice', 'Chat: Browser not supported!'
return
if !@options.chatId
@state = 'unsupported'
@log 'error', 'Chat: need chatId as option!'
return
# detect language
if !@options.lang
@options.lang = $('html').attr('lang')
if @options.lang
@options.lang = @options.lang.replace(/-.+?$/, '') # replace "-xx" of xx-xx
@log 'debug', "lang: #{@options.lang}"
@el = $(@view('chat')(
title: @options.title
))
@ -105,6 +127,8 @@ do($ = window.jQuery, window) ->
@wsConnect()
@loadCss()
checkForEnter: (event) =>
if not event.shiftKey and event.keyCode is 13
event.preventDefault()
@ -125,7 +149,9 @@ do($ = window.jQuery, window) ->
@log 'debug', 'ws:onmessage', pipe
switch pipe.event
when 'chat_error'
@log 'error', pipe.data
@log 'notice', pipe.data
if pipe.data && pipe.data.state is 'chat_disabled'
@wsClose()
when 'chat_session_message'
return if pipe.data.self_written
@receiveMessage pipe.data
@ -176,6 +202,8 @@ do($ = window.jQuery, window) ->
$(".#{ @options.buttonClass }").hide()
reopenSession: (data) =>
@inactiveTimeoutStart()
unfinishedMessage = sessionStorage.getItem 'unfinished_message'
# rerender chat history
@ -218,6 +246,7 @@ do($ = window.jQuery, window) ->
@isTyping = new Date()
@send 'chat_session_typing',
session_id: @sessionId
@inactiveTimeoutStart()
onSubmit: (event) =>
event.preventDefault()
@ -225,9 +254,10 @@ do($ = window.jQuery, window) ->
sendMessage: ->
message = @input.val()
return if !message
@inactiveTimeoutStart()
sessionStorage.removeItem 'unfinished_message'
messageElement = @view('message')
@ -255,6 +285,8 @@ do($ = window.jQuery, window) ->
session_id: @sessionId
receiveMessage: (data) =>
@inactiveTimeoutStart()
# hide writing indicator
@onAgentTypingEnd()
@ -289,10 +321,10 @@ do($ = window.jQuery, window) ->
@isOpen = true
if !@sessionId
@session_init()
@sessionInit()
onOpenAnimationEnd: ->
#@showTimeout()
onOpenAnimationEnd: =>
@idleTimeoutStop()
close: (event) =>
return @state if @state is 'off' or @state is 'unsupported'
@ -301,12 +333,25 @@ do($ = window.jQuery, window) ->
# only close if session_id exists
return if !@sessionId
# send close
@send 'chat_session_close',
session_id: @sessionId
# stop timer
@inactiveTimeoutStop()
# delete input store
sessionStorage.removeItem 'unfinished_message'
# stop delay of initial queue position
if @onInitialQueueDelayId
clearTimeout(@onInitialQueueDelayId)
if event
@closeWindow()
@setSessionId undefined
closeWindow: =>
@el.removeClass('zammad-chat-is-open')
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@ -317,12 +362,6 @@ do($ = window.jQuery, window) ->
@disconnect()
@isOpen = false
@send 'chat_session_close',
session_id: @sessionId
@setSessionId undefined
sessionStorage.removeItem 'unfinished_message'
# restart connection
@onWebSocketOpen()
@ -430,7 +469,7 @@ do($ = window.jQuery, window) ->
scrollToBottom: ->
@el.find('.zammad-chat-body').scrollTop($('.zammad-chat-body').prop('scrollHeight'))
session_init: ->
sessionInit: ->
@send('chat_session_init')
detectHost: ->
@ -466,6 +505,7 @@ do($ = window.jQuery, window) ->
@reconnectDelayId = setTimeout(@wsConnect, 5000)
onWebSocketOpen: =>
@idleTimeoutStart()
@sessionId = sessionStorage.getItem('sessionId')
@log 'debug', 'ws connected'
@ -493,6 +533,7 @@ do($ = window.jQuery, window) ->
@addStatus @T('Chat closed by %s', data.realname)
@disableInput()
@setAgentOnlineState 'offline'
@inactiveTimeoutStop()
disconnect: ->
@showLoader()
@ -534,8 +575,11 @@ do($ = window.jQuery, window) ->
showTimeout: ->
@el.find('.zammad-chat-body').html @view('timeout')
agent: @agent.name
delay: 10
unit: @T('minutes')
delay: @options.inactiveTimeout
@close()
reload = ->
location.reload()
@el.find('.js-restart').click reload
showLoader: ->
@el.find('.zammad-chat-body').html @view('loader')()
@ -548,4 +592,48 @@ do($ = window.jQuery, window) ->
.attr('data-status', state)
.text @T(capitalizedState)
loadCss: ->
return if !@options.cssAutoload
url = @options.cssUrl
if !url
url = @options.host
.replace(/^wss/i, 'https')
.replace(/^ws/i, 'http')
.replace(/\/ws/i, '')
url += '/assets/chat/chat.css'
@log 'debug', "load css from '#{url}'"
styles = "@import url('#{url}');"
newSS = document.createElement('link')
newSS.rel = 'stylesheet'
newSS.href = 'data:text/css,' + escape(styles)
document.getElementsByTagName('head')[0].appendChild(newSS)
inactiveTimeoutStart: =>
@inactiveTimeoutStop()
delay = =>
@log 'debug', "Inactive timeout of #{@options.inactiveTimeout} minutes, show timeout screen."
@state = 'off'
@setAgentOnlineState 'offline'
@showTimeout()
@wsClose()
@inactiveTimeoutStopDelayId = setTimeout(delay, @options.inactiveTimeout * 1000 * 60)
inactiveTimeoutStop: =>
return if !@inactiveTimeoutStopDelayId
clearTimeout(@inactiveTimeoutStopDelayId)
idleTimeoutStart: =>
@idleTimeoutStop()
delay = =>
@log 'debug', "Idle timeout of #{@options.idleTimeout} minutes, hide widget"
@state = 'off'
@hide()
@wsClose()
@idleTimeoutStopDelayId = setTimeout(delay, @options.idleTimeout * 1000 * 60)
idleTimeoutStop: =>
return if !@idleTimeoutStopDelayId
clearTimeout(@idleTimeoutStopDelayId)
window.ZammadChat = ZammadChat

View file

@ -105,7 +105,7 @@
margin: 0 1em;
display: inline-block;
line-height: 2em;
padding: 0 0.7em;
padding: 0 .7em;
border-radius: 1em;
background: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }
@ -296,6 +296,7 @@
align-items: flex-start;
border-top: 1px solid #ededed;
padding: 0;
margin: 0;
line-height: 1.4em;
box-shadow: 0 1px rgba(0, 0, 0, 0.01), 0 -1px rgba(0, 0, 0, 0.02);
position: relative;
@ -318,6 +319,7 @@
box-shadow: none;
padding: 1em 2em;
outline: none;
box-shadow: none;
resize: none;
-webkit-flex: 1;
-ms-flex: 1;
@ -356,9 +358,7 @@
display: block; }
/*
# Flat Design
*/
.zammad-chat--flat .zammad-chat-header,
.zammad-chat--flat .zammad-chat-body {

View file

@ -14,10 +14,15 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
host: '',
debug: false,
flat: false,
lang: void 0,
cssAutoload: true,
cssUrl: void 0,
fontSize: void 0,
buttonClass: 'open-zammad-chat',
inactiveClass: 'is-inactive',
title: '<strong>Chat</strong> with us!'
title: '<strong>Chat</strong> with us!',
idleTimeout: 8,
inactiveTimeout: 20
};
ZammadChat.prototype._messageCount = 0;
@ -44,7 +49,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.wsReconnectEnable = true;
ZammadChat.prototype.strings = {
ZammadChat.prototype.translations = {
de: {
'<strong>Chat</strong> with us!': '<strong>Chat</strong> mit uns!',
'Online': 'Online',
'Online': 'Online',
'Offline': 'Offline',
'Connecting': 'Verbinden',
@ -55,26 +63,34 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
'All colleges are busy.': 'Alle Kollegen sind belegt.',
'You are on waiting list position <strong>%s</strong>.': 'Sie sind in der Warteliste an der Position <strong>%s</strong>.',
'Start new conversation': 'Neue Konversation starten',
'Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.': 'Da sie in den letzten %s nichts geschrieben haben wurde ihre Konversation mit <strong>%s</strong> geschlossen.',
'minutes': 'Minuten'
'Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.': 'Da Sie in den letzten %s Minuten nichts geschrieben haben wurde Ihre Konversation mit <strong>%s</strong> geschlossen.',
'Since you didn\'t respond in the last %s minutes your conversation got closed.': 'Da Sie in den letzten %s Minuten nichts geschrieben haben wurde Ihre Konversation geschlossen.'
}
};
ZammadChat.prototype.sessionId = void 0;
ZammadChat.prototype.T = function() {
var i, item, items, len, string, translation;
var i, item, items, len, string, translations;
string = arguments[0], items = 2 <= arguments.length ? slice.call(arguments, 1) : [];
if (!this.strings[string]) {
if (this.options.lang && this.options.lang !== 'en') {
if (!this.translations[this.options.lang]) {
this.log('notice', "Translation '" + this.options.lang + "' needed!");
} else {
translations = this.translations[this.options.lang];
if (!translations[string]) {
this.log('notice', "Translation needed for '" + string + "'");
}
translation = this.strings[string] || string;
string = translations[string] || string;
}
}
if (items) {
for (i = 0, len = items.length; i < len; i++) {
item = items[i];
translation = translation.replace(/%s/, item);
string = string.replace(/%s/, item);
}
}
return translation;
return string;
};
ZammadChat.prototype.log = function() {
@ -103,6 +119,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
function ZammadChat(options) {
this.idleTimeoutStop = bind(this.idleTimeoutStop, this);
this.idleTimeoutStart = bind(this.idleTimeoutStart, this);
this.inactiveTimeoutStop = bind(this.inactiveTimeoutStop, this);
this.inactiveTimeoutStart = bind(this.inactiveTimeoutStart, this);
this.setAgentOnlineState = bind(this.setAgentOnlineState, this);
this.onConnectionEstablished = bind(this.onConnectionEstablished, this);
this.setSessionId = bind(this.setSessionId, this);
@ -119,11 +139,11 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
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);
@ -135,6 +155,11 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.log = bind(this.log, this);
this.T = bind(this.T, this);
this.options = $.extend({}, this.defaults, options);
if (!$) {
this.state = 'unsupported';
this.log('notice', 'Chat: no jquery found!');
return;
}
if (!window.WebSocket || !sessionStorage) {
this.state = 'unsupported';
this.log('notice', 'Chat: Browser not supported!');
@ -145,6 +170,13 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.log('error', 'Chat: need chatId as option!');
return;
}
if (!this.options.lang) {
this.options.lang = $('html').attr('lang');
}
if (this.options.lang) {
this.options.lang = this.options.lang.replace(/-.+?$/, '');
this.log('debug', "lang: " + this.options.lang);
}
this.el = $(this.view('chat')({
title: this.options.title
}));
@ -159,6 +191,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
input: this.onInput
});
this.wsConnect();
this.loadCss();
}
ZammadChat.prototype.checkForEnter = function(event) {
@ -190,7 +223,10 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.log('debug', 'ws:onmessage', pipe);
switch (pipe.event) {
case 'chat_error':
this.log('error', pipe.data);
this.log('notice', pipe.data);
if (pipe.data && pipe.data.state === 'chat_disabled') {
this.wsClose();
}
break;
case 'chat_session_message':
if (pipe.data.self_written) {
@ -263,6 +299,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.reopenSession = function(data) {
var i, len, message, ref, unfinishedMessage;
this.inactiveTimeoutStart();
unfinishedMessage = sessionStorage.getItem('unfinished_message');
if (data.agent) {
this.onConnectionEstablished(data);
@ -293,24 +330,18 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.onInput = function() {
this.el.find('.zammad-chat-message--unread').removeClass('zammad-chat-message--unread');
sessionStorage.setItem('unfinished_message', this.input.val());
return this.onTypingStart();
return this.onTyping();
};
ZammadChat.prototype.onTypingStart = function() {
if (this.isTypingTimeout) {
clearTimeout(this.isTypingTimeout);
ZammadChat.prototype.onTyping = function() {
if (this.isTyping && this.isTyping > new Date(new Date().getTime() - 1500)) {
return;
}
this.isTypingTimeout = setTimeout(this.onTypingEnd, 1500);
if (!this.isTyping) {
this.isTyping = true;
return this.send('chat_session_typing', {
this.isTyping = new Date();
this.send('chat_session_typing', {
session_id: this.sessionId
});
}
};
ZammadChat.prototype.onTypingEnd = function() {
return this.isTyping = false;
return this.inactiveTimeoutStart();
};
ZammadChat.prototype.onSubmit = function(event) {
@ -324,6 +355,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
if (!message) {
return;
}
this.inactiveTimeoutStart();
sessionStorage.removeItem('unfinished_message');
messageElement = this.view('message')({
message: message,
@ -340,7 +372,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
}
this.input.val('');
this.scrollToBottom();
this.isTyping = false;
return this.send('chat_session_message', {
content: message,
id: this._messageCount,
@ -349,6 +380,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.receiveMessage = function(data) {
this.inactiveTimeoutStart();
this.onAgentTypingEnd();
this.maybeAddTimestamp();
return this.renderMessage({
@ -386,11 +418,13 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
}
this.isOpen = true;
if (!this.sessionId) {
return this.session_init();
return this.sessionInit();
}
};
ZammadChat.prototype.onOpenAnimationEnd = function() {};
ZammadChat.prototype.onOpenAnimationEnd = function() {
return this.idleTimeoutStop();
};
ZammadChat.prototype.close = function(event) {
if (this.state === 'off' || this.state === 'unsupported') {
@ -402,10 +436,18 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
if (!this.sessionId) {
return;
}
this.send('chat_session_close', {
session_id: this.sessionId
});
this.inactiveTimeoutStop();
sessionStorage.removeItem('unfinished_message');
if (this.onInitialQueueDelayId) {
clearTimeout(this.onInitialQueueDelayId);
}
return this.closeWindow();
if (event) {
this.closeWindow();
}
return this.setSessionId(void 0);
};
ZammadChat.prototype.closeWindow = function() {
@ -421,11 +463,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.el.removeClass('zammad-chat-is-visible');
this.disconnect();
this.isOpen = false;
this.send('chat_session_close', {
session_id: this.sessionId
});
this.setSessionId(void 0);
sessionStorage.removeItem('unfinished_message');
return this.onWebSocketOpen();
};
@ -542,7 +579,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return this.el.find('.zammad-chat-body').scrollTop($('.zammad-chat-body').prop('scrollHeight'));
};
ZammadChat.prototype.session_init = function() {
ZammadChat.prototype.sessionInit = function() {
return this.send('chat_session_init');
};
@ -591,6 +628,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.onWebSocketOpen = function() {
this.idleTimeoutStart();
this.sessionId = sessionStorage.getItem('sessionId');
this.log('debug', 'ws connected');
this.send('chat_status_customer', {
@ -617,7 +655,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.onSessionClosed = function(data) {
this.addStatus(this.T('Chat closed by %s', data.realname));
this.disableInput();
return this.setAgentOnlineState('offline');
this.setAgentOnlineState('offline');
return this.inactiveTimeoutStop();
};
ZammadChat.prototype.disconnect = function() {
@ -660,11 +699,16 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.showTimeout = function() {
return this.el.find('.zammad-chat-body').html(this.view('timeout')({
var reload;
this.el.find('.zammad-chat-body').html(this.view('timeout')({
agent: this.agent.name,
delay: 10,
unit: this.T('minutes')
delay: this.options.inactiveTimeout
}));
this.close();
reload = function() {
return location.reload();
};
return this.el.find('.js-restart').click(reload);
};
ZammadChat.prototype.showLoader = function() {
@ -678,6 +722,67 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return this.el.find('.zammad-chat-agent-status').attr('data-status', state).text(this.T(capitalizedState));
};
ZammadChat.prototype.loadCss = function() {
var newSS, styles, url;
if (!this.options.cssAutoload) {
return;
}
url = this.options.cssUrl;
if (!url) {
url = this.options.host.replace(/^wss/i, 'https').replace(/^ws/i, 'http').replace(/\/ws/i, '');
url += '/assets/chat/chat.css';
}
this.log('debug', "load css from '" + url + "'");
styles = "@import url('" + url + "');";
newSS = document.createElement('link');
newSS.rel = 'stylesheet';
newSS.href = 'data:text/css,' + escape(styles);
return document.getElementsByTagName('head')[0].appendChild(newSS);
};
ZammadChat.prototype.inactiveTimeoutStart = function() {
var delay;
this.inactiveTimeoutStop();
delay = (function(_this) {
return function() {
_this.log('debug', "Inactive timeout of " + _this.options.inactiveTimeout + " minutes, show timeout screen.");
_this.state = 'off';
_this.setAgentOnlineState('offline');
_this.showTimeout();
return _this.wsClose();
};
})(this);
return this.inactiveTimeoutStopDelayId = setTimeout(delay, this.options.inactiveTimeout * 1000 * 60);
};
ZammadChat.prototype.inactiveTimeoutStop = function() {
if (!this.inactiveTimeoutStopDelayId) {
return;
}
return clearTimeout(this.inactiveTimeoutStopDelayId);
};
ZammadChat.prototype.idleTimeoutStart = function() {
var delay;
this.idleTimeoutStop();
delay = (function(_this) {
return function() {
_this.log('debug', "Idle timeout of " + _this.options.idleTimeout + " minutes, hide widget");
_this.state = 'off';
_this.hide();
return _this.wsClose();
};
})(this);
return this.idleTimeoutStopDelayId = setTimeout(delay, this.options.idleTimeout * 1000 * 60);
};
ZammadChat.prototype.idleTimeoutStop = function() {
if (!this.idleTimeoutStopDelayId) {
return;
}
return clearTimeout(this.idleTimeoutStopDelayId);
};
return ZammadChat;
})();
@ -884,7 +989,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
__out.push('>\n <div class="zammad-chat-header-controls">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" 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 js-chat-close" 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"><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" fill-rule="evenodd"/></svg>\n <span class="zammad-chat-welcome-text">');
__out.push(this.title);
__out.push(this.T(this.title));
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <textarea class="zammad-chat-input" rows="1" placeholder="');
@ -1128,9 +1233,17 @@ window.zammadChatTemplates["timeout"] = function (__obj) {
(function() {
__out.push('<div class="zammad-chat-modal">\n <div class="zammad-chat-modal-text">\n ');
__out.push(this.T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', this.delay + " " + this.unit, this.agent));
if (this.agent) {
__out.push('\n ');
__out.push(this.T('Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.', this.delay, this.agent));
__out.push('\n ');
} else {
__out.push('\n ');
__out.push(this.T('Since you didn\'t respond in the last %s minutes your conversation got closed.', this.delay));
__out.push('\n ');
}
__out.push('<br>\n <div class="zammad-chat-button"');
__out.push('\n <br>\n <div class="zammad-chat-button js-restart"');
if (this.background) {
__out.push(__sanitize(" style='background: " + this.background + "'"));

File diff suppressed because one or more lines are too long

View file

@ -294,6 +294,7 @@
align-items: flex-start;
border-top: 1px solid hsl(0,0%,93%);
padding: 0;
margin: 0;
line-height: 1.4em;
box-shadow:
0 1px rgba(0,0,0,.01),
@ -317,6 +318,7 @@
box-shadow: none;
padding: 1em 2em;
outline: none;
box-shadow: none;
resize: none;
flex: 1;
max-height: 6em;
@ -360,9 +362,7 @@
}
/*
# Flat Design
*/
.zammad-chat--flat .zammad-chat-header,

View file

@ -1,7 +1,6 @@
<!doctype html>
<meta charset="utf-8">
<title>Zammad Chat</title>
<link rel="stylesheet" href="chat.css">
<meta name="viewport" content="width=device-width">
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
<style>
@ -140,6 +139,7 @@
var chat = new ZammadChat({
chatId: 1,
host: 'ws://localhost:6042',
cssUrl: 'http://localhost:3000/assets/chat/chat.css',
debug: true
});

View file

@ -11,7 +11,7 @@
</div>
<div class="zammad-chat-welcome">
<svg class="zammad-chat-icon" viewBox="0 0 24 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" fill-rule="evenodd"/></svg>
<span class="zammad-chat-welcome-text"><%- @title %></span>
<span class="zammad-chat-welcome-text"><%- @T(@title) %></span>
</div>
</div>
<div class="zammad-chat-body"></div>

View file

@ -1,6 +1,11 @@
<div class="zammad-chat-modal">
<div class="zammad-chat-modal-text">
<%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
<div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%- @T('Start new conversation') %></div>
<% if @agent: %>
<%- @T('Since you didn\'t respond in the last %s minutes your conversation with <strong>%s</strong> got closed.', @delay, @agent) %>
<% else: %>
<%- @T('Since you didn\'t respond in the last %s minutes your conversation got closed.', @delay) %>
<% end %>
<br>
<div class="zammad-chat-button js-restart"<%= " style='background: #{ @background }'" if @background %>><%- @T('Start new conversation') %></div>
</div>
</div>

View file

@ -1,11 +1,12 @@
<!doctype html>
<meta charset="utf-8">
<title>Zammad Chat</title>
<link rel="stylesheet" href="chat.css">
<link rel="stylesheet" href="znuny.css">
<meta name="viewport" content="width=device-width">
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
<style>
<html lang="de-de">
<head>
<meta charset="utf-8">
<title>Zammad Chat</title>
<link rel="stylesheet" href="znuny.css">
<meta name="viewport" content="width=device-width">
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
<style>
body {
margin: 0;
font-family: sans-serif;
@ -64,8 +65,9 @@
background: hsl(0,0%,36%);
color: white;
}
</style>
</style>
</head>
<body>
<img class="mockup" width="100%" src="znuny.png">
<div class="settings">
@ -107,6 +109,7 @@
var chat = new ZammadChat({
chatId: 1,
host: 'ws://localhost:6042',
cssUrl: 'http://localhost:3000/assets/chat/chat.css',
debug: true,
background: '#494d52',
flat: true,
@ -145,3 +148,5 @@
}
});
</script>
</body>
</html>

29
test/fixtures/mail34.box vendored Normal file
View file

@ -0,0 +1,29 @@
From: "Bay" <memberbay+12345@members.somewhat>
Subject: strange email with empty text/plain
To: bay@example.com
Date: 11 Nov 2015 12:07:51 +0000
Priority: normal
X-Priority: 3 (Normal)
Importance: normal
X-David-SYM: 0
X-David-Flags: 0
Message-ID: <7ca10659-214c-4bd0-8438-b935a01c7601@stange>
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="----_=_NextPart_000_06409CFC.56433DA7"
This message is in MIME format. Since your mail reader does not understand
this format, some or all of this message may not be legible.
------_=_NextPart_000_06409CFC.56433DA7
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: quoted-printable
------_=_NextPart_000_06409CFC.56433DA7
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable
<b>some html text</b>
------_=_NextPart_000_06409CFC.56433DA7

View file

@ -308,7 +308,7 @@ Hof
# spam email
{
data: IO.read('test/fixtures/mail15.box'),
body_md5: 'd41d8cd98f00b204e9800998ecf8427e',
body_md5: '5872ddcdfdf6bfe40f36cd0408fca667',
attachments: [
# :preferences=>{"Message-ID"=>"<temp@test>", "Content-Type"=>"application/octet-stream; name=\"\xBC\xA8\xD0\xA7\xB9\xDC\xC0\xED,\xBE\xBF\xBE\xB9\xCB\xAD\xB4\xED\xC1\xCB.xls\"", "Mime-Type"=>"application/octet-stream", "Charset"=>"UTF-8"}}
# mutt c1abb5fb77a9d2ab2017749a7987c074
@ -466,14 +466,14 @@ Freemont and pulling out several minutes.
},
{
data: IO.read('test/fixtures/mail24.box'),
body_md5: 'd41d8cd98f00b204e9800998ecf8427e',
body_md5: '5872ddcdfdf6bfe40f36cd0408fca667',
params: {
from: 'oracle@IG0-1-DB01.example.com',
from_email: 'oracle@IG0-1-DB01.example.com',
from_display_name: '',
subject: 'Regelsets im Test-Status gefunden: 1',
to: 'support@example.com',
body: '',
body: 'no visible content',
},
attachments: [
{
@ -672,9 +672,24 @@ Weil wir die Echtheit oder Vollständigkeit der in dieserNachricht enthaltenen I
to: 'info@znuny.inc',
},
},
{
data: IO.read('test/fixtures/mail34.box'),
body_md5: 'b6e46176404ec81b3ab412fe71dff0f0',
params: {
from: 'Bay <memberbay+12345@members.somewhat>',
from_email: 'memberbay+12345@members.somewhat',
from_display_name: 'Bay',
subject: 'strange email with empty text/plain',
to: 'bay@example.com',
body: 'some html text',
},
},
]
count = 0
files.each { |file|
count += 1
#p "Count: #{count}"
parser = Channel::EmailParser.new
data = parser.parse( file[:data] )