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

Chat: remove autogrow, style contenteditable div

Browse source
This commit is contained in:
Felix Niklas 2017-07-14 16:04:20 +02:00
parent 10dca43432
commit f5e0d576f3
7 changed files with 72 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -585,11 +585,6 @@ do($ = window.jQuery, window) ->
@el.addClass('zammad-chat-is-open')
if !@inputInitialized
@inputInitialized = true
@input.autoGrow
extraLine: false
remainerHeight = @el.height() - @el.find('.zammad-chat-header').outerHeight()
@el.css 'bottom', -remainerHeight

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

@ -320,9 +320,9 @@
.zammad-chat-controls {
overflow: hidden;
display: none;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
border-top: 1px solid #ededed;
padding: 0;
margin: 0;
@ -340,25 +340,23 @@
margin: 0;
padding: 1em 2em;
float: left;
width: auto;
height: auto;
max-height: 6em;
min-height: 1.4em !important;
min-height: 1.4em;
font-family: inherit;
line-height: 1.4em;
font-size: inherit;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none !important;
border: none;
background: none;
box-shadow: none !important;
box-shadow: none;
box-sizing: content-box;
outline: none;
resize: none;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
flex: 1;
overflow: auto; }
.zammad-chat-input::-webkit-input-placeholder {
color: #d9d9d9; }
@ -373,7 +371,7 @@
background: #379ad7;
color: white;
padding: 0.5em 1.2em;
margin: 0.5em 1em 0.5em;
margin: 0.63em 1em;
cursor: pointer;
border: none;
border-radius: 1.5em;

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

@ -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, '&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('');
};
var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
slice = [].slice,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@ -871,12 +810,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.showLoader();
}
this.el.addClass('zammad-chat-is-open');
if (!this.inputInitialized) {
this.inputInitialized = true;
this.input.autoGrow({
extraLine: false
});
}
remainerHeight = this.el.height() - this.el.find('.zammad-chat-header').outerHeight();
this.el.css('bottom', -remainerHeight);
if (!this.sessionId) {
@ -1395,98 +1328,67 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return window.ZammadChat = ZammadChat;
})(window.jQuery, window);
/*!
* ----------------------------------------------------------------------------
* "THE BEER-WARE LICENSE" (Revision 42):
* <jevin9@gmail.com> wrote this file. As long as you retain this notice you
* can do whatever you want with this stuff. If we meet some day, and you think
* this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
* ----------------------------------------------------------------------------
*
* Autogrow Textarea Plugin Version v3.0
* http://www.technoreply.com/autogrow-textarea-plugin-3-0
*
* THIS PLUGIN IS DELIVERD ON A PAY WHAT YOU WHANT BASIS. IF THE PLUGIN WAS USEFUL TO YOU, PLEASE CONSIDER BUYING THE PLUGIN HERE :
* https://sites.fastspring.com/technoreply/instant/autogrowtextareaplugin
*
* Date: October 15, 2012
*
* Zammad modification:
* - remove overflow:hidden when maximum height is reached
* - mirror box-sizing
*
*/
jQuery.fn.autoGrow = function(options) {
return this.each(function() {
var settings = jQuery.extend({
extraLine: true,
}, options);
var createMirror = function(textarea) {
jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
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 '';
}
var sendContentToMirror = function (textarea) {
mirror.innerHTML = String(textarea.value)
}, __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, '&quot;')
.replace(/'/g, '&#39;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br />') +
(settings.extraLine? '.<br/>.' : '')
;
if (jQuery(textarea).height() != jQuery(mirror).height()) {
jQuery(textarea).height(jQuery(mirror).height());
var overflow = jQuery(mirror).height() > maxHeight ? '' : 'hidden';
jQuery(textarea).css('overflow', overflow);
.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');
}
}
var growTextarea = function () {
sendContentToMirror(this);
}
// Create a mirror
var mirror = createMirror(this);
// Store max-height
var maxHeight = parseInt(jQuery(this).css('max-height'), 10);
// Style the mirror
mirror.style.display = 'none';
mirror.style.wordWrap = 'break-word';
mirror.style.whiteSpace = 'normal';
mirror.style.padding = jQuery(this).css('paddingTop') + ' ' +
jQuery(this).css('paddingRight') + ' ' +
jQuery(this).css('paddingBottom') + ' ' +
jQuery(this).css('paddingLeft');
mirror.style.width = jQuery(this).css('width');
mirror.style.fontFamily = jQuery(this).css('font-family');
mirror.style.fontSize = jQuery(this).css('font-size');
mirror.style.lineHeight = jQuery(this).css('line-height');
mirror.style.letterSpacing = jQuery(this).css('letter-spacing');
mirror.style.boxSizing = jQuery(this).css('boxSizing');
// Style the textarea
this.style.overflow = "hidden";
this.style.minHeight = this.rows+"em";
// Bind the textarea's event
this.onkeyup = growTextarea;
this.onfocus = growTextarea;
// Fire the event for text already present
sendContentToMirror(this);
});
__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

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

