Chat: remove autogrow, style contenteditable div

public/assets/chat/chat.coffee

@@ -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

public/assets/chat/chat.css

@@ -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;

public/assets/chat/chat.js

@@ -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 = {};
 }

public/assets/chat/chat.scss

@@ -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;

public/assets/chat/gulpfile.js

@@ -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())

public/assets/chat/jquery.autoGrow.js

@@ -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);
-
-  });
-};