// 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
};
});