Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * Enhance a textarea with auto growing rows to fit the content.

 *

 * @module     core/auto_rows

 * @copyright  2016 Ryan Wyllie <ryan@moodle.com>

 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 * @since      3.2

 */

define(['jquery'], function($) {

    var SELECTORS = {

        ELEMENT: '[data-auto-rows]'

    };

    var EVENTS = {

        ROW_CHANGE: 'autorows:rowchange',

    };

    /**

     * Determine how many rows should be set for the given element.

     *

     * @method calculateRows

     * @param {jQuery} element The textarea element

     * @return {int} The number of rows for the element

     * @private

     */

    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();

        var innerHeight = element.innerHeight();

        var padding = innerHeight - height;

        var scrollHeight = element[0].scrollHeight;

        var rows = (scrollHeight - padding) / (height / currentRows);

        // Remove the height styling to let the height be calculated automatically

        // based on the row attribute.

        element.css('height', '');

        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(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);

        }

        // Reset element to single row so that the scroll height of the

        // element is correctly calculated each time.

        element.attr('rows', 1);

        var rows = calculateRows(element);

        element.attr('rows', rows);

        if (rows != currentRows) {

            element.trigger(EVENTS.ROW_CHANGE);

        }

    };

    /**

     * Add the event listeners for all text areas within the given element.

     *

     * @method init

     * @param {jQuery|selector} root The container element of all enhanced text areas

     * @public

     */

    var init = function(root) {

        if ($(root).data('auto-rows')) {

            $(root).on('input propertychange', changeListener.bind(this));

        } else {

            $(root).on('input propertychange', SELECTORS.ELEMENT, changeListener.bind(this));

        }

    };

    return /** @module core/auto_rows */ {

        init: init,

        events: EVENTS,

    };

});