course/format/amd/src/local/courseindex/cm.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 cm component.
  18.  *
  19.  * This component is used to control specific course modules interactions like drag and drop.
  20.  *
  21.  * @module     core_courseformat/local/courseindex/cm
  22.  * @class      core_courseformat/local/courseindex/cm
  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 DndCmItem from 'core_courseformat/local/courseeditor/dndcmitem';
  28. import Templates from 'core/templates';
  29. import Prefetch from 'core/prefetch';
  30. import Config from 'core/config';
  31. import Pending from "core/pending";
  32. import log from "core/log";
  34. // Prefetch the completion icons template.
  35. const completionTemplate = 'core_courseformat/local/courseindex/cmcompletion';
  36. Prefetch.prefetchTemplate(completionTemplate);
  38. export default class Component extends DndCmItem {
  40.     /**
  41.      * Constructor hook.
  42.      */
  43.     create() {
  44.         // Optional component name for debugging.
  45.         this.name = 'courseindex_cm';
  46.         // Default query selectors.
  47.         this.selectors = {
  48.             CM_NAME: `[data-for='cm_name']`,
  49.             CM_COMPLETION: `[data-for='cm_completion']`,
  50.         };
  51.         // Default classes to toggle on refresh.
  52.         this.classes = {
  53.             CMHIDDEN: 'dimmed',
  54.             LOCKED: 'editinprogress',
  55.             RESTRICTIONS: 'restrictions',
  56.             PAGEITEM: 'pageitem',
  57.             INDENTED: 'indented',
  58.         };
  59.         // We need our id to watch specific events.
  60.         this.id = this.element.dataset.id;
  61.     }
  63.     /**
  64.      * Static method to create a component instance form the mustache template.
  65.      *
  66.      * @param {element|string} target the DOM main element or its ID
  67.      * @param {object} selectors optional css selector overrides
  68.      * @return {Component}
  69.      */
  70.     static init(target, selectors) {
  71.         let element = document.querySelector(target);
  72.         // TODO Remove this if condition as part of MDL-83851.
  73.         if (!element) {
  74.             log.debug('Init component with id is deprecated, use a query selector instead.');
  75.             element = document.getElementById(target);
  76.         }
  77.         return new this({
  78.             element,
  79.             selectors,
  80.         });
  81.     }
  83.     /**
  84.      * Initial state ready method.
  85.      *
  86.      * @param {Object} state the course state.
  87.      */
  88.     stateReady(state) {
  89.         this.configDragDrop(this.id);
  90.         const cm = state.cm.get(this.id);
  91.         const course = state.course;
  92.         // Refresh completion icon.
  93.         this._refreshCompletion({
  94.             state,
  95.             element: cm,
  96.         });
  97.         const url = new URL(window.location.href);
  98.         const anchor = url.hash.replace('#', '');
  99.         // Check if the current url is the cm url.
  100.         if (window.location.href == cm.url
  101.             || (window.location.href.includes(course.baseurl) && anchor == cm.anchor)
  102.         ) {
  103.             this.element.scrollIntoView({block: "center"});
  104.         }
  105.         // Check if this we are displaying this activity page.
  106.         if (Config.contextid != Config.courseContextId && Config.contextInstanceId == this.id) {
  107.             this.reactive.dispatch('setPageItem', 'cm', this.id, true);
  108.             this.element.scrollIntoView({block: "center"});
  109.         }
  110.         // Add anchor logic if the element is not user visible or the element hasn't URL.
  111.         if (!cm.uservisible || !cm.url) {
  112.             const element = this.getElement(this.selectors.CM_NAME);
  113.             this.addEventListener(
  114.                 element,
  115.                 'click',
  116.                 this._activityAnchor,
  117.             );
  118.             // If the element is not user visible we also need to update the anchor link including the section page.
  119.             if (!document.getElementById(cm.anchor)) {
  120.                 element.setAttribute('href', this._getActivitySectionURL(cm));
  121.             }
  122.         }
  123.     }
  125.     /**
  126.      * Component watchers.
  127.      *
  128.      * @returns {Array} of watchers
  129.      */
  130.     getWatchers() {
  131.         return [
  132.             {watch: `cm[${this.id}]:deleted`, handler: this.remove},
  133.             {watch: `cm[${this.id}]:updated`, handler: this._refreshCm},
  134.             {watch: `cm[${this.id}].completionstate:updated`, handler: this._refreshCompletion},
  135.             {watch: `course.pageItem:updated`, handler: this._refreshPageItem},
  136.         ];
  137.     }
  139.     /**
  140.      * Update a course index cm using the state information.
  141.      *
  142.      * @param {object} param
  143.      * @param {Object} param.element details the update details.
  144.      */
  145.     _refreshCm({element}) {
  146.         // Update classes.
  147.         this.element.classList.toggle(this.classes.CMHIDDEN, !element.visible);
  148.         this.getElement(this.selectors.CM_NAME).innerHTML = element.name;
  149.         this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);
  150.         this.element.classList.toggle(this.classes.LOCKED, element.locked ?? false);
  151.         this.element.classList.toggle(this.classes.RESTRICTIONS, element.hascmrestrictions ?? false);
  152.         this.element.classList.toggle(this.classes.INDENTED, element.indent);
  153.         this.locked = element.locked;
  154.     }
  156.     /**
  157.      * Handle a page item update.
  158.      *
  159.      * @param {Object} details the update details
  160.      * @param {Object} details.element the course state data.
  161.      */
  162.     _refreshPageItem({element}) {
  163.         if (!element.pageItem) {
  164.             return;
  165.         }
  166.         const isPageId = (element.pageItem.type == 'cm' && element.pageItem.id == this.id);
  167.         this.element.classList.toggle(this.classes.PAGEITEM, isPageId);
  168.         if (isPageId && !this.reactive.isEditing) {
  169.             this.element.scrollIntoView({block: "nearest"});
  170.         }
  171.     }
  173.     /**
  174.      * Update the activity completion icon.
  175.      *
  176.      * @param {Object} details the update details
  177.      * @param {Object} details.state the state data
  178.      * @param {Object} details.element the element data
  179.      */
  180.     async _refreshCompletion({state, element}) {
  181.         // No completion icons are displayed in edit mode.
  182.         if (this.reactive.isEditing || !element.istrackeduser) {
  183.             return;
  184.         }
  185.         // Check if the completion value has changed.
  186.         const completionElement = this.getElement(this.selectors.CM_COMPLETION);
  187.         if (!completionElement || completionElement.dataset.value == element.completionstate) {
  188.             return;
  189.         }
  191.         // Collect section information from the state.
  192.         const exporter = this.reactive.getExporter();
  193.         const data = exporter.cmCompletion(state, element);
  195.         const {html, js} = await Templates.renderForPromise(completionTemplate, data);
  196.         Templates.replaceNode(completionElement, html, js);
  197.     }
  199.     /**
  200.      * The activity anchor event.
  201.      *
  202.      * @param {Event} event
  203.      */
  204.     _activityAnchor(event) {
  205.         const cm = this.reactive.get('cm', this.id);
  206.         // If the user cannot access the element but the element is present in the page
  207.         // the new url should be an anchor link.
  208.         const element = document.getElementById(cm.anchor);
  209.         if (element) {
  210.             // Make sure the section is expanded.
  211.             this.reactive.dispatch('sectionContentCollapsed', [cm.sectionid], false);
  212.             // Marc the element as page item once the event is handled.
  213.             const pendingAnchor = new Pending(`courseformat/activity:openAnchor`);
  214.             setTimeout(() => {
  215.                 this.reactive.dispatch('setPageItem', 'cm', cm.id);
  216.                 pendingAnchor.resolve();
  217.             }, 50);
  218.             return;
  219.         }
  220.         // If the element is not present in the page we need to go to the specific section.
  221.         event.preventDefault();
  222.         window.location = this._getActivitySectionURL(cm);
  223.     }
  225.     /**
  226.      * Get the anchor link in section page for the cm.
  227.      *
  228.      * @param {Object} cm the course module data.
  229.      * @return {String} the anchor link.
  230.      */
  231.     _getActivitySectionURL(cm) {
  232.         let section = this.reactive.get('section', cm.sectionid);
  234.         // If the section is delegated get its parent section if it has one.
  235.         if (section.component && section.parentsectionid) {
  236.             section = this.reactive.get('section', section.parentsectionid);
  237.         }
  239.         if (!section) {
  240.             return '#';
  241.         }
  243.         const sectionurl = section.sectionurl.split("#")[0];
  244.         return `${sectionurl}#${cm.anchor}`;
  245.     }
  246. }