blocks/amd/src/add_modal.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.  * Show an add block modal instead of doing it on a separate page.
  18.  *
  19.  * @module     core_block/add_modal
  20.  * @copyright  2016 Damyon Wiese <damyon@moodle.com>
  21.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. import Templates from 'core/templates';
  25. import {getString} from 'core/str';
  26. import Ajax from 'core/ajax';
  27. import ModalForm from "core_form/modalform";
  28. import CancelModal from 'core/modal_cancel';
  30. const SELECTORS = {
  31.     ADD_BLOCK: '[data-key="addblock"]',
  32.     SHOW_BLOCK_FORM: '[data-action="showaddblockform"][data-blockname][data-blockform]'
  33. };
  35. // Ensure we only add our listeners once.
  36. let listenerEventsRegistered = false;
  38. /**
  39.  * Register related event listeners.
  40.  *
  41.  * @method registerListenerEvents
  42.  * @param {String|null} addBlockUrl The add block URL
  43.  * @param {String} pagehash
  44.  */
  45. const registerListenerEvents = (addBlockUrl, pagehash) => {
  46.     let addBlockModal = null;
  47.     document.addEventListener('click', e => {
  49.         const showAddBlockForm = e.target.closest(SELECTORS.SHOW_BLOCK_FORM);
  50.         if (showAddBlockForm) {
  51.             e.preventDefault();
  53.             const modalForm = new ModalForm({
  54.                 modalConfig: {
  55.                     title: getString('addblock', 'core_block',
  56.                         showAddBlockForm.getAttribute('data-blocktitle')),
  57.                 },
  58.                 args: {blockname: showAddBlockForm.getAttribute('data-blockname'), pagehash,
  59.                     blockregion: showAddBlockForm.getAttribute('data-blockregion')},
  60.                 formClass: showAddBlockForm.getAttribute('data-blockform'),
  61.                 returnFocus: showAddBlockForm,
  62.             });
  64.             modalForm.addEventListener(modalForm.events.FORM_SUBMITTED, () => {
  65.                 addBlockModal.destroy();
  66.                 window.location.reload();
  67.             });
  69.             modalForm.show();
  70.         }
  72.         const addBlock = e.target.closest(SELECTORS.ADD_BLOCK);
  73.         if (addBlock) {
  74.             e.preventDefault();
  76.             let addBlockModalUrl = addBlockUrl ?? addBlock.dataset.url;
  78.             buildAddBlockModal()
  79.                 .then(modal => {
  80.                     addBlockModal = modal;
  81.                     const modalBody = renderBlocks(addBlockModalUrl, pagehash,
  82.                         addBlock.getAttribute('data-blockregion'));
  83.                     modal.setBody(modalBody);
  84.                     modal.show();
  86.                     return modalBody;
  87.                 })
  88.                 .catch(() => {
  89.                     addBlockModal.destroy();
  90.                 });
  91.         }
  92.     });
  93. };
  95. /**
  96.  * Method that creates the 'add block' modal.
  97.  *
  98.  * @method buildAddBlockModal
  99.  * @returns {Promise} The modal promise (modal's body will be rendered later).
  100.  */
  101. const buildAddBlockModal = () => CancelModal.create({
  102.     title: getString('addblock'),
  103. });
  105. /**
  106.  * Method that renders the list of available blocks.
  107.  *
  108.  * @method renderBlocks
  109.  * @param {String} addBlockUrl The add block URL
  110.  * @param {String} pagehash
  111.  * @param {String} region
  112.  * @return {Promise}
  113.  */
  114. const renderBlocks = async(addBlockUrl, pagehash, region) => {
  115.     // Fetch all addable blocks in the given page.
  116.     const blocks = await getAddableBlocks(pagehash);
  118.     return Templates.render('core/add_block_body', {
  119.         blocks: blocks,
  120.         url: addBlockUrl,
  121.         blockregion: region,
  122.         pagehash
  123.     });
  124. };
  126. /**
  127.  * Method that fetches all addable blocks in a given page.
  128.  *
  129.  * @method getAddableBlocks
  130.  * @param {String} pagehash
  131.  * @return {Promise}
  132.  */
  133. const getAddableBlocks = async(pagehash) => {
  134.     const request = {
  135.         methodname: 'core_block_fetch_addable_blocks',
  136.         args: {
  137.             pagecontextid: 0,
  138.             pagetype: '',
  139.             pagelayout: '',
  140.             subpage: '',
  141.             pagehash: pagehash,
  142.         },
  143.     };
  145.     return Ajax.call([request])[0];
  146. };
  148. /**
  149.  * Set up the actions.
  150.  *
  151.  * @method init
  152.  * @param {String} addBlockUrl The add block URL
  153.  * @param {String} pagehash
  154.  */
  155. export const init = (addBlockUrl = null, pagehash = '') => {
  156.     if (!listenerEventsRegistered) {
  157.         registerListenerEvents(addBlockUrl, pagehash);
  158.         listenerEventsRegistered = true;
  159.     }
  160. };