[FIX] web: reimplement autosize for fun (and some bugfixing)

autosize does not work correctly (it moves the screen in all directions
sometimes when the user press enter in the bottom of the screen in some
browser),

So, we decided to have our own version, because of course, we can do it better.  A
few horrible hacks later, I proudly present you "autoresize" (it was
almost named "odooresize" but common sense prevailed).

As added benefits, it plays better with our web client, so when you open
a dialog in a modal for example, the autosize fields should have the
correct height automagically (or should I say 'odoomagically')

1 files changed, 62 insertions, 0 deletions

diff --git a/addons/web/static/src/js/framework/utils.js b/addons/web/static/src/js/framework/utils.js
index f1f28d83613..087d4c73d65 100644
--- a/addons/web/static/src/js/framework/utils.js
+++ b/addons/web/static/src/js/framework/utils.js
@@ -441,3 +441,65 @@ return {
 
 });
 
+odoo.define('web.dom_utils', function (require) {
+"use strict";
+
+var core = require('web.core');
+
+// TO DO: move this into new file dom_utils.js
+/**
+ * Autoresize a $textarea node, by recomputing its height when necessary
+ * @param {number} [options.min_height] by default, 50.
+ * @param {Widget} [options.parent] if set, autoresize will listen to some extra
+ * events to decide when to resize itself.  This is useful for widgets that are
+ * not in the dom when the autoresize is declared.
+ */
+function autoresize ($textarea, options) {
+    options = options || {};
+
+    var $fixed_text_area;
+    var min_height = (options && options.min_height) || 50;
+    if (!$fixed_text_area) {
+        $fixed_text_area = $('<textarea>').css({
+            position: 'absolute',
+            opacity: 0,
+            height: 10,
+            top: -10000,
+            left: -10000,
+        });
+        $fixed_text_area.addClass($fixed_text_area[0].classList);
+        $fixed_text_area.insertAfter($textarea);
+    }
+
+    resize();
+    if ($textarea.__auto_resized) {
+        return;
+    }
+    $textarea.__auto_resized = true;
+
+    $textarea.on('input focus', resize);
+    if (options.parent) {
+        core.bus.on('DOM_updated', options.parent, resize);
+        core.bus.on('view_shown', options.parent, resize);
+    }
+
+    function resize () {
+        var heightOffset;
+        var style = window.getComputedStyle($textarea[0], null);
+        if (style.boxSizing === 'content-box') {
+            heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
+        } else {
+            heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+        }
+        $fixed_text_area.width($textarea.outerWidth());
+        $fixed_text_area.val($textarea.val());
+        var height = $fixed_text_area[0].scrollHeight;
+        $textarea.css({height: Math.max(height + heightOffset, min_height)});
+    }
+}
+
+return {
+    autoresize: autoresize,
+};
+
+});