Proyectos de Subversion Moodle

Rev

Rev 11 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 11 Rev 1441
Línea 21... Línea 21...
21 
 * @copyright  2021 Ferran Recio <ferran@moodle.com>
 21 
 * @copyright  2021 Ferran Recio <ferran@moodle.com>
22 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 22 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23 
 */
 23 
 */
Línea 24... Línea 24...
24 
 
 24 
 
- 
 
 25 
import {BaseComponent} from 'core/reactive';
25 
import {BaseComponent} from 'core/reactive';
 26 
import Collapse from 'theme_boost/bootstrap/collapse';
26 
import {getCurrentCourseEditor} from 'core_courseformat/courseeditor';
 - 
 
27 
import jQuery from 'jquery';
 27 
import {getCurrentCourseEditor} from 'core_courseformat/courseeditor';
- 
 
 28 
import ContentTree from 'core_courseformat/local/courseeditor/contenttree';
Línea 28... Línea 29...
28 
import ContentTree from 'core_courseformat/local/courseeditor/contenttree';
 29 
import log from "core/log";
Línea 29... Línea 30...
29 
 
 30 
 
30 
export default class Component extends BaseComponent {
 31 
export default class Component extends BaseComponent {
Línea 39... Línea 40...
39 
        this.selectors = {
 40 
        this.selectors = {
40 
            SECTION: `[data-for='section']`,
 41 
            SECTION: `[data-for='section']`,
41 
            SECTION_CMLIST: `[data-for='cmlist']`,
 42 
            SECTION_CMLIST: `[data-for='cmlist']`,
42 
            CM: `[data-for='cm']`,
 43 
            CM: `[data-for='cm']`,
43 
            TOGGLER: `[data-action="togglecourseindexsection"]`,
 44 
            TOGGLER: `[data-action="togglecourseindexsection"]`,
44 
            COLLAPSE: `[data-toggle="collapse"]`,
 45 
            COLLAPSE: `[data-bs-toggle="collapse"]`,
45 
            DRAWER: `.drawer`,
 46 
            DRAWER: `.drawer`,
46 
        };
 47 
        };
47 
        // Default classes to toggle on refresh.
 48 
        // Default classes to toggle on refresh.
48 
        this.classes = {
 49 
        this.classes = {
49 
            SECTIONHIDDEN: 'dimmed',
 50 
            SECTIONHIDDEN: 'dimmed',
Línea 63... Línea 64...
63 
     * @param {element|string} target the DOM main element or its ID
 64 
     * @param {element|string} target the DOM main element or its ID
64 
     * @param {object} selectors optional css selector overrides
 65 
     * @param {object} selectors optional css selector overrides
65 
     * @return {Component}
 66 
     * @return {Component}
66 
     */
 67 
     */
67 
    static init(target, selectors) {
 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 
        }
68 
        return new this({
 75 
        return new this({
69 
            element: document.getElementById(target),
 76 
            element,
70 
            reactive: getCurrentCourseEditor(),
 77 
            reactive: getCurrentCourseEditor(),
71 
            selectors,
 78 
            selectors,
72 
        });
 79 
        });
73 
    }
 80 
    }
Línea 127... Línea 134...
127 
 
 134 
 
Línea 128... Línea 135...
128 
        if (sectionlink || isChevron) {
 135 
        if (sectionlink || isChevron) {
129 
 
 136 
 
130 
            const section = event.target.closest(this.selectors.SECTION);
 137 
            const section = event.target.closest(this.selectors.SECTION);
- 
 
 138 
            const toggler = section.querySelector(this.selectors.COLLAPSE);
- 
 
 139 
            let isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;
- 
 
 140 
            // If the click was on the chevron, Bootstrap already toggled the section before this event.
- 
 
 141 
            if (isChevron) {
Línea 131... Línea 142...
131 
            const toggler = section.querySelector(this.selectors.COLLAPSE);
 142 
                isCollapsed = !isCollapsed;
132 
            const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;
 143 
            }
133 
 
 144 
 
134 
            // Update the state.
 145 
            // Update the state.
Línea 188... Línea 199...
188 
 
 199 
 
189 
        if (forceValue === undefined) {
 200 
        if (forceValue === undefined) {
190 
            forceValue = (element.indexcollapsed) ? false : true;
 201 
            forceValue = (element.indexcollapsed) ? false : true;
Línea 191... Línea 202...
191 
        }
 202 
        }
192 
 
 - 
 
193 
        // Course index is based on Bootstrap 4 collapsibles. To collapse them we need jQuery to
 203 
 
194 
        // interact with collapsibles methods. Hopefully, this will change in Bootstrap 5 because
 204 
        if (forceValue) {
195 
        // it does not require jQuery anymore (when MDL-71979 is integrated).
 205 
            Collapse.getOrCreateInstance(collapsible, {toggle: false}).show();
- 
 
 206 
        } else {
196 
        const togglerValue = (forceValue) ? 'show' : 'hide';
 207 
            Collapse.getOrCreateInstance(collapsible, {toggle: false}).hide();
Línea 197... Línea 208...
197 
        jQuery(collapsible).collapse(togglerValue);
 208 
        }
198 
    }
 209 
    }
199 
 
 210 
 
Línea 298... Línea 309...
298 
     * @param {Object} param.element
 309 
     * @param {Object} param.element
299 
     */
 310 
     */
300 
    _refreshSectionCmlist({element}) {
 311 
    _refreshSectionCmlist({element}) {
301 
        const cmlist = element.cmlist ?? [];
 312 
        const cmlist = element.cmlist ?? [];
302 
        const listparent = this.getElement(this.selectors.SECTION_CMLIST, element.id);
 313 
        const listparent = this.getElement(this.selectors.SECTION_CMLIST, element.id);
- 
 
 314 
        if (!listparent) {
- 
 
 315 
            return;
- 
 
 316 
        }
303 
        this._fixOrder(listparent, cmlist, this.cms);
 317 
        this._fixOrder(listparent, cmlist, this.cms);
304 
    }
 318 
    }
Línea 305... Línea 319...
305 
 
 319 
 
306 
    /**
 320 
    /**
Línea 336... Línea 350...
336 
        // Move the elements in order at the beginning of the list.
 350 
        // Move the elements in order at the beginning of the list.
337 
        neworder.forEach((itemid, index) => {
 351 
        neworder.forEach((itemid, index) => {
338 
            const item = allitems[itemid];
 352 
            const item = allitems[itemid];
339 
            // Get the current element at that position.
 353 
            // Get the current element at that position.
340 
            const currentitem = container.children[index];
 354 
            const currentitem = container.children[index];
341 
            if (currentitem === undefined) {
 355 
            if (currentitem === undefined && item != undefined) {
342 
                container.append(item);
 356 
                container.append(item);
343 
                return;
 357 
                return;
344 
            }
 358 
            }
345 
            if (currentitem !== item && item) {
 359 
            if (currentitem !== item && item) {
346 
                container.insertBefore(item, currentitem);
 360 
                container.insertBefore(item, currentitem);