Use domain of users email address for preview. Added css auto load and css Url support. Added possibility to translation chat widget.
This commit is contained in:
Martin Edenhofer
parent
7a231a0121
commit
069063b2c7
8 changed files with 284 additions and 187 deletions
|
|
@ -30,10 +30,10 @@ class App.ChannelChat extends App.Controller
|
|||
|
||||
apiOptions: [
|
||||
{
|
||||
name: 'channel'
|
||||
default: "'default'"
|
||||
type: 'String'
|
||||
description: 'Name of the chat-channel.'
|
||||
name: 'chatId'
|
||||
default: '1'
|
||||
type: 'Integer'
|
||||
description: 'Identifier of the chat-topic.'
|
||||
}
|
||||
{
|
||||
name: 'show'
|
||||
|
|
@ -54,18 +54,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'
|
||||
|
|
@ -91,18 +91,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
|
||||
|
||||
if @Session.get('email')
|
||||
@previewUrl = "www.#{@Session.get('email').replace(/^.+?\@/, '')}"
|
||||
|
||||
@load()
|
||||
|
||||
@widgetDesignerPermanentParams =
|
||||
|
|
@ -133,6 +144,7 @@ class App.ChannelChat extends App.Controller
|
|||
baseurl: window.location.origin
|
||||
chats: chats
|
||||
apiOptions: @apiOptions
|
||||
previewUrl: @previewUrl
|
||||
)
|
||||
|
||||
@code.each (i, block) ->
|
||||
|
|
@ -236,7 +248,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 = ''
|
||||
|
|
@ -347,4 +359,4 @@ 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' )
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<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>
|
||||
|
|
@ -20,6 +21,10 @@
|
|||
<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>
|
||||
|
|
@ -40,7 +45,7 @@
|
|||
</div>
|
||||
<% end %>
|
||||
<tr>
|
||||
<td colspan="4" class="settings-list-action-cell js-add">
|
||||
<td colspan="5" class="settings-list-action-cell js-add">
|
||||
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -62,7 +67,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') %>">
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@ do($ = window.jQuery, window) ->
|
|||
host: ''
|
||||
debug: false
|
||||
flat: false
|
||||
lang: undefined,
|
||||
cssAutoload: true,
|
||||
cssUrl: undefined,
|
||||
fontSize: undefined
|
||||
buttonClass: 'open-zammad-chat'
|
||||
inactiveClass: 'is-inactive'
|
||||
|
|
@ -31,30 +34,37 @@ do($ = window.jQuery, window) ->
|
|||
state: 'offline'
|
||||
initialQueueDelay: 10000
|
||||
wsReconnectEnable: true
|
||||
strings:
|
||||
'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 <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'
|
||||
translations:
|
||||
de:
|
||||
'<strong>Chat</strong> with us!': '<strong>Chat</strong> mit uns!'
|
||||
'Online': 'Online'
|
||||
'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 <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'
|
||||
sessionId: undefined
|
||||
|
||||
T: (string, items...) =>
|
||||
if !@strings[string]
|
||||
@log 'notice', "Translation needed for '#{string}'"
|
||||
translation = @strings[string] || 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}'"
|
||||
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'
|
||||
|
|
@ -80,12 +90,18 @@ do($ = window.jQuery, window) ->
|
|||
@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 +121,8 @@ do($ = window.jQuery, window) ->
|
|||
|
||||
@wsConnect()
|
||||
|
||||
@loadCss()
|
||||
|
||||
checkForEnter: (event) =>
|
||||
if not event.shiftKey and event.keyCode is 13
|
||||
event.preventDefault()
|
||||
|
|
@ -548,4 +566,21 @@ 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)
|
||||
|
||||
window.ZammadChat = ZammadChat
|
||||
|
|
|
|||
|
|
@ -1,64 +1,3 @@
|
|||
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, '>')
|
||||
.replace(/"/g, '"');
|
||||
};
|
||||
}
|
||||
(function() {
|
||||
(function() {
|
||||
if (this.agent.avatar) {
|
||||
__out.push('\n<img class="zammad-chat-agent-avatar" src="');
|
||||
__out.push(__sanitize(this.agent.avatar));
|
||||
__out.push('">\n');
|
||||
}
|
||||
|
||||
__out.push('\n<span class="zammad-chat-agent-sentence">\n <span class="zammad-chat-agent-name">');
|
||||
|
||||
__out.push(__sanitize(this.agent.name));
|
||||
|
||||
__out.push('</span>\n</span>');
|
||||
|
||||
}).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;
|
||||
|
||||
|
|
@ -75,6 +14,9 @@ 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',
|
||||
|
|
@ -105,37 +47,48 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
|||
|
||||
ZammadChat.prototype.wsReconnectEnable = true;
|
||||
|
||||
ZammadChat.prototype.strings = {
|
||||
'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 <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'
|
||||
ZammadChat.prototype.translations = {
|
||||
de: {
|
||||
'<strong>Chat</strong> with us!': '<strong>Chat</strong> mit uns!',
|
||||
'Online': 'Online',
|
||||
'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 <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'
|
||||
}
|
||||
};
|
||||
|
||||
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]) {
|
||||
this.log('notice', "Translation needed for '" + 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 + "'");
|
||||
}
|
||||
string = translations[string] || string;
|
||||
}
|
||||
}
|
||||
translation = this.strings[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() {
|
||||
|
|
@ -205,6 +158,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
|
||||
}));
|
||||
|
|
@ -219,6 +179,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) {
|
||||
|
|
@ -730,12 +691,91 @@ 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);
|
||||
};
|
||||
|
||||
return ZammadChat;
|
||||
|
||||
})();
|
||||
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, '>')
|
||||
.replace(/"/g, '"');
|
||||
};
|
||||
}
|
||||
(function() {
|
||||
(function() {
|
||||
if (this.agent.avatar) {
|
||||
__out.push('\n<img class="zammad-chat-agent-avatar" src="');
|
||||
__out.push(__sanitize(this.agent.avatar));
|
||||
__out.push('">\n');
|
||||
}
|
||||
|
||||
__out.push('\n<span class="zammad-chat-agent-sentence">\n <span class="zammad-chat-agent-name">');
|
||||
|
||||
__out.push(__sanitize(this.agent.name));
|
||||
|
||||
__out.push('</span>\n</span>');
|
||||
|
||||
}).call(this);
|
||||
|
||||
}).call(__obj);
|
||||
__obj.safe = __objSafe, __obj.escape = __escape;
|
||||
return __out.join('');
|
||||
};
|
||||
|
||||
/*!
|
||||
* ----------------------------------------------------------------------------
|
||||
* "THE BEER-WARE LICENSE" (Revision 42):
|
||||
|
|
@ -875,7 +915,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="');
|
||||
|
||||
|
|
|
|||
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
|
|
@ -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
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,73 @@
|
|||
<!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>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.mockup {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.settings {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.settings input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.settings input + input {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table td:first-child {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.settings {
|
||||
display: none;
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.Box {
|
||||
background: hsl(0,0%,91%);
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
color: hsl(0,0%,47%);
|
||||
float: left;
|
||||
}
|
||||
.Box.Active {
|
||||
background: hsl(0,0%,36%);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
.mockup {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.settings {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.settings input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.settings input + input {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
table td:first-child {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.settings {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.Box {
|
||||
background: hsl(0,0%,91%);
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
color: hsl(0,0%,47%);
|
||||
float: left;
|
||||
}
|
||||
.Box.Active {
|
||||
background: hsl(0,0%,36%);
|
||||
color: white;
|
||||
}
|
||||
</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>
|
||||
Loading…
Reference in a new issue