course/format/topics/amd/src/section.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.  * Format topics section extra logic component.
  18.  *
  19.  * @module     format_topics/section
  20.  * @copyright  2022 Ferran Recio <ferran@moodle.com>
  21.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. import {BaseComponent} from 'core/reactive';
  25. import {getCurrentCourseEditor} from 'core_courseformat/courseeditor';
  26. import Templates from 'core/templates';
  28. class HighlightSection extends BaseComponent {
  30.     /**
  31.      * Constructor hook.
  32.      */
  33.     create() {
  34.         // Optional component name for debugging.
  35.         this.name = 'format_topics_section';
  36.         // Default query selectors.
  37.         this.selectors = {
  38.             SETMARKER: `[data-action="sectionHighlight"]`,
  39.             REMOVEMARKER: `[data-action="sectionUnhighlight"]`,
  40.             ACTIONTEXT: `.menu-action-text`,
  41.             ICON: `.icon`,
  42.         };
  43.         // Default classes to toggle on refresh.
  44.         this.classes = {
  45.             HIDE: 'd-none',
  46.         };
  47.         // The topics format section specific actions.
  48.         this.formatActions = {
  49.             HIGHLIGHT: 'sectionHighlight',
  50.             UNHIGHLIGHT: 'sectionUnhighlight',
  51.         };
  52.     }
  54.     /**
  55.      * Component watchers.
  56.      *
  57.      * @returns {Array} of watchers
  58.      */
  59.     getWatchers() {
  60.         return [
  61.             {watch: `section.current:updated`, handler: this._refreshHighlight},
  62.         ];
  63.     }
  65.     /**
  66.      * Update a content section using the state information.
  67.      *
  68.      * @param {object} param
  69.      * @param {Object} param.element details the update details.
  70.      */
  71.     async _refreshHighlight({element}) {
  72.         let selector;
  73.         let newAction;
  74.         if (element.current) {
  75.             selector = this.selectors.SETMARKER;
  76.             newAction = this.formatActions.UNHIGHLIGHT;
  77.         } else {
  78.             selector = this.selectors.REMOVEMARKER;
  79.             newAction = this.formatActions.HIGHLIGHT;
  80.         }
  81.         // Find the affected action.
  82.         const affectedAction = this.getElement(`${selector}`, element.id);
  83.         if (!affectedAction) {
  84.             return;
  85.         }
  86.         // Change action, text and icon.
  87.         affectedAction.dataset.action = newAction;
  88.         const actionText = affectedAction.querySelector(this.selectors.ACTIONTEXT);
  89.         if (affectedAction.dataset?.swapname && actionText) {
  90.             const oldText = actionText?.innerText;
  91.             actionText.innerText = affectedAction.dataset.swapname;
  92.             affectedAction.dataset.swapname = oldText;
  93.         }
  94.         const icon = affectedAction.querySelector(this.selectors.ICON);
  95.         if (affectedAction.dataset?.swapicon && icon) {
  96.             const newIcon = affectedAction.dataset.swapicon;
  97.             if (newIcon) {
  98.                 const pixHtml = await Templates.renderPix(newIcon, 'core');
  99.                 Templates.replaceNode(icon, pixHtml, '');
  100.                 affectedAction.dataset.swapicon = affectedAction.dataset.icon;
  101.                 affectedAction.dataset.icon = newIcon;
  102.             }
  103.         }
  104.     }
  105. }
  107. export const init = () => {
  108.     // Add component to the section.
  109.     const courseEditor = getCurrentCourseEditor();
  110.     if (courseEditor.supportComponents && courseEditor.isEditing) {
  111.         new HighlightSection({
  112.             element: document.getElementById('page'),
  113.             reactive: courseEditor,
  114.         });
  115.     }
  116. };