diff --git a/js/ui/components/VideoCard.js b/js/ui/components/VideoCard.js index 657221d3..a9bdf0a5 100644 --- a/js/ui/components/VideoCard.js +++ b/js/ui/components/VideoCard.js @@ -1421,7 +1421,7 @@ export class VideoCard { event.stopPropagation(); if (this.onRequestCloseAllMenus) { - this.onRequestCloseAllMenus(this); + this.onRequestCloseAllMenus({ restoreFocus: false }); } else { this.closeSettingsMenu({ restoreFocus: false }); } @@ -1446,10 +1446,28 @@ export class VideoCard { event.preventDefault(); event.stopPropagation(); + const trigger = this.moreMenuButton; + const isExpanded = + typeof trigger?.getAttribute === "function" && + trigger.getAttribute("aria-expanded") === "true"; + if (this.onRequestCloseAllMenus) { - this.onRequestCloseAllMenus(this); + const options = { restoreFocus: false }; + if (isExpanded) { + options.skipCard = this; + options.skipTrigger = trigger; + } + this.onRequestCloseAllMenus(options); } + if (isExpanded) { + this.closeSettingsMenu({ restoreFocus: false }); + this.closeMoreMenu({ restoreFocus: false }); + return; + } + + this.closeSettingsMenu({ restoreFocus: false }); + if (this.callbacks.onRequestMoreMenu) { const actionForwarder = this.callbacks.onMoreAction ? ({ action, dataset, event: actionEvent }) => { @@ -1468,7 +1486,7 @@ export class VideoCard { this.callbacks.onRequestMoreMenu({ event, - trigger: this.moreMenuButton, + trigger, video: this.video, card: this, pointerInfo: this.pointerInfo, diff --git a/js/ui/moreMenuController.js b/js/ui/moreMenuController.js index 2f0cb0a4..7cf7135f 100644 --- a/js/ui/moreMenuController.js +++ b/js/ui/moreMenuController.js @@ -425,23 +425,32 @@ export default class MoreMenuController { closeAllMoreMenus(options = {}) { const skipView = options?.skipView === true; const restoreFocus = options?.restoreFocus !== false; + const skipTrigger = options?.skipTrigger || null; - if (!skipView && this.videoListView && typeof this.videoListView.closeAllMenus === "function") { - this.videoListView.closeAllMenus({ + if ( + !skipView && + this.videoListView && + typeof this.videoListView.closeAllMenus === "function" + ) { + const viewOptions = { skipController: true, restoreFocus, - }); + }; + if (skipTrigger) { + viewOptions.skipTrigger = skipTrigger; + } + this.videoListView.closeAllMenus(viewOptions); } this.popoversByTrigger.forEach((entry) => { - if (entry?.popover && typeof entry.popover.close === "function") { - entry.popover.close({ restoreFocus }); + if (!entry?.popover || typeof entry.popover.close !== "function") { + return; } + if (skipTrigger && entry.trigger === skipTrigger) { + return; + } + entry.popover.close({ restoreFocus }); }); - - if (this.activePopover) { - this.activePopover = null; - } } attachMoreMenuHandlers(container) { diff --git a/js/ui/views/VideoListView.js b/js/ui/views/VideoListView.js index 413d1686..05b4625e 100644 --- a/js/ui/views/VideoListView.js +++ b/js/ui/views/VideoListView.js @@ -441,7 +441,8 @@ export class VideoListView { }, ensureGlobalMoreMenuHandlers: () => this.utils.ensureGlobalMoreMenuHandlers(), - onRequestCloseAllMenus: () => this.closeAllMenus({ restoreFocus: false }), + onRequestCloseAllMenus: (detail = {}) => + this.closeAllMenus({ restoreFocus: false, ...detail }), formatters: { formatTimeAgo: this.formatters.formatTimeAgo, }, @@ -1033,12 +1034,22 @@ export class VideoListView { closeAllMenus(options = {}) { const restoreFocus = options?.restoreFocus !== false; + const skipCard = options?.skipCard || null; + const skipTrigger = options?.skipTrigger || null; if (Array.isArray(this.videoCardInstances) && this.videoCardInstances.length) { this.videoCardInstances.forEach((card) => { if (!card) { return; } + + if (skipCard && card === skipCard) { + if (typeof card.closeSettingsMenu === "function") { + card.closeSettingsMenu({ restoreFocus }); + } + return; + } + if (typeof card.closeMoreMenu === "function") { card.closeMoreMenu({ restoreFocus }); } @@ -1053,7 +1064,11 @@ export class VideoListView { } if (typeof this.utils.closeAllMenus === "function") { - this.utils.closeAllMenus({ skipView: true, restoreFocus }); + const payload = { skipView: true, restoreFocus }; + if (skipTrigger) { + payload.skipTrigger = skipTrigger; + } + this.utils.closeAllMenus(payload); } }