Proyectos de Subversion Moodle

Rev

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

Rev 11 Rev 1441
Línea 24... Línea 24...
24 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 24 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
25 
 */
 25 
 */
Línea 26... Línea 26...
26 
 
 26 
 
27 
import SectionTitle from 'core_courseformat/local/courseindex/sectiontitle';
 27 
import SectionTitle from 'core_courseformat/local/courseindex/sectiontitle';
- 
 
 28 
import DndSection from 'core_courseformat/local/courseeditor/dndsection';
Línea 28... Línea 29...
28 
import DndSection from 'core_courseformat/local/courseeditor/dndsection';
 29 
import log from "core/log";
Línea 29... Línea 30...
29 
 
 30 
 
30 
export default class Component extends DndSection {
 31 
export default class Component extends DndSection {
Línea 35... Línea 36...
35 
    create() {
 36 
    create() {
36 
        // Optional component name for debugging.
 37 
        // Optional component name for debugging.
37 
        this.name = 'courseindex_section';
 38 
        this.name = 'courseindex_section';
38 
        // Default query selectors.
 39 
        // Default query selectors.
39 
        this.selectors = {
 40 
        this.selectors = {
- 
 
 41 
            SECTION: `[data-for='section']`,
40 
            SECTION_ITEM: `[data-for='section_item']`,
 42 
            SECTION_ITEM: `[data-for='section_item']`,
41 
            SECTION_TITLE: `[data-for='section_title']`,
 43 
            SECTION_TITLE: `[data-for='section_title']`,
42 
            CM_LAST: `[data-for="cm"]:last-child`,
 44 
            CM_LAST: `[data-for="cm"]:last-child`,
- 
 
 45 
            DND_ALLOWED: `[data-courseindexdndallowed='true']`,
43 
        };
 46 
        };
44 
        // Default classes to toggle on refresh.
 47 
        // Default classes to toggle on refresh.
45 
        this.classes = {
 48 
        this.classes = {
46 
            SECTIONHIDDEN: 'dimmed',
 49 
            SECTIONHIDDEN: 'dimmed',
47 
            SECTIONCURRENT: 'current',
 50 
            SECTIONCURRENT: 'current',
Línea 62... Línea 65...
62 
     * @param {string} target the DOM main element or its ID
 65 
     * @param {string} target the DOM main element or its ID
63 
     * @param {object} selectors optional css selector overrides
 66 
     * @param {object} selectors optional css selector overrides
64 
     * @return {Component}
 67 
     * @return {Component}
65 
     */
 68 
     */
66 
    static init(target, selectors) {
 69 
    static init(target, selectors) {
- 
 
 70 
        let element = document.querySelector(target);
- 
 
 71 
        // TODO Remove this if condition as part of MDL-83851.
- 
 
 72 
        if (!element) {
- 
 
 73 
            log.debug('Init component with id is deprecated, use a query selector instead.');
- 
 
 74 
            element = document.getElementById(target);
- 
 
 75 
        }
67 
        return new this({
 76 
        return new this({
68 
            element: document.getElementById(target),
 77 
            element,
69 
            selectors,
 78 
            selectors,
70 
        });
 79 
        });
71 
    }
 80 
    }
Línea 72... Línea 81...
72 
 
 81 
 
Línea 77... Línea 86...
77 
     */
 86 
     */
78 
    stateReady(state) {
 87 
    stateReady(state) {
79 
        this.configState(state);
 88 
        this.configState(state);
80 
        const sectionItem = this.getElement(this.selectors.SECTION_ITEM);
 89 
        const sectionItem = this.getElement(this.selectors.SECTION_ITEM);
81 
        // Drag and drop is only available for components compatible course formats.
 90 
        // Drag and drop is only available for components compatible course formats.
82 
        if (this.reactive.isEditing && this.reactive.supportComponents) {
 91 
        if (this.reactive.isEditing && this.reactive.supportComponents && document.querySelector(this.selectors.DND_ALLOWED)) {
83 
            // Init the inner dragable element passing the full section as affected region.
 92 
            // Init the inner dragable element passing the full section as affected region.
84 
            const titleitem = new SectionTitle({
 93 
            const titleitem = new SectionTitle({
85 
                ...this,
 94 
                ...this,
86 
                element: sectionItem,
 95 
                element: sectionItem,
87 
                fullregion: this.element,
 96 
                fullregion: this.element,
Línea 146... Línea 155...
146 
     */
 155 
     */
147 
    _refreshPageItem({element, state}) {
 156 
    _refreshPageItem({element, state}) {
148 
        if (!element.pageItem) {
 157 
        if (!element.pageItem) {
149 
            return;
 158 
            return;
150 
        }
 159 
        }
- 
 
 160 
 
151 
        if (element.pageItem.sectionId !== this.id && this.isPageItem || element.pageItem.type !== 'section') {
 161 
        const containsPageItem = this._isPageItemInThisSection(element.pageItem);
- 
 
 162 
 
- 
 
 163 
        if (!containsPageItem || this._isParentSectionIndexCollapsed(state)) {
152 
            this.pageItem = false;
 164 
            this.pageItem = false;
153 
            this.getElement(this.selectors.SECTION_ITEM).classList.remove(this.classes.PAGEITEM);
 165 
            this.getElement(this.selectors.SECTION_ITEM).classList.remove(this.classes.PAGEITEM);
154 
            return;
 166 
            return;
155 
        }
 167 
        }
- 
 
 168 
 
156 
        const section = state.section.get(this.id);
 169 
        const section = state.section.get(this.id);
157 
        if (section.indexcollapsed && !element.pageItem?.isStatic) {
 170 
        if (section.indexcollapsed && !element.pageItem?.isStatic) {
158 
            this.pageItem = (element.pageItem?.sectionId == this.id);
 171 
            this.pageItem = containsPageItem;
159 
        } else {
 172 
        } else {
160 
            this.pageItem = (element.pageItem.type == 'section' && element.pageItem.id == this.id);
 173 
            this.pageItem = (element.pageItem.type == 'section' && element.pageItem.id == this.id);
161 
        }
 174 
        }
162 
        const sectionItem = this.getElement(this.selectors.SECTION_ITEM);
 175 
        const sectionItem = this.getElement(this.selectors.SECTION_ITEM);
163 
        sectionItem.classList.toggle(this.classes.PAGEITEM, this.pageItem ?? false);
 176 
        sectionItem.classList.toggle(this.classes.PAGEITEM, this.pageItem ?? false);
Línea 165... Línea 178...
165 
            this.element.scrollIntoView({block: "nearest"});
 178 
            this.element.scrollIntoView({block: "nearest"});
166 
        }
 179 
        }
167 
    }
 180 
    }
Línea 168... Línea 181...
168 
 
 181 
 
- 
 
 182 
    /**
- 
 
 183 
     * Check if the page item is inside this section.
- 
 
 184 
     *
- 
 
 185 
     * @private
- 
 
 186 
     * @param {Object} pageItem
- 
 
 187 
     * @param {Object} pageItem.sectionId the current page item section id.
- 
 
 188 
     * @returns {boolean}
- 
 
 189 
     */
- 
 
 190 
    _isPageItemInThisSection(pageItem) {
- 
 
 191 
        if (pageItem.sectionId == this.id) {
- 
 
 192 
            return true;
- 
 
 193 
        }
- 
 
 194 
        // Check for any possible subsections.
- 
 
 195 
        const subsection = this.element.querySelector(`${this.selectors.SECTION}[data-id="${pageItem.sectionId}"]`);
- 
 
 196 
        if (subsection) {
- 
 
 197 
            return true;
- 
 
 198 
        }
- 
 
 199 
        return false;
- 
 
 200 
    }
- 
 
 201 
 
- 
 
 202 
    /**
- 
 
 203 
     * Check if the parent section index is collapsed.
- 
 
 204 
     *
- 
 
 205 
     * @private
- 
 
 206 
     * @param {Object} state the current state
- 
 
 207 
     * @returns {boolean|null} null if no parent section is found.
- 
 
 208 
     */
- 
 
 209 
    _isParentSectionIndexCollapsed(state) {
- 
 
 210 
        const parentElement = this.element.parentElement.closest(this.selectors.SECTION);
- 
 
 211 
        if (!parentElement || !parentElement.dataset.id) {
- 
 
 212 
            return null;
- 
 
 213 
        }
- 
 
 214 
        const parentSection = state.section.get(parentElement.dataset.id);
- 
 
 215 
        return !!parentSection.indexcollapsed;
- 
 
 216 
    }
- 
 
 217 
 
169 
    /**
 218 
    /**
170 
     * Overridden version of the component addOverlay async method.
 219 
     * Overridden version of the component addOverlay async method.
171 
     *
 220 
     *
172 
     * The course index is not compatible with overlay elements.
 221 
     * The course index is not compatible with overlay elements.
173 
     */
 222 
     */