WebSVN – Moodle – Diff – /course/format/amd/src/local/content.js

  * @copyright  2020 Ferran Recio <ferran@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
+import {BaseComponent} from 'core/reactive';
-import {BaseComponent} from 'core/reactive';
+import Collapse from 'theme_boost/bootstrap/collapse';
-import {debounce} from 'core/utils';
+import {throttle, debounce} from 'core/utils';
 import {getCurrentCourseEditor} from 'core_courseformat/courseeditor';
 import Config from 'core/config';
 import inplaceeditable from 'core/inplace_editable';
 import Section from 'core_courseformat/local/content/section';
 import CmItem from 'core_courseformat/local/content/section/cmitem';
 import Fragment from 'core/fragment';
 import Templates from 'core/templates';
 import DispatchActions from 'core_courseformat/local/content/actions';
-import * as CourseEvents from 'core_course/events';
-// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.
-import jQuery from 'jquery';
+import * as CourseEvents from 'core_course/events';
+import Pending from 'core/pending';
-import Pending from 'core/pending';
+import log from "core/log";
 export default class Component extends BaseComponent {
             SECTION_ITEM: `[data-for='section_title']`,
             SECTION_CMLIST: `[data-for='cmlist']`,
             COURSE_SECTIONLIST: `[data-for='course_sectionlist']`,
             CM: `[data-for='cmitem']`,
             TOGGLER: `[data-action="togglecoursecontentsection"]`,
-            COLLAPSE: `[data-toggle="collapse"]`,
+            COLLAPSE: `[data-bs-toggle="collapse"]`,
             TOGGLEALL: `[data-toggle="toggleall"]`,
             // Formats can override the activity tag but a default one is needed to create new elements.
             ACTIVITYTAG: 'li',
             SECTIONTAG: 'li',
         };
         this.dettachedCms = {};
         this.dettachedSections = {};
         // Index of sections and cms components.
         this.sections = {};
         this.cms = {};
-        // The page section return.
+        // The section number and ID of the displayed page.
-        this.sectionReturn = descriptor.sectionReturn ?? null;
+        this.sectionReturn = descriptor?.sectionReturn ?? null;
+        this.pageSectionId = descriptor?.pageSectionId ?? null;
         this.debouncedReloads = new Map();
+    }
     /**
      * Static method to create a component instance form the mustahce template.
+     *
      * @param {string} target the DOM main element or its ID
      * @param {object} selectors optional css selector overrides
+     * @param {number} sectionReturn the section number of the displayed page
-     * @param {number} sectionReturn the content section return
+     * @param {number} pageSectionId the section ID of the displayed page
      * @return {Component}
      */
