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

chat.js: make chat fixed position more robust

Browse source
This commit is contained in:
Felix Niklas 2016-03-24 11:03:20 +01:00
parent e3ea9a8ce2
commit ea68cfe3c7
5 changed files with 109 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -516,6 +516,10 @@ do($ = window.jQuery, window) ->
@el.addClass('zammad-chat-is-open')
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@el.css 'bottom', -remainerHeight
if !@sessionId
@el.animate { bottom: 0 }, 500, @onOpenAnimationEnd
@send('chat_session_init')
@ -573,12 +577,12 @@ do($ = window.jQuery, window) ->
@enableScrollOnRoot()
# close window
@el.removeClass('zammad-chat-is-open')
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@el.animate { bottom: -remainerHeight }, 500, @onCloseAnimationEnd
onCloseAnimationEnd: =>
@el.removeClass('zammad-chat-is-visible')
@el.css 'bottom', ''
@el.removeClass('zammad-chat-is-open')
@showLoader()
@el.find('.zammad-chat-welcome').removeClass('zammad-chat-is-hidden')
@ -605,9 +609,6 @@ do($ = window.jQuery, window) ->
@input.autoGrow
extraLine: false
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@el.css 'bottom', -remainerHeight
@el.addClass('zammad-chat-is-shown')
disableInput: ->

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

@ -5,7 +5,7 @@
bottom: 0;
font-size: 12px;
width: 33em;
height: 30em;
height: 3.5em;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 0 0;
will-change: bottom;
@ -14,16 +14,10 @@
-ms-flex-direction: column;
flex-direction: column;
z-index: 999; }
.zammad-chat.is-fullscreen {
right: 0;
width: 100%;
height: 100vh;
border-radius: 0 !important; }
@media only screen and (max-width: 768px) {
.zammad-chat {
right: 0;
width: 100%;
height: 100%;
border-radius: 0 !important;
font-size: 16px; } }
@ -36,6 +30,12 @@
.zammad-chat.zammad-chat-is-shown {
opacity: 1; }
.zammad-chat.zammad-chat-is-open {
height: 30em; }
@media only screen and (max-width: 768px) {
.zammad-chat.zammad-chat-is-open {
height: 100%; } }
.zammad-chat-icon {
height: 2em;
width: 2em;
@ -201,6 +201,7 @@
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: none;
-webkit-overflow-scrolling: touch; }
@media only screen and (max-width: 768px) {
.zammad-chat-body {
@ -209,6 +210,9 @@
-ms-flex: 1;
flex: 1; } }
.zammad-chat-is-open .zammad-chat-body {
display: block; }
.zammad-chat-timestamp {
text-align: center;
color: #999999;
@ -299,9 +303,7 @@
.zammad-chat-controls {
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
display: none;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
@ -313,6 +315,11 @@
position: relative;
background: white; }
.zammad-chat-is-open .zammad-chat-controls {
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.zammad-chat-input {
margin: 0;
padding: 1em 2em;
@ -367,9 +374,6 @@
.zammad-chat-is-hidden {
display: none; }
.zammad-chat-is-visible {
display: block; }
/*
# Flat Design
*/

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

@ -720,6 +720,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.open = function() {
var remainerHeight;
if (this.isOpen) {
this.log.debug('widget already open, block');
return;
@ -730,6 +731,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.showLoader();
}
this.el.addClass('zammad-chat-is-open');
remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
this.el.css('bottom', -remainerHeight);
if (!this.sessionId) {
this.el.animate({
bottom: 0
@ -790,7 +793,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
if (this.isFullscreen) {
this.enableScrollOnRoot();
}
this.el.removeClass('zammad-chat-is-open');
remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
return this.el.animate({
bottom: -remainerHeight
@ -798,7 +800,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.onCloseAnimationEnd = function() {
this.el.removeClass('zammad-chat-is-visible');
this.el.css('bottom', '');
this.el.removeClass('zammad-chat-is-open');
this.showLoader();
this.el.find('.zammad-chat-welcome').removeClass('zammad-chat-is-hidden');
this.el.find('.zammad-chat-agent').addClass('zammad-chat-is-hidden');
@ -818,7 +821,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
};
ZammadChat.prototype.show = function() {
var remainerHeight;
if (this.state === 'offline') {
return;
}
@ -829,8 +831,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
extraLine: false
});
}
remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
this.el.css('bottom', -remainerHeight);
return this.el.addClass('zammad-chat-is-shown');
};
@ -1170,67 +1170,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
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, '&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>\n</span>');
}).call(this);
}).call(__obj);
__obj.safe = __objSafe, __obj.escape = __escape;
return __out.join('');
};
/*!
* ----------------------------------------------------------------------------
* "THE BEER-WARE LICENSE" (Revision 42):
@ -1316,6 +1255,67 @@ 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>\n</span>');
}).call(this);
}).call(__obj);
__obj.safe = __objSafe, __obj.escape = __escape;
return __out.join('');
};
if (!window.zammadChatTemplates) {
window.zammadChatTemplates = {};
}

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

File diff suppressed because one or more lines are too long

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

@ -5,7 +5,7 @@
bottom: 0;
font-size: 12px;
width: 33em;
height: 30em;
height: 3.5em;
box-shadow: 0 3px 10px rgba(0,0,0,.3);
border-radius: 5px 5px 0 0;
will-change: bottom;
@ -13,17 +13,9 @@
flex-direction: column;
z-index: 999;
&.is-fullscreen {
right: 0;
width: 100%;
height: 100vh;
border-radius: 0 !important;
}
@media only screen and (max-width: 768px) {
right: 0;
width: 100%;
height: 100%;
border-radius: 0 !important;
font-size: 16px;
}
@ -35,6 +27,13 @@
.zammad-chat.zammad-chat-is-shown {
opacity: 1;
}
.zammad-chat.zammad-chat-is-open {
height: 30em;
@media only screen and (max-width: 768px) {
height: 100%;
}
}
.zammad-chat-icon {
height: 2em;
@ -209,6 +208,7 @@
overflow: auto;
background: white;
flex: 1;
display: none;
-webkit-overflow-scrolling: touch;
@media only screen and (max-width: 768px) {
@ -217,6 +217,10 @@
}
}
.zammad-chat-is-open .zammad-chat-body {
display: block;
}
.zammad-chat-timestamp {
text-align: center;
color: hsl(0,0%,60%);
@ -308,7 +312,7 @@
.zammad-chat-controls {
overflow: hidden;
display: flex;
display: none;
align-items: flex-start;
border-top: 1px solid hsl(0,0%,93%);
padding: 0;
@ -321,6 +325,10 @@
background: white;
}
.zammad-chat-is-open .zammad-chat-controls {
display: flex;
}
.zammad-chat-input {
margin: 0;
padding: 1em 2em;
@ -378,10 +386,6 @@
display: none;
}
.zammad-chat-is-visible {
display: block;
}
/*
# Flat Design
*/