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/>.

/**

 * Custom form error event handler to manipulate the bootstrap markup and show

 * nicely styled errors in an mform.

 *

 * @module     theme_monocolor/form-display-errors

 * @copyright  2016 Damyon Wiese <damyon@moodle.com>

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

 */

define(['jquery', 'core_form/events'], function($, FormEvent) {

    return {

        /**

         * Enhance the supplied element to handle form field errors.

         *

         * @method

         * @param {String} elementid

         * @listens event:formFieldValidationFailed

         */

        enhance: function(elementid) {

            var element = document.getElementById(elementid);

            if (!element) {

                // Some elements (e.g. static) don't have a form field.

                // Hence there is no validation. So, no setup required here.

                return;

            }

            element.addEventListener(FormEvent.eventTypes.formFieldValidationFailed, e => {

                const msg = e.detail.message;

                e.preventDefault();

                var parent = $(element).closest('.form-group');

                var feedback = parent.find('.form-control-feedback');

                const feedbackId = feedback.attr('id');

                // Get current aria-describedby value.

                let describedBy = $(element).attr('aria-describedby');

                if (typeof describedBy === "undefined") {

                    describedBy = '';

                }

                // Split aria-describedby attribute into an array of IDs if necessary.

                let describedByIds = [];

                if (describedBy.length) {

                    describedByIds = describedBy.split(" ");

                }

                // Find the the feedback container in the aria-describedby attribute.

                const feedbackIndex = describedByIds.indexOf(feedbackId);

                // Sometimes (atto) we have a hidden textarea backed by a real contenteditable div.

                if (($(element).prop("tagName") == 'TEXTAREA') && parent.find('[contenteditable]').length > 0) {

                    element = parent.find('[contenteditable]');

                }

                if (msg !== '') {

                    parent.addClass('has-danger');

                    parent.data('client-validation-error', true);

                    $(element).addClass('is-invalid');

                    // Append the feedback ID to the aria-describedby attribute if it doesn't exist yet.

                    if (feedbackIndex === -1) {

                        describedByIds.push(feedbackId);

                        $(element).attr('aria-describedby', describedByIds.join(" "));

                    }

                    $(element).attr('aria-invalid', true);

                    feedback.attr('tabindex', 0);

                    feedback.html(msg);

                    // Only display and focus when the error was not already visible.

                    // This is so that, when tabbing around the form, you don't get stuck.

                    if (!feedback.is(':visible')) {

                        feedback.show();

                        feedback.focus();

                    }

                } else {

                    if (parent.data('client-validation-error') === true) {

                        parent.removeClass('has-danger');

                        parent.data('client-validation-error', false);

                        $(element).removeClass('is-invalid');

                        // If the aria-describedby attribute contains the error container's ID, remove it.

                        if (feedbackIndex > -1) {

                            describedByIds.splice(feedbackIndex, 1);

                        }

                        // Check the remaining element IDs in the aria-describedby attribute.

                        if (describedByIds.length) {

                            // If there's at least one, combine them with a blank space and update the aria-describedby attribute.

                            describedBy = describedByIds.join(" ");

                            // Put back the new describedby attribute.

                            $(element).attr('aria-describedby', describedBy);

                        } else {

                            // If there's none, remove the aria-describedby attribute.

                            $(element).removeAttr('aria-describedby');

                        }

                        $(element).attr('aria-invalid', false);

                        feedback.hide();

                    }

                }

            });

            var form = element.closest('form');

            if (form && !('boostFormErrorsEnhanced' in form.dataset)) {

                form.addEventListener('submit', function() {

                    var visibleError = $('.form-control-feedback:visible');

                    if (visibleError.length) {

                        visibleError[0].focus();

                    }

                });

                form.dataset.boostFormErrorsEnhanced = 1;

            }

        }

    };

});