admin/tool/componentlibrary/amd/src/mustache.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/>.
  15
  16 /**
  17  * This is called from to render mustache templates
  18  *
  19  * @module     tool_componentlibrary/mustache
  20  * @package    tool_componentlibrary
  21  * @copyright  2021 Bas Brands <bas@moodle.com>
  22  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  23  */
  24
  25 import selectors from 'tool_componentlibrary/selectors';
  26 import Ajax from 'core/ajax';
  27 import Config from 'core/config';
  28 import Templates from 'core/templates';
  29 import Log from 'core/log';
  30 import Notification from 'core/notification';
  31
  32 /**
  33  * Handle a template loaded response.
  34  *
  35  * @param {String} container The template container
  36  * @param {String} templateName The template name
  37  * @param {String} context Data for the template.
  38  */
  39 const renderTemplate = async(container, templateName, context) => {
  40     try {
  41         context = JSON.parse(context);
  42     } catch (e) {
  43         Log.debug('Could not parse json example context for template.');
  44         Log.debug(e);
  45     }
  46
  47     const {html, js} = await Templates.renderForPromise(templateName, context);
  48
  49     const rendercontainer = container.querySelector(selectors.mustacherendered);
  50
  51     // Load the rendered content in the renderer tab.
  52     await Templates.replaceNodeContents(rendercontainer, html, js);
  53 };
  54
  55 /**
  56  * Load the a template source from Moodle.
  57  *
  58  * @param {String} container The template container
  59  */
  60 const loadTemplate = container => {
  61         const sourcecontainer = container.querySelector(selectors.mustachesource);
  62         const contextcontainer = container.querySelector(selectors.mustachecontext);
  63         const templateName = container.dataset.template;
  64         let context = container.querySelector(selectors.mustacherawcontext).textContent;
  65
  66         const parts = templateName.split('/');
  67         const component = parts.shift();
  68         const name = parts.join('/');
  69
  70         const request = {
  71             methodname: 'core_output_load_template',
  72             args: {
  73                 component: component,
  74                 template: name,
  75                 themename: Config.theme,
  76                 includecomments: true
  77             }
  78         };
  79
  80         Ajax.call([request])[0]
  81             .done((source) => {
  82                 // Load the source template in Template tab.
  83                 sourcecontainer.textContent = source;
  84                 if (!context) {
  85                     const example = source.match(/Example context \(json\):([\s\S]+?)(}})/);
  86                     context = example[1];
  87                     // Load the variables in the Variables tab.
  88                     const precontainer = document.createElement("pre");
  89                     precontainer.innerHTML = JSON.stringify(JSON.parse(context), null, 4);
  90                     contextcontainer.parentNode.appendChild(precontainer);
  91                     contextcontainer.classList.add('d-none');
  92                 }
  93                 renderTemplate(container, templateName, context);
  94             })
  95             .fail(Notification.exception);
  96 };
  97
  98 /**
  99  * Initialize module
 100  *
 101  */
 102 export const mustache = () => {
 103     document.querySelectorAll(selectors.mustachecode).forEach((container) => {
 104         loadTemplate(container);
 105     });
 106 };