Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chat close icon

Browse source
This commit is contained in:
Felix Niklas 2015-11-11 11:44:10 +01:00
parent 50795a7445
commit f93407b36f
7 changed files with 129 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
public/assets/chat/chat.coffee
View file

@ -44,7 +44,8 @@ do($ = window.jQuery, window) ->
@setAgentOnlineState @isOnline
@el.find('.zammad-chat-header').click @toggle
@el.find('.js-chat-open').click @open
@el.find('.js-chat-close').click @close
@el.find('.zammad-chat-controls').on 'submit', @onSubmit
@el.find('.zammad-chat-input').on
keydown: @checkForEnter
@ -72,6 +73,8 @@ do($ = window.jQuery, window) ->
@ws.onerror = (e) =>
console.log 'debug', 'ws:onerror', e
@onReady()
checkForEnter: (event) =>
if not event.shiftKey and event.keyCode is 13
event.preventDefault()
@ -202,25 +205,26 @@ do($ = window.jQuery, window) ->
from: 'agent'
@scrollToBottom()
toggle: =>
if @isOpen then @close() else @open()
open: =>
return if @isOpen
open: ->
@showLoader()
@el
.addClass('zammad-chat-is-open')
.animate { bottom: 0 }, 500, @onOpenAnimationEnd
onOpenAnimationEnd: =>
@isOpen = true
onOpenAnimationEnd: =>
#setTimeout @onQueue, 1180
# setTimeout @onConnectionEstablished, 1180
# setTimeout @onAgentTypingStart, 2000
# setTimeout @receiveMessage, 5000, "Hello! How can I help you?"
@connect()
close: ->
close: (event) =>
event.stopPropagation() if event
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd

24
public/assets/chat/chat.css
View file