+    static init(target, selectors, sectionReturn, pageSectionId) {
+        let element = document.querySelector(target);
+        // TODO Remove this if condition as part of MDL-83851.
+        if (!element) {
+            log.debug('Init component with id is deprecated, use a query selector instead.');
+            element = document.getElementById(target);
     static init(target, selectors, sectionReturn) {
         return new Component({
-            element: document.getElementById(target),
+            element,
             reactive: getCurrentCourseEditor(),
             selectors,
+            sectionReturn,
-            sectionReturn,
+            pageSectionId,
         });
+    }
         // Capture page scroll to update page item.
         this.addEventListener(
             document,
             "scroll",
-            this._scrollHandler
+            throttle(this._scrollHandler.bind(this), 50)
         );
+    }
         if (sectionlink || isChevron) {
             const section = event.target.closest(this.selectors.SECTION);
+            const toggler = section.querySelector(this.selectors.COLLAPSE);
+            let isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;
+            // If the click was on the chevron, Bootstrap already toggled the section before this event.
+            if (isChevron) {
-            const toggler = section.querySelector(this.selectors.COLLAPSE);
+                isCollapsed = !isCollapsed;
             const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;
             const sectionId = section.getAttribute('data-id');
      * @returns {Array} of watchers
      */
     getWatchers() {
         // Section return is a global page variable but most formats define it just before start printing
         // the course content. This is the reason why we define this page setting here.
-        this.reactive.sectionReturn = this.sectionReturn;
+        this.reactive.sectionReturn = this?.sectionReturn ?? null;
+        this.reactive.pageSectionId = this?.pageSectionId ?? null;
         // Check if the course format is compatible with reactive components.
         if (!this.reactive.supportComponents) {
             return [];
             cmNameFor.textContent = element.name;
         });
+    }
     /**
-     * Update section collapsed state via bootstrap 4 if necessary.
+     * Update section collapsed state via bootstrap if necessary.
      *
-     * Formats that do not use bootstrap 4 must override this method in order to keep the section
+     * Formats that do not use bootstrap must override this method in order to keep the section
      * toggling working.
+     *
      * @param {object} args
      * @param {Object} args.state The state data
             collapsibleId = collapsibleId.replace('#', '');
             const collapsible = document.getElementById(collapsibleId);
             if (!collapsible) {
                 return;
+            }
-            // Course index is based on Bootstrap 4 collapsibles. To collapse them we need jQuery to
+            if (element.contentcollapsed) {
-            // interact with collapsibles methods. Hopefully, this will change in Bootstrap 5 because
+                Collapse.getOrCreateInstance(collapsible, {toggle: false}).hide();
-            // it does not require jQuery anymore (when MDL-71979 is integrated).
+            } else {
-            jQuery(collapsible).collapse(element.contentcollapsed ? 'hide' : 'show');
+                Collapse.getOrCreateInstance(collapsible, {toggle: false}).show();
+            }
+        }
         this._refreshAllSectionsToggler(state);
     _refreshAllSectionsToggler(state) {
         const target = this.getElement(this.selectors.TOGGLEALL);
         if (!target) {
             return;
+        }
+        const sectionIsCollapsible = this._getCollapsibleSections();
         // Check if we have all sections collapsed/expanded.
         let allcollapsed = true;
         let allexpanded = true;
         state.section.forEach(
             section => {
+                if (sectionIsCollapsible[section.id]) {
-                allcollapsed = allcollapsed && section.contentcollapsed;
+                    allcollapsed = allcollapsed && section.contentcollapsed;
-                allexpanded = allexpanded && !section.contentcollapsed;
+                    allexpanded = allexpanded && !section.contentcollapsed;
+                }
+            }
         );
         if (allcollapsed) {
             target.classList.add(this.classes.COLLAPSED);
             target.setAttribute('aria-expanded', false);
             target.setAttribute('aria-expanded', true);
+        }
+    }
+    /**
+     * Find collapsible sections.
+     */
+    _getCollapsibleSections() {
+        let sectionIsCollapsible = {};
+        const togglerDoms = this.element.querySelectorAll(this.selectors.COLLAPSE);
+        for (let togglerDom of togglerDoms) {
+            const headerDom = togglerDom.closest(this.selectors.SECTION_ITEM);
+            if (headerDom) {
+                sectionIsCollapsible[headerDom.dataset.id] = true;
+            }
+        }
+        return sectionIsCollapsible;
+    }
     /**
      * Setup the component to start a transaction.
+     *
      * Some of the course actions replaces the current DOM element with a new one before updating the
      * course state. This means the component cannot preload any index properly until the transaction starts.
     /**
      * Refresh a section cm list.
+     *
+     * @param {Object} param
-     * @param {Object} param
+     * @param {Object} param.state the full state object.
      * @param {Object} param.element details the update details.
      */
-    _refreshSectionCmlist({element}) {
+    _refreshSectionCmlist({state, element}) {
         const cmlist = element.cmlist ?? [];
         const section = this.getElement(this.selectors.SECTION, element.id);
         const listparent = section?.querySelector(this.selectors.SECTION_CMLIST);
         // A method to create a fake element to be replaced when the item is ready.
         const createCm = this._createCmItem.bind(this);
         if (listparent) {
             this._fixOrder(listparent, cmlist, this.selectors.CM, this.dettachedCms, createCm);
+        }
         this._refreshAllSectionsToggler(state);
+    }
     /**
      * Refresh the section list.
+     *
      * @param {Object} param
      * @param {Object} param.state the full state object.
      */
     _refreshCourseSectionlist({state}) {
         // If we have a section return means we only show a single section so no need to fix order.
-        if (this.reactive.sectionReturn !== null) {
+        if ((this.reactive?.sectionReturn ?? this.reactive?.pageSectionId) !== null) {
             return;
+        }
         const sectionlist = this.reactive.getExporter().listedSectionIds(state);
         const listparent = this.getElement(this.selectors.COURSE_SECTIONLIST);
         // For now section cannot be created at a frontend level.
         const createSection = this._createSectionItem.bind(this);
         if (listparent) {
+            this._fixOrder(listparent, sectionlist, this.selectors.SECTION, this.dettachedSections, createSection);
             this._fixOrder(listparent, sectionlist, this.selectors.SECTION, this.dettachedSections, createSection);
         this._refreshAllSectionsToggler(state);
+    }
                 'cmitem',
                 Config.courseContextId,
+                {
                     id: cmId,
                     courseid: Config.courseId,
-                    sr: this.reactive.sectionReturn ?? null,
+                    sr: this.reactive?.sectionReturn ?? null,
+                    pagesectionid: this.reactive?.pageSectionId ?? null,
+                }
             );
             promise.then((html, js) => {
                 // Other state change can reload the CM or the section before this one.
                 if (!document.contains(cmitem)) {
                 'section',
                 Config.courseContextId,
+                {
                     id: element.id,
                     courseid: Config.courseId,
-                    sr: this.reactive.sectionReturn ?? null,
+                    sr: this.reactive?.sectionReturn ?? null,
+                    pagesectionid: this.reactive?.pageSectionId ?? null,
+                }
             );
             promise.then((html, js) => {
                 Templates.replaceNode(sectionitem, html, js);
                 this._indexContents();
             if (currentitem !== item) {
                 container.insertBefore(item, currentitem);
+            }
         });
-        // Dndupload add a fake element we need to keep.
-        let dndFakeActivity;
+        // Remove the remaining elements.
-        // Remove the remaining elements.
+        const orphanElements = [];
         while (container.children.length > neworder.length) {
+            const lastchild = container.lastChild;
+            // Any orphan element is always displayed after the listed elements.
-            const lastchild = container.lastChild;
+            // Also, some third-party plugins can use a fake dndupload-preview indicator.
-            if (lastchild?.classList?.contains('dndupload-preview')) {
+            if (lastchild?.classList?.contains('dndupload-preview') || lastchild.dataset?.orphan) {
-                dndFakeActivity = lastchild;
+                orphanElements.push(lastchild);
             } else {
                 dettachedelements[lastchild?.dataset?.id ?? 0] = lastchild;
+            }
             container.removeChild(lastchild);
         }
-        // Restore dndupload fake element.
+        // Restore orphan elements.
-        if (dndFakeActivity) {
+        orphanElements.forEach((element) => {
-            container.append(dndFakeActivity);
+            container.append(element);
         });
+    }

Proyectos de Subversion Moodle

(root)/course/format/amd/src/local/content.js – Rev 11 → 1441