course/format/amd/src/local/courseindex/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.  * Course index section component.
  18.  *
  19.  * This component is used to control specific course section interactions like drag and drop.
  20.  *
  21.  * @module     core_courseformat/local/courseindex/section
  22.  * @class      core_courseformat/local/courseindex/section
  23.  * @copyright  2021 Ferran Recio <ferran@moodle.com>
  24.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  25.  */
  27. import SectionTitle from 'core_courseformat/local/courseindex/sectiontitle';
  28. import DndSection from 'core_courseformat/local/courseeditor/dndsection';
  29. import log from "core/log";
  31. export default class Component extends DndSection {
  33.     /**
  34.      * Constructor hook.
  35.      */
  36.     create() {
  37.         // Optional component name for debugging.
  38.         this.name = 'courseindex_section';
  39.         // Default query selectors.
  40.         this.selectors = {
  41.             SECTION: `[data-for='section']`,
  42.             SECTION_ITEM: `[data-for='section_item']`,
  43.             SECTION_TITLE: `[data-for='section_title']`,
  44.             CM_LAST: `[data-for="cm"]:last-child`,
  45.         };
  46.         // Default classes to toggle on refresh.
  47.         this.classes = {
  48.             SECTIONHIDDEN: 'dimmed',
  49.             SECTIONCURRENT: 'current',
  50.             LOCKED: 'editinprogress',
  51.             RESTRICTIONS: 'restrictions',
  52.             PAGEITEM: 'pageitem',
  53.             OVERLAYBORDERS: 'overlay-preview-borders',
  54.         };
  56.         // We need our id to watch specific events.
  57.         this.id = this.element.dataset.id;
  58.         this.isPageItem = false;
  59.     }
  61.     /**
  62.      * Static method to create a component instance form the mustahce template.
  63.      *
  64.      * @param {string} target the DOM main element or its ID
  65.      * @param {object} selectors optional css selector overrides
  66.      * @return {Component}
  67.      */
  68.     static init(target, selectors) {
  69.         let element = document.querySelector(target);
  70.         // TODO Remove this if condition as part of MDL-83851.
  71.         if (!element) {
  72.             log.debug('Init component with id is deprecated, use a query selector instead.');
  73.             element = document.getElementById(target);
  74.         }
  75.         return new this({
  76.             element,
  77.             selectors,
  78.         });
  79.     }
  81.     /**
  82.      * Initial state ready method.
  83.      *
  84.      * @param {Object} state the initial state
  85.      */
  86.     stateReady(state) {
  87.         this.configState(state);
  88.         const sectionItem = this.getElement(this.selectors.SECTION_ITEM);
  89.         // Drag and drop is only available for components compatible course formats.
  90.         if (this.reactive.isEditing && this.reactive.supportComponents) {
  91.             // Init the inner dragable element passing the full section as affected region.
  92.             const titleitem = new SectionTitle({
  93.                 ...this,
  94.                 element: sectionItem,
  95.                 fullregion: this.element,
  96.             });
  97.             this.configDragDrop(titleitem);
  98.         }
  99.         // Check if the current url is the section url.
  100.         const section = state.section.get(this.id);
  101.         if (window.location.href == section.sectionurl.replace(/&amp;/g, "&")) {
  102.             this.reactive.dispatch('setPageItem', 'section', this.id);
  103.             sectionItem.scrollIntoView();
  104.         }
  105.     }
  107.     /**
  108.      * Component watchers.
  109.      *
  110.      * @returns {Array} of watchers
  111.      */
  112.     getWatchers() {
  113.         return [
  114.             {watch: `section[${this.id}]:deleted`, handler: this.remove},
  115.             {watch: `section[${this.id}]:updated`, handler: this._refreshSection},
  116.             {watch: `course.pageItem:updated`, handler: this._refreshPageItem},
  117.         ];
  118.     }
  120.     /**
  121.      * Get the last CM element of that section.
  122.      *
  123.      * @returns {element|null}
  124.      */
  125.     getLastCm() {
  126.         return this.getElement(this.selectors.CM_LAST);
  127.     }
  129.     /**
  130.      * Update a course index section using the state information.
  131.      *
  132.      * @param {Object} param details the update details.
  133.      * @param {Object} param.element the section element
  134.      */
  135.     _refreshSection({element}) {
  136.         // Update classes.
  137.         const sectionItem = this.getElement(this.selectors.SECTION_ITEM);
  138.         sectionItem.classList.toggle(this.classes.SECTIONHIDDEN, !element.visible);
  139.         sectionItem.classList.toggle(this.classes.RESTRICTIONS, element.hasrestrictions ?? false);
  140.         this.element.classList.toggle(this.classes.SECTIONCURRENT, element.current);
  141.         this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);
  142.         this.element.classList.toggle(this.classes.LOCKED, element.locked ?? false);
  143.         this.locked = element.locked;
  144.         // Update title.
  145.         this.getElement(this.selectors.SECTION_TITLE).innerHTML = element.title;
  146.     }
  148.     /**
  149.      * Handle a page item update.
  150.      *
  151.      * @param {Object} details the update details
  152.      * @param {Object} details.state the state data.
  153.      * @param {Object} details.element the course state data.
  154.      */
  155.     _refreshPageItem({element, state}) {
  156.         if (!element.pageItem) {
  157.             return;
  158.         }
  160.         const containsPageItem = this._isPageItemInThisSection(element.pageItem);
  162.         if (!containsPageItem || this._isParentSectionIndexCollapsed(state)) {
  163.             this.pageItem = false;
  164.             this.getElement(this.selectors.SECTION_ITEM).classList.remove(this.classes.PAGEITEM);
  165.             return;
  166.         }
  168.         const section = state.section.get(this.id);
  169.         if (section.indexcollapsed && !element.pageItem?.isStatic) {
  170.             this.pageItem = containsPageItem;
  171.         } else {
  172.             this.pageItem = (element.pageItem.type == 'section' && element.pageItem.id == this.id);
  173.         }
  174.         const sectionItem = this.getElement(this.selectors.SECTION_ITEM);
  175.         sectionItem.classList.toggle(this.classes.PAGEITEM, this.pageItem ?? false);
  176.         if (this.pageItem && !this.reactive.isEditing) {
  177.             this.element.scrollIntoView({block: "nearest"});
  178.         }
  179.     }
  181.     /**
  182.      * Check if the page item is inside this section.
  183.      *
  184.      * @private
  185.      * @param {Object} pageItem
  186.      * @param {Object} pageItem.sectionId the current page item section id.
  187.      * @returns {boolean}
  188.      */
  189.     _isPageItemInThisSection(pageItem) {
  190.         if (pageItem.sectionId == this.id) {
  191.             return true;
  192.         }
  193.         // Check for any possible subsections.
  194.         const subsection = this.element.querySelector(`${this.selectors.SECTION}[data-id="${pageItem.sectionId}"]`);
  195.         if (subsection) {
  196.             return true;
  197.         }
  198.         return false;
  199.     }
  201.     /**
  202.      * Check if the parent section index is collapsed.
  203.      *
  204.      * @private
  205.      * @param {Object} state the current state
  206.      * @returns {boolean|null} null if no parent section is found.
  207.      */
  208.     _isParentSectionIndexCollapsed(state) {
  209.         const parentElement = this.element.parentElement.closest(this.selectors.SECTION);
  210.         if (!parentElement || !parentElement.dataset.id) {
  211.             return null;
  212.         }
  213.         const parentSection = state.section.get(parentElement.dataset.id);
  214.         return !!parentSection.indexcollapsed;
  215.     }
  217.     /**
  218.      * Overridden version of the component addOverlay async method.
  219.      *
  220.      * The course index is not compatible with overlay elements.
  221.      */
  222.     async addOverlay() {
  223.         this.element.classList.add(this.classes.OVERLAYBORDERS);
  224.     }
  226.     /**
  227.      * Overridden version of the component removeOverlay.
  228.      *
  229.      * The course index is not compatible with overlay elements.
  230.      */
  231.     removeOverlay() {
  232.         this.element.classList.remove(this.classes.OVERLAYBORDERS);
  233.     }
  234. }