Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 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 
 * Manages 'Clear my choice' functionality actions.
18 
 *
19 
 * @module     qtype_multichoice/clearchoice
20 
 * @copyright  2019 Simey Lameze <simey@moodle.com>
21 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 * @since      3.7
23 
 */
24 
define(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
25 
 
26 
    var SELECTORS = {
27 
        CHOICE_ELEMENT: '.answer input',
28 
        LINK: 'a',
29 
        RADIO: 'input[type="radio"]'
30 
    };
31 
 
32 
    /**
33 
     * Mark clear choice radio as enabled and checked.
34 
     *
35 
     * @param {Object} clearChoiceContainer The clear choice option container.
36 
     */
37 
    var checkClearChoiceRadio = function(clearChoiceContainer) {
38 
        clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', false).prop('checked', true);
39 
    };
40 
 
41 
    /**
42 
     * Get the clear choice div container.
43 
     *
44 
     * @param {Object} root The question root element.
45 
     * @param {string} fieldPrefix The question outer div prefix.
46 
     * @returns {Object} The clear choice div container.
47 
     */
48 
    var getClearChoiceElement = function(root, fieldPrefix) {
49 
        return root.find('div[id="' + fieldPrefix + '"]');
50 
    };
51 
 
52 
    /**
53 
     * Hide clear choice option.
54 
     *
55 
     * @param {Object} clearChoiceContainer The clear choice option container.
56 
     */
57 
    var hideClearChoiceOption = function(clearChoiceContainer) {
58 
        // We are using .sr-only and aria-hidden together so while the element is hidden
59 
        // from both the monitor and the screen-reader, it is still tabbable.
60 
        clearChoiceContainer.addClass('sr-only');
61 
        clearChoiceContainer.attr('aria-hidden', true);
62 
        clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', -1);
63 
    };
64 
 
65 
    /**
66 
     * Shows clear choice option.
67 
     *
68 
     * @param {Object} clearChoiceContainer The clear choice option container.
69 
     */
70 
    var showClearChoiceOption = function(clearChoiceContainer) {
71 
        clearChoiceContainer.removeClass('sr-only');
72 
        clearChoiceContainer.removeAttr('aria-hidden');
73 
        clearChoiceContainer.find(SELECTORS.LINK).attr('tabindex', 0);
74 
        clearChoiceContainer.find(SELECTORS.RADIO).prop('disabled', true);
75 
    };
76 
 
77 
    /**
78 
     * Register event listeners for the clear choice module.
79 
     *
80 
     * @param {Object} root The question outer div prefix.
81 
     * @param {string} fieldPrefix The "Clear choice" div prefix.
82 
     */
83 
    var registerEventListeners = function(root, fieldPrefix) {
84 
        var clearChoiceContainer = getClearChoiceElement(root, fieldPrefix);
85 
 
86 
        clearChoiceContainer.on(CustomEvents.events.activate, SELECTORS.LINK, function(e, data) {
87 
 
88 
                // Mark the clear choice radio element as checked.
89 
                checkClearChoiceRadio(clearChoiceContainer);
90 
                // Now that the hidden radio has been checked, hide the clear choice option.
91 
                hideClearChoiceOption(clearChoiceContainer);
92 
 
93 
                data.originalEvent.preventDefault();
94 
        });
95 
 
96 
        root.on('change', SELECTORS.CHOICE_ELEMENT, function() {
97 
            // If the event has been triggered by any other choice, show the clear choice option.
98 
            showClearChoiceOption(clearChoiceContainer);
99 
        });
100 
 
101 
        // If the clear choice radio receives focus from using the tab key, return the focus
102 
        // to the first answer option.
103 
        clearChoiceContainer.find(SELECTORS.RADIO).focus(function() {
104 
            var firstChoice = root.find(SELECTORS.CHOICE_ELEMENT).first();
105 
            firstChoice.focus();
106 
        });
107 
    };
108 
 
109 
    /**
110 
     * Initialise clear choice module.
111 
     *
112 
     * @param {string} root The question outer div prefix.
113 
     * @param {string} fieldPrefix The "Clear choice" div prefix.
114 
     */
115 
    var init = function(root, fieldPrefix) {
116 
        root = $('#' + root);
117 
        registerEventListeners(root, fieldPrefix);
118 
    };
119 
 
120 
    return {
121 
        init: init
122 
    };
123 
});