Proyectos de Subversion Moodle

Rev

Rev 1 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

{"version":3,"file":"content.min.js","sources":["../../src/local/content.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Course index main component.\n *\n * @module     core_courseformat/local/content\n * @class      core_courseformat/local/content\n * @copyright  2020 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {BaseComponent} from 'core/reactive';\nimport {debounce} from 'core/utils';\nimport {getCurrentCourseEditor} from 'core_courseformat/courseeditor';\nimport Config from 'core/config';\nimport inplaceeditable from 'core/inplace_editable';\nimport Section from 'core_courseformat/local/content/section';\nimport CmItem from 'core_courseformat/local/content/section/cmitem';\nimport Fragment from 'core/fragment';\nimport Templates from 'core/templates';\nimport DispatchActions from 'core_courseformat/local/content/actions';\nimport * as CourseEvents from 'core_course/events';\n// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.\nimport jQuery from 'jquery';\nimport Pending from 'core/pending';\n\nexport default class Component extends BaseComponent {\n\n    /**\n     * Constructor hook.\n     *\n     * @param {Object} descriptor the component descriptor\n     */\n    create(descriptor) {\n        // Optional component name for debugging.\n        this.name = 'course_format';\n        // Default query selectors.\n        this.selectors = {\n            SECTION: `[data-for='section']`,\n            SECTION_ITEM: `[data-for='section_title']`,\n            SECTION_CMLIST: `[data-for='cmlist']`,\n            COURSE_SECTIONLIST: `[data-for='course_sectionlist']`,\n            CM: `[data-for='cmitem']`,\n            TOGGLER: `[data-action=\"togglecoursecontentsection\"]`,\n            COLLAPSE: `[data-toggle=\"collapse\"]`,\n            TOGGLEALL: `[data-toggle=\"toggleall\"]`,\n            // Formats can override the activity tag but a default one is needed to create new elements.\n            ACTIVITYTAG: 'li',\n            SECTIONTAG: 'li',\n        };\n        this.selectorGenerators = {\n            cmNameFor: (id) => `[data-cm-name-for='${id}']`,\n            sectionNameFor: (id) => `[data-section-name-for='${id}']`,\n        };\n        // Default classes to toggle on refresh.\n        this.classes = {\n            COLLAPSED: `collapsed`,\n            // Course content classes.\n            ACTIVITY: `activity`,\n            STATEDREADY: `stateready`,\n            SECTION: `section`,\n        };\n        // Array to save dettached elements during element resorting.\n        this.dettachedCms = {};\n        this.dettachedSections = {};\n        // Index of sections and cms components.\n        this.sections = {};\n        this.cms = {};\n        // The page section return.\n        this.sectionReturn = descriptor.sectionReturn ?? null;\n        this.debouncedReloads = new Map();\n    }\n\n    /**\n     * Static method to create a component instance form the mustahce template.\n     *\n     * @param {string} target the DOM main element or its ID\n     * @param {object} selectors optional css selector overrides\n     * @param {number} sectionReturn the content section return\n     * @return {Component}\n     */\n    static init(target, selectors, sectionReturn) {\n        return new Component({\n            element: document.getElementById(target),\n            reactive: getCurrentCourseEditor(),\n            selectors,\n            sectionReturn,\n        });\n    }\n\n    /**\n     * Initial state ready method.\n     *\n     * @param {Object} state the state data\n     */\n    stateReady(state) {\n        this._indexContents();\n        // Activate section togglers.\n        this.addEventListener(this.element, 'click', this._sectionTogglers);\n\n        // Collapse/Expand all sections button.\n        const toogleAll = this.getElement(this.selectors.TOGGLEALL);\n        if (toogleAll) {\n\n            // Ensure collapse menu button adds aria-controls attribute referring to each collapsible element.\n            const collapseElements = this.getElements(this.selectors.COLLAPSE);\n            const collapseElementIds = [...collapseElements].map(element => element.id);\n            toogleAll.setAttribute('aria-controls', collapseElementIds.join(' '));\n\n            this.addEventListener(toogleAll, 'click', this._allSectionToggler);\n            this.addEventListener(toogleAll, 'keydown', e => {\n                // Collapse/expand all sections when Space key is pressed on the toggle button.\n                if (e.key === ' ') {\n                    this._allSectionToggler(e);\n                }\n            });\n            this._refreshAllSectionsToggler(state);\n        }\n\n        if (this.reactive.supportComponents) {\n            // Actions are only available in edit mode.\n            if (this.reactive.isEditing) {\n                new DispatchActions(this);\n            }\n\n            // Mark content as state ready.\n            this.element.classList.add(this.classes.STATEDREADY);\n        }\n\n        // Capture completion events.\n        this.addEventListener(\n            this.element,\n            CourseEvents.manualCompletionToggled,\n            this._completionHandler\n        );\n\n        // Capture page scroll to update page item.\n        this.addEventListener(\n            document,\n            \"scroll\",\n            this._scrollHandler\n        );\n    }\n\n    /**\n     * Setup sections toggler.\n     *\n     * Toggler click is delegated to the main course content element because new sections can\n     * appear at any moment and this way we prevent accidental double bindings.\n     *\n     * @param {Event} event the triggered event\n     */\n    _sectionTogglers(event) {\n        const sectionlink = event.target.closest(this.selectors.TOGGLER);\n        const closestCollapse = event.target.closest(this.selectors.COLLAPSE);\n        // Assume that chevron is the only collapse toggler in a section heading;\n        // I think this is the most efficient way to verify at the moment.\n        const isChevron = closestCollapse?.closest(this.selectors.SECTION_ITEM);\n\n        if (sectionlink || isChevron) {\n\n            const section = event.target.closest(this.selectors.SECTION);\n            const toggler = section.querySelector(this.selectors.COLLAPSE);\n            const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;\n\n            const sectionId = section.getAttribute('data-id');\n            this.reactive.dispatch(\n                'sectionContentCollapsed',\n                [sectionId],\n                !isCollapsed,\n            );\n        }\n    }\n\n    /**\n     * Handle the collapse/expand all sections button.\n     *\n     * Toggler click is delegated to the main course content element because new sections can\n     * appear at any moment and this way we prevent accidental double bindings.\n     *\n     * @param {Event} event the triggered event\n     */\n    _allSectionToggler(event) {\n        event.preventDefault();\n\n        const target = event.target.closest(this.selectors.TOGGLEALL);\n        const isAllCollapsed = target.classList.contains(this.classes.COLLAPSED);\n\n        const course = this.reactive.get('course');\n        this.reactive.dispatch(\n            'sectionContentCollapsed',\n            course.sectionlist ?? [],\n            !isAllCollapsed\n        );\n    }\n\n    /**\n     * Return the component watchers.\n     *\n     * @returns {Array} of watchers\n     */\n    getWatchers() {\n        // Section return is a global page variable but most formats define it just before start printing\n        // the course content. This is the reason why we define this page setting here.\n        this.reactive.sectionReturn = this.sectionReturn;\n\n        // Check if the course format is compatible with reactive components.\n        if (!this.reactive.supportComponents) {\n            return [];\n        }\n        return [\n            // State changes that require to reload some course modules.\n            {watch: `cm.visible:updated`, handler: this._reloadCm},\n            {watch: `cm.stealth:updated`, handler: this._reloadCm},\n            {watch: `cm.sectionid:updated`, handler: this._reloadCm},\n            {watch: `cm.indent:updated`, handler: this._reloadCm},\n            {watch: `cm.groupmode:updated`, handler: this._reloadCm},\n            {watch: `cm.name:updated`, handler: this._refreshCmName},\n            // Update section number and title.\n            {watch: `section.number:updated`, handler: this._refreshSectionNumber},\n            {watch: `section.title:updated`, handler: this._refreshSectionTitle},\n            // Collapse and expand sections.\n            {watch: `section.contentcollapsed:updated`, handler: this._refreshSectionCollapsed},\n            // Sections and cm sorting.\n            {watch: `transaction:start`, handler: this._startProcessing},\n            {watch: `course.sectionlist:updated`, handler: this._refreshCourseSectionlist},\n            {watch: `section.cmlist:updated`, handler: this._refreshSectionCmlist},\n            // Section visibility.\n            {watch: `section.visible:updated`, handler: this._reloadSection},\n            // Reindex sections and cms.\n            {watch: `state:updated`, handler: this._indexContents},\n        ];\n    }\n\n    /**\n     * Update a course module name on the whole page.\n     *\n     * @param {object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshCmName({element}) {\n        // Update classes.\n        // Replace the text content of the cm name.\n        const allCmNamesFor = this.getElements(\n            this.selectorGenerators.cmNameFor(element.id)\n        );\n        allCmNamesFor.forEach((cmNameFor) => {\n            cmNameFor.textContent = element.name;\n        });\n    }\n\n    /**\n     * Update section collapsed state via bootstrap 4 if necessary.\n     *\n     * Formats that do not use bootstrap 4 must override this method in order to keep the section\n     * toggling working.\n     *\n     * @param {object} args\n     * @param {Object} args.state The state data\n     * @param {Object} args.element The element to update\n     */\n    _refreshSectionCollapsed({state, element}) {\n        const target = this.getElement(this.selectors.SECTION, element.id);\n        if (!target) {\n            throw new Error(`Unknown section with ID ${element.id}`);\n        }\n        // Check if it is already done.\n        const toggler = target.querySelector(this.selectors.COLLAPSE);\n        const isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;\n\n        if (element.contentcollapsed !== isCollapsed) {\n            let collapsibleId = toggler.dataset.target ?? toggler.getAttribute(\"href\");\n            if (!collapsibleId) {\n                return;\n            }\n            collapsibleId = collapsibleId.replace('#', '');\n            const collapsible = document.getElementById(collapsibleId);\n            if (!collapsible) {\n                return;\n            }\n\n            // Course index is based on Bootstrap 4 collapsibles. To collapse them we need jQuery to\n            // interact with collapsibles methods. Hopefully, this will change in Bootstrap 5 because\n            // it does not require jQuery anymore (when MDL-71979 is integrated).\n            jQuery(collapsible).collapse(element.contentcollapsed ? 'hide' : 'show');\n        }\n\n        this._refreshAllSectionsToggler(state);\n    }\n\n    /**\n     * Refresh the collapse/expand all sections element.\n     *\n     * @param {Object} state The state data\n     */\n    _refreshAllSectionsToggler(state) {\n        const target = this.getElement(this.selectors.TOGGLEALL);\n        if (!target) {\n            return;\n        }\n        // Check if we have all sections collapsed/expanded.\n        let allcollapsed = true;\n        let allexpanded = true;\n        state.section.forEach(\n            section => {\n                allcollapsed = allcollapsed && section.contentcollapsed;\n                allexpanded = allexpanded && !section.contentcollapsed;\n            }\n        );\n        if (allcollapsed) {\n            target.classList.add(this.classes.COLLAPSED);\n            target.setAttribute('aria-expanded', false);\n        }\n        if (allexpanded) {\n            target.classList.remove(this.classes.COLLAPSED);\n            target.setAttribute('aria-expanded', true);\n        }\n    }\n\n    /**\n     * Setup the component to start a transaction.\n     *\n     * Some of the course actions replaces the current DOM element with a new one before updating the\n     * course state. This means the component cannot preload any index properly until the transaction starts.\n     *\n     */\n    _startProcessing() {\n        // During a section or cm sorting, some elements could be dettached from the DOM and we\n        // need to store somewhare in case they are needed later.\n        this.dettachedCms = {};\n        this.dettachedSections = {};\n    }\n\n    /**\n     * Activity manual completion listener.\n     *\n     * @param {Event} event the custom ecent\n     */\n    _completionHandler({detail}) {\n        if (detail === undefined) {\n            return;\n        }\n        this.reactive.dispatch('cmCompletion', [detail.cmid], detail.completed);\n    }\n\n    /**\n     * Check the current page scroll and update the active element if necessary.\n     */\n    _scrollHandler() {\n        const pageOffset = window.scrollY;\n        const items = this.reactive.getExporter().allItemsArray(this.reactive.state);\n        // Check what is the active element now.\n        let pageItem = null;\n        items.every(item => {\n            const index = (item.type === 'section') ? this.sections : this.cms;\n            if (index[item.id] === undefined) {\n                return true;\n            }\n\n            const element = index[item.id].element;\n            pageItem = item;\n            return pageOffset >= element.offsetTop;\n        });\n        if (pageItem) {\n            this.reactive.dispatch('setPageItem', pageItem.type, pageItem.id);\n        }\n    }\n\n    /**\n     * Update a course section when the section number changes.\n     *\n     * The courseActions module used for most course section tools still depends on css classes and\n     * section numbers (not id). To prevent inconsistencies when a section is moved, we need to refresh\n     * the\n     *\n     * Course formats can override the section title rendering so the frontend depends heavily on backend\n     * rendering. Luckily in edit mode we can trigger a title update using the inplace_editable module.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSectionNumber({element}) {\n        // Find the element.\n        const target = this.getElement(this.selectors.SECTION, element.id);\n        if (!target) {\n            // Job done. Nothing to refresh.\n            return;\n        }\n        // Update section numbers in all data, css and YUI attributes.\n        target.id = `section-${element.number}`;\n        // YUI uses section number as section id in data-sectionid, in principle if a format use components\n        // don't need this sectionid attribute anymore, but we keep the compatibility in case some plugin\n        // use it for legacy purposes.\n        target.dataset.sectionid = element.number;\n        // The data-number is the attribute used by components to store the section number.\n        target.dataset.number = element.number;\n\n        // Update title and title inplace editable, if any.\n        const inplace = inplaceeditable.getInplaceEditable(target.querySelector(this.selectors.SECTION_ITEM));\n        if (inplace) {\n            // The course content HTML can be modified at any moment, so the function need to do some checkings\n            // to make sure the inplace editable still represents the same itemid.\n            const currentvalue = inplace.getValue();\n            const currentitemid = inplace.getItemId();\n            // Unnamed sections must be recalculated.\n            if (inplace.getValue() === '') {\n                // The value to send can be an empty value if it is a default name.\n                if (currentitemid == element.id && (currentvalue != element.rawtitle || element.rawtitle == '')) {\n                    inplace.setValue(element.rawtitle);\n                }\n            }\n        }\n    }\n\n    /**\n     * Update a course section name on the whole page.\n     *\n     * @param {object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSectionTitle({element}) {\n        // Replace the text content of the section name in the whole page.\n        const allSectionNamesFor = document.querySelectorAll(\n            this.selectorGenerators.sectionNameFor(element.id)\n        );\n        allSectionNamesFor.forEach((sectionNameFor) => {\n            sectionNameFor.textContent = element.title;\n        });\n    }\n\n    /**\n     * Refresh a section cm list.\n     *\n     * @param {Object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSectionCmlist({element}) {\n        const cmlist = element.cmlist ?? [];\n        const section = this.getElement(this.selectors.SECTION, element.id);\n        const listparent = section?.querySelector(this.selectors.SECTION_CMLIST);\n        // A method to create a fake element to be replaced when the item is ready.\n        const createCm = this._createCmItem.bind(this);\n        if (listparent) {\n            this._fixOrder(listparent, cmlist, this.selectors.CM, this.dettachedCms, createCm);\n        }\n    }\n\n    /**\n     * Refresh the section list.\n     *\n     * @param {Object} param\n     * @param {Object} param.state the full state object.\n     */\n    _refreshCourseSectionlist({state}) {\n        // If we have a section return means we only show a single section so no need to fix order.\n        if (this.reactive.sectionReturn !== null) {\n            return;\n        }\n        const sectionlist = this.reactive.getExporter().listedSectionIds(state);\n        const listparent = this.getElement(this.selectors.COURSE_SECTIONLIST);\n        // For now section cannot be created at a frontend level.\n        const createSection = this._createSectionItem.bind(this);\n        if (listparent) {\n            this._fixOrder(listparent, sectionlist, this.selectors.SECTION, this.dettachedSections, createSection);\n        }\n    }\n\n    /**\n     * Regenerate content indexes.\n     *\n     * This method is used when a legacy action refresh some content element.\n     */\n    _indexContents() {\n        // Find unindexed sections.\n        this._scanIndex(\n            this.selectors.SECTION,\n            this.sections,\n            (item) => {\n                return new Section(item);\n            }\n        );\n\n        // Find unindexed cms.\n        this._scanIndex(\n            this.selectors.CM,\n            this.cms,\n            (item) => {\n                return new CmItem(item);\n            }\n        );\n    }\n\n    /**\n     * Reindex a content (section or cm) of the course content.\n     *\n     * This method is used internally by _indexContents.\n     *\n     * @param {string} selector the DOM selector to scan\n     * @param {*} index the index attribute to update\n     * @param {*} creationhandler method to create a new indexed element\n     */\n    _scanIndex(selector, index, creationhandler) {\n        const items = this.getElements(`${selector}:not([data-indexed])`);\n        items.forEach((item) => {\n            if (!item?.dataset?.id) {\n                return;\n            }\n            // Delete previous item component.\n            if (index[item.dataset.id] !== undefined) {\n                index[item.dataset.id].unregister();\n            }\n            // Create the new component.\n            index[item.dataset.id] = creationhandler({\n                ...this,\n                element: item,\n            });\n            // Mark as indexed.\n            item.dataset.indexed = true;\n        });\n    }\n\n    /**\n     * Reload a course module contents.\n     *\n     * Most course module HTML is still strongly backend dependant.\n     * Some changes require to get a new version of the module.\n     *\n     * @param {object} param0 the watcher details\n     * @param {object} param0.element the state object\n     */\n    _reloadCm({element}) {\n        if (!this.getElement(this.selectors.CM, element.id)) {\n            return;\n        }\n        const debouncedReload = this._getDebouncedReloadCm(element.id);\n        debouncedReload();\n    }\n\n    /**\n     * Generate or get a reload CM debounced function.\n     * @param {Number} cmId\n     * @returns {Function} the debounced reload function\n     */\n    _getDebouncedReloadCm(cmId) {\n        const pendingKey = `courseformat/content:reloadCm_${cmId}`;\n        let debouncedReload = this.debouncedReloads.get(pendingKey);\n        if (debouncedReload) {\n            return debouncedReload;\n        }\n        const reload = () => {\n            const pendingReload = new Pending(pendingKey);\n            this.debouncedReloads.delete(pendingKey);\n            const cmitem = this.getElement(this.selectors.CM, cmId);\n            if (!cmitem) {\n                return pendingReload.resolve();\n            }\n            const promise = Fragment.loadFragment(\n                'core_courseformat',\n                'cmitem',\n                Config.courseContextId,\n                {\n                    id: cmId,\n                    courseid: Config.courseId,\n                    sr: this.reactive.sectionReturn ?? null,\n                }\n            );\n            promise.then((html, js) => {\n                // Other state change can reload the CM or the section before this one.\n                if (!document.contains(cmitem)) {\n                    pendingReload.resolve();\n                    return false;\n                }\n                Templates.replaceNode(cmitem, html, js);\n                this._indexContents();\n                pendingReload.resolve();\n                return true;\n            }).catch(() => {\n                pendingReload.resolve();\n            });\n            return pendingReload;\n        };\n        debouncedReload = debounce(\n            reload,\n            200,\n            {\n                cancel: true, pending: true\n            }\n        );\n        this.debouncedReloads.set(pendingKey, debouncedReload);\n        return debouncedReload;\n    }\n\n    /**\n     * Cancel the active reload CM debounced function, if any.\n     * @param {Number} cmId\n     */\n    _cancelDebouncedReloadCm(cmId) {\n        const pendingKey = `courseformat/content:reloadCm_${cmId}`;\n        const debouncedReload = this.debouncedReloads.get(pendingKey);\n        if (!debouncedReload) {\n            return;\n        }\n        debouncedReload.cancel();\n        this.debouncedReloads.delete(pendingKey);\n    }\n\n    /**\n     * Reload a course section contents.\n     *\n     * Section HTML is still strongly backend dependant.\n     * Some changes require to get a new version of the section.\n     *\n     * @param {details} param0 the watcher details\n     * @param {object} param0.element the state object\n     */\n    _reloadSection({element}) {\n        const pendingReload = new Pending(`courseformat/content:reloadSection_${element.id}`);\n        const sectionitem = this.getElement(this.selectors.SECTION, element.id);\n        if (sectionitem) {\n            // Cancel any pending reload because the section will reload cms too.\n            for (const cmId of element.cmlist) {\n                this._cancelDebouncedReloadCm(cmId);\n            }\n            const promise = Fragment.loadFragment(\n                'core_courseformat',\n                'section',\n                Config.courseContextId,\n                {\n                    id: element.id,\n                    courseid: Config.courseId,\n                    sr: this.reactive.sectionReturn ?? null,\n                }\n            );\n            promise.then((html, js) => {\n                Templates.replaceNode(sectionitem, html, js);\n                this._indexContents();\n                pendingReload.resolve();\n            }).catch(() => {\n                pendingReload.resolve();\n            });\n        }\n    }\n\n    /**\n     * Create a new course module item in a section.\n     *\n     * Thos method will append a fake item in the container and trigger an ajax request to\n     * replace the fake element by the real content.\n     *\n     * @param {Element} container the container element (section)\n     * @param {Number} cmid the course-module ID\n     * @returns {Element} the created element\n     */\n    _createCmItem(container, cmid) {\n        const newItem = document.createElement(this.selectors.ACTIVITYTAG);\n        newItem.dataset.for = 'cmitem';\n        newItem.dataset.id = cmid;\n        // The legacy actions.js requires a specific ID and class to refresh the CM.\n        newItem.id = `module-${cmid}`;\n        newItem.classList.add(this.classes.ACTIVITY);\n        container.append(newItem);\n        this._reloadCm({\n            element: this.reactive.get('cm', cmid),\n        });\n        return newItem;\n    }\n\n    /**\n     * Create a new section item.\n     *\n     * This method will append a fake item in the container and trigger an ajax request to\n     * replace the fake element by the real content.\n     *\n     * @param {Element} container the container element (section)\n     * @param {Number} sectionid the course-module ID\n     * @returns {Element} the created element\n     */\n    _createSectionItem(container, sectionid) {\n        const section = this.reactive.get('section', sectionid);\n        const newItem = document.createElement(this.selectors.SECTIONTAG);\n        newItem.dataset.for = 'section';\n        newItem.dataset.id = sectionid;\n        newItem.dataset.number = section.number;\n        // The legacy actions.js requires a specific ID and class to refresh the section.\n        newItem.id = `section-${sectionid}`;\n        newItem.classList.add(this.classes.SECTION);\n        container.append(newItem);\n        this._reloadSection({\n            element: section,\n        });\n        return newItem;\n    }\n\n    /**\n     * Fix/reorder the section or cms order.\n     *\n     * @param {Element} container the HTML element to reorder.\n     * @param {Array} neworder an array with the ids order\n     * @param {string} selector the element selector\n     * @param {Object} dettachedelements a list of dettached elements\n     * @param {function} createMethod method to create missing elements\n     */\n    async _fixOrder(container, neworder, selector, dettachedelements, createMethod) {\n        if (container === undefined) {\n            return;\n        }\n\n        // Empty lists should not be visible.\n        if (!neworder.length) {\n            container.classList.add('hidden');\n            container.innerHTML = '';\n            return;\n        }\n\n        // Grant the list is visible (in case it was empty).\n        container.classList.remove('hidden');\n\n        // Move the elements in order at the beginning of the list.\n        neworder.forEach((itemid, index) => {\n            let item = this.getElement(selector, itemid) ?? dettachedelements[itemid] ?? createMethod(container, itemid);\n            if (item === undefined) {\n                // Missing elements cannot be sorted.\n                return;\n            }\n            // Get the current elemnt at that position.\n            const currentitem = container.children[index];\n            if (currentitem === undefined) {\n                container.append(item);\n                return;\n            }\n            if (currentitem !== item) {\n                container.insertBefore(item, currentitem);\n            }\n        });\n\n        // Dndupload add a fake element we need to keep.\n        let dndFakeActivity;\n\n        // Remove the remaining elements.\n        while (container.children.length > neworder.length) {\n            const lastchild = container.lastChild;\n            if (lastchild?.classList?.contains('dndupload-preview')) {\n                dndFakeActivity = lastchild;\n            } else {\n                dettachedelements[lastchild?.dataset?.id ?? 0] = lastchild;\n            }\n            container.removeChild(lastchild);\n        }\n        // Restore dndupload fake element.\n        if (dndFakeActivity) {\n            container.append(dndFakeActivity);\n        }\n    }\n}\n"],"names":["Component","BaseComponent","create","descriptor","name","selectors","SECTION","SECTION_ITEM","SECTION_CMLIST","COURSE_SECTIONLIST","CM","TOGGLER","COLLAPSE","TOGGLEALL","ACTIVITYTAG","SECTIONTAG","selectorGenerators","cmNameFor","id","sectionNameFor","classes","COLLAPSED","ACTIVITY","STATEDREADY","dettachedCms","dettachedSections","sections","cms","sectionReturn","debouncedReloads","Map","target","element","document","getElementById","reactive","stateReady","state","_indexContents","addEventListener","this","_sectionTogglers","toogleAll","getElement","collapseElementIds","getElements","map","setAttribute","join","_allSectionToggler","e","key","_refreshAllSectionsToggler","supportComponents","isEditing","DispatchActions","classList","add","CourseEvents","manualCompletionToggled","_completionHandler","_scrollHandler","event","sectionlink","closest","closestCollapse","isChevron","section","toggler","querySelector","isCollapsed","contains","sectionId","getAttribute","dispatch","preventDefault","isAllCollapsed","course","get","sectionlist","getWatchers","watch","handler","_reloadCm","_refreshCmName","_refreshSectionNumber","_refreshSectionTitle","_refreshSectionCollapsed","_startProcessing","_refreshCourseSectionlist","_refreshSectionCmlist","_reloadSection","forEach","textContent","Error","contentcollapsed","collapsibleId","dataset","replace","collapsible","collapse","allcollapsed","allexpanded","remove","detail","undefined","cmid","completed","pageOffset","window","scrollY","items","getExporter","allItemsArray","pageItem","every","item","index","type","offsetTop","number","sectionid","inplace","inplaceeditable","getInplaceEditable","currentvalue","getValue","currentitemid","getItemId","rawtitle","setValue","querySelectorAll","title","cmlist","listparent","createCm","_createCmItem","bind","_fixOrder","listedSectionIds","createSection","_createSectionItem","_scanIndex","Section","CmItem","selector","creationhandler","_item$dataset","unregister","indexed","_getDebouncedReloadCm","debouncedReload","cmId","pendingKey","pendingReload","Pending","delete","cmitem","resolve","Fragment","loadFragment","Config","courseContextId","courseid","courseId","sr","then","html","js","replaceNode","catch","cancel","pending","set","_cancelDebouncedReloadCm","sectionitem","container","newItem","createElement","for","append","neworder","dettachedelements","createMethod","length","innerHTML","dndFakeActivity","itemid","currentitem","children","insertBefore","lastchild","lastChild","_lastchild$classList","_lastchild$dataset","removeChild"],"mappings":";;;;;;;;+oCAuCqBA,kBAAkBC,wBAOnCC,OAAOC,2CAEEC,KAAO,qBAEPC,UAAY,CACbC,+BACAC,0CACAC,qCACAC,qDACAC,yBACAC,qDACAC,oCACAC,sCAEAC,YAAa,KACbC,WAAY,WAEXC,mBAAqB,CACtBC,UAAYC,iCAA6BA,SACzCC,eAAiBD,sCAAkCA,eAGlDE,QAAU,CACXC,sBAEAC,oBACAC,yBACAjB,wBAGCkB,aAAe,QACfC,kBAAoB,QAEpBC,SAAW,QACXC,IAAM,QAENC,4CAAgBzB,WAAWyB,qEAAiB,UAC5CC,iBAAmB,IAAIC,gBAWpBC,OAAQ1B,UAAWuB,sBACpB,IAAI5B,UAAU,CACjBgC,QAASC,SAASC,eAAeH,QACjCI,UAAU,0CACV9B,UAAAA,UACAuB,cAAAA,gBASRQ,WAAWC,YACFC,sBAEAC,iBAAiBC,KAAKR,QAAS,QAASQ,KAAKC,wBAG5CC,UAAYF,KAAKG,WAAWH,KAAKnC,UAAUQ,cAC7C6B,UAAW,OAILE,mBAAqB,IADFJ,KAAKK,YAAYL,KAAKnC,UAAUO,WACRkC,KAAId,SAAWA,QAAQd,KACxEwB,UAAUK,aAAa,gBAAiBH,mBAAmBI,KAAK,WAE3DT,iBAAiBG,UAAW,QAASF,KAAKS,yBAC1CV,iBAAiBG,UAAW,WAAWQ,IAE1B,MAAVA,EAAEC,UACGF,mBAAmBC,WAG3BE,2BAA2Bf,OAGhCG,KAAKL,SAASkB,oBAEVb,KAAKL,SAASmB,eACVC,iBAAgBf,WAInBR,QAAQwB,UAAUC,IAAIjB,KAAKpB,QAAQG,mBAIvCgB,iBACDC,KAAKR,QACL0B,aAAaC,wBACbnB,KAAKoB,yBAIJrB,iBACDN,SACA,SACAO,KAAKqB,gBAYbpB,iBAAiBqB,aACPC,YAAcD,MAAM/B,OAAOiC,QAAQxB,KAAKnC,UAAUM,SAClDsD,gBAAkBH,MAAM/B,OAAOiC,QAAQxB,KAAKnC,UAAUO,UAGtDsD,UAAYD,MAAAA,uBAAAA,gBAAiBD,QAAQxB,KAAKnC,UAAUE,iBAEtDwD,aAAeG,UAAW,iCAEpBC,QAAUL,MAAM/B,OAAOiC,QAAQxB,KAAKnC,UAAUC,SAC9C8D,QAAUD,QAAQE,cAAc7B,KAAKnC,UAAUO,UAC/C0D,0CAAcF,MAAAA,eAAAA,QAASZ,UAAUe,SAAS/B,KAAKpB,QAAQC,mEAEvDmD,UAAYL,QAAQM,aAAa,gBAClCtC,SAASuC,SACV,0BACA,CAACF,YACAF,cAabrB,mBAAmBa,+BACfA,MAAMa,uBAGAC,eADSd,MAAM/B,OAAOiC,QAAQxB,KAAKnC,UAAUQ,WACrB2C,UAAUe,SAAS/B,KAAKpB,QAAQC,WAExDwD,OAASrC,KAAKL,SAAS2C,IAAI,eAC5B3C,SAASuC,SACV,sDACAG,OAAOE,+DAAe,IACrBH,gBASTI,0BAGS7C,SAASP,cAAgBY,KAAKZ,cAG9BY,KAAKL,SAASkB,kBAGZ,CAEH,CAAC4B,2BAA6BC,QAAS1C,KAAK2C,WAC5C,CAACF,2BAA6BC,QAAS1C,KAAK2C,WAC5C,CAACF,6BAA+BC,QAAS1C,KAAK2C,WAC9C,CAACF,0BAA4BC,QAAS1C,KAAK2C,WAC3C,CAACF,6BAA+BC,QAAS1C,KAAK2C,WAC9C,CAACF,wBAA0BC,QAAS1C,KAAK4C,gBAEzC,CAACH,+BAAiCC,QAAS1C,KAAK6C,uBAChD,CAACJ,8BAAgCC,QAAS1C,KAAK8C,sBAE/C,CAACL,yCAA2CC,QAAS1C,KAAK+C,0BAE1D,CAACN,0BAA4BC,QAAS1C,KAAKgD,kBAC3C,CAACP,mCAAqCC,QAAS1C,KAAKiD,2BACpD,CAACR,+BAAiCC,QAAS1C,KAAKkD,uBAEhD,CAACT,gCAAkCC,QAAS1C,KAAKmD,gBAEjD,CAACV,sBAAwBC,QAAS1C,KAAKF,iBAtBhC,GAgCf8C,yBAAepD,QAACA,cAGUQ,KAAKK,YACvBL,KAAKxB,mBAAmBC,UAAUe,QAAQd,KAEhC0E,SAAS3E,YACnBA,UAAU4E,YAAc7D,QAAQ5B,QAcxCmF,+DAAyBlD,MAACA,MAADL,QAAQA,qBACvBD,OAASS,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,QAC1Da,aACK,IAAI+D,wCAAiC9D,QAAQd,WAGjDkD,QAAUrC,OAAOsC,cAAc7B,KAAKnC,UAAUO,UAC9C0D,2CAAcF,MAAAA,eAAAA,QAASZ,UAAUe,SAAS/B,KAAKpB,QAAQC,wEAEzDW,QAAQ+D,mBAAqBzB,YAAa,+BACtC0B,4CAAgB5B,QAAQ6B,QAAQlE,8DAAUqC,QAAQK,aAAa,YAC9DuB,qBAGLA,cAAgBA,cAAcE,QAAQ,IAAK,UACrCC,YAAclE,SAASC,eAAe8D,mBACvCG,uCAOEA,aAAaC,SAASpE,QAAQ+D,iBAAmB,OAAS,aAGhE3C,2BAA2Bf,OAQpCe,2BAA2Bf,aACjBN,OAASS,KAAKG,WAAWH,KAAKnC,UAAUQ,eACzCkB,kBAIDsE,cAAe,EACfC,aAAc,EAClBjE,MAAM8B,QAAQyB,SACVzB,UACIkC,aAAeA,cAAgBlC,QAAQ4B,iBACvCO,YAAcA,cAAgBnC,QAAQ4B,oBAG1CM,eACAtE,OAAOyB,UAAUC,IAAIjB,KAAKpB,QAAQC,WAClCU,OAAOgB,aAAa,iBAAiB,IAErCuD,cACAvE,OAAOyB,UAAU+C,OAAO/D,KAAKpB,QAAQC,WACrCU,OAAOgB,aAAa,iBAAiB,IAW7CyC,wBAGShE,aAAe,QACfC,kBAAoB,GAQ7BmC,8BAAmB4C,OAACA,mBACDC,IAAXD,aAGCrE,SAASuC,SAAS,eAAgB,CAAC8B,OAAOE,MAAOF,OAAOG,WAMjE9C,uBACU+C,WAAaC,OAAOC,QACpBC,MAAQvE,KAAKL,SAAS6E,cAAcC,cAAczE,KAAKL,SAASE,WAElE6E,SAAW,KACfH,MAAMI,OAAMC,aACFC,MAAuB,YAAdD,KAAKE,KAAsB9E,KAAKd,SAAWc,KAAKb,YACxC8E,IAAnBY,MAAMD,KAAKlG,WACJ,QAGLc,QAAUqF,MAAMD,KAAKlG,IAAIc,eAC/BkF,SAAWE,KACJR,YAAc5E,QAAQuF,aAE7BL,eACK/E,SAASuC,SAAS,cAAewC,SAASI,KAAMJ,SAAShG,IAiBtEmE,iCAAsBrD,QAACA,qBAEbD,OAASS,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,QAC1Da,cAKLA,OAAOb,qBAAgBc,QAAQwF,QAI/BzF,OAAOkE,QAAQwB,UAAYzF,QAAQwF,OAEnCzF,OAAOkE,QAAQuB,OAASxF,QAAQwF,aAG1BE,QAAUC,0BAAgBC,mBAAmB7F,OAAOsC,cAAc7B,KAAKnC,UAAUE,kBACnFmH,QAAS,OAGHG,aAAeH,QAAQI,WACvBC,cAAgBL,QAAQM,YAEH,KAAvBN,QAAQI,aAEJC,eAAiB/F,QAAQd,IAAO2G,cAAgB7F,QAAQiG,UAAgC,IAApBjG,QAAQiG,UAC5EP,QAAQQ,SAASlG,QAAQiG,YAYzC3C,gCAAqBtD,QAACA,eAESC,SAASkG,iBAChC3F,KAAKxB,mBAAmBG,eAAea,QAAQd,KAEhC0E,SAASzE,iBACxBA,eAAe0E,YAAc7D,QAAQoG,SAU7C1C,qDAAsB1D,QAACA,qBACbqG,+BAASrG,QAAQqG,kDAAU,GAC3BlE,QAAU3B,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,IAC1DoH,WAAanE,MAAAA,eAAAA,QAASE,cAAc7B,KAAKnC,UAAUG,gBAEnD+H,SAAW/F,KAAKgG,cAAcC,KAAKjG,MACrC8F,iBACKI,UAAUJ,WAAYD,OAAQ7F,KAAKnC,UAAUK,GAAI8B,KAAKhB,aAAc+G,UAUjF9C,qCAA0BpD,MAACA,gBAEa,OAAhCG,KAAKL,SAASP,2BAGZmD,YAAcvC,KAAKL,SAAS6E,cAAc2B,iBAAiBtG,OAC3DiG,WAAa9F,KAAKG,WAAWH,KAAKnC,UAAUI,oBAE5CmI,cAAgBpG,KAAKqG,mBAAmBJ,KAAKjG,MAC/C8F,iBACKI,UAAUJ,WAAYvD,YAAavC,KAAKnC,UAAUC,QAASkC,KAAKf,kBAAmBmH,eAShGtG,sBAESwG,WACDtG,KAAKnC,UAAUC,QACfkC,KAAKd,UACJ0F,MACU,IAAI2B,iBAAQ3B,aAKtB0B,WACDtG,KAAKnC,UAAUK,GACf8B,KAAKb,KACJyF,MACU,IAAI4B,gBAAO5B,QAc9B0B,WAAWG,SAAU5B,MAAO6B,iBACV1G,KAAKK,sBAAeoG,kCAC5BrD,SAASwB,yBACNA,MAAAA,4BAAAA,KAAMnB,kCAANkD,cAAejI,UAIWuF,IAA3BY,MAAMD,KAAKnB,QAAQ/E,KACnBmG,MAAMD,KAAKnB,QAAQ/E,IAAIkI,aAG3B/B,MAAMD,KAAKnB,QAAQ/E,IAAMgI,gBAAgB,IAClC1G,KACHR,QAASoF,OAGbA,KAAKnB,QAAQoD,SAAU,MAa/BlE,qBAAUnD,QAACA,mBACFQ,KAAKG,WAAWH,KAAKnC,UAAUK,GAAIsB,QAAQd,WAGxBsB,KAAK8G,sBAAsBtH,QAAQd,GAC3DqI,GAQJD,sBAAsBE,YACZC,mDAA8CD,UAChDD,gBAAkB/G,KAAKX,iBAAiBiD,IAAI2E,eAC5CF,uBACOA,uBAkCXA,iBAAkB,oBAhCH,qCACLG,cAAgB,IAAIC,iBAAQF,iBAC7B5H,iBAAiB+H,OAAOH,kBACvBI,OAASrH,KAAKG,WAAWH,KAAKnC,UAAUK,GAAI8I,UAC7CK,cACMH,cAAcI,iBAETC,kBAASC,aACrB,oBACA,SACAC,gBAAOC,gBACP,CACIhJ,GAAIsI,KACJW,SAAUF,gBAAOG,SACjBC,iCAAI7H,KAAKL,SAASP,qEAAiB,OAGnC0I,MAAK,CAACC,KAAMC,KAEXvI,SAASsC,SAASsF,4BAIbY,YAAYZ,OAAQU,KAAMC,SAC/BlI,iBACLoH,cAAcI,WACP,IANHJ,cAAcI,WACP,KAMZY,OAAM,KACLhB,cAAcI,aAEXJ,gBAIP,IACA,CACIiB,QAAQ,EAAMC,SAAS,SAG1B/I,iBAAiBgJ,IAAIpB,WAAYF,iBAC/BA,gBAOXuB,yBAAyBtB,YACfC,mDAA8CD,MAC9CD,gBAAkB/G,KAAKX,iBAAiBiD,IAAI2E,YAC7CF,kBAGLA,gBAAgBoB,cACX9I,iBAAiB+H,OAAOH,aAYjC9D,0BAAe3D,QAACA,qBACN0H,cAAgB,IAAIC,8DAA8C3H,QAAQd,KAC1E6J,YAAcvI,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,OAChE6J,YAAa,gCAER,MAAMvB,QAAQxH,QAAQqG,YAClByC,yBAAyBtB,MAElBO,kBAASC,aACrB,oBACA,UACAC,gBAAOC,gBACP,CACIhJ,GAAIc,QAAQd,GACZiJ,SAAUF,gBAAOG,SACjBC,kCAAI7H,KAAKL,SAASP,uEAAiB,OAGnC0I,MAAK,CAACC,KAAMC,yBACNC,YAAYM,YAAaR,KAAMC,SACpClI,iBACLoH,cAAcI,aACfY,OAAM,KACLhB,cAAcI,cAe1BtB,cAAcwC,UAAWtE,YACfuE,QAAUhJ,SAASiJ,cAAc1I,KAAKnC,UAAUS,oBACtDmK,QAAQhF,QAAQkF,IAAM,SACtBF,QAAQhF,QAAQ/E,GAAKwF,KAErBuE,QAAQ/J,oBAAewF,MACvBuE,QAAQzH,UAAUC,IAAIjB,KAAKpB,QAAQE,UACnC0J,UAAUI,OAAOH,cACZ9F,UAAU,CACXnD,QAASQ,KAAKL,SAAS2C,IAAI,KAAM4B,QAE9BuE,QAaXpC,mBAAmBmC,UAAWvD,iBACpBtD,QAAU3B,KAAKL,SAAS2C,IAAI,UAAW2C,WACvCwD,QAAUhJ,SAASiJ,cAAc1I,KAAKnC,UAAUU,mBACtDkK,QAAQhF,QAAQkF,IAAM,UACtBF,QAAQhF,QAAQ/E,GAAKuG,UACrBwD,QAAQhF,QAAQuB,OAASrD,QAAQqD,OAEjCyD,QAAQ/J,qBAAgBuG,WACxBwD,QAAQzH,UAAUC,IAAIjB,KAAKpB,QAAQd,SACnC0K,UAAUI,OAAOH,cACZtF,eAAe,CAChB3D,QAASmC,UAEN8G,wBAYKD,UAAWK,SAAUpC,SAAUqC,kBAAmBC,sBAC5C9E,IAAduE,qBAKCK,SAASG,cACVR,UAAUxH,UAAUC,IAAI,eACxBuH,UAAUS,UAAY,QA0BtBC,oBArBJV,UAAUxH,UAAU+C,OAAO,UAG3B8E,SAASzF,SAAQ,CAAC+F,OAAQtE,yCAClBD,6CAAO5E,KAAKG,WAAWsG,SAAU0C,qDAAWL,kBAAkBK,iCAAWJ,aAAaP,UAAWW,gBACxFlF,IAATW,kBAKEwE,YAAcZ,UAAUa,SAASxE,YACnBZ,IAAhBmF,YAIAA,cAAgBxE,MAChB4D,UAAUc,aAAa1E,KAAMwE,aAJ7BZ,UAAUI,OAAOhE,SAYlB4D,UAAUa,SAASL,OAASH,SAASG,QAAQ,gCAC1CO,UAAYf,UAAUgB,0DACxBD,MAAAA,wCAAAA,UAAWvI,2CAAXyI,qBAAsB1H,SAAS,qBAC/BmH,gBAAkBK,eAElBT,gDAAkBS,MAAAA,sCAAAA,UAAW9F,6CAAXiG,mBAAoBhL,0DAAM,GAAK6K,UAErDf,UAAUmB,YAAYJ,WAGtBL,iBACAV,UAAUI,OAAOM"}