theme/boost/amd/src/courseindexdrawercontrols.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.  * Controls for the course index drawer, such as expand-all/collapse-all sections.
  18.  *
  19.  * @module     theme_boost/courseindexdrawercontrols
  20.  * @copyright  2023 Stefan Topfstedt
  21.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  23. import {BaseComponent} from 'core/reactive';
  24. import {getCurrentCourseEditor} from 'core_courseformat/courseeditor';
  26. export default class Component extends BaseComponent {
  28.   create() {
  29.     this.name = 'courseindexdrawercontrols';
  30.     this.selectors = {
  31.       COLLAPSEALL: `[data-action="collapseallcourseindexsections"]`,
  32.       EXPANDALL: `[data-action="expandallcourseindexsections"]`,
  33.     };
  34.   }
  36.   /**
  37.    * @param {element|string} target the DOM main element or its ID
  38.    * @param {object} selectors optional css selector overrides
  39.    * @return {Component}
  40.    */
  41.   static init(target, selectors) {
  42.     return new Component({
  43.       element: document.getElementById(target),
  44.       reactive: getCurrentCourseEditor(),
  45.       selectors,
  46.     });
  47.   }
  49.   /**
  50.    * Initial state ready method.
  51.    */
  52.   stateReady() {
  53.     // Attach the on-click event handlers to the expand-all and collapse-all buttons, if present.
  54.     const expandAllBtn = this.getElement(this.selectors.EXPANDALL);
  55.     if (expandAllBtn) {
  56.       this.addEventListener(expandAllBtn, 'click', this._expandAllSections);
  58.     }
  59.     const collapseAllBtn = this.getElement(this.selectors.COLLAPSEALL);
  60.     if (collapseAllBtn) {
  61.       this.addEventListener(collapseAllBtn, 'click', this._collapseAllSections);
  62.     }
  63.   }
  65.   /**
  66.    * On-click event handler for the collapse-all button.
  67.    * @private
  68.    */
  69.   _collapseAllSections() {
  70.     this._toggleAllSections(true);
  71.   }
  73.   /**
  74.    * On-click event handler for the expand-all button.
  75.    * @private
  76.    */
  77.   _expandAllSections() {
  78.     this._toggleAllSections(false);
  79.   }
  81.   /**
  82.    * Collapses or expands all sections in the course index.
  83.    * @param {boolean} expandOrCollapse set to TRUE to collapse all, and FALSE to expand all.
  84.    * @private
  85.    */
  86.   _toggleAllSections(expandOrCollapse) {
  87.     this.reactive.dispatch('allSectionsIndexCollapsed', expandOrCollapse);
  88.   }
  89. }