From 0ae7a72082d1c85878e1b34f336ca4ea54615b8a Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@moodle.com>
Date: Fri, 12 Aug 2016 03:36:18 +0000
Subject: [PATCH] MDL-54687 message: adjust messages area height with response
 height

---
 lib/amd/src/auto_rows.js                 | 12 +++++++++++-
 message/amd/src/message_area_messages.js | 23 +++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/lib/amd/src/auto_rows.js b/lib/amd/src/auto_rows.js
index 5bb49426aa1..73302bd2f4e 100644
--- a/lib/amd/src/auto_rows.js
+++ b/lib/amd/src/auto_rows.js
@@ -28,6 +28,10 @@ define(['jquery'], function($) {
         ELEMENT: '[data-auto-rows]'
     };
 
+    var EVENTS = {
+        ROW_CHANGE: 'autorows:rowchange',
+    };
+
     /**
      * Determine how many rows should be set for the given element.
      *
@@ -71,12 +75,18 @@ define(['jquery'], function($) {
     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);
-            element.attr('rows', rows);
+
+            if (rows != currentRows) {
+                element.attr('rows', rows);
+                $(document).trigger(EVENTS.ROW_CHANGE);
+            }
         });
     };
 
     return /** @module core/auto_rows */ {
         init: init,
+        events: EVENTS,
     };
 });
diff --git a/message/amd/src/message_area_messages.js b/message/amd/src/message_area_messages.js
index 1dea4220bd3..eab3b530b64 100644
--- a/message/amd/src/message_area_messages.js
+++ b/message/amd/src/message_area_messages.js
@@ -25,6 +25,9 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
         'core/auto_rows', 'core_message/message_area_actions'],
     function($, ajax, templates, notification, customEvents, AutoRows, Actions) {
 
+        var MESSAGES_AREA_DEFAULT_HEIGHT = 500;
+        var MESSAGES_RESPONSE_DEFAULT_HEIGHT = 50;
+
         /**
          * Messages class.
          *
@@ -83,6 +86,8 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
 
             this.messageArea.onDelegateEvent('focus', this.messageArea.SELECTORS.SENDMESSAGETEXT, this._setMessaging.bind(this));
             this.messageArea.onDelegateEvent('blur', this.messageArea.SELECTORS.SENDMESSAGETEXT, this._clearMessaging.bind(this));
+
+            $(document).on(AutoRows.events.ROW_CHANGE, this._adjustMessagesAreaHeight.bind(this));
         };
 
         /**
@@ -508,6 +513,24 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
             }
         };
 
+        /**
+         * Adjust the height of the messages area to match the changed height of
+         * the response area.
+         *
+         * @params {event} e The jquery event
+         * @private
+         */
+        Messages.prototype._adjustMessagesAreaHeight = function(e) {
+            var messagesArea = this.messageArea.find(this.messageArea.SELECTORS.MESSAGES);
+            var messagesResponse = this.messageArea.find(this.messageArea.SELECTORS.MESSAGERESPONSE);
+
+            var currentMessageResponseHeight = messagesResponse.outerHeight();
+            var diffResponseHeight = currentMessageResponseHeight - MESSAGES_RESPONSE_DEFAULT_HEIGHT;
+            var newMessagesAreaHeight = MESSAGES_AREA_DEFAULT_HEIGHT - diffResponseHeight;
+
+            messagesArea.outerHeight(newMessagesAreaHeight);
+        };
+
         return Messages;
     }
 );