mod/data/amd/src/templateseditor.js

  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/>.
  16. /**
  17.  * Javascript module to control the template editor.
  18.  *
  19.  * @module      mod_data/templateseditor
  20.  * @copyright   2021 Mihail Geshoski <mihail@moodle.com>
  21.  * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. import {getString} from 'core/str';
  25. import {prefetchStrings} from 'core/prefetch';
  26. import {relativeUrl} from 'core/url';
  27. import {saveCancel, deleteCancel} from 'core/notification';
  28. import Templates from 'core/templates';
  30. prefetchStrings('admin', ['confirmation']);
  31. prefetchStrings('mod_data', [
  32.     'resettemplateconfirmtitle',
  33.     'enabletemplateeditorcheck',
  34.     'editorenable'
  35. ]);
  36. prefetchStrings('core', [
  37.     'reset',
  38. ]);
  40. /**
  41.  * Template editor constants.
  42.  */
  43. const selectors = {
  44.     toggleTemplateEditor: 'input[name="useeditor"]',
  45.     resetTemplateAction: '[data-action="resettemplate"]',
  46.     resetTemplate: 'input[name="defaultform"]',
  47.     resetAllTemplates: 'input[name="resetall"]',
  48.     resetAllCheck: 'input[name="resetallcheck"]',
  49.     editForm: '#edittemplateform',
  50. };
  52. /**
  53.  * Register event listeners for the module.
  54.  *
  55.  * @param {Number} instanceId The database ID
  56.  * @param {string} mode The template mode
  57.  */
  58. const registerEventListeners = (instanceId, mode) => {
  59.     registerResetButton(mode);
  60.     registerEditorToggler(instanceId, mode);
  61. };
  63. const registerResetButton = (mode) => {
  64.     const editForm = document.querySelector(selectors.editForm);
  65.     const resetTemplate = document.querySelector(selectors.resetTemplate);
  66.     const resetAllTemplates = document.querySelector(selectors.resetAllTemplates);
  67.     const resetTemplateAction = document.querySelector(selectors.resetTemplateAction);
  69.     if (!resetTemplateAction || !resetTemplate || !editForm) {
  70.         return;
  71.     }
  72.     prefetchStrings('mod_data', [
  73.         mode
  74.     ]);
  75.     resetTemplateAction.addEventListener('click', async(event) => {
  76.         event.preventDefault();
  77.         const params = {
  78.             resetallname: "resetallcheck",
  79.             templatename: await getString(mode, 'mod_data'),
  80.         };
  81.         deleteCancel(
  82.             getString('resettemplateconfirmtitle', 'mod_data'),
  83.             Templates.render('mod_data/template_editor_resetmodal', params),
  84.             getString('reset', 'core'),
  85.             () => {
  86.                 resetTemplate.value = "true";
  87.                 editForm.submit();
  88.             },
  89.             null,
  90.             {triggerElement: event.target}
  91.         );
  92.     });
  94.     // The reset all checkbox is inside a modal so we need to capture at document level.
  95.     if (!resetAllTemplates) {
  96.         return;
  97.     }
  98.     document.addEventListener('change', (event) => {
  99.         if (event.target.matches(selectors.resetAllCheck)) {
  100.             resetAllTemplates.value = (event.target.checked) ? "true" : "";
  101.         }
  102.     });
  103. };
  105. const registerEditorToggler = (instanceId, mode) => {
  106.     const toggleTemplateEditor = document.querySelector(selectors.toggleTemplateEditor);
  108.     if (!toggleTemplateEditor) {
  109.         return;
  110.     }
  112.     toggleTemplateEditor.addEventListener('click', async(event) => {
  113.         event.preventDefault();
  114.         // Whether the event action attempts to enable or disable the template editor.
  115.         const enableTemplateEditor = event.target.checked;
  117.         if (enableTemplateEditor) {
  118.             // Display a confirmation dialog before enabling the template editor.
  119.             saveCancel(
  120.                 getString('confirmation', 'admin'),
  121.                 getString('enabletemplateeditorcheck', 'mod_data'),
  122.                 getString('editorenable', 'mod_data'),
  123.                 () => {
  124.                     window.location = relativeUrl('/mod/data/templates.php', {d: instanceId, mode: mode, useeditor: true});
  125.                 },
  126.                 null,
  127.                 {triggerElement: event.target}
  128.             );
  129.         } else {
  130.             window.location = relativeUrl('/mod/data/templates.php', {d: instanceId, mode: mode, useeditor: false});
  131.         }
  132.     });
  133. };
  135. /**
  136.  * Initialize the module.
  137.  *
  138.  * @param {int} instanceId The database ID
  139.  * @param {string} mode The template mode
  140.  */
  141. export const init = (instanceId, mode) => {
  142.     registerEventListeners(instanceId, mode);
  143. };