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

/**

 * JavaScript for the add_random_form class.

 *

 * @module    mod_quiz/add_random_form

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

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

 */

define(

    [

        'jquery',

        'mod_quiz/random_question_form_preview'

    ],

    function(

        $,

        RandomQuestionFormPreview

    ) {

    // Wait 2 seconds before reloading the question set just in case

    // the user is still changing the criteria.

    var RELOAD_DELAY = 2000;

    var SELECTORS = {

        PREVIEW_CONTAINER: '[data-region="random-question-preview-container"]',

        CATEGORY_FORM_ELEMENT: '[name="category"]',

        SUBCATEGORY_FORM_ELEMENT: '[name="includesubcategories"]',

        TAG_IDS_FORM_ELEMENT: '[name="fromtags[]"]'

    };

    /**

     * Get the selected category value from the form.

     *

     * @param {jquery} form The form element.

     * @return {string} The category value.

     */

    var getCategorySelectValue = function(form) {

        return form.find(SELECTORS.CATEGORY_FORM_ELEMENT).val();

    };

    /**

     * Get the category id from the form.

     *

     * @param {jquery} form The form element.

     * @return {string} The category id.

     */

    var getCategoryId = function(form) {

        // The value string is the category id and category context id joined

        // by a comma.

        var valueString = getCategorySelectValue(form);

        // Split the two ids.

        var values = valueString.split(',');

        // Return just the category id.

        return values[0];

    };

    /**

     * Check if a top level category is selected in the form.

     *

     * @param {jquery} form The form element.

     * @param {string[]} topCategories List of top category values (matching the select box values)

     * @return {bool}

     */

    var isTopLevelCategorySelected = function(form, topCategories) {

        var selectedValue = getCategorySelectValue(form);

        return (topCategories.indexOf(selectedValue) > -1);

    };

    /**

     * Check if the form indicates we should include include subcategories in

     * the filter.

     *

     * @param {jquery} form The form element.

     * @param {string[]} topCategories List of top category values (matching the select box values)

     * @return {bool}

     */

    var shouldIncludeSubcategories = function(form, topCategories) {

        if (isTopLevelCategorySelected(form, topCategories)) {

            return true;

        } else {

            return form.find(SELECTORS.SUBCATEGORY_FORM_ELEMENT).is(':checked');

        }

    };

    /**

     * Get the tag ids for the selected tags in the form.

     *

     * @param {jquery} form The form element.

     * @return {string[]} The tag ids.

     */

    var getTagIds = function(form) {

        var values = form.find(SELECTORS.TAG_IDS_FORM_ELEMENT).val();

        return values.map(function(value) {

            // The tag element value is the tag id and tag name joined

            // by a comma. So we need to split them to get the tag id.

            var parts = value.split(',');

            return parts[0];

        });

    };

    /**

     * Reload the preview section with a new set of filters.

     *

     * @param {jquery} form The form element.

     * @param {int} contextId The current context id.

     * @param {string[]} topCategories List of top category values (matching the select box values)

     */

    var reloadQuestionPreview = function(form, contextId, topCategories) {

        var previewContainer = form.find(SELECTORS.PREVIEW_CONTAINER);

        RandomQuestionFormPreview.reload(

            previewContainer,

            getCategoryId(form),

            shouldIncludeSubcategories(form, topCategories),

            getTagIds(form),

            contextId

        );

    };

    /**

     * Is this an element we're interested in listening to changes on.

     *

     * @param {jquery} element The element to check.

     * @return {bool}

     */

    var isInterestingElement = function(element) {

        if (element.closest(SELECTORS.CATEGORY_FORM_ELEMENT).length > 0) {

            return true;

        }

        if (element.closest(SELECTORS.SUBCATEGORY_FORM_ELEMENT).length > 0) {

            return true;

        }

        if (element.closest(SELECTORS.TAG_IDS_FORM_ELEMENT).length > 0) {

            return true;

        }

        return false;

    };

    /**

     * Listen for changes to any of the interesting elements and reload the form

     * preview with the new filter values if they are changed.

     *

     * The reload is delayed for a small amount of time (see RELOAD_DELAY) in case

     * the user is actively editing the form. This allows us to avoid having to

     * send multiple requests to the server on each change.

     *

     * Instead we can just send a single request when the user appears to have

     * finished editing the form.

     *

     * @param {jquery} form The form element.

     * @param {int} contextId The current context id.

     * @param {string[]} topCategories List of top category values (matching the select box values)

     */

    var addEventListeners = function(form, contextId, topCategories) {

        var reloadTimerId = null;

        const tagsFilter = form.find(SELECTORS.TAG_IDS_FORM_ELEMENT);

        form.add(tagsFilter).on('change', function(e) {

            // Only reload the preview when elements that will change the result

            // are modified.

            if (!isInterestingElement($(e.target))) {

                return;

            }

            // Show the loading icon to let the user know that the preview

            // will be updated after their actions.

            RandomQuestionFormPreview.showLoadingIcon(form);

            if (reloadTimerId) {

                // Reset the timer each time the form is modified.

                clearTimeout(reloadTimerId);

            }

            // Don't immediately reload the question preview section just

            // in case the user is still modifying the form. We don't want to

            // spam reload requests.

            reloadTimerId = setTimeout(function() {

                reloadQuestionPreview(form, contextId, topCategories);

            }, RELOAD_DELAY);

        });

    };

    /**

     * Trigger the first load of the preview section and then listen for modifications

     * to the form to reload the preview with new filter values.

     *

     * @param {jquery} formId The form element id.

     * @param {int} contextId The current context id.

     * @param {string[]} topCategories List of top category values (matching the select box values)

     * @param {bool} isTagsEnabled Whether tags feature is enabled or not.

     */

    var init = function(formId, contextId, topCategories, isTagsEnabled) {

         if (isTagsEnabled == true) {

             var form = $('#' + formId);

             reloadQuestionPreview(form, contextId, topCategories, isTagsEnabled);

             addEventListeners(form, contextId, topCategories, isTagsEnabled);

         }

    };

    return {

        init: init

    };

});