lib/amd/src/auto_rows.js

   1 // This file is part of Moodle - http://moodle.org/
   2 //
   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.
   7 //
   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.
  12 //
  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/>.
  15
  16 /**
  17  * Enhance a textarea with auto growing rows to fit the content.
  18  *
  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
  22  * @since      3.2
  23  */
  24 define(['jquery'], function($) {
  25     var SELECTORS = {
  26         ELEMENT: '[data-auto-rows]'
  27     };
  28
  29     var EVENTS = {
  30         ROW_CHANGE: 'autorows:rowchange',
  31     };
  32
  33     /**
  34      * Determine how many rows should be set for the given element.
  35      *
  36      * @method calculateRows
  37      * @param {jQuery} element The textarea element
  38      * @return {int} The number of rows for the element
  39      * @private
  40      */
  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');
  45
  46         var height = element.height();
  47         var innerHeight = element.innerHeight();
  48         var padding = innerHeight - height;
  49
  50         var scrollHeight = element[0].scrollHeight;
  51         var rows = (scrollHeight - padding) / (height / currentRows);
  52
  53         // Remove the height styling to let the height be calculated automatically
  54         // based on the row attribute.
  55         element.css('height', '');
  56
  57         if (rows < minRows) {
  58             return minRows;
  59         } else if (maxRows && rows >= maxRows) {
  60             return maxRows;
  61         } else {
  62             return rows;
  63         }
  64     };
  65
  66     /**
  67      * Listener for change events to trigger resizing of the element.
  68      *
  69      * @method changeListener
  70      * @param {Event} e The triggered event.
  71      * @private
  72      */
  73     var changeListener = function(e) {
  74         var element = $(e.target);
  75         var minRows = element.data('min-rows');
  76         var currentRows = element.attr('rows');
  77
  78         if (typeof minRows === "undefined") {
  79             element.data('min-rows', currentRows);
  80         }
  81
  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);
  87
  88         if (rows != currentRows) {
  89             element.trigger(EVENTS.ROW_CHANGE);
  90         }
  91     };
  92
  93     /**
  94      * Add the event listeners for all text areas within the given element.
  95      *
  96      * @method init
  97      * @param {jQuery|selector} root The container element of all enhanced text areas
  98      * @public
  99      */
 100     var init = function(root) {
 101         if ($(root).data('auto-rows')) {
 102             $(root).on('input propertychange', changeListener.bind(this));
 103         } else {
 104             $(root).on('input propertychange', SELECTORS.ELEMENT, changeListener.bind(this));
 105         }
 106     };
 107
 108     return /** @module core/auto_rows */ {
 109         init: init,
 110         events: EVENTS,
 111     };
 112 });