Some html and markup improvements for inline translation feature.

app/assets/javascripts/app/controllers/chat.coffee

@@ -29,13 +29,10 @@ class App.CustomerChat extends App.Controller
       active_agents: 0
 
     @render()
-
     @on 'layout-has-changed', @propagateLayoutChange
 
     # update navbar on new status
-    @bind(
-      'chat_status_agent'
-      (data) =>
+    @bind('chat_status_agent', (data) =>
       @meta = data
       @updateMeta()
       if !@pushStateStarted
@@ -44,21 +41,27 @@ class App.CustomerChat extends App.Controller
     )
 
     # add new chat window
-    @bind(
-      'chat_session_start'
-      (data) =>
+    @bind('chat_session_start', (data) =>
       if data.session
         @addChat(data.session)
     )
 
     # on new login or on
-    @bind(
-      'ws:login chat_agent_state'
-      ->
+    @bind('ws:login chat_agent_state', ->
       App.WebSocket.send(event:'chat_status_agent')
     )
     App.WebSocket.send(event:'chat_status_agent')
 
+    # rerender view, e. g. on langauge change
+    @bind('ui:rerender', =>
+      return if !@authenticate(true)
+      for session_id, chat of @chatWindows
+        chat.el.remove()
+      @chatWindows = {}
+      @render()
+      App.WebSocket.send(event:'chat_status_agent')
+    )
+
   pushState: =>
     App.WebSocket.send(
       event:'chat_agent_state'
@@ -212,23 +215,17 @@ class chatWindow extends App.Controller
 
     @on 'layout-change', @scrollToBottom
 
-    @bind(
-      'chat_session_typing'
-      (data) =>
+    @bind('chat_session_typing', (data) =>
       return if data.session_id isnt @session.session_id
       return if data.self_written
       @showWritingLoader()
     )
-    @bind(
-      'chat_session_message'
-      (data) =>
+    @bind('chat_session_message', (data) =>
       return if data.session_id isnt @session.session_id
       return if data.self_written
       @receiveMessage(data.message.content)
     )
-    @bind(
-      'chat_session_left chat_session_closed'
-      (data) =>
+    @bind('chat_session_left chat_session_closed', (data) =>
       return if data.session_id isnt @session.session_id
       return if data.self_written
       @addStatusMessage("<strong>#{data.realname}</strong> has left the conversation")
@@ -401,7 +398,7 @@ class chatWindow extends App.Controller
     timestamp = Date.now()
 
     if !@lastTimestamp or timestamp - @lastTimestamp > @showTimeEveryXMinutes * 60000
-      label = App.i18n.translateContent('today')
+      label = App.i18n.translateInline('today')
       time = new Date().toTimeString().substr(0,5)
       if @lastAddedType is 'timestamp'
         # update last time

app/assets/javascripts/app/lib/app_post/i18n.coffee

@@ -2,48 +2,48 @@
 class App.i18n
   _instance = undefined
 
-  @init: ( args ) ->
-    _instance ?= new _i18nSingleton( args )
+  @init: (args) ->
+    _instance ?= new _i18nSingleton(args)
 
-  @translateContent: ( string, args... ) ->
+  @translateContent: (string, args...) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.translateContent( string, args )
+    _instance.translateContent(string, args)
 
-  @translatePlain: ( string, args... ) ->
+  @translatePlain: (string, args...) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.translatePlain( string, args )
+    _instance.translatePlain(string, args)
 
-  @translateInline: ( string, args... ) ->
+  @translateInline: (string, args...) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.translateInline( string, args )
+    _instance.translateInline(string, args)
 
-  @translateTimestamp: ( args, offset = 0 ) ->
+  @translateTimestamp: (args, offset = 0) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.timestamp( args, offset )
+    _instance.timestamp(args, offset)
 
-  @translateDate: ( args, offset = 0 ) ->
+  @translateDate: (args, offset = 0) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.date( args, offset )
+    _instance.date(args, offset)
 
   @get: ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
     _instance.get()
 
-  @set: ( args ) ->
+  @set: (args) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.set( args )
+    _instance.set(args)
 
   @setMap: (source, target, format) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.setMap( source, target, format )
+    _instance.setMap(source, target, format)
 
   @meta: (source, target, format) ->
     if _instance == undefined
@@ -53,22 +53,22 @@ class App.i18n
   @notTranslatedFeatureEnabled: (locale) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.notTranslatedFeatureEnabled( locale )
+    _instance.notTranslatedFeatureEnabled(locale)
 
   @getNotTranslated: (locale) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.getNotTranslated( locale )
+    _instance.getNotTranslated(locale)
 
   @removeNotTranslated: (locale, key) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.removeNotTranslated( locale, key )
+    _instance.removeNotTranslated(locale, key)
 
   @setNotTranslated: (locale, key) ->
     if _instance == undefined
       _instance ?= new _i18nSingleton()
-    _instance.setNotTranslated( locale, key )
+    _instance.setNotTranslated(locale, key)
 
   @timeFormat: (locale, key) ->
     if _instance == undefined
@@ -78,7 +78,7 @@ class App.i18n
 class _i18nSingleton extends Spine.Module
   @include App.LogInclude
 
-  constructor: ( locale ) ->
+  constructor: (locale) ->
     @mapTime           = {}
     @mapString         = {}
     @mapMeta           =
@@ -95,10 +95,9 @@ class _i18nSingleton extends Spine.Module
         $this = $(e.target)
         $this.data 'before', $this.html()
         return $this
-#      .delegate '.translation', 'blur keyup paste', (e) =>
       .delegate '.translation', 'blur', (e) =>
         $this = $(e.target)
-        source = $this.attr('data-text')
+        source = $this.attr('title')
 
         # get new translation
         translation_new = $this.html()
@@ -114,21 +113,21 @@ class _i18nSingleton extends Spine.Module
         $this.data 'before', translation_new
 
         # update runtime translation mapString
-        @mapString[ source ] = translation_new
+        @mapString[source] = translation_new
 
         # replace rest in page
-        $(".translation[data-text='#{source}']").html( translation_new )
+        $(".translation[title='#{source}']").html(translation_new)
 
         # update permanent translation mapString
-        translation = App.Translation.findByAttribute( 'source', source )
+        translation = App.Translation.findByAttribute('source', source)
         if translation
-          translation.updateAttribute( 'target', translation_new )
+          translation.updateAttribute('target', translation_new)
         else
           translation = new App.Translation
           translation.load(
-            locale: @locale,
-            source: source,
-            target: translation_new,
+            locale: @locale
+            source: source
+            target: translation_new
          )
           translation.save()
 
@@ -137,7 +136,7 @@ class _i18nSingleton extends Spine.Module
   get: ->
     @locale
 
-  set: ( localeToSet ) ->
+  set: (localeToSet) ->
 
     # prepare locale
     localeToSet = localeToSet.toLowerCase()
@@ -182,7 +181,7 @@ class _i18nSingleton extends Spine.Module
     @_notTranslatedLog = @notTranslatedFeatureEnabled(@locale)
 
     # set lang attribute of html tag
-    $('html').prop( 'lang', @locale.substr(0, 2) )
+    $('html').prop('lang', @locale.substr(0, 2) )
 
     @mapString = {}
     App.Ajax.request(
@@ -215,29 +214,24 @@ class _i18nSingleton extends Spine.Module
 
         # load in collection if needed
         if !_.isEmpty(mapToLoad)
-          App.Translation.refresh( mapToLoad, {clear: true} )
+          App.Translation.refresh(mapToLoad, {clear: true} )
 
         App.Event.trigger('i18n:language:change')
     )
 
-  translateInline: ( string, args ) =>
-    App.Utils.htmlEscape( @translate( string, args ) )
+  translateInline: (string, args) =>
+    App.Utils.htmlEscape(@translate(string, args))
 
-  translateContent: ( string, args ) =>
-    translated = App.Utils.htmlEscape( @translate( string, args ) )
-#    replace = '<span class="translation" contenteditable="true" data-text="' + App.Utils.htmlEscape(string) + '">' + translated + '<span class="icon-edit"></span>'
-    if App.Config.get( 'translation_inline' )
-      replace = '<span class="translation" contenteditable="true" data-text="' + App.Utils.htmlEscape(string) + '">' + translated + ''
-  #    if !@_translated
-  #       replace += '<span class="missing">XX</span>'
-      replace += '</span>'
-    else
-      translated
+  translateContent: (string, args) =>
+    if App.Config.get('translation_inline')
+      return '<span class="translation" contenteditable="true" title="' + App.Utils.htmlEscape(string) + '">' + App.Utils.htmlEscape(@translate(string)) + '</span>'
 
-  translatePlain: ( string, args ) =>
-    @translate( string, args )
+    translated = App.Utils.htmlEscape(@translate(string, args))
 
-  translate: ( string, args ) =>
+  translatePlain: (string, args) =>
+    @translate(string, args)
+
+  translate: (string, args) =>
 
     # type convertation
     if typeof string isnt 'string'
@@ -265,18 +259,19 @@ class _i18nSingleton extends Spine.Module
         @_notTranslated[@locale][string] = true
 
     # search %s
+    if args
       for arg in args
         translated = translated.replace(/%s/, arg)
 
     @log 'debug', 'translate', string, args, translated
 
     # return translated string
-    return translated
+    translated
 
   meta: =>
     @mapMeta
 
-  setMap: ( source, target, format = 'string' ) =>
+  setMap: (source, target, format = 'string') =>
     if format is 'time'
       @mapTime[source] = target
     else
@@ -287,23 +282,23 @@ class _i18nSingleton extends Spine.Module
       return false
     true
 
-  getNotTranslated: ( locale ) =>
+  getNotTranslated: (locale) =>
     @_notTranslated[locale || @locale]
 
-  removeNotTranslated: ( locale, key ) =>
+  removeNotTranslated: (locale, key) =>
     delete @_notTranslated[locale][key]
 
-  setNotTranslated: ( locale, key ) =>
+  setNotTranslated: (locale, key) =>
     @_notTranslated[locale][key] = true
 
-  date: ( time, offset ) =>
+  date: (time, offset) =>
     @convert(time, offset, @mapTime['date'] || @dateFormat)
 
-  timestamp: ( time, offset ) =>
+  timestamp: (time, offset) =>
     @convert(time, offset, @mapTime['timestamp'] || @timestampFormat)
 
-  convert: ( time, offset, format ) ->
-    s = ( num, digits ) ->
+  convert: (time, offset, format) ->
+    s = (num, digits) ->
       while num.toString().length < digits
         num = '0' + num
       num
@@ -312,7 +307,7 @@ class _i18nSingleton extends Spine.Module
 
     # add timezone diff, needed for unit tests
     if offset
-      timeObject = new Date( timeObject.getTime() + (timeObject.getTimezoneOffset() * 60000) )
+      timeObject = new Date(timeObject.getTime() + (timeObject.getTimezoneOffset() * 60000))
 
     d = timeObject.getDate()
     m = timeObject.getMonth() + 1
@@ -320,12 +315,12 @@ class _i18nSingleton extends Spine.Module
     S = timeObject.getSeconds()
     M = timeObject.getMinutes()
     H = timeObject.getHours()
-    format = format.replace /dd/, s( d, 2 )
+    format = format.replace /dd/, s(d, 2)
     format = format.replace /d/, d
-    format = format.replace /mm/, s( m, 2 )
+    format = format.replace /mm/, s(m, 2)
     format = format.replace /m/, m
     format = format.replace /yyyy/, y
-    format = format.replace /SS/, s( S, 2 )
-    format = format.replace /MM/, s( M, 2 )
-    format = format.replace /HH/, s( H, 2 )
-    return format
+    format = format.replace /SS/, s(S, 2)
+    format = format.replace /MM/, s(M, 2)
+    format = format.replace /HH/, s(H, 2)
+    format

app/assets/javascripts/app/lib/app_post/pretty_date.coffee

@@ -41,9 +41,9 @@ class App.PrettyDate
       day = App.i18n.translateInline('d')
       if long
         if unit > 1 || unit is 0
-          day = App.i18n.translateContent('days')
+          day = App.i18n.translateInline('days')
         else
-          day = App.i18n.translateContent('day')
+          day = App.i18n.translateInline('day')
       string = unit + ' ' + day
       diff = diff - ( unit * 86400 )
       if unit >= 9 || diff < 3600 || count is 2
@@ -83,9 +83,9 @@ class App.PrettyDate
     minute = App.i18n.translateInline('m')
     if long
       if unit > 1 || unit is 0
-        minute = App.i18n.translateContent('minutes')
+        minute = App.i18n.translateInline('minutes')
       else
-        minute = App.i18n.translateContent('minute')
+        minute = App.i18n.translateInline('minute')
     if string isnt ''
       string = string + ' '
     string = string + unit + ' ' + minute

app/assets/javascripts/app/lib/app_post/utils.coffee

@@ -93,6 +93,8 @@ class App.Utils
 
   # htmlEscaped = App.Utils.htmlEscape( rawText )
   @htmlEscape: ( ascii ) ->
+    return ascii if !ascii
+    return ascii if !ascii.replace
     ascii.replace(/&/g, '&')
       .replace(/</g, '&lt;')
       .replace(/>/g, '&gt;')

app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco

@@ -16,5 +16,5 @@
 </div>
 <div class="chat-controls">
   <div class="chat-input form-control form-control--small form-control--multiline js-customerChatInput" contenteditable="true"></div>
-  <div class="btn btn--primary btn--slim btn--small js-send"><%= @T('Send') %></div>
+  <div class="btn btn--primary btn--slim btn--small js-send"><%- @T('Send') %></div>
 </div>

app/assets/javascripts/app/views/customer_chat/index.jst.eco

@@ -17,7 +17,7 @@
         </div>
       </div>
       <div class="page-header-meta">
-        <div class="btn btn--action" data-type="settings"><%= @T('Settings') %></div>
+        <div class="btn btn--action" data-type="settings"><%- @T('Settings') %></div>
       </div>
     </div>
   <div class="chat-workspace"></div>

app/assets/javascripts/app/views/dashboard/stats.jst.eco

@@ -30,8 +30,8 @@
       <div class="stats-row email-channel">
         <%- @Icon(channel.icon, 'stat-channel-icon') %>
         <div class="stat-bars">
-          <div class="stat-bar primary" style="height: <%- channel.inbound_in_percent %>%" title="<%- @T('Inbound') %>: <%- channel.inbound_in_percent %>% (<%- channel.inbound %>)"></div>
-          <div class="stat-bar secondary" style="height: <%- channel.outbound_in_percent %>%" title="<%- @T('Outbound') %>: <%- channel.outbound_in_percent %>% (<%- channel.outbound %>)"></div>
+          <div class="stat-bar primary" style="height: <%- channel.inbound_in_percent %>%" title="<%- @Ti('Inbound') %>: <%- channel.inbound_in_percent %>% (<%- channel.inbound %>)"></div>
+          <div class="stat-bar secondary" style="height: <%- channel.outbound_in_percent %>%" title="<%- @Ti('Outbound') %>: <%- channel.outbound_in_percent %>% (<%- channel.outbound %>)"></div>
         </div>
         <div class="stat-label"></div>
       </div>

app/assets/javascripts/app/views/task_widget_tasks.jst.eco

@@ -1,6 +1,6 @@
 <% for item in @item_list: %>
   <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab task <%= item.data.class %><% if item.task.active: %> is-active<% end %><% if item.task.notify: %> is-modified<% end %>" data-key="<%- item.task.key %>">
-    <div class="nav-tab-icon" title="<%- @T(item.data.iconTitle) %>">
+    <div class="nav-tab-icon" title="<%- @Ti(item.data.iconTitle) %>">
       <% if item.data.type is 'task': %>
         <% if item.task.notify: %>
           <%- @Icon('status-modified-inner-circle', "icon-task-state #{item.data.iconClass}") %>

app/assets/javascripts/app/views/ticket_zoom/title.jst.eco

@@ -1 +1 @@
-<div contenteditable="true" class="ticket-title-update" data-placeholder="<%= @Ti('Enter Title...') %>"><%= @ticket.title %></div>
+<div contenteditable="true" class="ticket-title-update" data-placeholder="<%- @Ti('Enter Title...') %>"><%= @ticket.title %></div>

app/assets/stylesheets/zammad.scss

@@ -2564,6 +2564,10 @@ footer {
 .translation[contenteditable="true"] {
   display: inline;
 }
+.translation[contenteditable="true"]:hover,
+.translation[contenteditable="true"]:focus {
+  background: none;
+}
 .translation .icon-edit {
   display: none;
 }