@ -329,7 +329,7 @@
.zammad-chat-controls {
overflow: hidden;
display: none;
align-items: flex-start;
align-items: flex-end;
border-top: 1px solid hsl(0,0%,93%);
padding: 0;
margin: 0;
@ -349,21 +349,19 @@
margin: 0;
padding: 1em 2em;
float: left;
width: auto;
height: auto;
max-height: 6em;
min-height: 1.4em !important;
min-height: 1.4em;
font-family: inherit;
line-height: 1.4em;
font-size: inherit;
appearance: none;
border: none !important;
border: none;
background: none;
box-shadow: none !important;
box-shadow: none ;
box-sizing: content-box;
outline: none;
resize: none;
flex: 1;
overflow: auto;
}
.zammad-chat-input::-webkit-input-placeholder {
@ -378,7 +376,7 @@
background: hsl(203,67%,53%);
color: white;
padding: 0.5em 1.2em;
margin: 0.5em 1em 0.5em;
margin: 0.63em 1em;
cursor: pointer;
border: none;
border-radius: 1.5em;

4
public/assets/chat/gulpfile.js
View file

@ -29,9 +29,7 @@ gulp.task('js', function(){
.pipe(plumber())
.pipe(coffee({bare: true}).on('error', gutil.log));
var autoGrow = gulp.src('jquery.autoGrow.js');
return merge(templates, js, autoGrow)
return merge(templates, js)
.pipe(concat('chat.js'))
.pipe(gulp.dest('./'))
.pipe(uglify())

92
public/assets/chat/jquery.autoGrow.js
View file

@ -1,92 +0,0 @@
/*!
* ----------------------------------------------------------------------------
* "THE BEER-WARE LICENSE" (Revision 42):
* <jevin9@gmail.com> wrote this file. As long as you retain this notice you
* can do whatever you want with this stuff. If we meet some day, and you think
* this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
* ----------------------------------------------------------------------------
*
* Autogrow Textarea Plugin Version v3.0
* http://www.technoreply.com/autogrow-textarea-plugin-3-0
*
* THIS PLUGIN IS DELIVERD ON A PAY WHAT YOU WHANT BASIS. IF THE PLUGIN WAS USEFUL TO YOU, PLEASE CONSIDER BUYING THE PLUGIN HERE :
* https://sites.fastspring.com/technoreply/instant/autogrowtextareaplugin
*
* Date: October 15, 2012
*
* Zammad modification:
* - remove overflow:hidden when maximum height is reached
* - mirror box-sizing
*
*/
jQuery.fn.autoGrow = function(options) {
return this.each(function() {
var settings = jQuery.extend({
extraLine: true,
}, options);
var createMirror = function(textarea) {
jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
}
var sendContentToMirror = function (textarea) {
mirror.innerHTML = String(textarea.value)
.replace(/&/g, '&amp;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br />') +
(settings.extraLine? '.<br/>.' : '')
;
if (jQuery(textarea).height() != jQuery(mirror).height()) {
jQuery(textarea).height(jQuery(mirror).height());
var overflow = jQuery(mirror).height() > maxHeight ? '' : 'hidden';
jQuery(textarea).css('overflow', overflow);
}
}
var growTextarea = function () {
sendContentToMirror(this);
}
// Create a mirror
var mirror = createMirror(this);
// Store max-height
var maxHeight = parseInt(jQuery(this).css('max-height'), 10);
// Style the mirror
mirror.style.display = 'none';
mirror.style.wordWrap = 'break-word';
mirror.style.whiteSpace = 'normal';
mirror.style.padding = jQuery(this).css('paddingTop') + ' ' +
jQuery(this).css('paddingRight') + ' ' +
jQuery(this).css('paddingBottom') + ' ' +
jQuery(this).css('paddingLeft');
mirror.style.width = jQuery(this).css('width');
mirror.style.fontFamily = jQuery(this).css('font-family');
mirror.style.fontSize = jQuery(this).css('font-size');
mirror.style.lineHeight = jQuery(this).css('line-height');
mirror.style.letterSpacing = jQuery(this).css('letter-spacing');
mirror.style.boxSizing = jQuery(this).css('boxSizing');
// Style the textarea
this.style.overflow = "hidden";
this.style.minHeight = this.rows+"em";
// Bind the textarea's event
this.onkeyup = growTextarea;
this.onfocus = growTextarea;
// Fire the event for text already present
sendContentToMirror(this);
});
};