MDL-54687 message: adjust messages area height with response height

This commit is contained in:
Ryan Wyllie 2016-08-12 03:36:18 +00:00 committed by Mark Nelson
parent bf58081d59
commit 0ae7a72082
2 changed files with 34 additions and 1 deletions

View File

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

View File

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