// 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/>.
/**
* Contain the logic for the question bank modal.
*
* @module mod_quiz/modal_quiz_question_bank
* @copyright 2018 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
import Modal from './add_question_modal';
import * as Fragment from 'core/fragment';
import * as FormChangeChecker from 'core_form/changechecker';
import * as ModalEvents from 'core/modal_events';
import * as Notification from 'core/notification';
const SELECTORS = {
ADD_TO_QUIZ_CONTAINER: 'td.addtoquizaction',
ANCHOR: 'a[href]',
PREVIEW_CONTAINER: 'td.previewquestionaction',
ADD_QUESTIONS_FORM: 'form#questionsubmit',
SORTERS: '.sorters',
SWITCH_TO_OTHER_BANK: 'button[data-action="switch-question-bank"]',
NEW_BANKMOD_ID: 'data-newmodid',
BANK_SEARCH: '#searchbanks',
GO_BACK_BUTTON: 'button[data-action="go-back"]',
ADD_ON_PAGE_FORM_ELEMENT: 'input[name="addonpage"]',
CMID_FORM_ELEMENT: 'form#questionsubmit input[name="cmid"]',
};
export default class ModalQuizQuestionBank extends Modal {
static TYPE = 'mod_quiz-quiz-question-bank';
/**
* Create the question bank modal.
*
* @param {Number} contextId Current module context id.
* @param {Number} bankCmId Current question bank course module id.
* @param {Number} quizCmId Current quiz course module id.
*/
static init(contextId, bankCmId, quizCmId) {
const selector = '.menu [data-action="questionbank"]';
document.addEventListener('click', (e) => {
const trigger = e.target.closest(selector);
if (!trigger) {
return;
}
e.preventDefault();
ModalQuizQuestionBank.create({
contextId,
quizCmId,
bankCmId,
title: trigger.dataset.header,
addOnPage: trigger.dataset.addonpage,
templateContext: {
hidden: true,
},
large: true,
});
});
}
/**
* Override the parent show function.
*
* Reload the body contents when the modal is shown. The current
* window URL is used to inform the new content that should be
* displayed.
*
* @method show
* @return {void}
*/
show() {
this.reloadBodyContent(window.location.search);
return super.show(this);
}
/**
* Replaces the current body contents with a new version of the question
* bank.
*
* The contents of the question bank are generated using the provided
* query string.
*
* @method reloadBodyContent
* @param {string} querystring URL encoded string.
*/
reloadBodyContent(querystring) {
// Load the question bank fragment to be displayed in the modal and hide the 'go back' button.
this.hideFooter();
this.setTitle(this.originalTitle);
this.setBody(Fragment.loadFragment(
'mod_quiz',
'quiz_question_bank',
this.getContextId(),
{
querystring,
quizcmid: this.quizCmId,
bankcmid: this.bankCmId,
}
));
}
/**
* Update the URL of the anchor element that the user clicked on to make
* sure that the question is added to the correct page.
*
* @method handleAddToQuizEvent
* @param {event} e A JavaScript event
* @param {object} anchorElement The anchor element that was triggered
*/
handleAddToQuizEvent(e, anchorElement) {
// If the user clicks the plus icon to add the question to the page
// directly then we need to intercept the click in order to adjust the
// href and include the correct add on page id and cmid before the page is
// redirected.
const href = new URL(anchorElement.getAttribute('href'));
href.searchParams.set('addonpage', this.getAddOnPageId());
href.searchParams.set('cmid', this.quizCmId);
anchorElement.setAttribute('href', href);
}
/**
* Set up all of the event handling for the modal.
*
* @method registerEventListeners
*/
registerEventListeners() {
// Apply parent event listeners.
super.registerEventListeners(this);
this.getModal().on('submit', SELECTORS.ADD_QUESTIONS_FORM, (e) => {
// If the user clicks on the "Add selected questions to the quiz" button to add some questions to the page
// then we need to intercept the submit in order to include the correct "add on page id"
// and the quizmod id before the form is submitted.
const formElement = e.currentTarget;
document.querySelector(SELECTORS.ADD_ON_PAGE_FORM_ELEMENT).setAttribute('value', this.getAddOnPageId());
// We also need to set the form cmid & action as the quiz modid as this could be coming from a module that isn't a quiz.
document.querySelector(SELECTORS.CMID_FORM_ELEMENT).setAttribute('value', this.quizCmId);
const actionUrl = new URL(formElement.getAttribute('action'));
actionUrl.searchParams.set('cmid', this.quizCmId);
formElement.setAttribute('action', actionUrl.toString());
});
this.getModal().on('click', SELECTORS.SWITCH_TO_OTHER_BANK, () => {
this.handleSwitchBankContentReload(SELECTORS.BANK_SEARCH)
.then(function(ModalQuizQuestionBank) {
document.querySelector(SELECTORS.BANK_SEARCH)?.addEventListener('change', (e) => {
const bankCmId = e.currentTarget.value;
if (bankCmId > 0) {
ModalQuizQuestionBank.bankCmId = bankCmId;
ModalQuizQuestionBank.reloadBodyContent(window.location.search);
}
});
document.querySelector(SELECTORS.GO_BACK_BUTTON).addEventListener('click', (e) => {
ModalQuizQuestionBank.bankCmId = e.currentTarget.value;
ModalQuizQuestionBank.reloadBodyContent(window.location.search);
});
}
)
.catch(Notification.exception);
});
this.getModal().on('click', SELECTORS.ANCHOR, (e) => {
const anchorElement = e.currentTarget;
// If the anchor element was the add to quiz link.
if (anchorElement.closest(SELECTORS.ADD_TO_QUIZ_CONTAINER)) {
this.handleAddToQuizEvent(e, anchorElement);
return;
}
// If the anchor element was a preview question link.
if (anchorElement.closest(SELECTORS.PREVIEW_CONTAINER)) {
return;
}
// Sorting links have their own handler.
if (anchorElement.closest(SELECTORS.SORTERS)) {
return;
}
if (anchorElement.closest('a[' + SELECTORS.NEW_BANKMOD_ID + ']')) {
this.bankCmId = anchorElement.getAttribute(SELECTORS.NEW_BANKMOD_ID);
// We need to clear the filter as we are about to reload the content.
const url = new URL(location.href);
url.searchParams.delete('filter');
history.pushState({}, '', url);
}
// Anything else means reload the pop-up contents.
e.preventDefault();
this.reloadBodyContent(anchorElement.search);
});
// Disable the form change checker when the body is rendered.
this.getRoot().on(ModalEvents.bodyRendered, () => {
// Make sure the form change checker is disabled otherwise it'll stop the user from navigating away from the
// page once the modal is hidden.
FormChangeChecker.disableAllChecks();
});
}
}
ModalQuizQuestionBank.registerModalType();