1 // This file is part of Moodle - http://moodle.org/
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11 // GNU General Public License for more details.
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle. If not, see <http://www.gnu.org/licenses/>.
17 * Enhance a textarea with auto growing rows to fit the content.
19 * @module core/auto_rows
20 * @copyright 2016 Ryan Wyllie <ryan@moodle.com>
21 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
24 define(['jquery'], function($) {
26 ELEMENT: '[data-auto-rows]'
30 ROW_CHANGE: 'autorows:rowchange',
34 * Determine how many rows should be set for the given element.
36 * @method calculateRows
37 * @param {jQuery} element The textarea element
38 * @return {int} The number of rows for the element
41 var calculateRows = function(element) {
42 var currentRows = element.attr('rows');
43 var minRows = element.data('min-rows');
44 var maxRows = element.attr('data-max-rows');
46 var height = element.height();
47 var innerHeight = element.innerHeight();
48 var padding = innerHeight - height;
50 var scrollHeight = element[0].scrollHeight;
51 var rows = (scrollHeight - padding) / (height / currentRows);
53 // Remove the height styling to let the height be calculated automatically
54 // based on the row attribute.
55 element.css('height', '');
59 } else if (maxRows && rows >= maxRows) {
67 * Listener for change events to trigger resizing of the element.
69 * @method changeListener
70 * @param {Event} e The triggered event.
73 var changeListener = function(e) {
74 var element = $(e.target);
75 var minRows = element.data('min-rows');
76 var currentRows = element.attr('rows');
78 if (typeof minRows === "undefined") {
79 element.data('min-rows', currentRows);
82 // Reset element to single row so that the scroll height of the
83 // element is correctly calculated each time.
84 element.attr('rows', 1);
85 var rows = calculateRows(element);
86 element.attr('rows', rows);
88 if (rows != currentRows) {
89 element.trigger(EVENTS.ROW_CHANGE);
94 * Add the event listeners for all text areas within the given element.
97 * @param {jQuery|selector} root The container element of all enhanced text areas
100 var init = function(root) {
101 if ($(root).data('auto-rows')) {
102 $(root).on('input propertychange', changeListener.bind(this));
104 $(root).on('input propertychange', SELECTORS.ELEMENT, changeListener.bind(this));
108 return /** @module core/auto_rows */ {