@ -36,28 +36,36 @@
overflow: hidden;
cursor: pointer; }
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
cursor: default; }
.zammad-chat-welcome-text {
font-size: 1.2em; }
.zammad-chat-toggle {
.zammad-chat-header-icon {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 3.4em;
text-align: center;
line-height: 3.5em; }
line-height: 3.5em;
cursor: pointer; }
.zammad-chat-toggle-icon-open,
.zammad-chat-toggle-icon-close {
.zammad-chat-header-icon-open,
.zammad-chat-header-icon-close {
fill: currentColor;
height: 0.85em; }
width: 1.6em;
vertical-align: middle; }
.zammad-chat-toggle-icon-close,
.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-open {
.zammad-chat-header-icon-close {
width: 1.3em; }
.zammad-chat-header-icon-close,
.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
display: none; }
.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-close {
.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
display: inline; }
.zammad-chat-agent {

159
public/assets/chat/chat.js
View file

@ -1,68 +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, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
};
}
(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> ');
__out.push(this.agentPhrase);
__out.push('\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); }; };
(function($, window) {
@ -128,8 +63,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.onAgentTypingStart = bind(this.onAgentTypingStart, this);
this.onQueue = bind(this.onQueue, this);
this.onCloseAnimationEnd = bind(this.onCloseAnimationEnd, this);
this.close = bind(this.close, this);
this.onOpenAnimationEnd = bind(this.onOpenAnimationEnd, this);
this.toggle = bind(this.toggle, this);
this.open = bind(this.open, this);
this.receiveMessage = bind(this.receiveMessage, this);
this.onSubmit = bind(this.onSubmit, this);
this.onTypingEnd = bind(this.onTypingEnd, this);
@ -145,7 +81,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.el = $(this.view('chat')(this.options));
this.options.target.append(this.el);
this.setAgentOnlineState(this.isOnline);
this.el.find('.zammad-chat-header').click(this.toggle);
this.el.find('.js-chat-open').click(this.open);
this.el.find('.js-chat-close').click(this.close);
this.el.find('.zammad-chat-controls').on('submit', this.onSubmit);
this.el.find('.zammad-chat-input').on({
keydown: this.checkForEnter,
@ -176,6 +113,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return console.log('debug', 'ws:onerror', e);
};
})(this);
this.onReady();
}
ZammadChat.prototype.checkForEnter = function(event) {
@ -339,28 +277,26 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return this.scrollToBottom();
};
ZammadChat.prototype.toggle = function() {
if (this.isOpen) {
return this.close();
} else {
return this.open();
}
};
ZammadChat.prototype.open = function() {
if (this.isOpen) {
return;
}
this.showLoader();
return this.el.addClass('zammad-chat-is-open').animate({
this.el.addClass('zammad-chat-is-open').animate({
bottom: 0
}, 500, this.onOpenAnimationEnd);
return this.isOpen = true;
};
ZammadChat.prototype.onOpenAnimationEnd = function() {
this.isOpen = true;
return this.connect();
};
ZammadChat.prototype.close = function() {
ZammadChat.prototype.close = function(event) {
var remainerHeight;
if (event) {
event.stopPropagation();
}
remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
return this.el.animate({
bottom: -remainerHeight
@ -570,6 +506,71 @@ jQuery.fn.autoGrow = function(options) {
});
};
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, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
};
}
(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> ');
__out.push(this.agentPhrase);
__out.push('\n</span>');
}).call(this);
}).call(__obj);
__obj.safe = __objSafe, __obj.escape = __escape;
return __out.join('');
};
if (!window.zammadChatTemplates) {
window.zammadChatTemplates = {};
}
@ -612,7 +613,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
}
(function() {
(function() {
__out.push('<div class="zammad-chat">\n <div class="zammad-chat-header">\n <div class="zammad-chat-header-controls">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online">Online</span>\n <span class="zammad-chat-toggle">\n <svg class="zammad-chat-toggle-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-toggle-icon-close" viewBox="0 0 13 7"><path d="M6.554 4.214L2.246 0l-1.4 1.428 5 4.9.708.693.7-.7 4.9-4.9L10.74.008 6.553 4.214z" fill-rule="evenodd"/></svg>\n </span>\n </div>\n <div class="zammad-chat-agent zammad-chat-is-hidden">\n \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('<div class="zammad-chat">\n <div class="zammad-chat-header js-chat-open">\n <div class="zammad-chat-header-controls">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online">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 \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.invitationPhrase);

2
public/assets/chat/chat.min.js vendored
View file

File diff suppressed because one or more lines are too long

24
public/assets/chat/chat.scss
View file

@ -70,11 +70,15 @@ $baseTextColor: if($luminance < 0.2, white, black);
cursor: pointer;
}
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
cursor: default;
}
.zammad-chat-welcome-text {
font-size: 1.2em;
}
.zammad-chat-toggle {
.zammad-chat-header-icon {
position: absolute;
right: 0;
top: 0;
@ -82,20 +86,26 @@ $baseTextColor: if($luminance < 0.2, white, black);
width: 3.4em;
text-align: center;
line-height: 3.5em;
cursor: pointer;
}
.zammad-chat-toggle-icon-open,
.zammad-chat-toggle-icon-close {
.zammad-chat-header-icon-open,
.zammad-chat-header-icon-close {
fill: currentColor;
height: 0.85em;
width: 1.6em;
vertical-align: middle;
}
.zammad-chat-toggle-icon-close,
.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-open {
.zammad-chat-header-icon-close {
width: 1.3em;
}
.zammad-chat-header-icon-close,
.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-open {
display: none;
}
.zammad-chat.zammad-chat-is-open .zammad-chat-toggle-icon-close {
.zammad-chat.zammad-chat-is-open .zammad-chat-header-icon-close {
display: inline;
}

1
public/assets/chat/close.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><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="#fff"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 283 B

8
public/assets/chat/views/chat.eco
View file

@ -1,10 +1,10 @@
<div class="zammad-chat">
<div class="zammad-chat-header">
<div class="zammad-chat-header js-chat-open">
<div class="zammad-chat-header-controls">
<span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online">Online</span>
<span class="zammad-chat-toggle">
<svg class="zammad-chat-toggle-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>
<svg class="zammad-chat-toggle-icon-close" viewBox="0 0 13 7"><path d="M6.554 4.214L2.246 0l-1.4 1.428 5 4.9.708.693.7-.7 4.9-4.9L10.74.008 6.553 4.214z" fill-rule="evenodd"/></svg>
<span class="zammad-chat-header-icon">
<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>
<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>
</span>
</div>
<div class="zammad-chat-agent zammad-chat-is-hidden">