MDL-59758 js: auto_rows module easier to use

Allow passing the direct text area, or a container. Trigger change events on the text area, not the container. Properly handle starting with rows > 1
mvaraujo · Nov 7, 2017 · b9ae53f · b9ae53f
1 parent 159b4e5
commit b9ae53f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/lib/amd/build/auto_rows.min.js b/lib/amd/build/auto_rows.min.js
diff --git a/lib/amd/src/auto_rows.js b/lib/amd/src/auto_rows.js
@@ -42,6 +42,7 @@ define(['jquery'], function($) {
      */
     var calculateRows = function(element) {
         var currentRows = element.attr('rows');
+        var minRows = element.data('min-rows');
         var maxRows = element.attr('data-max-rows');
 
         var height = element.height();
@@ -58,13 +59,38 @@ define(['jquery'], function($) {
         // based on the row attribute.
         element.css('height', '');
 
-        if (maxRows && rows >= maxRows) {
+        if (rows < minRows) {
+            return minRows;
+        } else if (maxRows && rows >= maxRows) {
             return maxRows;
         } else {
             return rows;
         }
     };
 
+    /**
+     * Listener for change events to trigger resizing of the element.
+     *
+     * @method changeListener
+     * @param {Event} e The triggered event.
+     * @private
+     */
+    var changeListener = function(root, e) {
+        var element = $(e.target);
+        var minRows = element.data('min-rows');
+        var currentRows = element.attr('rows');
+
+        if (typeof minRows === "undefined") {
+            element.data('min-rows', currentRows);
+        }
+        var rows = calculateRows(element);
+
+        if (rows != currentRows) {
+            element.attr('rows', rows);
+            element.trigger(EVENTS.ROW_CHANGE);
+        }
+    };
+
     /**
      * Add the event listeners for all text areas within the given element.
      *
@@ -73,16 +99,11 @@ define(['jquery'], function($) {
      * @public
      */
     var init = function(root) {
-        $(root).on('input propertychange', SELECTORS.ELEMENT, function(e) {
-            var element = $(e.target);
-            var currentRows = element.attr('rows');
-            var rows = calculateRows(element);
-
-            if (rows != currentRows) {
-                element.attr('rows', rows);
-                $(root).trigger(EVENTS.ROW_CHANGE);
-            }
-        });
+        if ($(root).data('auto-rows')) {
+            $(root).on('input propertychange', changeListener.bind(this, root));
+        } else {
+            $(root).on('input propertychange', SELECTORS.ELEMENT, changeListener.bind(this, root));
+        }
     };
 
     return /** @module core/auto_rows */ {