[BUGFIX] Bind module menu event listener to document

With #91642 some event listeners were detached from the global document
object and reattached to better fitting DOM nodes to avoid pollution of
too many event listeners in document.

Unfortunately, this broke the module menu toggle after it has been
reloaded, e.g. after installing an extension via Extension Manager.

This change binds the event listener for the module menu state toggle to
the document object again.

Resolves: #93008
Related: #91642
Releases: master
Change-Id: I5da58a997db311205accfbaf57874460ce077e91
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67091


Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ModuleMenu.ts

@@ -250,7 +250,7 @@ class ModuleMenu {
           Viewport.doLayout();
         }
       });
-    }).delegateTo(document.querySelector('.t3js-modulemenu'), '.t3js-modulemenu-collapsible');
+    }).delegateTo(document, '.t3js-modulemenu .t3js-modulemenu-collapsible');
 
     new RegularEvent('click', (e: Event, target: HTMLElement): void => {
       if (typeof target.dataset.link !== 'undefined') {

typo3/sysext/backend/Resources/Public/JavaScript/ModuleMenu.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","./Enum/Viewport/ScaffoldIdentifier","jquery","./Storage/Persistent","./Viewport","./Event/ClientRequest","./Event/TriggerRequest","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,o,a,i,l,d,r,u){"use strict";o=__importDefault(o);class s{constructor(){this.loadedModule=null,this.loadedNavigationComponentId="",o.default(()=>this.initialize())}static getCollapsedMainMenuItems(){return a.isset("modulemenu")?JSON.parse(a.get("modulemenu")):{}}static addCollapsedMainMenuItem(e){const t=s.getCollapsedMainMenuItems();t[e]=!0,a.set("modulemenu",JSON.stringify(t))}static removeCollapseMainMenuItem(e){const t=this.getCollapsedMainMenuItems();delete t[e],a.set("modulemenu",JSON.stringify(t))}static includeId(e,t){if(!e.navigationComponentId&&!e.navigationFrameScript)return t;let n="";return n="TYPO3/CMS/Backend/PageTree/PageTreeElement"===e.navigationComponentId?"web":e.name.split("_")[0],top.fsMod.recentIds[n]&&(t="id="+top.fsMod.recentIds[n]+"&"+t),t}static toggleMenu(e){i.NavigationContainer.cleanup();const t=o.default(n.ScaffoldIdentifierEnum.scaffold);void 0===e&&(e=t.hasClass("scaffold-modulemenu-expanded")),t.toggleClass("scaffold-modulemenu-expanded",!e),e||o.default(".scaffold").removeClass("scaffold-search-expanded").removeClass("scaffold-toolbar-expanded"),a.set("BackendComponents.States.typo3-module-menu",{collapsed:e}),i.doLayout()}static getRecordFromName(e){const t=o.default("#"+e);return{name:e,navigationComponentId:t.data("navigationcomponentid"),navigationFrameScript:t.data("navigationframescript"),navigationFrameScriptParam:t.data("navigationframescriptparameters"),link:t.data("link")}}static highlightModuleMenuItem(e){o.default(".modulemenu-action.modulemenu-action-active").removeClass("modulemenu-action-active"),o.default("#"+e).addClass("modulemenu-action-active")}refreshMenu(){new r(TYPO3.settings.ajaxUrls.modulemenu).get().then(async e=>{const t=await e.resolve();document.getElementById("modulemenu").outerHTML=t.menu,top.currentModuleLoaded&&s.highlightModuleMenuItem(top.currentModuleLoaded),i.doLayout()})}reloadFrames(){i.NavigationContainer.refresh(),i.ContentContainer.refresh()}showModule(e,t,n=null){t=t||"";const o=s.getRecordFromName(e);return this.loadModuleComponents(o,t,new l("typo3.showModule",n))}initialize(){const e=this;let t=o.default.Deferred();if(t.resolve(),top.startInModule&&top.startInModule[0]&&o.default("#"+top.startInModule[0]).length>0)t=this.showModule(top.startInModule[0],top.startInModule[1]);else{const e=o.default(".t3js-modulemenu-action[data-link]:first");e.attr("id")&&(t=this.showModule(e.attr("id")))}t.then(()=>{e.initializeEvents()})}initializeEvents(){new u("click",(e,t)=>{const n=t.closest(".modulemenu-group"),a=n.querySelector(".modulemenu-group-container"),l="true"===t.attributes.getNamedItem("aria-expanded").value;l?s.addCollapsedMainMenuItem(t.id):s.removeCollapseMainMenuItem(t.id),n.classList.toggle(".modulemenu-group-collapsed",l),n.classList.toggle(".modulemenu-group-expanded",!l),t.attributes.getNamedItem("aria-expanded").value=(!l).toString(),o.default(a).stop().slideToggle({complete:function(){i.doLayout()}})}).delegateTo(document.querySelector(".t3js-modulemenu"),".t3js-modulemenu-collapsible"),new u("click",(e,t)=>{void 0!==t.dataset.link&&(e.preventDefault(),this.showModule(t.id,"",e))}).delegateTo(document,".t3js-modulemenu-action"),new u("click",e=>{e.preventDefault(),s.toggleMenu()}).bindTo(document.querySelector(".t3js-topbar-button-modulemenu")),new u("click",e=>{e.preventDefault(),s.toggleMenu(!0)}).bindTo(document.querySelector(".t3js-scaffold-content-overlay")),new u("click",e=>{e.preventDefault(),i.NavigationContainer.toggle()}).bindTo(document.querySelector(".t3js-topbar-button-navigationcomponent"))}loadModuleComponents(e,t,n){const a=e.name,l=i.ContentContainer.beforeSetUrl(n);return l.then(o.default.proxy(()=>{e.navigationComponentId?this.loadNavigationComponent(e.navigationComponentId):e.navigationFrameScript?(i.NavigationContainer.show("typo3-navigationIframe"),this.openInNavFrame(e.navigationFrameScript,e.navigationFrameScriptParam,new d("typo3.loadModuleComponents",n))):i.NavigationContainer.hide(),s.highlightModuleMenuItem(a),this.loadedModule=a,t=s.includeId(e,t),this.openInContentFrame(e.link,t,new d("typo3.loadModuleComponents",n)),top.currentSubScript=e.link,top.currentModuleLoaded=a,i.doLayout()},this)),l}loadNavigationComponent(t){const n=this;if(i.NavigationContainer.show(t),t===this.loadedNavigationComponentId)return;const a=t.replace(/[/]/g,"_");""!==this.loadedNavigationComponentId&&o.default("#navigationComponent-"+this.loadedNavigationComponentId.replace(/[/]/g,"_")).hide(),o.default('.t3js-scaffold-content-navigation [data-component="'+t+'"]').length<1&&o.default(".t3js-scaffold-content-navigation").append(o.default("<div />",{class:"scaffold-content-navigation-component","data-component":t,id:"navigationComponent-"+a})),e([t],e=>{e.initialize("#navigationComponent-"+a),i.NavigationContainer.show(t),n.loadedNavigationComponentId=t})}openInNavFrame(e,t,n){const o=e+(t?(e.includes("?")?"&":"?")+t:""),a=i.NavigationContainer.getUrl(),l=i.NavigationContainer.setUrl(e,new d("typo3.openInNavFrame",n));return a!==o&&("resolved"===l.state()?i.NavigationContainer.refresh():l.then(i.NavigationContainer.refresh)),l}openInContentFrame(e,t,n){let o;if(top.nextLoadModuleUrl)o=i.ContentContainer.setUrl(top.nextLoadModuleUrl,new d("typo3.openInContentFrame",n)),top.nextLoadModuleUrl="";else{const a=e+(t?(e.includes("?")?"&":"?")+t:"");o=i.ContentContainer.setUrl(a,new d("typo3.openInContentFrame",n))}return o}}top.TYPO3.ModuleMenu||(top.TYPO3.ModuleMenu={App:new s});return top.TYPO3.ModuleMenu}));
\ No newline at end of file
+var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","./Enum/Viewport/ScaffoldIdentifier","jquery","./Storage/Persistent","./Viewport","./Event/ClientRequest","./Event/TriggerRequest","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,o,a,i,d,l,r,u){"use strict";o=__importDefault(o);class s{constructor(){this.loadedModule=null,this.loadedNavigationComponentId="",o.default(()=>this.initialize())}static getCollapsedMainMenuItems(){return a.isset("modulemenu")?JSON.parse(a.get("modulemenu")):{}}static addCollapsedMainMenuItem(e){const t=s.getCollapsedMainMenuItems();t[e]=!0,a.set("modulemenu",JSON.stringify(t))}static removeCollapseMainMenuItem(e){const t=this.getCollapsedMainMenuItems();delete t[e],a.set("modulemenu",JSON.stringify(t))}static includeId(e,t){if(!e.navigationComponentId&&!e.navigationFrameScript)return t;let n="";return n="TYPO3/CMS/Backend/PageTree/PageTreeElement"===e.navigationComponentId?"web":e.name.split("_")[0],top.fsMod.recentIds[n]&&(t="id="+top.fsMod.recentIds[n]+"&"+t),t}static toggleMenu(e){i.NavigationContainer.cleanup();const t=o.default(n.ScaffoldIdentifierEnum.scaffold);void 0===e&&(e=t.hasClass("scaffold-modulemenu-expanded")),t.toggleClass("scaffold-modulemenu-expanded",!e),e||o.default(".scaffold").removeClass("scaffold-search-expanded").removeClass("scaffold-toolbar-expanded"),a.set("BackendComponents.States.typo3-module-menu",{collapsed:e}),i.doLayout()}static getRecordFromName(e){const t=o.default("#"+e);return{name:e,navigationComponentId:t.data("navigationcomponentid"),navigationFrameScript:t.data("navigationframescript"),navigationFrameScriptParam:t.data("navigationframescriptparameters"),link:t.data("link")}}static highlightModuleMenuItem(e){o.default(".modulemenu-action.modulemenu-action-active").removeClass("modulemenu-action-active"),o.default("#"+e).addClass("modulemenu-action-active")}refreshMenu(){new r(TYPO3.settings.ajaxUrls.modulemenu).get().then(async e=>{const t=await e.resolve();document.getElementById("modulemenu").outerHTML=t.menu,top.currentModuleLoaded&&s.highlightModuleMenuItem(top.currentModuleLoaded),i.doLayout()})}reloadFrames(){i.NavigationContainer.refresh(),i.ContentContainer.refresh()}showModule(e,t,n=null){t=t||"";const o=s.getRecordFromName(e);return this.loadModuleComponents(o,t,new d("typo3.showModule",n))}initialize(){const e=this;let t=o.default.Deferred();if(t.resolve(),top.startInModule&&top.startInModule[0]&&o.default("#"+top.startInModule[0]).length>0)t=this.showModule(top.startInModule[0],top.startInModule[1]);else{const e=o.default(".t3js-modulemenu-action[data-link]:first");e.attr("id")&&(t=this.showModule(e.attr("id")))}t.then(()=>{e.initializeEvents()})}initializeEvents(){new u("click",(e,t)=>{const n=t.closest(".modulemenu-group"),a=n.querySelector(".modulemenu-group-container"),d="true"===t.attributes.getNamedItem("aria-expanded").value;d?s.addCollapsedMainMenuItem(t.id):s.removeCollapseMainMenuItem(t.id),n.classList.toggle(".modulemenu-group-collapsed",d),n.classList.toggle(".modulemenu-group-expanded",!d),t.attributes.getNamedItem("aria-expanded").value=(!d).toString(),o.default(a).stop().slideToggle({complete:function(){i.doLayout()}})}).delegateTo(document,".t3js-modulemenu .t3js-modulemenu-collapsible"),new u("click",(e,t)=>{void 0!==t.dataset.link&&(e.preventDefault(),this.showModule(t.id,"",e))}).delegateTo(document,".t3js-modulemenu-action"),new u("click",e=>{e.preventDefault(),s.toggleMenu()}).bindTo(document.querySelector(".t3js-topbar-button-modulemenu")),new u("click",e=>{e.preventDefault(),s.toggleMenu(!0)}).bindTo(document.querySelector(".t3js-scaffold-content-overlay")),new u("click",e=>{e.preventDefault(),i.NavigationContainer.toggle()}).bindTo(document.querySelector(".t3js-topbar-button-navigationcomponent"))}loadModuleComponents(e,t,n){const a=e.name,d=i.ContentContainer.beforeSetUrl(n);return d.then(o.default.proxy(()=>{e.navigationComponentId?this.loadNavigationComponent(e.navigationComponentId):e.navigationFrameScript?(i.NavigationContainer.show("typo3-navigationIframe"),this.openInNavFrame(e.navigationFrameScript,e.navigationFrameScriptParam,new l("typo3.loadModuleComponents",n))):i.NavigationContainer.hide(),s.highlightModuleMenuItem(a),this.loadedModule=a,t=s.includeId(e,t),this.openInContentFrame(e.link,t,new l("typo3.loadModuleComponents",n)),top.currentSubScript=e.link,top.currentModuleLoaded=a,i.doLayout()},this)),d}loadNavigationComponent(t){const n=this;if(i.NavigationContainer.show(t),t===this.loadedNavigationComponentId)return;const a=t.replace(/[/]/g,"_");""!==this.loadedNavigationComponentId&&o.default("#navigationComponent-"+this.loadedNavigationComponentId.replace(/[/]/g,"_")).hide(),o.default('.t3js-scaffold-content-navigation [data-component="'+t+'"]').length<1&&o.default(".t3js-scaffold-content-navigation").append(o.default("<div />",{class:"scaffold-content-navigation-component","data-component":t,id:"navigationComponent-"+a})),e([t],e=>{e.initialize("#navigationComponent-"+a),i.NavigationContainer.show(t),n.loadedNavigationComponentId=t})}openInNavFrame(e,t,n){const o=e+(t?(e.includes("?")?"&":"?")+t:""),a=i.NavigationContainer.getUrl(),d=i.NavigationContainer.setUrl(e,new l("typo3.openInNavFrame",n));return a!==o&&("resolved"===d.state()?i.NavigationContainer.refresh():d.then(i.NavigationContainer.refresh)),d}openInContentFrame(e,t,n){let o;if(top.nextLoadModuleUrl)o=i.ContentContainer.setUrl(top.nextLoadModuleUrl,new l("typo3.openInContentFrame",n)),top.nextLoadModuleUrl="";else{const a=e+(t?(e.includes("?")?"&":"?")+t:"");o=i.ContentContainer.setUrl(a,new l("typo3.openInContentFrame",n))}return o}}top.TYPO3.ModuleMenu||(top.TYPO3.ModuleMenu={App:new s});return top.TYPO3.ModuleMenu}));
\ No newline at end of file