filter/mathjaxloader/amd/src/loader.js

  1. // This file is part of Moodle - http://moodle.org/ //
  2. // Moodle is free software: you can redistribute it and/or modify
  3. // it under the terms of the GNU General Public License as published by
  4. // the Free Software Foundation, either version 3 of the License, or
  5. // (at your option) any later version.
  6. //
  7. // Moodle is distributed in the hope that it will be useful,
  8. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  9. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  10. // GNU General Public License for more details.
  11. //
  12. // You should have received a copy of the GNU General Public License
  13. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15. /**
  16.  * Mathjax JS Loader.
  17.  *
  18.  * @module filter_mathjaxloader/loader
  19.  * @copyright 2014 Damyon Wiese  <damyon@moodle.com>
  20.  * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  21.  */
  22. import {
  23.     eventTypes,
  24.     notifyFilterContentRenderingComplete,
  25. } from 'core_filters/events';
  27. /**
  28.  * Called by the filter when it is active on any page.
  29.  * This does not load MathJAX yet - it addes the configuration to the head incase it gets loaded later.
  30.  * It also subscribes to the filter-content-updated event so MathJax can respond to content loaded by Ajax.
  31.  *
  32.  * @param {Object} params List of configuration params containing mathjaxurl, mathjaxconfig (text) and lang
  33.  */
  34. export const configure = (params) => {
  35.     loadMathJax(params.mathjaxurl, () => {
  36.         if (window.MathJax) {
  37.             // Let's still set the locale even if the localization is not yet ported to version 3.2.2
  38.             // https://docs.mathjax.org/en/v3.2-latest/upgrading/v2.html#not-yet-ported-to-version-3.
  39.             window.MathJax.config.locale = params.lang;
  40.         }
  42.         // Listen for events triggered when new text is added to a page that needs
  43.         // processing by a filter.
  44.         document.addEventListener(eventTypes.filterContentUpdated, contentUpdated);
  45.     });
  46. };
  48. /**
  49.  * Add the node to the typeset queue.
  50.  *
  51.  * @param {HTMLElement} node The Node to be processed by MathJax
  52.  * @private
  53.  */
  54. const typesetNode = (node) => {
  55.     if (!(node instanceof HTMLElement)) {
  56.         // We may have been passed a #text node.
  57.         // These cannot be formatted.
  58.         return;
  59.     }
  61.     if (window.MathJax) {
  62.         window.MathJax.typesetPromise([node]).then(() => {
  63.             notifyFilterContentRenderingComplete([node]);
  64.             return;
  65.         })
  66.         .catch(e => {
  67.             window.console.log(e);
  68.         });
  69.     }
  70. };
  72. /**
  73.  * Called by the filter when an equation is found while rendering the page.
  74.  */
  75. export const typeset = () => {
  76.     const elements = document.getElementsByClassName('filter_mathjaxloader_equation');
  77.     for (const element of elements) {
  78.         if (typeof window.MathJax !== "undefined") {
  79.             typesetNode(element);
  80.         }
  81.     }
  82. };
  84. /**
  85.  * Handle content updated events - typeset the new content.
  86.  *
  87.  * @param {CustomEvent} event - Custom event with "nodes" indicating the root of the updated nodes.
  88.  */
  89. export const contentUpdated = (event) => {
  90.     if (typeof window.MathJax === "undefined") {
  91.         return;
  92.     }
  94.     let listOfElementContainMathJax = [];
  95.     let hasMathJax = false;
  96.     // The list of HTMLElements in an Array.
  97.     event.detail.nodes.forEach((node) => {
  98.         if (!(node instanceof HTMLElement)) {
  99.             // We may have been passed a #text node.
  100.             return;
  101.         }
  102.         const mathjaxElements = node.querySelectorAll('.filter_mathjaxloader_equation');
  103.         if (mathjaxElements.length > 0) {
  104.             hasMathJax = true;
  105.         }
  106.         listOfElementContainMathJax.push(mathjaxElements);
  107.     });
  109.     if (!hasMathJax) {
  110.         return;
  111.     }
  113.     listOfElementContainMathJax.forEach((mathjaxElements) => {
  114.         mathjaxElements.forEach((node) => typesetNode(node));
  115.     });
  116. };
  118. /**
  119.  * Load the MathJax script.
  120.  *
  121.  * @param {String} url The URL of the MathJax script to load.
  122.  * @param {function} callback The function to call when the script has loaded.
  123.  */
  124. const loadMathJax = (url, callback) => {
  125.     const script = document.createElement('script');
  126.     script.type = 'text/javascript';
  127.     script.onload = () => {
  128.         callback();
  129.     };
  130.     script.src = url;
  131.     document.getElementsByTagName('head')[0].appendChild(script);
  132. };