From 2c7ffa1f9f18896d81125a92ec5902758831c66c Mon Sep 17 00:00:00 2001 From: Laurent David Date: Tue, 26 Nov 2024 10:17:17 +0100 Subject: [PATCH] fixup! MDL-81768 subsection: Display all-sections toggler on section pages --- course/format/amd/build/local/content.min.js | 2 +- .../format/amd/build/local/content.min.js.map | 2 +- course/format/amd/src/local/content.js | 46 ++++++++----------- .../classes/output/local/content/section.php | 12 ++--- .../local/content/section/content.mustache | 1 - 5 files changed, 25 insertions(+), 38 deletions(-) diff --git a/course/format/amd/build/local/content.min.js b/course/format/amd/build/local/content.min.js index 9122e270fefb5..8eb99fe927c76 100644 --- a/course/format/amd/build/local/content.min.js +++ b/course/format/amd/build/local/content.min.js @@ -6,6 +6,6 @@ define("core_courseformat/local/content",["exports","core/reactive","core/utils" * @class core_courseformat/local/content * @copyright 2020 Ferran Recio * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_config=_interopRequireDefault(_config),_inplace_editable=_interopRequireDefault(_inplace_editable),_section=_interopRequireDefault(_section),_cmitem=_interopRequireDefault(_cmitem),_fragment=_interopRequireDefault(_fragment),_templates=_interopRequireDefault(_templates),_actions=_interopRequireDefault(_actions),CourseEvents=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(CourseEvents),_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);class Component extends _reactive.BaseComponent{create(descriptor){var _descriptor$sectionRe;this.name="course_format",this.selectors={SECTION:"[data-for='section']",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"]',TOGGLEALL:'[data-toggle="toggleall"]',ACTIVITYTAG:"li",SECTIONTAG:"li"},this.selectorGenerators={cmNameFor:id=>"[data-cm-name-for='".concat(id,"']"),sectionNameFor:id=>"[data-section-name-for='".concat(id,"']")},this.classes={COLLAPSED:"collapsed",ACTIVITY:"activity",STATEDREADY:"stateready",SECTION:"section"},this.dettachedCms={},this.dettachedSections={},this.sections={},this.cms={},this.sectionReturn=null!==(_descriptor$sectionRe=descriptor.sectionReturn)&&void 0!==_descriptor$sectionRe?_descriptor$sectionRe:null,this.debouncedReloads=new Map}static init(target,selectors,sectionReturn){return new Component({element:document.getElementById(target),reactive:(0,_courseeditor.getCurrentCourseEditor)(),selectors:selectors,sectionReturn:sectionReturn})}stateReady(state){this._indexContents(),this.addEventListener(this.element,"click",this._sectionTogglers);const toogleAll=this.getElement(this.selectors.TOGGLEALL);if(toogleAll){const collapseElementIds=[...this.getElements(this.selectors.COLLAPSE)].map((element=>element.id));toogleAll.setAttribute("aria-controls",collapseElementIds.join(" ")),this.addEventListener(toogleAll,"click",this._allSectionToggler),this.addEventListener(toogleAll,"keydown",(e=>{" "===e.key&&this._allSectionToggler(e)})),this._refreshAllSectionsToggler(state)}this.reactive.supportComponents&&(this.reactive.isEditing&&new _actions.default(this),this.element.classList.add(this.classes.STATEDREADY)),this.addEventListener(this.element,CourseEvents.manualCompletionToggled,this._completionHandler),this.addEventListener(document,"scroll",this._scrollHandler)}_sectionTogglers(event){const sectionlink=event.target.closest(this.selectors.TOGGLER),closestCollapse=event.target.closest(this.selectors.COLLAPSE),isChevron=null==closestCollapse?void 0:closestCollapse.closest(this.selectors.SECTION_ITEM);if(sectionlink||isChevron){var _toggler$classList$co;const section=event.target.closest(this.selectors.SECTION),toggler=section.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co&&_toggler$classList$co,sectionId=section.getAttribute("data-id");this.reactive.dispatch("sectionContentCollapsed",[sectionId],!isCollapsed)}}_allSectionToggler(event){var _course$sectionlist;event.preventDefault();const isAllCollapsed=event.target.closest(this.selectors.TOGGLEALL).classList.contains(this.classes.COLLAPSED);let sectionIsCollapsible={};const togglerDoms=this.element.querySelectorAll(this.selectors.SECTION_ITEM+" "+this.selectors.COLLAPSE);for(let togglerDom of togglerDoms)sectionIsCollapsible[togglerDom.closest(this.selectors.SECTION).dataset.id]=!0;const sectionCollapsibleList=(null!==(_course$sectionlist=this.reactive.get("course").sectionlist)&&void 0!==_course$sectionlist?_course$sectionlist:[]).filter((section=>sectionIsCollapsible[section]));this.reactive.dispatch("sectionContentCollapsed",sectionCollapsibleList,!isAllCollapsed)}getWatchers(){return this.reactive.sectionReturn=this.sectionReturn,this.reactive.supportComponents?[{watch:"cm.visible:updated",handler:this._reloadCm},{watch:"cm.stealth:updated",handler:this._reloadCm},{watch:"cm.sectionid:updated",handler:this._reloadCm},{watch:"cm.indent:updated",handler:this._reloadCm},{watch:"cm.groupmode:updated",handler:this._reloadCm},{watch:"cm.name:updated",handler:this._refreshCmName},{watch:"section.number:updated",handler:this._refreshSectionNumber},{watch:"section.title:updated",handler:this._refreshSectionTitle},{watch:"section.contentcollapsed:updated",handler:this._refreshSectionCollapsed},{watch:"transaction:start",handler:this._startProcessing},{watch:"course.sectionlist:updated",handler:this._refreshCourseSectionlist},{watch:"section.cmlist:updated",handler:this._refreshSectionCmlist},{watch:"section.visible:updated",handler:this._reloadSection},{watch:"state:updated",handler:this._indexContents}]:[]}_refreshCmName(_ref){let{element:element}=_ref;this.getElements(this.selectorGenerators.cmNameFor(element.id)).forEach((cmNameFor=>{cmNameFor.textContent=element.name}))}_refreshSectionCollapsed(_ref2){var _toggler$classList$co2;let{state:state,element:element}=_ref2;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)throw new Error("Unknown section with ID ".concat(element.id));const toggler=target.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co2=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co2&&_toggler$classList$co2;if(element.contentcollapsed!==isCollapsed){var _toggler$dataset$targ;let collapsibleId=null!==(_toggler$dataset$targ=toggler.dataset.target)&&void 0!==_toggler$dataset$targ?_toggler$dataset$targ:toggler.getAttribute("href");if(!collapsibleId)return;collapsibleId=collapsibleId.replace("#","");const collapsible=document.getElementById(collapsibleId);if(!collapsible)return;(0,_jquery.default)(collapsible).collapse(element.contentcollapsed?"hide":"show")}this._refreshAllSectionsToggler(state)}_refreshAllSectionsToggler(state){const target=this.getElement(this.selectors.TOGGLEALL);if(!target)return;let sectionIsCollapsible={};const togglerDoms=this.element.querySelectorAll(this.selectors.SECTION_ITEM+" "+this.selectors.COLLAPSE);for(let togglerDom of togglerDoms)sectionIsCollapsible[togglerDom.closest(this.selectors.SECTION).dataset.id]=!0;let allcollapsed=!0,allexpanded=!0;state.section.forEach((section=>{sectionIsCollapsible[section.id]&&(allcollapsed=allcollapsed&§ion.contentcollapsed,allexpanded=allexpanded&&!section.contentcollapsed)})),allexpanded&&allcollapsed?target.style.visibility="hidden":(allcollapsed&&(target.classList.add(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!1)),allexpanded&&(target.classList.remove(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!0)),target.style.visibility="visible")}_startProcessing(){this.dettachedCms={},this.dettachedSections={}}_completionHandler(_ref3){let{detail:detail}=_ref3;void 0!==detail&&this.reactive.dispatch("cmCompletion",[detail.cmid],detail.completed)}_scrollHandler(){const pageOffset=window.scrollY,items=this.reactive.getExporter().allItemsArray(this.reactive.state);let pageItem=null;items.every((item=>{const index="section"===item.type?this.sections:this.cms;if(void 0===index[item.id])return!0;const element=index[item.id].element;return pageItem=item,pageOffset>=element.offsetTop})),pageItem&&this.reactive.dispatch("setPageItem",pageItem.type,pageItem.id)}_refreshSectionNumber(_ref4){let{element:element}=_ref4;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)return;target.id="section-".concat(element.number),target.dataset.sectionid=element.number,target.dataset.number=element.number;const inplace=_inplace_editable.default.getInplaceEditable(target.querySelector(this.selectors.SECTION_ITEM));if(inplace){const currentvalue=inplace.getValue(),currentitemid=inplace.getItemId();""===inplace.getValue()&&(currentitemid!=element.id||currentvalue==element.rawtitle&&""!=element.rawtitle||inplace.setValue(element.rawtitle))}}_refreshSectionTitle(_ref5){let{element:element}=_ref5;document.querySelectorAll(this.selectorGenerators.sectionNameFor(element.id)).forEach((sectionNameFor=>{sectionNameFor.textContent=element.title}))}_refreshSectionCmlist(_ref6){var _element$cmlist;let{state:state,element:element}=_ref6;const cmlist=null!==(_element$cmlist=element.cmlist)&&void 0!==_element$cmlist?_element$cmlist:[],section=this.getElement(this.selectors.SECTION,element.id),listparent=null==section?void 0:section.querySelector(this.selectors.SECTION_CMLIST),createCm=this._createCmItem.bind(this);listparent&&this._fixOrder(listparent,cmlist,this.selectors.CM,this.dettachedCms,createCm),this._refreshAllSectionsToggler(state)}_refreshCourseSectionlist(_ref7){let{state:state}=_ref7;if(null!==this.reactive.sectionReturn)return;const sectionlist=this.reactive.getExporter().listedSectionIds(state),listparent=this.getElement(this.selectors.COURSE_SECTIONLIST),createSection=this._createSectionItem.bind(this);listparent&&this._fixOrder(listparent,sectionlist,this.selectors.SECTION,this.dettachedSections,createSection),this._refreshAllSectionsToggler(state)}_indexContents(){this._scanIndex(this.selectors.SECTION,this.sections,(item=>new _section.default(item))),this._scanIndex(this.selectors.CM,this.cms,(item=>new _cmitem.default(item)))}_scanIndex(selector,index,creationhandler){this.getElements("".concat(selector,":not([data-indexed])")).forEach((item=>{var _item$dataset;null!=item&&null!==(_item$dataset=item.dataset)&&void 0!==_item$dataset&&_item$dataset.id&&(void 0!==index[item.dataset.id]&&index[item.dataset.id].unregister(),index[item.dataset.id]=creationhandler({...this,element:item}),item.dataset.indexed=!0)}))}_reloadCm(_ref8){let{element:element}=_ref8;if(!this.getElement(this.selectors.CM,element.id))return;this._getDebouncedReloadCm(element.id)()}_getDebouncedReloadCm(cmId){const pendingKey="courseformat/content:reloadCm_".concat(cmId);let debouncedReload=this.debouncedReloads.get(pendingKey);if(debouncedReload)return debouncedReload;return debouncedReload=(0,_utils.debounce)((()=>{var _this$reactive$sectio;const pendingReload=new _pending.default(pendingKey);this.debouncedReloads.delete(pendingKey);const cmitem=this.getElement(this.selectors.CM,cmId);if(!cmitem)return pendingReload.resolve();return _fragment.default.loadFragment("core_courseformat","cmitem",_config.default.courseContextId,{id:cmId,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio?_this$reactive$sectio:null}).then(((html,js)=>document.contains(cmitem)?(_templates.default.replaceNode(cmitem,html,js),this._indexContents(),this._refreshAllSectionsToggler(this.reactive.stateManager.state),pendingReload.resolve(),!0):(pendingReload.resolve(),!1))).catch((()=>{pendingReload.resolve()})),pendingReload}),200,{cancel:!0,pending:!0}),this.debouncedReloads.set(pendingKey,debouncedReload),debouncedReload}_cancelDebouncedReloadCm(cmId){const pendingKey="courseformat/content:reloadCm_".concat(cmId),debouncedReload=this.debouncedReloads.get(pendingKey);debouncedReload&&(debouncedReload.cancel(),this.debouncedReloads.delete(pendingKey))}_reloadSection(_ref9){let{element:element}=_ref9;const pendingReload=new _pending.default("courseformat/content:reloadSection_".concat(element.id)),sectionitem=this.getElement(this.selectors.SECTION,element.id);if(sectionitem){var _this$reactive$sectio2;for(const cmId of element.cmlist)this._cancelDebouncedReloadCm(cmId);_fragment.default.loadFragment("core_courseformat","section",_config.default.courseContextId,{id:element.id,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio2=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio2?_this$reactive$sectio2:null}).then(((html,js)=>{_templates.default.replaceNode(sectionitem,html,js),this._indexContents(),this._refreshAllSectionsToggler(this.reactive.stateManager.state),pendingReload.resolve()})).catch((()=>{pendingReload.resolve()}))}}_createCmItem(container,cmid){const newItem=document.createElement(this.selectors.ACTIVITYTAG);return newItem.dataset.for="cmitem",newItem.dataset.id=cmid,newItem.id="module-".concat(cmid),newItem.classList.add(this.classes.ACTIVITY),container.append(newItem),this._reloadCm({element:this.reactive.get("cm",cmid)}),newItem}_createSectionItem(container,sectionid){const section=this.reactive.get("section",sectionid),newItem=document.createElement(this.selectors.SECTIONTAG);return newItem.dataset.for="section",newItem.dataset.id=sectionid,newItem.dataset.number=section.number,newItem.id="section-".concat(sectionid),newItem.classList.add(this.classes.SECTION),container.append(newItem),this._reloadSection({element:section}),newItem}async _fixOrder(container,neworder,selector,dettachedelements,createMethod){if(void 0===container)return;if(!neworder.length)return container.classList.add("hidden"),void(container.innerHTML="");container.classList.remove("hidden"),neworder.forEach(((itemid,index)=>{var _ref10,_this$getElement;let item=null!==(_ref10=null!==(_this$getElement=this.getElement(selector,itemid))&&void 0!==_this$getElement?_this$getElement:dettachedelements[itemid])&&void 0!==_ref10?_ref10:createMethod(container,itemid);if(void 0===item)return;const currentitem=container.children[index];void 0!==currentitem?currentitem!==item&&container.insertBefore(item,currentitem):container.append(item)}));const orphanElements=[];for(;container.children.length>neworder.length;){var _lastchild$classList,_lastchild$dataset;const lastchild=container.lastChild;var _lastchild$dataset$id,_lastchild$dataset2;if(null!=lastchild&&null!==(_lastchild$classList=lastchild.classList)&&void 0!==_lastchild$classList&&_lastchild$classList.contains("dndupload-preview")||null!==(_lastchild$dataset=lastchild.dataset)&&void 0!==_lastchild$dataset&&_lastchild$dataset.orphan)orphanElements.push(lastchild);else dettachedelements[null!==(_lastchild$dataset$id=null==lastchild||null===(_lastchild$dataset2=lastchild.dataset)||void 0===_lastchild$dataset2?void 0:_lastchild$dataset2.id)&&void 0!==_lastchild$dataset$id?_lastchild$dataset$id:0]=lastchild;container.removeChild(lastchild)}orphanElements.forEach((element=>{container.append(element)}))}}return _exports.default=Component,_exports.default})); + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_config=_interopRequireDefault(_config),_inplace_editable=_interopRequireDefault(_inplace_editable),_section=_interopRequireDefault(_section),_cmitem=_interopRequireDefault(_cmitem),_fragment=_interopRequireDefault(_fragment),_templates=_interopRequireDefault(_templates),_actions=_interopRequireDefault(_actions),CourseEvents=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(CourseEvents),_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);class Component extends _reactive.BaseComponent{create(descriptor){var _descriptor$sectionRe;this.name="course_format",this.selectors={SECTION:"[data-for='section']",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"]',TOGGLEALL:'[data-toggle="toggleall"]',ACTIVITYTAG:"li",SECTIONTAG:"li"},this.selectorGenerators={cmNameFor:id=>"[data-cm-name-for='".concat(id,"']"),sectionNameFor:id=>"[data-section-name-for='".concat(id,"']")},this.classes={COLLAPSED:"collapsed",ACTIVITY:"activity",STATEDREADY:"stateready",SECTION:"section"},this.dettachedCms={},this.dettachedSections={},this.sections={},this.cms={},this.sectionReturn=null!==(_descriptor$sectionRe=descriptor.sectionReturn)&&void 0!==_descriptor$sectionRe?_descriptor$sectionRe:null,this.debouncedReloads=new Map}static init(target,selectors,sectionReturn){return new Component({element:document.getElementById(target),reactive:(0,_courseeditor.getCurrentCourseEditor)(),selectors:selectors,sectionReturn:sectionReturn})}stateReady(state){this._indexContents(),this.addEventListener(this.element,"click",this._sectionTogglers);const toogleAll=this.getElement(this.selectors.TOGGLEALL);if(toogleAll){const collapseElementIds=[...this.getElements(this.selectors.COLLAPSE)].map((element=>element.id));toogleAll.setAttribute("aria-controls",collapseElementIds.join(" ")),this.addEventListener(toogleAll,"click",this._allSectionToggler),this.addEventListener(toogleAll,"keydown",(e=>{" "===e.key&&this._allSectionToggler(e)})),this._refreshAllSectionsToggler(state)}this.reactive.supportComponents&&(this.reactive.isEditing&&new _actions.default(this),this.element.classList.add(this.classes.STATEDREADY)),this.addEventListener(this.element,CourseEvents.manualCompletionToggled,this._completionHandler),this.addEventListener(document,"scroll",this._scrollHandler)}_sectionTogglers(event){const sectionlink=event.target.closest(this.selectors.TOGGLER),closestCollapse=event.target.closest(this.selectors.COLLAPSE),isChevron=null==closestCollapse?void 0:closestCollapse.closest(this.selectors.SECTION_ITEM);if(sectionlink||isChevron){var _toggler$classList$co;const section=event.target.closest(this.selectors.SECTION),toggler=section.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co&&_toggler$classList$co,sectionId=section.getAttribute("data-id");this.reactive.dispatch("sectionContentCollapsed",[sectionId],!isCollapsed)}}_allSectionToggler(event){event.preventDefault();const isAllCollapsed=event.target.closest(this.selectors.TOGGLEALL).classList.contains(this.classes.COLLAPSED),visibleSections=this.reactive.get("course").sectionlist.filter((sectionId=>{const sectionElement=this.getElement(this.selectors.SECTION,sectionId);return sectionElement&§ionElement.querySelector(this.selectors.COLLAPSE)}));this.reactive.dispatch("sectionContentCollapsed",null!=visibleSections?visibleSections:[],!isAllCollapsed)}getWatchers(){return this.reactive.sectionReturn=this.sectionReturn,this.reactive.supportComponents?[{watch:"cm.visible:updated",handler:this._reloadCm},{watch:"cm.stealth:updated",handler:this._reloadCm},{watch:"cm.sectionid:updated",handler:this._reloadCm},{watch:"cm.indent:updated",handler:this._reloadCm},{watch:"cm.groupmode:updated",handler:this._reloadCm},{watch:"cm.name:updated",handler:this._refreshCmName},{watch:"section.number:updated",handler:this._refreshSectionNumber},{watch:"section.title:updated",handler:this._refreshSectionTitle},{watch:"section.contentcollapsed:updated",handler:this._refreshSectionCollapsed},{watch:"transaction:start",handler:this._startProcessing},{watch:"course.sectionlist:updated",handler:this._refreshCourseSectionlist},{watch:"section.cmlist:updated",handler:this._refreshSectionCmlist},{watch:"section.visible:updated",handler:this._reloadSection},{watch:"state:updated",handler:this._indexContents}]:[]}_refreshCmName(_ref){let{element:element}=_ref;this.getElements(this.selectorGenerators.cmNameFor(element.id)).forEach((cmNameFor=>{cmNameFor.textContent=element.name}))}_refreshSectionCollapsed(_ref2){var _toggler$classList$co2;let{state:state,element:element}=_ref2;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)throw new Error("Unknown section with ID ".concat(element.id));const toggler=target.querySelector(this.selectors.COLLAPSE),isCollapsed=null!==(_toggler$classList$co2=null==toggler?void 0:toggler.classList.contains(this.classes.COLLAPSED))&&void 0!==_toggler$classList$co2&&_toggler$classList$co2;if(element.contentcollapsed!==isCollapsed){var _toggler$dataset$targ;let collapsibleId=null!==(_toggler$dataset$targ=toggler.dataset.target)&&void 0!==_toggler$dataset$targ?_toggler$dataset$targ:toggler.getAttribute("href");if(!collapsibleId)return;collapsibleId=collapsibleId.replace("#","");const collapsible=document.getElementById(collapsibleId);if(!collapsible)return;(0,_jquery.default)(collapsible).collapse(element.contentcollapsed?"hide":"show")}this._refreshAllSectionsToggler(state)}_refreshAllSectionsToggler(state){const target=this.getElement(this.selectors.TOGGLEALL);if(!target)return;let sectionIsCollapsible={};const togglerDoms=this.element.querySelectorAll(this.selectors.SECTION_ITEM+" "+this.selectors.COLLAPSE);for(let togglerDom of togglerDoms)sectionIsCollapsible[togglerDom.closest(this.selectors.SECTION).dataset.id]=!0;let allcollapsed=!0,allexpanded=!0;state.section.forEach((section=>{sectionIsCollapsible[section.id]&&(allcollapsed=allcollapsed&§ion.contentcollapsed,allexpanded=allexpanded&&!section.contentcollapsed)})),allcollapsed&&(target.classList.add(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!1)),allexpanded&&(target.classList.remove(this.classes.COLLAPSED),target.setAttribute("aria-expanded",!0)),Object.values(sectionIsCollapsible).length?target.classList.remove("d-none"):target.classList.add("d-none")}_startProcessing(){this.dettachedCms={},this.dettachedSections={}}_completionHandler(_ref3){let{detail:detail}=_ref3;void 0!==detail&&this.reactive.dispatch("cmCompletion",[detail.cmid],detail.completed)}_scrollHandler(){const pageOffset=window.scrollY,items=this.reactive.getExporter().allItemsArray(this.reactive.state);let pageItem=null;items.every((item=>{const index="section"===item.type?this.sections:this.cms;if(void 0===index[item.id])return!0;const element=index[item.id].element;return pageItem=item,pageOffset>=element.offsetTop})),pageItem&&this.reactive.dispatch("setPageItem",pageItem.type,pageItem.id)}_refreshSectionNumber(_ref4){let{element:element}=_ref4;const target=this.getElement(this.selectors.SECTION,element.id);if(!target)return;target.id="section-".concat(element.number),target.dataset.sectionid=element.number,target.dataset.number=element.number;const inplace=_inplace_editable.default.getInplaceEditable(target.querySelector(this.selectors.SECTION_ITEM));if(inplace){const currentvalue=inplace.getValue(),currentitemid=inplace.getItemId();""===inplace.getValue()&&(currentitemid!=element.id||currentvalue==element.rawtitle&&""!=element.rawtitle||inplace.setValue(element.rawtitle))}}_refreshSectionTitle(_ref5){let{element:element}=_ref5;document.querySelectorAll(this.selectorGenerators.sectionNameFor(element.id)).forEach((sectionNameFor=>{sectionNameFor.textContent=element.title}))}_refreshSectionCmlist(_ref6){var _element$cmlist;let{state:state,element:element}=_ref6;const cmlist=null!==(_element$cmlist=element.cmlist)&&void 0!==_element$cmlist?_element$cmlist:[],section=this.getElement(this.selectors.SECTION,element.id),listparent=null==section?void 0:section.querySelector(this.selectors.SECTION_CMLIST),createCm=this._createCmItem.bind(this);listparent&&this._fixOrder(listparent,cmlist,this.selectors.CM,this.dettachedCms,createCm),this._refreshAllSectionsToggler(state)}_refreshCourseSectionlist(_ref7){let{state:state}=_ref7;if(null!==this.reactive.sectionReturn)return;const sectionlist=this.reactive.getExporter().listedSectionIds(state),listparent=this.getElement(this.selectors.COURSE_SECTIONLIST),createSection=this._createSectionItem.bind(this);listparent&&this._fixOrder(listparent,sectionlist,this.selectors.SECTION,this.dettachedSections,createSection),this._refreshAllSectionsToggler(state)}_indexContents(){this._scanIndex(this.selectors.SECTION,this.sections,(item=>new _section.default(item))),this._scanIndex(this.selectors.CM,this.cms,(item=>new _cmitem.default(item)))}_scanIndex(selector,index,creationhandler){this.getElements("".concat(selector,":not([data-indexed])")).forEach((item=>{var _item$dataset;null!=item&&null!==(_item$dataset=item.dataset)&&void 0!==_item$dataset&&_item$dataset.id&&(void 0!==index[item.dataset.id]&&index[item.dataset.id].unregister(),index[item.dataset.id]=creationhandler({...this,element:item}),item.dataset.indexed=!0)}))}_reloadCm(_ref8){let{element:element}=_ref8;if(!this.getElement(this.selectors.CM,element.id))return;this._getDebouncedReloadCm(element.id)()}_getDebouncedReloadCm(cmId){const pendingKey="courseformat/content:reloadCm_".concat(cmId);let debouncedReload=this.debouncedReloads.get(pendingKey);if(debouncedReload)return debouncedReload;return debouncedReload=(0,_utils.debounce)((()=>{var _this$reactive$sectio;const pendingReload=new _pending.default(pendingKey);this.debouncedReloads.delete(pendingKey);const cmitem=this.getElement(this.selectors.CM,cmId);if(!cmitem)return pendingReload.resolve();return _fragment.default.loadFragment("core_courseformat","cmitem",_config.default.courseContextId,{id:cmId,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio?_this$reactive$sectio:null}).then(((html,js)=>document.contains(cmitem)?(_templates.default.replaceNode(cmitem,html,js),this._indexContents(),this._refreshAllSectionsToggler(this.reactive.stateManager.state),pendingReload.resolve(),!0):(pendingReload.resolve(),!1))).catch((()=>{pendingReload.resolve()})),pendingReload}),200,{cancel:!0,pending:!0}),this.debouncedReloads.set(pendingKey,debouncedReload),debouncedReload}_cancelDebouncedReloadCm(cmId){const pendingKey="courseformat/content:reloadCm_".concat(cmId),debouncedReload=this.debouncedReloads.get(pendingKey);debouncedReload&&(debouncedReload.cancel(),this.debouncedReloads.delete(pendingKey))}_reloadSection(_ref9){let{element:element}=_ref9;const pendingReload=new _pending.default("courseformat/content:reloadSection_".concat(element.id)),sectionitem=this.getElement(this.selectors.SECTION,element.id);if(sectionitem){var _this$reactive$sectio2;for(const cmId of element.cmlist)this._cancelDebouncedReloadCm(cmId);_fragment.default.loadFragment("core_courseformat","section",_config.default.courseContextId,{id:element.id,courseid:_config.default.courseId,sr:null!==(_this$reactive$sectio2=this.reactive.sectionReturn)&&void 0!==_this$reactive$sectio2?_this$reactive$sectio2:null}).then(((html,js)=>{_templates.default.replaceNode(sectionitem,html,js),this._indexContents(),this._refreshAllSectionsToggler(this.reactive.stateManager.state),pendingReload.resolve()})).catch((()=>{pendingReload.resolve()}))}}_createCmItem(container,cmid){const newItem=document.createElement(this.selectors.ACTIVITYTAG);return newItem.dataset.for="cmitem",newItem.dataset.id=cmid,newItem.id="module-".concat(cmid),newItem.classList.add(this.classes.ACTIVITY),container.append(newItem),this._reloadCm({element:this.reactive.get("cm",cmid)}),newItem}_createSectionItem(container,sectionid){const section=this.reactive.get("section",sectionid),newItem=document.createElement(this.selectors.SECTIONTAG);return newItem.dataset.for="section",newItem.dataset.id=sectionid,newItem.dataset.number=section.number,newItem.id="section-".concat(sectionid),newItem.classList.add(this.classes.SECTION),container.append(newItem),this._reloadSection({element:section}),newItem}async _fixOrder(container,neworder,selector,dettachedelements,createMethod){if(void 0===container)return;if(!neworder.length)return container.classList.add("hidden"),void(container.innerHTML="");container.classList.remove("hidden"),neworder.forEach(((itemid,index)=>{var _ref10,_this$getElement;let item=null!==(_ref10=null!==(_this$getElement=this.getElement(selector,itemid))&&void 0!==_this$getElement?_this$getElement:dettachedelements[itemid])&&void 0!==_ref10?_ref10:createMethod(container,itemid);if(void 0===item)return;const currentitem=container.children[index];void 0!==currentitem?currentitem!==item&&container.insertBefore(item,currentitem):container.append(item)}));const orphanElements=[];for(;container.children.length>neworder.length;){var _lastchild$classList,_lastchild$dataset;const lastchild=container.lastChild;var _lastchild$dataset$id,_lastchild$dataset2;if(null!=lastchild&&null!==(_lastchild$classList=lastchild.classList)&&void 0!==_lastchild$classList&&_lastchild$classList.contains("dndupload-preview")||null!==(_lastchild$dataset=lastchild.dataset)&&void 0!==_lastchild$dataset&&_lastchild$dataset.orphan)orphanElements.push(lastchild);else dettachedelements[null!==(_lastchild$dataset$id=null==lastchild||null===(_lastchild$dataset2=lastchild.dataset)||void 0===_lastchild$dataset2?void 0:_lastchild$dataset2.id)&&void 0!==_lastchild$dataset$id?_lastchild$dataset$id:0]=lastchild;container.removeChild(lastchild)}orphanElements.forEach((element=>{container.append(element)}))}}return _exports.default=Component,_exports.default})); //# sourceMappingURL=content.min.js.map \ No newline at end of file diff --git a/course/format/amd/build/local/content.min.js.map b/course/format/amd/build/local/content.min.js.map index 1e274977a0bf3..7509f3fd71abd 100644 --- a/course/format/amd/build/local/content.min.js.map +++ b/course/format/amd/build/local/content.min.js.map @@ -1 +1 @@ -{"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 .\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 \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 // Find collapsible sections.\n let sectionIsCollapsible = {};\n const togglerDoms = this.element.querySelectorAll(this.selectors.SECTION_ITEM + \" \" + this.selectors.COLLAPSE);\n for (let togglerDom of togglerDoms) {\n sectionIsCollapsible[togglerDom.closest(this.selectors.SECTION).dataset.id] = true;\n }\n\n // Filter section list by collapsibility.\n const course = this.reactive.get('course');\n const sectionCollapsibleList = (course.sectionlist ?? []).filter(section => sectionIsCollapsible[section]);\n\n // Toggle sections' collapse states.\n this.reactive.dispatch(\n 'sectionContentCollapsed',\n sectionCollapsibleList,\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\n // Find collapsible sections.\n let sectionIsCollapsible = {};\n const togglerDoms = this.element.querySelectorAll(this.selectors.SECTION_ITEM + \" \" + this.selectors.COLLAPSE);\n for (let togglerDom of togglerDoms) {\n sectionIsCollapsible[togglerDom.closest(this.selectors.SECTION).dataset.id] = true;\n }\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 if (sectionIsCollapsible[section.id]) {\n allcollapsed = allcollapsed && section.contentcollapsed;\n allexpanded = allexpanded && !section.contentcollapsed;\n }\n }\n );\n\n // Refresh all-sections toggler.\n if (allexpanded && allcollapsed) {\n // No collapsible sections.\n target.style.visibility = \"hidden\";\n } else {\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 target.style.visibility = \"visible\";\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.state the full state object.\n * @param {Object} param.element details the update details.\n */\n _refreshSectionCmlist({state, 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 this._refreshAllSectionsToggler(state);\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 this._refreshAllSectionsToggler(state);\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 this._refreshAllSectionsToggler(this.reactive.stateManager.state);\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 this._refreshAllSectionsToggler(this.reactive.stateManager.state);\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 // Remove the remaining elements.\n const orphanElements = [];\n while (container.children.length > neworder.length) {\n const lastchild = container.lastChild;\n // Any orphan element is always displayed after the listed elements.\n // Also, some third-party plugins can use a fake dndupload-preview indicator.\n if (lastchild?.classList?.contains('dndupload-preview') || lastchild.dataset?.orphan) {\n orphanElements.push(lastchild);\n } else {\n dettachedelements[lastchild?.dataset?.id ?? 0] = lastchild;\n }\n container.removeChild(lastchild);\n }\n // Restore orphan elements.\n orphanElements.forEach((element) => {\n container.append(element);\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","sectionIsCollapsible","togglerDoms","querySelectorAll","togglerDom","dataset","sectionCollapsibleList","get","sectionlist","filter","getWatchers","watch","handler","_reloadCm","_refreshCmName","_refreshSectionNumber","_refreshSectionTitle","_refreshSectionCollapsed","_startProcessing","_refreshCourseSectionlist","_refreshSectionCmlist","_reloadSection","forEach","textContent","Error","contentcollapsed","collapsibleId","replace","collapsible","collapse","allcollapsed","allexpanded","style","visibility","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","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","stateManager","catch","cancel","pending","set","_cancelDebouncedReloadCm","sectionitem","container","newItem","createElement","for","append","neworder","dettachedelements","createMethod","length","innerHTML","itemid","currentitem","children","insertBefore","orphanElements","lastchild","lastChild","_lastchild$dataset","orphan","push","_lastchild$dataset2","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,eAG1DwD,qBAAuB,SACrBC,YAActC,KAAKR,QAAQ+C,iBAAiBvC,KAAKnC,UAAUE,aAAe,IAAMiC,KAAKnC,UAAUO,cAChG,IAAIoE,cAAcF,YACnBD,qBAAqBG,WAAWhB,QAAQxB,KAAKnC,UAAUC,SAAS2E,QAAQ/D,KAAM,QAK5EgE,oDADS1C,KAAKL,SAASgD,IAAI,UACMC,+DAAe,IAAIC,QAAOlB,SAAWU,qBAAqBV,gBAG5FhC,SAASuC,SACV,0BACAQ,wBACCN,gBASTU,0BAGSnD,SAASP,cAAgBY,KAAKZ,cAG9BY,KAAKL,SAASkB,kBAGZ,CAEH,CAACkC,2BAA6BC,QAAShD,KAAKiD,WAC5C,CAACF,2BAA6BC,QAAShD,KAAKiD,WAC5C,CAACF,6BAA+BC,QAAShD,KAAKiD,WAC9C,CAACF,0BAA4BC,QAAShD,KAAKiD,WAC3C,CAACF,6BAA+BC,QAAShD,KAAKiD,WAC9C,CAACF,wBAA0BC,QAAShD,KAAKkD,gBAEzC,CAACH,+BAAiCC,QAAShD,KAAKmD,uBAChD,CAACJ,8BAAgCC,QAAShD,KAAKoD,sBAE/C,CAACL,yCAA2CC,QAAShD,KAAKqD,0BAE1D,CAACN,0BAA4BC,QAAShD,KAAKsD,kBAC3C,CAACP,mCAAqCC,QAAShD,KAAKuD,2BACpD,CAACR,+BAAiCC,QAAShD,KAAKwD,uBAEhD,CAACT,gCAAkCC,QAAShD,KAAKyD,gBAEjD,CAACV,sBAAwBC,QAAShD,KAAKF,iBAtBhC,GAgCfoD,yBAAe1D,QAACA,cAGUQ,KAAKK,YACvBL,KAAKxB,mBAAmBC,UAAUe,QAAQd,KAEhCgF,SAASjF,YACnBA,UAAUkF,YAAcnE,QAAQ5B,QAcxCyF,+DAAyBxD,MAACA,MAADL,QAAQA,qBACvBD,OAASS,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,QAC1Da,aACK,IAAIqE,wCAAiCpE,QAAQd,WAGjDkD,QAAUrC,OAAOsC,cAAc7B,KAAKnC,UAAUO,UAC9C0D,2CAAcF,MAAAA,eAAAA,QAASZ,UAAUe,SAAS/B,KAAKpB,QAAQC,wEAEzDW,QAAQqE,mBAAqB/B,YAAa,+BACtCgC,4CAAgBlC,QAAQa,QAAQlD,8DAAUqC,QAAQK,aAAa,YAC9D6B,qBAGLA,cAAgBA,cAAcC,QAAQ,IAAK,UACrCC,YAAcvE,SAASC,eAAeoE,mBACvCE,uCAOEA,aAAaC,SAASzE,QAAQqE,iBAAmB,OAAS,aAGhEjD,2BAA2Bf,OAQpCe,2BAA2Bf,aACjBN,OAASS,KAAKG,WAAWH,KAAKnC,UAAUQ,eACzCkB,kBAKD8C,qBAAuB,SACrBC,YAActC,KAAKR,QAAQ+C,iBAAiBvC,KAAKnC,UAAUE,aAAe,IAAMiC,KAAKnC,UAAUO,cAChG,IAAIoE,cAAcF,YACnBD,qBAAqBG,WAAWhB,QAAQxB,KAAKnC,UAAUC,SAAS2E,QAAQ/D,KAAM,MAI9EwF,cAAe,EACfC,aAAc,EAClBtE,MAAM8B,QAAQ+B,SACV/B,UACQU,qBAAqBV,QAAQjD,MAC7BwF,aAAeA,cAAgBvC,QAAQkC,iBACvCM,YAAcA,cAAgBxC,QAAQkC,qBAM9CM,aAAeD,aAEf3E,OAAO6E,MAAMC,WAAa,UAEtBH,eACA3E,OAAOyB,UAAUC,IAAIjB,KAAKpB,QAAQC,WAClCU,OAAOgB,aAAa,iBAAiB,IAErC4D,cACA5E,OAAOyB,UAAUsD,OAAOtE,KAAKpB,QAAQC,WACrCU,OAAOgB,aAAa,iBAAiB,IAEzChB,OAAO6E,MAAMC,WAAa,WAWlCf,wBAGStE,aAAe,QACfC,kBAAoB,GAQ7BmC,8BAAmBmD,OAACA,mBACDC,IAAXD,aAGC5E,SAASuC,SAAS,eAAgB,CAACqC,OAAOE,MAAOF,OAAOG,WAMjErD,uBACUsD,WAAaC,OAAOC,QACpBC,MAAQ9E,KAAKL,SAASoF,cAAcC,cAAchF,KAAKL,SAASE,WAElEoF,SAAW,KACfH,MAAMI,OAAMC,aACFC,MAAuB,YAAdD,KAAKE,KAAsBrF,KAAKd,SAAWc,KAAKb,YACxCqF,IAAnBY,MAAMD,KAAKzG,WACJ,QAGLc,QAAU4F,MAAMD,KAAKzG,IAAIc,eAC/ByF,SAAWE,KACJR,YAAcnF,QAAQ8F,aAE7BL,eACKtF,SAASuC,SAAS,cAAe+C,SAASI,KAAMJ,SAASvG,IAiBtEyE,iCAAsB3D,QAACA,qBAEbD,OAASS,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,QAC1Da,cAKLA,OAAOb,qBAAgBc,QAAQ+F,QAI/BhG,OAAOkD,QAAQ+C,UAAYhG,QAAQ+F,OAEnChG,OAAOkD,QAAQ8C,OAAS/F,QAAQ+F,aAG1BE,QAAUC,0BAAgBC,mBAAmBpG,OAAOsC,cAAc7B,KAAKnC,UAAUE,kBACnF0H,QAAS,OAGHG,aAAeH,QAAQI,WACvBC,cAAgBL,QAAQM,YAEH,KAAvBN,QAAQI,aAEJC,eAAiBtG,QAAQd,IAAOkH,cAAgBpG,QAAQwG,UAAgC,IAApBxG,QAAQwG,UAC5EP,QAAQQ,SAASzG,QAAQwG,YAYzC5C,gCAAqB5D,QAACA,eAESC,SAAS8C,iBAChCvC,KAAKxB,mBAAmBG,eAAea,QAAQd,KAEhCgF,SAAS/E,iBACxBA,eAAegF,YAAcnE,QAAQ0G,SAW7C1C,qDAAsB3D,MAACA,MAADL,QAAQA,qBACpB2G,+BAAS3G,QAAQ2G,kDAAU,GAC3BxE,QAAU3B,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,IAC1D0H,WAAazE,MAAAA,eAAAA,QAASE,cAAc7B,KAAKnC,UAAUG,gBAEnDqI,SAAWrG,KAAKsG,cAAcC,KAAKvG,MACrCoG,iBACKI,UAAUJ,WAAYD,OAAQnG,KAAKnC,UAAUK,GAAI8B,KAAKhB,aAAcqH,eAExEzF,2BAA2Bf,OASpC0D,qCAA0B1D,MAACA,gBAEa,OAAhCG,KAAKL,SAASP,2BAGZwD,YAAc5C,KAAKL,SAASoF,cAAc0B,iBAAiB5G,OAC3DuG,WAAapG,KAAKG,WAAWH,KAAKnC,UAAUI,oBAE5CyI,cAAgB1G,KAAK2G,mBAAmBJ,KAAKvG,MAC/CoG,iBACKI,UAAUJ,WAAYxD,YAAa5C,KAAKnC,UAAUC,QAASkC,KAAKf,kBAAmByH,oBAEvF9F,2BAA2Bf,OAQpCC,sBAES8G,WACD5G,KAAKnC,UAAUC,QACfkC,KAAKd,UACJiG,MACU,IAAI0B,iBAAQ1B,aAKtByB,WACD5G,KAAKnC,UAAUK,GACf8B,KAAKb,KACJgG,MACU,IAAI2B,gBAAO3B,QAc9ByB,WAAWG,SAAU3B,MAAO4B,iBACVhH,KAAKK,sBAAe0G,kCAC5BrD,SAASyB,yBACNA,MAAAA,4BAAAA,KAAM1C,kCAANwE,cAAevI,UAIW8F,IAA3BY,MAAMD,KAAK1C,QAAQ/D,KACnB0G,MAAMD,KAAK1C,QAAQ/D,IAAIwI,aAG3B9B,MAAMD,KAAK1C,QAAQ/D,IAAMsI,gBAAgB,IAClChH,KACHR,QAAS2F,OAGbA,KAAK1C,QAAQ0E,SAAU,MAa/BlE,qBAAUzD,QAACA,mBACFQ,KAAKG,WAAWH,KAAKnC,UAAUK,GAAIsB,QAAQd,WAGxBsB,KAAKoH,sBAAsB5H,QAAQd,GAC3D2I,GAQJD,sBAAsBE,YACZC,mDAA8CD,UAChDD,gBAAkBrH,KAAKX,iBAAiBsD,IAAI4E,eAC5CF,uBACOA,uBAmCXA,iBAAkB,oBAjCH,qCACLG,cAAgB,IAAIC,iBAAQF,iBAC7BlI,iBAAiBqI,OAAOH,kBACvBI,OAAS3H,KAAKG,WAAWH,KAAKnC,UAAUK,GAAIoJ,UAC7CK,cACMH,cAAcI,iBAETC,kBAASC,aACrB,oBACA,SACAC,gBAAOC,gBACP,CACItJ,GAAI4I,KACJW,SAAUF,gBAAOG,SACjBC,iCAAInI,KAAKL,SAASP,qEAAiB,OAGnCgJ,MAAK,CAACC,KAAMC,KAEX7I,SAASsC,SAAS4F,4BAIbY,YAAYZ,OAAQU,KAAMC,SAC/BxI,sBACAc,2BAA2BZ,KAAKL,SAAS6I,aAAa3I,OAC3D2H,cAAcI,WACP,IAPHJ,cAAcI,WACP,KAOZa,OAAM,KACLjB,cAAcI,aAEXJ,gBAIP,IACA,CACIkB,QAAQ,EAAMC,SAAS,SAG1BtJ,iBAAiBuJ,IAAIrB,WAAYF,iBAC/BA,gBAOXwB,yBAAyBvB,YACfC,mDAA8CD,MAC9CD,gBAAkBrH,KAAKX,iBAAiBsD,IAAI4E,YAC7CF,kBAGLA,gBAAgBqB,cACXrJ,iBAAiBqI,OAAOH,aAYjC9D,0BAAejE,QAACA,qBACNgI,cAAgB,IAAIC,8DAA8CjI,QAAQd,KAC1EoK,YAAc9I,KAAKG,WAAWH,KAAKnC,UAAUC,QAAS0B,QAAQd,OAChEoK,YAAa,gCAER,MAAMxB,QAAQ9H,QAAQ2G,YAClB0C,yBAAyBvB,MAElBO,kBAASC,aACrB,oBACA,UACAC,gBAAOC,gBACP,CACItJ,GAAIc,QAAQd,GACZuJ,SAAUF,gBAAOG,SACjBC,kCAAInI,KAAKL,SAASP,uEAAiB,OAGnCgJ,MAAK,CAACC,KAAMC,yBACNC,YAAYO,YAAaT,KAAMC,SACpCxI,sBACAc,2BAA2BZ,KAAKL,SAAS6I,aAAa3I,OAC3D2H,cAAcI,aACfa,OAAM,KACLjB,cAAcI,cAe1BtB,cAAcyC,UAAWtE,YACfuE,QAAUvJ,SAASwJ,cAAcjJ,KAAKnC,UAAUS,oBACtD0K,QAAQvG,QAAQyG,IAAM,SACtBF,QAAQvG,QAAQ/D,GAAK+F,KAErBuE,QAAQtK,oBAAe+F,MACvBuE,QAAQhI,UAAUC,IAAIjB,KAAKpB,QAAQE,UACnCiK,UAAUI,OAAOH,cACZ/F,UAAU,CACXzD,QAASQ,KAAKL,SAASgD,IAAI,KAAM8B,QAE9BuE,QAaXrC,mBAAmBoC,UAAWvD,iBACpB7D,QAAU3B,KAAKL,SAASgD,IAAI,UAAW6C,WACvCwD,QAAUvJ,SAASwJ,cAAcjJ,KAAKnC,UAAUU,mBACtDyK,QAAQvG,QAAQyG,IAAM,UACtBF,QAAQvG,QAAQ/D,GAAK8G,UACrBwD,QAAQvG,QAAQ8C,OAAS5D,QAAQ4D,OAEjCyD,QAAQtK,qBAAgB8G,WACxBwD,QAAQhI,UAAUC,IAAIjB,KAAKpB,QAAQd,SACnCiL,UAAUI,OAAOH,cACZvF,eAAe,CAChBjE,QAASmC,UAENqH,wBAYKD,UAAWK,SAAUrC,SAAUsC,kBAAmBC,sBAC5C9E,IAAduE,qBAKCK,SAASG,cACVR,UAAU/H,UAAUC,IAAI,eACxB8H,UAAUS,UAAY,IAK1BT,UAAU/H,UAAUsD,OAAO,UAG3B8E,SAAS1F,SAAQ,CAAC+F,OAAQrE,yCAClBD,6CAAOnF,KAAKG,WAAW4G,SAAU0C,qDAAWJ,kBAAkBI,iCAAWH,aAAaP,UAAWU,gBACxFjF,IAATW,kBAKEuE,YAAcX,UAAUY,SAASvE,YACnBZ,IAAhBkF,YAIAA,cAAgBvE,MAChB4D,UAAUa,aAAazE,KAAMuE,aAJ7BX,UAAUI,OAAOhE,eASnB0E,eAAiB,QAChBd,UAAUY,SAASJ,OAASH,SAASG,QAAQ,mDAC1CO,UAAYf,UAAUgB,2DAGxBD,MAAAA,wCAAAA,UAAW9I,gEAAWe,SAAS,iDAAwB+H,UAAUrH,uCAAVuH,mBAAmBC,OAC1EJ,eAAeK,KAAKJ,gBAEpBT,gDAAkBS,MAAAA,uCAAAA,UAAWrH,8CAAX0H,oBAAoBzL,0DAAM,GAAKoL,UAErDf,UAAUqB,YAAYN,WAG1BD,eAAenG,SAASlE,UACpBuJ,UAAUI,OAAO3J"} \ No newline at end of file +{"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 .\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 \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 const course = this.reactive.get('course');\n // Sections that are visible on this page and have a collapse button.\n const visibleSections = course.sectionlist.filter((sectionId) => {\n const sectionElement = this.getElement(this.selectors.SECTION, sectionId);\n return sectionElement && sectionElement.querySelector(this.selectors.COLLAPSE);\n });\n this.reactive.dispatch(\n 'sectionContentCollapsed',\n visibleSections ?? [],\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\n // Find collapsible sections.\n let sectionIsCollapsible = {};\n const togglerDoms = this.element.querySelectorAll(this.selectors.SECTION_ITEM + \" \" + this.selectors.COLLAPSE);\n for (let togglerDom of togglerDoms) {\n sectionIsCollapsible[togglerDom.closest(this.selectors.SECTION).dataset.id] = true;\n }\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 if (sectionIsCollapsible[section.id]) {\n allcollapsed = allcollapsed && section.contentcollapsed;\n allexpanded = allexpanded && !section.contentcollapsed;\n }\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 // This will hide the collapsible button if there are no sections to collapse.\n if (!Object.values(sectionIsCollapsible).length) {\n target.classList.add('d-none');\n } else {\n target.classList.remove('d-none');\n }\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.state the full state object.\n * @param {Object} param.element details the update details.\n */\n _refreshSectionCmlist({state, 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 this._refreshAllSectionsToggler(state);\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 this._refreshAllSectionsToggler(state);\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 this._refreshAllSectionsToggler(this.reactive.stateManager.state);\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 this._refreshAllSectionsToggler(this.reactive.stateManager.state);\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 // Remove the remaining elements.\n const orphanElements = [];\n while (container.children.length > neworder.length) {\n const lastchild = container.lastChild;\n // Any orphan element is always displayed after the listed elements.\n // Also, some third-party plugins can use a fake dndupload-preview indicator.\n if (lastchild?.classList?.contains('dndupload-preview') || lastchild.dataset?.orphan) {\n orphanElements.push(lastchild);\n } else {\n dettachedelements[lastchild?.dataset?.id ?? 0] = lastchild;\n }\n container.removeChild(lastchild);\n }\n // Restore orphan elements.\n orphanElements.forEach((element) => {\n container.append(element);\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","visibleSections","get","sectionlist","filter","sectionElement","getWatchers","watch","handler","_reloadCm","_refreshCmName","_refreshSectionNumber","_refreshSectionTitle","_refreshSectionCollapsed","_startProcessing","_refreshCourseSectionlist","_refreshSectionCmlist","_reloadSection","forEach","textContent","Error","contentcollapsed","collapsibleId","dataset","replace","collapsible","collapse","sectionIsCollapsible","togglerDoms","querySelectorAll","togglerDom","allcollapsed","allexpanded","remove","Object","values","length","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","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","stateManager","catch","cancel","pending","set","_cancelDebouncedReloadCm","sectionitem","container","newItem","createElement","for","append","neworder","dettachedelements","createMethod","innerHTML","itemid","currentitem","children","insertBefore","orphanElements","lastchild","lastChild","_lastchild$dataset","orphan","push","_lastchild$dataset2","removeChild"],"mappings":"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"} \ No newline at end of file diff --git a/course/format/amd/src/local/content.js b/course/format/amd/src/local/content.js index 44df78a13d616..309b2df71ec31 100644 --- a/course/format/amd/src/local/content.js +++ b/course/format/amd/src/local/content.js @@ -198,22 +198,15 @@ export default class Component extends BaseComponent { const target = event.target.closest(this.selectors.TOGGLEALL); const isAllCollapsed = target.classList.contains(this.classes.COLLAPSED); - - // Find collapsible sections. - let sectionIsCollapsible = {}; - const togglerDoms = this.element.querySelectorAll(this.selectors.SECTION_ITEM + " " + this.selectors.COLLAPSE); - for (let togglerDom of togglerDoms) { - sectionIsCollapsible[togglerDom.closest(this.selectors.SECTION).dataset.id] = true; - } - - // Filter section list by collapsibility. const course = this.reactive.get('course'); - const sectionCollapsibleList = (course.sectionlist ?? []).filter(section => sectionIsCollapsible[section]); - - // Toggle sections' collapse states. + // Sections that are visible on this page and have a collapse button. + const visibleSections = course.sectionlist.filter((sectionId) => { + const sectionElement = this.getElement(this.selectors.SECTION, sectionId); + return sectionElement && sectionElement.querySelector(this.selectors.COLLAPSE); + }); this.reactive.dispatch( 'sectionContentCollapsed', - sectionCollapsibleList, + visibleSections ?? [], !isAllCollapsed ); } @@ -341,22 +334,21 @@ export default class Component extends BaseComponent { } } ); - - // Refresh all-sections toggler. - if (allexpanded && allcollapsed) { - // No collapsible sections. - target.style.visibility = "hidden"; + if (allcollapsed) { + target.classList.add(this.classes.COLLAPSED); + target.setAttribute('aria-expanded', false); + } + if (allexpanded) { + target.classList.remove(this.classes.COLLAPSED); + target.setAttribute('aria-expanded', true); + } + // This will hide the collapsible button if there are no sections to collapse. + if (!Object.values(sectionIsCollapsible).length) { + target.classList.add('d-none'); } else { - if (allcollapsed) { - target.classList.add(this.classes.COLLAPSED); - target.setAttribute('aria-expanded', false); - } - if (allexpanded) { - target.classList.remove(this.classes.COLLAPSED); - target.setAttribute('aria-expanded', true); - } - target.style.visibility = "visible"; + target.classList.remove('d-none'); } + } /** diff --git a/course/format/classes/output/local/content/section.php b/course/format/classes/output/local/content/section.php index 93cab6243340d..3388503432b4c 100644 --- a/course/format/classes/output/local/content/section.php +++ b/course/format/classes/output/local/content/section.php @@ -336,14 +336,10 @@ protected function add_format_data(stdClass &$data, array $haspartials, renderer $format = $this->format; $data->iscoursedisplaymultipage = ($format->get_course_display() == COURSE_DISPLAY_MULTIPAGE); - - if ( - ($data->num === 0 || $data->id == $format->get_sectionid()) && - !$data->iscoursedisplaymultipage && - empty($section->component) - ) { - $data->collapsemenu = true; - } + $hascollapsemenu = $data->num === 0 || $data->id == $format->get_sectionid(); // We are on a section page or general page. + $hascollapsemenu = $hascollapsemenu && !$data->iscoursedisplaymultipage; // We are not in multipage mode. + $hascollapsemenu = $hascollapsemenu && !$section->is_delegated(); // The section is not delegated. + $data->collapsemenu = $hascollapsemenu; $data->contentcollapsed = $this->is_section_collapsed(); diff --git a/course/format/templates/local/content/section/content.mustache b/course/format/templates/local/content/section/content.mustache index b03a49931bf52..b43b1c1517032 100644 --- a/course/format/templates/local/content/section/content.mustache +++ b/course/format/templates/local/content/section/content.mustache @@ -122,7 +122,6 @@ aria-expanded="true" role="button" data-toggle="toggleall" - style="visibility: hidden;" > {{#str}}collapseall{{/str}} {{#str}}expandall{{/str}}