| 1441 |
ariadna |
1 |
{"version":3,"file":"courseindex.min.js","sources":["../../../src/local/courseindex/courseindex.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/courseindex/courseindex\n * @class core_courseformat/local/courseindex/courseindex\n * @copyright 2021 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 Collapse from 'theme_boost/bootstrap/collapse';\nimport {getCurrentCourseEditor} from 'core_courseformat/courseeditor';\nimport ContentTree from 'core_courseformat/local/courseeditor/contenttree';\nimport log from \"core/log\";\n\nexport default class Component extends BaseComponent {\n\n /**\n * Constructor hook.\n */\n create() {\n // Optional component name for debugging.\n this.name = 'courseindex';\n // Default query selectors.\n this.selectors = {\n SECTION: `[data-for='section']`,\n SECTION_CMLIST: `[data-for='cmlist']`,\n CM: `[data-for='cm']`,\n TOGGLER: `[data-action=\"togglecourseindexsection\"]`,\n COLLAPSE: `[data-bs-toggle=\"collapse\"]`,\n DRAWER: `.drawer`,\n };\n // Default classes to toggle on refresh.\n this.classes = {\n SECTIONHIDDEN: 'dimmed',\n CMHIDDEN: 'dimmed',\n SECTIONCURRENT: 'current',\n COLLAPSED: `collapsed`,\n SHOW: `show`,\n };\n // Arrays to keep cms and sections elements.\n this.sections = {};\n this.cms = {};\n }\n\n /**\n * Static method to create a component instance form the mustache template.\n *\n * @param {element|string} target the DOM main element or its ID\n * @param {object} selectors optional css selector overrides\n * @return {Component}\n */\n static init(target, selectors) {\n let element = document.querySelector(target);\n // TODO Remove this if condition as part of MDL-83851.\n if (!element) {\n log.debug('Init component with id is deprecated, use a query selector instead.');\n element = document.getElementById(target);\n }\n return new this({\n element,\n reactive: getCurrentCourseEditor(),\n selectors,\n });\n }\n\n /**\n * Initial state ready method.\n *\n * @param {Object} state the state data\n */\n stateReady(state) {\n // Activate section togglers.\n this.addEventListener(this.element, 'click', this._sectionTogglers);\n\n // Get cms and sections elements.\n const sections = this.getElements(this.selectors.SECTION);\n sections.forEach((section) => {\n this.sections[section.dataset.id] = section;\n });\n const cms = this.getElements(this.selectors.CM);\n cms.forEach((cm) => {\n this.cms[cm.dataset.id] = cm;\n });\n\n this._expandPageCmSectionIfNecessary(state);\n this._refreshPageItem({element: state.course, state});\n\n // Configure Aria Tree.\n this.contentTree = new ContentTree(this.element, this.selectors, this.reactive.isEditing);\n }\n\n getWatchers() {\n return [\n {watch: `section.indexcollapsed:updated`, handler: this._refreshSectionCollapsed},\n {watch: `cm:created`, handler: this._createCm},\n {watch: `cm:deleted`, handler: this._deleteCm},\n {watch: `section:created`, handler: this._createSection},\n {watch: `section:deleted`, handler: this._deleteSection},\n {watch: `course.pageItem:created`, handler: this._refreshPageItem},\n {watch: `course.pageItem:updated`, handler: this._refreshPageItem},\n // Sections and cm sorting.\n {watch: `course.sectionlist:updated`, handler: this._refreshCourseSectionlist},\n {watch: `section.cmlist:updated`, handler: this._refreshSectionCmlist},\n ];\n }\n\n /**\n * Setup sections toggler.\n *\n * Toggler click is delegated to the main course index 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 isChevron = event.target.closest(this.selectors.COLLAPSE);\n\n if (sectionlink || isChevron) {\n\n const section = event.target.closest(this.selectors.SECTION);\n const toggler = section.querySelector(this.selectors.COLLAPSE);\n let isCollapsed = toggler?.classList.contains(this.classes.COLLAPSED) ?? false;\n // If the click was on the chevron, Bootstrap already toggled the section before this event.\n if (isChevron) {\n isCollapsed = !isCollapsed;\n }\n\n // Update the state.\n const sectionId = section.getAttribute('data-id');\n if (!sectionlink || isCollapsed) {\n this.reactive.dispatch(\n 'sectionIndexCollapsed',\n [sectionId],\n !isCollapsed\n );\n }\n }\n }\n\n /**\n * Update section collapsed.\n *\n * @param {object} args\n * @param {object} args.element The leement to be expanded\n */\n _refreshSectionCollapsed({element}) {\n const target = this.getElement(this.selectors.SECTION, element.id);\n if (!target) {\n throw new Error(`Unkown 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.indexcollapsed !== isCollapsed) {\n this._expandSectionNode(element);\n }\n }\n\n /**\n * Expand a section node.\n *\n * By default the method will use element.indexcollapsed to decide if the\n * section is opened or closed. However, using forceValue it is possible\n * to open or close a section independant from the indexcollapsed attribute.\n *\n * @param {Object} element the course module state element\n * @param {boolean} forceValue optional forced expanded value\n */\n _expandSectionNode(element, forceValue) {\n const target = this.getElement(this.selectors.SECTION, element.id);\n const toggler = target.querySelector(this.selectors.COLLAPSE);\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 if (forceValue === undefined) {\n forceValue = (element.indexcollapsed) ? false : true;\n }\n\n if (forceValue) {\n Collapse.getOrCreateInstance(collapsible, {toggle: false}).show();\n } else {\n Collapse.getOrCreateInstance(collapsible, {toggle: false}).hide();\n }\n }\n\n /**\n * Handle a page item update.\n *\n * @param {Object} details the update details\n * @param {Object} details.state the state data.\n * @param {Object} details.element the course state data.\n */\n _refreshPageItem({element, state}) {\n if (!element?.pageItem?.isStatic || element.pageItem.type != 'cm') {\n return;\n }\n // Check if we need to uncollapse the section and scroll to the element.\n const section = state.section.get(element.pageItem.sectionId);\n if (section.indexcollapsed) {\n this._expandSectionNode(section, true);\n setTimeout(\n () => this.cms[element.pageItem.id]?.scrollIntoView({block: \"nearest\"}),\n 250\n );\n }\n }\n\n /**\n * Expand a section if the current page is a section's cm.\n *\n * @private\n * @param {Object} state the course state.\n */\n _expandPageCmSectionIfNecessary(state) {\n const pageCmInfo = this.reactive.getPageAnchorCmInfo();\n if (!pageCmInfo) {\n return;\n }\n this._expandSectionNode(state.section.get(pageCmInfo.sectionid), true);\n }\n\n /**\n * Create a newcm instance.\n *\n * @param {object} param\n * @param {Object} param.state\n * @param {Object} param.element\n */\n async _createCm({state, element}) {\n // Create a fake node while the component is loading.\n const fakeelement = document.createElement('li');\n fakeelement.classList.add('bg-pulse-grey', 'w-100');\n fakeelement.innerHTML = ' ';\n this.cms[element.id] = fakeelement;\n // Place the fake node on the correct position.\n this._refreshSectionCmlist({\n state,\n element: state.section.get(element.sectionid),\n });\n // Collect render data.\n const exporter = this.reactive.getExporter();\n const data = exporter.cm(state, element);\n // Create the new content.\n const newcomponent = await this.renderComponent(fakeelement, 'core_courseformat/local/courseindex/cm', data);\n // Replace the fake node with the real content.\n const newelement = newcomponent.getElement();\n this.cms[element.id] = newelement;\n fakeelement.parentNode.replaceChild(newelement, fakeelement);\n }\n\n /**\n * Create a new section instance.\n *\n * @param {Object} details the update details.\n * @param {Object} details.state the state data.\n * @param {Object} details.element the element data.\n */\n async _createSection({state, element}) {\n // Create a fake node while the component is loading.\n const fakeelement = document.createElement('div');\n fakeelement.classList.add('bg-pulse-grey', 'w-100');\n fakeelement.innerHTML = ' ';\n this.sections[element.id] = fakeelement;\n // Place the fake node on the correct position.\n this._refreshCourseSectionlist({\n state,\n element: state.course,\n });\n // Collect render data.\n const exporter = this.reactive.getExporter();\n const data = exporter.section(state, element);\n // Create the new content.\n const newcomponent = await this.renderComponent(fakeelement, 'core_courseformat/local/courseindex/section', data);\n // Replace the fake node with the real content.\n const newelement = newcomponent.getElement();\n this.sections[element.id] = newelement;\n fakeelement.parentNode.replaceChild(newelement, fakeelement);\n }\n\n /**\n * Refresh a section cm list.\n *\n * @param {object} param\n * @param {Object} param.element\n */\n _refreshSectionCmlist({element}) {\n const cmlist = element.cmlist ?? [];\n const listparent = this.getElement(this.selectors.SECTION_CMLIST, element.id);\n if (!listparent) {\n return;\n }\n this._fixOrder(listparent, cmlist, this.cms);\n }\n\n /**\n * Refresh the section list.\n *\n * @param {object} param\n * @param {Object} param.state\n */\n _refreshCourseSectionlist({state}) {\n const sectionlist = this.reactive.getExporter().listedSectionIds(state);\n this._fixOrder(this.element, sectionlist, this.sections);\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 {Array} allitems the list of html elements that can be placed in the container\n */\n _fixOrder(container, neworder, allitems) {\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 const item = allitems[itemid];\n // Get the current element at that position.\n const currentitem = container.children[index];\n if (currentitem === undefined && item != undefined) {\n container.append(item);\n return;\n }\n if (currentitem !== item && item) {\n container.insertBefore(item, currentitem);\n }\n });\n // Remove the remaining elements.\n while (container.children.length > neworder.length) {\n container.removeChild(container.lastChild);\n }\n }\n\n /**\n * Remove a cm from the list.\n *\n * The actual DOM element removal is delegated to the cm component.\n *\n * @param {object} param\n * @param {Object} param.element\n */\n _deleteCm({element}) {\n delete this.cms[element.id];\n }\n\n /**\n * Remove a section from the list.\n *\n * The actual DOM element removal is delegated to the section component.\n *\n * @param {Object} details the update details.\n * @param {Object} details.element the element data.\n */\n _deleteSection({element}) {\n delete this.sections[element.id];\n }\n}\n"],"names":["Component","BaseComponent","create","name","selectors","SECTION","SECTION_CMLIST","CM","TOGGLER","COLLAPSE","DRAWER","classes","SECTIONHIDDEN","CMHIDDEN","SECTIONCURRENT","COLLAPSED","SHOW","sections","cms","target","element","document","querySelector","debug","getElementById","this","reactive","stateReady","state","addEventListener","_sectionTogglers","getElements","forEach","section","dataset","id","cm","_expandPageCmSectionIfNecessary","_refreshPageItem","course","contentTree","ContentTree","isEditing","getWatchers","watch","handler","_refreshSectionCollapsed","_createCm","_deleteCm","_createSection","_deleteSection","_refreshCourseSectionlist","_refreshSectionCmlist","event","sectionlink","closest","isChevron","toggler","isCollapsed","classList","contains","sectionId","getAttribute","dispatch","getElement","Error","indexcollapsed","_expandSectionNode","forceValue","collapsibleId","replace","collapsible","undefined","getOrCreateInstance","toggle","show","hide","pageItem","_element$pageItem","isStatic","type","get","setTimeout","_this$cms$element$pag","scrollIntoView","block","pageCmInfo","getPageAnchorCmInfo","sectionid","fakeelement","createElement","add","innerHTML","data","getExporter","newelement","renderComponent","parentNode","replaceChild","cmlist","listparent","_fixOrder","sectionlist","listedSectionIds","container","neworder","allitems","length","remove","itemid","index","item","currentitem","children","insertBefore","append","removeChild","lastChild"],"mappings":"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"}
|