diff --git a/lib/amd/build/local/action_menu/subpanel.min.js b/lib/amd/build/local/action_menu/subpanel.min.js index ba7954565d1..c321ae8b91d 100644 --- a/lib/amd/build/local/action_menu/subpanel.min.js +++ b/lib/amd/build/local/action_menu/subpanel.min.js @@ -5,6 +5,6 @@ define("core/local/action_menu/subpanel",["exports","core/utils","core/pagehelpe * @module core/local/action_menu/subpanel * @copyright 2023 Mikel Martín * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_pending=_interopRequireDefault(_pending),_eventHandler=_interopRequireDefault(_eventHandler);const Selectors_mainMenu='[role="menu"]',Selectors_dropdownRight=".dropdown-menu-end",Selectors_subPanel=".dropdown-subpanel",Selectors_subPanelMenuItem=".dropdown-subpanel > .dropdown-item",Selectors_subPanelContent=".dropdown-subpanel > .dropdown-menu",Selectors_drawer='[data-region="fixed-drawer"]',Selectors_blockColumn=".blockcolumn",Selectors_columnLeft=".columnleft",Classes_dropRight="dropend",Classes_dropLeft="dropstart",Classes_dropDown="dropdown",Classes_forceLeft="downleft",Classes_contentDisplayed="content-displayed",BootstrapEvents_hideDropdown="hidden.bs.dropdown";let initialized=!1;const updateAllPanelsPosition=()=>{document.querySelectorAll(Selectors_subPanel).forEach((dropdown=>{new SubPanel(dropdown).updatePosition()}))};class SubPanel{constructor(element){this.element=element,this.menuItem=element.querySelector(Selectors_subPanelMenuItem),this.panelContent=element.querySelector(Selectors_subPanelContent),this.showPreviewOnFocus=!0}init(){if(this.element.dataset.subPanelInitialized)return;this.updatePosition(),this.element.addEventListener("focusin",this._mainElementFocusInHandler.bind(this)),this.menuItem.addEventListener("click",this._menuItemClickHandler.bind(this));const subpanelMenuItemSelector="#".concat(this.element.id).concat(Selectors_subPanelMenuItem);_eventHandler.default.on(document,"keydown",subpanelMenuItemSelector,this._menuItemKeyHandler.bind(this)),(0,_pagehelpers.isBehatSite)()||(this.menuItem.addEventListener("mouseover",this._menuItemHoverHandler.bind(this)),this.menuItem.addEventListener("mouseout",this._menuItemHoverOutHandler.bind(this))),this.panelContent.addEventListener("keydown",this._panelContentKeyHandler.bind(this)),this.element.dataset.subPanelInitialized=!0}_needSmallSpaceBehaviour(){return(0,_pagehelpers.isExtraSmall)()||null!==this.element.closest(Selectors_drawer)||null!==this.element.closest(Selectors_blockColumn)}_needDropdownRight(){return null===this.element.closest(Selectors_columnLeft)&&null!==this.element.closest(Selectors_dropdownRight)}_mainElementFocusInHandler(){!this._needSmallSpaceBehaviour()&&this.showPreviewOnFocus?this.setVisibility(!0):this.showPreviewOnFocus=!0}_menuItemClickHandler(event){event.stopPropagation(),event.preventDefault(),this._needSmallSpaceBehaviour()&&this.setVisibility(!this.getVisibility())}_menuItemHoverHandler(){this._needSmallSpaceBehaviour()||this.setVisibility(!0)}_menuItemHoverOutHandler(){this._needSmallSpaceBehaviour()||this._hideOtherSubPanels()}_menuItemKeyHandler(event){if("ArrowUp"===event.key||"ArrowDown"===event.key&&!this._needSmallSpaceBehaviour())return void this.setVisibility(!1);let focusPanel=!1;("ArrowRight"===event.key||"ArrowLeft"===event.key||"Tab"===event.key&&!event.shiftKey)&&(focusPanel=!0),"Enter"!==event.key&&" "!==event.key||(focusPanel=!0),"ArrowDown"===event.key&&this._needSmallSpaceBehaviour()&&this.getVisibility()&&(focusPanel=!0),focusPanel&&(event.stopPropagation(),event.preventDefault(),this.setVisibility(!0),this._focusPanelContent())}_panelContentKeyHandler(event){const canLoop=!this._needSmallSpaceBehaviour();let isBrowsingSubPanel=!1,newFocus=null;"ArrowRight"!==event.key&&"ArrowLeft"!==event.key||(newFocus=this.menuItem),("Escape"===event.key||"Tab"===event.key&&event.shiftKey)&&(newFocus=this.menuItem,this.setVisibility(!1),this.showPreviewOnFocus=!1),"ArrowUp"===event.key&&(newFocus=(0,_pagehelpers.previousFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"ArrowDown"===event.key&&(newFocus=(0,_pagehelpers.nextFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"Home"===event.key&&(newFocus=(0,_pagehelpers.firstFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),"End"===event.key&&(newFocus=(0,_pagehelpers.lastFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),null===newFocus&&isBrowsingSubPanel&&!canLoop&&(newFocus=this.menuItem),null!==newFocus&&(event.stopPropagation(),event.preventDefault(),newFocus.focus())}_focusPanelContent(){const pendingPromise=new _pending.default("core/action_menu/subpanel:focuscontent");setTimeout((()=>{const firstFocusable=(0,_pagehelpers.firstFocusableElement)(this.panelContent);firstFocusable&&firstFocusable.focus(),pendingPromise.resolve()}),100)}setVisibility(visible){visible&&this._hideOtherSubPanels(),!visible&&this.getVisibility&&(0,_aria.hide)(this.panelContent),visible&&!this.getVisibility&&(0,_aria.unhide)(this.panelContent),this.menuItem.setAttribute("aria-expanded",visible?"true":"false"),this.panelContent.classList.toggle("show",visible),this.element.classList.toggle(Classes_contentDisplayed,visible)}_hideOtherSubPanels(){this.element.closest(Selectors_mainMenu).querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);if(dropdownSubPanel===this.element)return;new SubPanel(dropdownSubPanel).setVisibility(!1)}))}getVisibility(){return"true"===this.menuItem.getAttribute("aria-expanded")}updatePosition(){const dropdownRight=this._needDropdownRight();if(this._needSmallSpaceBehaviour())return this.element.classList.remove(Classes_dropRight),this.element.classList.remove(Classes_dropLeft),this.element.classList.add(Classes_dropDown),void this.element.classList.toggle(Classes_forceLeft,dropdownRight);this.element.classList.remove(Classes_dropDown),this.element.classList.remove(Classes_forceLeft),this.element.classList.toggle(Classes_dropRight,!dropdownRight),this.element.classList.toggle(Classes_dropLeft,dropdownRight)}}_exports.init=selector=>{initialized||(document.addEventListener(BootstrapEvents_hideDropdown,(()=>{document.querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);new SubPanel(dropdownSubPanel).setVisibility(!1)}))})),window.addEventListener("resize",(0,_utils.debounce)(updateAllPanelsPosition,400)),initialized=!0);const subMenu=document.querySelector(selector);if(!subMenu)throw new Error("Sub panel element not found: ".concat(selector));new SubPanel(subMenu).init()}})); + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_pending=_interopRequireDefault(_pending),_eventHandler=_interopRequireDefault(_eventHandler);const Selectors_mainMenu='[role="menu"]',Selectors_dropdownRight=".dropdown-menu-end",Selectors_subPanel=".dropdown-subpanel",Selectors_subPanelMenuItem=".dropdown-subpanel > .dropdown-item",Selectors_subPanelContent=".dropdown-subpanel > .dropdown-menu",Selectors_drawer='[data-region="fixed-drawer"]',Selectors_blockColumn=".blockcolumn",Selectors_columnLeft=".columnleft",Classes_dropRight="dropend",Classes_dropLeft="dropstart",Classes_dropDown="dropdown",Classes_forceLeft="downleft",Classes_contentDisplayed="content-displayed",BootstrapEvents_hideDropdown="hidden.bs.dropdown";let initialized=!1;const updateAllPanelsPosition=()=>{document.querySelectorAll(Selectors_subPanel).forEach((dropdown=>{new SubPanel(dropdown).updatePosition()}))};class SubPanel{constructor(element){this.element=element,this.menuItem=element.querySelector(Selectors_subPanelMenuItem),this.panelContent=element.querySelector(Selectors_subPanelContent),this.showPreviewOnFocus=!0}init(){if(this.element.dataset.subPanelInitialized)return;this.updatePosition(),this.element.addEventListener("focusin",this._mainElementFocusInHandler.bind(this)),this.menuItem.addEventListener("click",this._menuItemClickHandler.bind(this));const subpanelMenuItemSelector="#".concat(this.element.id).concat(Selectors_subPanelMenuItem);_eventHandler.default.on(document,"keydown",subpanelMenuItemSelector,this._menuItemKeyHandler.bind(this)),(0,_pagehelpers.isBehatSite)()||(this.menuItem.addEventListener("mouseover",this._menuItemHoverHandler.bind(this)),this.menuItem.addEventListener("mouseout",this._menuItemHoverOutHandler.bind(this))),this.panelContent.addEventListener("keydown",this._panelContentKeyHandler.bind(this)),this.element.dataset.subPanelInitialized=!0}_hideCurrentSubPanel(event){const related=event.relatedTarget;this.menuItem.contains(related)||this.panelContent.contains(related)||this.setVisibility(!1)}_needSmallSpaceBehaviour(){return(0,_pagehelpers.isExtraSmall)()||null!==this.element.closest(Selectors_drawer)||null!==this.element.closest(Selectors_blockColumn)}_needDropdownRight(){return null===this.element.closest(Selectors_columnLeft)&&null!==this.element.closest(Selectors_dropdownRight)}_mainElementFocusInHandler(){!this._needSmallSpaceBehaviour()&&this.showPreviewOnFocus?this.setVisibility(!0):this.showPreviewOnFocus=!0}_menuItemClickHandler(event){event.stopPropagation(),event.preventDefault(),this._needSmallSpaceBehaviour()&&this.setVisibility(!this.getVisibility())}_menuItemHoverHandler(){this._needSmallSpaceBehaviour()||this.setVisibility(!0)}_menuItemHoverOutHandler(event){this._needSmallSpaceBehaviour()||(this._hideOtherSubPanels(),this._hideCurrentSubPanel(event))}_menuItemKeyHandler(event){if("ArrowUp"===event.key||"ArrowDown"===event.key&&!this._needSmallSpaceBehaviour())return void this.setVisibility(!1);let focusPanel=!1;("ArrowRight"===event.key||"ArrowLeft"===event.key||"Tab"===event.key&&!event.shiftKey)&&(focusPanel=!0),"Enter"!==event.key&&" "!==event.key||(focusPanel=!0),"ArrowDown"===event.key&&this._needSmallSpaceBehaviour()&&this.getVisibility()&&(focusPanel=!0),focusPanel&&(event.stopPropagation(),event.preventDefault(),this.setVisibility(!0),this._focusPanelContent())}_panelContentKeyHandler(event){const canLoop=!this._needSmallSpaceBehaviour();let isBrowsingSubPanel=!1,newFocus=null;"ArrowRight"!==event.key&&"ArrowLeft"!==event.key||(newFocus=this.menuItem),("Escape"===event.key||"Tab"===event.key&&event.shiftKey)&&(newFocus=this.menuItem,this.setVisibility(!1),this.showPreviewOnFocus=!1),"ArrowUp"===event.key&&(newFocus=(0,_pagehelpers.previousFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"ArrowDown"===event.key&&(newFocus=(0,_pagehelpers.nextFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"Home"===event.key&&(newFocus=(0,_pagehelpers.firstFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),"End"===event.key&&(newFocus=(0,_pagehelpers.lastFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),null===newFocus&&isBrowsingSubPanel&&!canLoop&&(newFocus=this.menuItem),null!==newFocus&&(event.stopPropagation(),event.preventDefault(),newFocus.focus())}_focusPanelContent(){const pendingPromise=new _pending.default("core/action_menu/subpanel:focuscontent");setTimeout((()=>{const firstFocusable=(0,_pagehelpers.firstFocusableElement)(this.panelContent);firstFocusable&&firstFocusable.focus(),pendingPromise.resolve()}),100)}setVisibility(visible){visible&&this._hideOtherSubPanels(),!visible&&this.getVisibility&&(0,_aria.hide)(this.panelContent),visible&&!this.getVisibility&&(0,_aria.unhide)(this.panelContent),this.menuItem.setAttribute("aria-expanded",visible?"true":"false"),this.panelContent.classList.toggle("show",visible),this.element.classList.toggle(Classes_contentDisplayed,visible)}_hideOtherSubPanels(){this.element.closest(Selectors_mainMenu).querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);if(dropdownSubPanel===this.element)return;new SubPanel(dropdownSubPanel).setVisibility(!1)}))}getVisibility(){return"true"===this.menuItem.getAttribute("aria-expanded")}updatePosition(){const dropdownRight=this._needDropdownRight();if(this._needSmallSpaceBehaviour())return this.element.classList.remove(Classes_dropRight),this.element.classList.remove(Classes_dropLeft),this.element.classList.add(Classes_dropDown),void this.element.classList.toggle(Classes_forceLeft,dropdownRight);this.element.classList.remove(Classes_dropDown),this.element.classList.remove(Classes_forceLeft),this.element.classList.toggle(Classes_dropRight,!dropdownRight),this.element.classList.toggle(Classes_dropLeft,dropdownRight)}}_exports.init=selector=>{initialized||(document.addEventListener(BootstrapEvents_hideDropdown,(()=>{document.querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);new SubPanel(dropdownSubPanel).setVisibility(!1)}))})),window.addEventListener("resize",(0,_utils.debounce)(updateAllPanelsPosition,400)),initialized=!0);const subMenu=document.querySelector(selector);if(!subMenu)throw new Error("Sub panel element not found: ".concat(selector));new SubPanel(subMenu).init()}})); //# sourceMappingURL=subpanel.min.js.map \ No newline at end of file diff --git a/lib/amd/build/local/action_menu/subpanel.min.js.map b/lib/amd/build/local/action_menu/subpanel.min.js.map index ff14def10ef..1b03aad7853 100644 --- a/lib/amd/build/local/action_menu/subpanel.min.js.map +++ b/lib/amd/build/local/action_menu/subpanel.min.js.map @@ -1 +1 @@ -{"version":3,"file":"subpanel.min.js","sources":["../../../src/local/action_menu/subpanel.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 * Action menu subpanel JS controls.\n *\n * @module core/local/action_menu/subpanel\n * @copyright 2023 Mikel Martín \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {debounce} from 'core/utils';\nimport {\n isBehatSite,\n isExtraSmall,\n firstFocusableElement,\n lastFocusableElement,\n previousFocusableElement,\n nextFocusableElement,\n} from 'core/pagehelpers';\nimport Pending from 'core/pending';\nimport {\n hide,\n unhide,\n} from 'core/aria';\nimport EventHandler from 'theme_boost/bootstrap/dom/event-handler';\n\nconst Selectors = {\n mainMenu: '[role=\"menu\"]',\n dropdownRight: '.dropdown-menu-end',\n subPanel: '.dropdown-subpanel',\n subPanelMenuItem: '.dropdown-subpanel > .dropdown-item',\n subPanelContent: '.dropdown-subpanel > .dropdown-menu',\n // Drawer selector.\n drawer: '[data-region=\"fixed-drawer\"]',\n // Lateral blocks columns selectors.\n blockColumn: '.blockcolumn',\n columnLeft: '.columnleft',\n};\n\nconst Classes = {\n dropRight: 'dropend',\n dropLeft: 'dropstart',\n dropDown: 'dropdown',\n forceLeft: 'downleft',\n contentDisplayed: 'content-displayed',\n};\n\nconst BootstrapEvents = {\n hideDropdown: 'hidden.bs.dropdown',\n};\n\nlet initialized = false;\n\n/**\n * Initialize all delegated events into the page.\n */\nconst initPageEvents = () => {\n if (initialized) {\n return;\n }\n // Hide all subpanels when hiding a dropdown.\n document.addEventListener(BootstrapEvents.hideDropdown, () => {\n document.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n const subPanel = new SubPanel(dropdownSubPanel);\n subPanel.setVisibility(false);\n });\n });\n\n window.addEventListener('resize', debounce(updateAllPanelsPosition, 400));\n\n initialized = true;\n};\n\n/**\n * Update all the panels position.\n */\nconst updateAllPanelsPosition = () => {\n document.querySelectorAll(Selectors.subPanel).forEach(dropdown => {\n const subpanel = new SubPanel(dropdown);\n subpanel.updatePosition();\n });\n};\n\n/**\n * Subpanel class.\n * @private\n */\nclass SubPanel {\n /**\n * Constructor.\n * @param {HTMLElement} element The element to initialize.\n */\n constructor(element) {\n this.element = element;\n this.menuItem = element.querySelector(Selectors.subPanelMenuItem);\n this.panelContent = element.querySelector(Selectors.subPanelContent);\n /**\n * Enable preview when the menu item has focus.\n *\n * This is disabled when the user press ESC or shift+TAB to force closing\n *\n * @type {Boolean}\n * @private\n */\n this.showPreviewOnFocus = true;\n }\n\n /**\n * Initialize the subpanel element.\n *\n * This method adds the event listeners to the subpanel and the position classes.\n */\n init() {\n if (this.element.dataset.subPanelInitialized) {\n return;\n }\n\n this.updatePosition();\n\n // Full element events.\n this.element.addEventListener('focusin', this._mainElementFocusInHandler.bind(this));\n // Menu Item events.\n this.menuItem.addEventListener('click', this._menuItemClickHandler.bind(this));\n // Use the Bootstrap key handler for the menu item key handler.\n // This will avoid Boostrap Dropdown handler to prevent the propagation to the subpanel.\n const subpanelMenuItemSelector = `#${this.element.id}${Selectors.subPanelMenuItem}`;\n EventHandler.on(document, 'keydown', subpanelMenuItemSelector, this._menuItemKeyHandler.bind(this));\n if (!isBehatSite()) {\n // Behat in Chrome usually move the mouse over the page when trying clicking a subpanel element.\n // If the menu has more than one subpanel this could cause closing the subpanel by mistake.\n this.menuItem.addEventListener('mouseover', this._menuItemHoverHandler.bind(this));\n this.menuItem.addEventListener('mouseout', this._menuItemHoverOutHandler.bind(this));\n }\n // Subpanel content events.\n this.panelContent.addEventListener('keydown', this._panelContentKeyHandler.bind(this));\n\n this.element.dataset.subPanelInitialized = true;\n }\n\n /**\n * Checks if the subpanel has enough space.\n *\n * In general there are two scenarios were the subpanel must be interacted differently:\n * - Extra small screens: The subpanel is displayed below the menu item.\n * - Drawer: The subpanel is displayed one of the drawers.\n * - Block columns: for classic based themes.\n *\n * @returns {Boolean} true if the subpanel should be displayed in small screens.\n */\n _needSmallSpaceBehaviour() {\n return isExtraSmall() ||\n this.element.closest(Selectors.drawer) !== null ||\n this.element.closest(Selectors.blockColumn) !== null;\n }\n\n /**\n * Check if the subpanel should be displayed on the right.\n *\n * This is defined by the drop right boostrap class. However, if the menu is\n * displayed in a block column on the right, the subpanel should be forced\n * to the right.\n *\n * @returns {Boolean} true if the subpanel should be displayed on the right.\n */\n _needDropdownRight() {\n if (this.element.closest(Selectors.columnLeft) !== null) {\n return false;\n }\n return this.element.closest(Selectors.dropdownRight) !== null;\n }\n\n /**\n * Main element focus in handler.\n */\n _mainElementFocusInHandler() {\n if (this._needSmallSpaceBehaviour() || !this.showPreviewOnFocus) {\n // Preview is disabled when the user press ESC or shift+TAB to force closing\n // but if the continue navigating with keyboard the preview is enabled again.\n this.showPreviewOnFocus = true;\n return;\n }\n this.setVisibility(true);\n }\n\n /**\n * Menu item click handler.\n * @param {Event} event\n */\n _menuItemClickHandler(event) {\n // Avoid dropdowns being closed after clicking a subemnu.\n // This won't be needed with BS5 (data-bs-auto-close handles it).\n event.stopPropagation();\n event.preventDefault();\n if (this._needSmallSpaceBehaviour()) {\n this.setVisibility(!this.getVisibility());\n }\n }\n\n /**\n * Menu item hover handler.\n * @private\n */\n _menuItemHoverHandler() {\n if (this._needSmallSpaceBehaviour()) {\n return;\n }\n this.setVisibility(true);\n }\n\n /**\n * Menu item hover out handler.\n * @private\n */\n _menuItemHoverOutHandler() {\n if (this._needSmallSpaceBehaviour()) {\n return;\n }\n this._hideOtherSubPanels();\n }\n\n /**\n * Menu item key handler.\n * @param {Event} event\n * @private\n */\n _menuItemKeyHandler(event) {\n // In small sizes te down key will focus on the panel.\n if (event.key === 'ArrowUp' || (event.key === 'ArrowDown' && !this._needSmallSpaceBehaviour())) {\n this.setVisibility(false);\n return;\n }\n\n // Keys to move focus to the panel.\n let focusPanel = false;\n\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft' || (event.key === 'Tab' && !event.shiftKey)) {\n focusPanel = true;\n }\n if ((event.key === 'Enter' || event.key === ' ')) {\n focusPanel = true;\n }\n // In extra small screen the panel is shown below the item.\n if (event.key === 'ArrowDown' && this._needSmallSpaceBehaviour() && this.getVisibility()) {\n focusPanel = true;\n }\n if (focusPanel) {\n event.stopPropagation();\n event.preventDefault();\n this.setVisibility(true);\n this._focusPanelContent();\n }\n\n }\n\n /**\n * Sub panel content key handler.\n * @param {Event} event\n * @private\n */\n _panelContentKeyHandler(event) {\n // In extra small devices the panel is displayed under the menu item\n // so the arrow up/down switch between subpanel and the menu item.\n const canLoop = !this._needSmallSpaceBehaviour();\n let isBrowsingSubPanel = false;\n let newFocus = null;\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n newFocus = this.menuItem;\n }\n // Acording to WCAG Esc and Tab are similar to arrow navigation but they\n // force the subpanel to be closed.\n if (event.key === 'Escape' || (event.key === 'Tab' && event.shiftKey)) {\n newFocus = this.menuItem;\n this.setVisibility(false);\n this.showPreviewOnFocus = false;\n }\n if (event.key === 'ArrowUp') {\n newFocus = previousFocusableElement(this.panelContent, canLoop);\n isBrowsingSubPanel = true;\n }\n if (event.key === 'ArrowDown') {\n newFocus = nextFocusableElement(this.panelContent, canLoop);\n isBrowsingSubPanel = true;\n }\n if (event.key === 'Home') {\n newFocus = firstFocusableElement(this.panelContent);\n isBrowsingSubPanel = true;\n }\n if (event.key === 'End') {\n newFocus = lastFocusableElement(this.panelContent);\n isBrowsingSubPanel = true;\n }\n // If the user cannot loop and arrive to the start/end of the subpanel\n // we focus on the menu item.\n if (newFocus === null && isBrowsingSubPanel && !canLoop) {\n newFocus = this.menuItem;\n }\n if (newFocus !== null) {\n event.stopPropagation();\n event.preventDefault();\n newFocus.focus();\n }\n }\n\n /**\n * Focus on the first focusable element of the subpanel.\n * @private\n */\n _focusPanelContent() {\n const pendingPromise = new Pending('core/action_menu/subpanel:focuscontent');\n // Some Bootstrap events are triggered after the click event.\n // To prevent this from affecting the focus we wait a bit.\n setTimeout(() => {\n const firstFocusable = firstFocusableElement(this.panelContent);\n if (firstFocusable) {\n firstFocusable.focus();\n }\n pendingPromise.resolve();\n }, 100);\n }\n\n /**\n * Set the visibility of a subpanel.\n * @param {Boolean} visible true if the subpanel should be visible.\n */\n setVisibility(visible) {\n if (visible) {\n this._hideOtherSubPanels();\n }\n // Aria hidden/unhidden can alter the focus, we only want to do it when needed.\n if (!visible && this.getVisibility) {\n hide(this.panelContent);\n }\n if (visible && !this.getVisibility) {\n unhide(this.panelContent);\n }\n this.menuItem.setAttribute('aria-expanded', visible ? 'true' : 'false');\n this.panelContent.classList.toggle('show', visible);\n this.element.classList.toggle(Classes.contentDisplayed, visible);\n }\n\n /**\n * Hide all other subpanels in the parent menu.\n * @private\n */\n _hideOtherSubPanels() {\n const dropdown = this.element.closest(Selectors.mainMenu);\n dropdown.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n if (dropdownSubPanel === this.element) {\n return;\n }\n const subPanel = new SubPanel(dropdownSubPanel);\n subPanel.setVisibility(false);\n });\n }\n\n /**\n * Get the visibility of a subpanel.\n * @returns {Boolean} true if the subpanel is visible.\n */\n getVisibility() {\n return this.menuItem.getAttribute('aria-expanded') === 'true';\n }\n\n /**\n * Update the panels position depending on the screen size and panel position.\n */\n updatePosition() {\n const dropdownRight = this._needDropdownRight();\n if (this._needSmallSpaceBehaviour()) {\n this.element.classList.remove(Classes.dropRight);\n this.element.classList.remove(Classes.dropLeft);\n this.element.classList.add(Classes.dropDown);\n this.element.classList.toggle(Classes.forceLeft, dropdownRight);\n return;\n }\n this.element.classList.remove(Classes.dropDown);\n this.element.classList.remove(Classes.forceLeft);\n this.element.classList.toggle(Classes.dropRight, !dropdownRight);\n this.element.classList.toggle(Classes.dropLeft, dropdownRight);\n }\n}\n\n/**\n * Initialise module for given report\n *\n * @method\n * @param {string} selector The query selector to init.\n */\nexport const init = (selector) => {\n initPageEvents();\n const subMenu = document.querySelector(selector);\n if (!subMenu) {\n throw new Error(`Sub panel element not found: ${selector}`);\n }\n const subPanel = new SubPanel(subMenu);\n subPanel.init();\n};\n"],"names":["Selectors","Classes","BootstrapEvents","initialized","updateAllPanelsPosition","document","querySelectorAll","forEach","dropdown","SubPanel","updatePosition","constructor","element","menuItem","querySelector","panelContent","showPreviewOnFocus","init","this","dataset","subPanelInitialized","addEventListener","_mainElementFocusInHandler","bind","_menuItemClickHandler","subpanelMenuItemSelector","id","on","_menuItemKeyHandler","_menuItemHoverHandler","_menuItemHoverOutHandler","_panelContentKeyHandler","_needSmallSpaceBehaviour","closest","_needDropdownRight","setVisibility","event","stopPropagation","preventDefault","getVisibility","_hideOtherSubPanels","key","focusPanel","shiftKey","_focusPanelContent","canLoop","isBrowsingSubPanel","newFocus","focus","pendingPromise","Pending","setTimeout","firstFocusable","resolve","visible","setAttribute","classList","toggle","visibleSubPanel","dropdownSubPanel","getAttribute","dropdownRight","remove","add","selector","window","subMenu","Error"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"subpanel.min.js","sources":["../../../src/local/action_menu/subpanel.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 * Action menu subpanel JS controls.\n *\n * @module core/local/action_menu/subpanel\n * @copyright 2023 Mikel Martín \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {debounce} from 'core/utils';\nimport {\n isBehatSite,\n isExtraSmall,\n firstFocusableElement,\n lastFocusableElement,\n previousFocusableElement,\n nextFocusableElement,\n} from 'core/pagehelpers';\nimport Pending from 'core/pending';\nimport {\n hide,\n unhide,\n} from 'core/aria';\nimport EventHandler from 'theme_boost/bootstrap/dom/event-handler';\n\nconst Selectors = {\n mainMenu: '[role=\"menu\"]',\n dropdownRight: '.dropdown-menu-end',\n subPanel: '.dropdown-subpanel',\n subPanelMenuItem: '.dropdown-subpanel > .dropdown-item',\n subPanelContent: '.dropdown-subpanel > .dropdown-menu',\n // Drawer selector.\n drawer: '[data-region=\"fixed-drawer\"]',\n // Lateral blocks columns selectors.\n blockColumn: '.blockcolumn',\n columnLeft: '.columnleft',\n};\n\nconst Classes = {\n dropRight: 'dropend',\n dropLeft: 'dropstart',\n dropDown: 'dropdown',\n forceLeft: 'downleft',\n contentDisplayed: 'content-displayed',\n};\n\nconst BootstrapEvents = {\n hideDropdown: 'hidden.bs.dropdown',\n};\n\nlet initialized = false;\n\n/**\n * Initialize all delegated events into the page.\n */\nconst initPageEvents = () => {\n if (initialized) {\n return;\n }\n // Hide all subpanels when hiding a dropdown.\n document.addEventListener(BootstrapEvents.hideDropdown, () => {\n document.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n const subPanel = new SubPanel(dropdownSubPanel);\n subPanel.setVisibility(false);\n });\n });\n\n window.addEventListener('resize', debounce(updateAllPanelsPosition, 400));\n\n initialized = true;\n};\n\n/**\n * Update all the panels position.\n */\nconst updateAllPanelsPosition = () => {\n document.querySelectorAll(Selectors.subPanel).forEach(dropdown => {\n const subpanel = new SubPanel(dropdown);\n subpanel.updatePosition();\n });\n};\n\n/**\n * Subpanel class.\n * @private\n */\nclass SubPanel {\n /**\n * Constructor.\n * @param {HTMLElement} element The element to initialize.\n */\n constructor(element) {\n this.element = element;\n this.menuItem = element.querySelector(Selectors.subPanelMenuItem);\n this.panelContent = element.querySelector(Selectors.subPanelContent);\n /**\n * Enable preview when the menu item has focus.\n *\n * This is disabled when the user press ESC or shift+TAB to force closing\n *\n * @type {Boolean}\n * @private\n */\n this.showPreviewOnFocus = true;\n }\n\n /**\n * Initialize the subpanel element.\n *\n * This method adds the event listeners to the subpanel and the position classes.\n */\n init() {\n if (this.element.dataset.subPanelInitialized) {\n return;\n }\n\n this.updatePosition();\n\n // Full element events.\n this.element.addEventListener('focusin', this._mainElementFocusInHandler.bind(this));\n // Menu Item events.\n this.menuItem.addEventListener('click', this._menuItemClickHandler.bind(this));\n // Use the Bootstrap key handler for the menu item key handler.\n // This will avoid Boostrap Dropdown handler to prevent the propagation to the subpanel.\n const subpanelMenuItemSelector = `#${this.element.id}${Selectors.subPanelMenuItem}`;\n EventHandler.on(document, 'keydown', subpanelMenuItemSelector, this._menuItemKeyHandler.bind(this));\n if (!isBehatSite()) {\n // Behat in Chrome usually move the mouse over the page when trying clicking a subpanel element.\n // If the menu has more than one subpanel this could cause closing the subpanel by mistake.\n this.menuItem.addEventListener('mouseover', this._menuItemHoverHandler.bind(this));\n this.menuItem.addEventListener('mouseout', this._menuItemHoverOutHandler.bind(this));\n }\n // Subpanel content events.\n this.panelContent.addEventListener('keydown', this._panelContentKeyHandler.bind(this));\n\n this.element.dataset.subPanelInitialized = true;\n }\n\n /**\n * Hides the subpanel when mouse leaves the menu item.\n * @param {Event} event\n */\n _hideCurrentSubPanel(event) {\n // Only hide if not hovering over the menu item or subpanel content.\n const related = event.relatedTarget;\n if (!this.menuItem.contains(related) && !this.panelContent.contains(related)) {\n this.setVisibility(false);\n }\n }\n\n /**\n * Checks if the subpanel has enough space.\n *\n * In general there are two scenarios were the subpanel must be interacted differently:\n * - Extra small screens: The subpanel is displayed below the menu item.\n * - Drawer: The subpanel is displayed one of the drawers.\n * - Block columns: for classic based themes.\n *\n * @returns {Boolean} true if the subpanel should be displayed in small screens.\n */\n _needSmallSpaceBehaviour() {\n return isExtraSmall() ||\n this.element.closest(Selectors.drawer) !== null ||\n this.element.closest(Selectors.blockColumn) !== null;\n }\n\n /**\n * Check if the subpanel should be displayed on the right.\n *\n * This is defined by the drop right boostrap class. However, if the menu is\n * displayed in a block column on the right, the subpanel should be forced\n * to the right.\n *\n * @returns {Boolean} true if the subpanel should be displayed on the right.\n */\n _needDropdownRight() {\n if (this.element.closest(Selectors.columnLeft) !== null) {\n return false;\n }\n return this.element.closest(Selectors.dropdownRight) !== null;\n }\n\n /**\n * Main element focus in handler.\n */\n _mainElementFocusInHandler() {\n if (this._needSmallSpaceBehaviour() || !this.showPreviewOnFocus) {\n // Preview is disabled when the user press ESC or shift+TAB to force closing\n // but if the continue navigating with keyboard the preview is enabled again.\n this.showPreviewOnFocus = true;\n return;\n }\n this.setVisibility(true);\n }\n\n /**\n * Menu item click handler.\n * @param {Event} event\n */\n _menuItemClickHandler(event) {\n // Avoid dropdowns being closed after clicking a subemnu.\n // This won't be needed with BS5 (data-bs-auto-close handles it).\n event.stopPropagation();\n event.preventDefault();\n if (this._needSmallSpaceBehaviour()) {\n this.setVisibility(!this.getVisibility());\n }\n }\n\n /**\n * Menu item hover handler.\n * @private\n */\n _menuItemHoverHandler() {\n if (this._needSmallSpaceBehaviour()) {\n return;\n }\n this.setVisibility(true);\n }\n\n /**\n * Menu item hover out handler.\n * @param {Event} event\n * @private\n */\n _menuItemHoverOutHandler(event) {\n if (this._needSmallSpaceBehaviour()) {\n return;\n }\n this._hideOtherSubPanels();\n // Hide subpanel when the menu item itself is not hovered.\n this._hideCurrentSubPanel(event);\n }\n\n /**\n * Menu item key handler.\n * @param {Event} event\n * @private\n */\n _menuItemKeyHandler(event) {\n // In small sizes te down key will focus on the panel.\n if (event.key === 'ArrowUp' || (event.key === 'ArrowDown' && !this._needSmallSpaceBehaviour())) {\n this.setVisibility(false);\n return;\n }\n\n // Keys to move focus to the panel.\n let focusPanel = false;\n\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft' || (event.key === 'Tab' && !event.shiftKey)) {\n focusPanel = true;\n }\n if ((event.key === 'Enter' || event.key === ' ')) {\n focusPanel = true;\n }\n // In extra small screen the panel is shown below the item.\n if (event.key === 'ArrowDown' && this._needSmallSpaceBehaviour() && this.getVisibility()) {\n focusPanel = true;\n }\n if (focusPanel) {\n event.stopPropagation();\n event.preventDefault();\n this.setVisibility(true);\n this._focusPanelContent();\n }\n\n }\n\n /**\n * Sub panel content key handler.\n * @param {Event} event\n * @private\n */\n _panelContentKeyHandler(event) {\n // In extra small devices the panel is displayed under the menu item\n // so the arrow up/down switch between subpanel and the menu item.\n const canLoop = !this._needSmallSpaceBehaviour();\n let isBrowsingSubPanel = false;\n let newFocus = null;\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n newFocus = this.menuItem;\n }\n // Acording to WCAG Esc and Tab are similar to arrow navigation but they\n // force the subpanel to be closed.\n if (event.key === 'Escape' || (event.key === 'Tab' && event.shiftKey)) {\n newFocus = this.menuItem;\n this.setVisibility(false);\n this.showPreviewOnFocus = false;\n }\n if (event.key === 'ArrowUp') {\n newFocus = previousFocusableElement(this.panelContent, canLoop);\n isBrowsingSubPanel = true;\n }\n if (event.key === 'ArrowDown') {\n newFocus = nextFocusableElement(this.panelContent, canLoop);\n isBrowsingSubPanel = true;\n }\n if (event.key === 'Home') {\n newFocus = firstFocusableElement(this.panelContent);\n isBrowsingSubPanel = true;\n }\n if (event.key === 'End') {\n newFocus = lastFocusableElement(this.panelContent);\n isBrowsingSubPanel = true;\n }\n // If the user cannot loop and arrive to the start/end of the subpanel\n // we focus on the menu item.\n if (newFocus === null && isBrowsingSubPanel && !canLoop) {\n newFocus = this.menuItem;\n }\n if (newFocus !== null) {\n event.stopPropagation();\n event.preventDefault();\n newFocus.focus();\n }\n }\n\n /**\n * Focus on the first focusable element of the subpanel.\n * @private\n */\n _focusPanelContent() {\n const pendingPromise = new Pending('core/action_menu/subpanel:focuscontent');\n // Some Bootstrap events are triggered after the click event.\n // To prevent this from affecting the focus we wait a bit.\n setTimeout(() => {\n const firstFocusable = firstFocusableElement(this.panelContent);\n if (firstFocusable) {\n firstFocusable.focus();\n }\n pendingPromise.resolve();\n }, 100);\n }\n\n /**\n * Set the visibility of a subpanel.\n * @param {Boolean} visible true if the subpanel should be visible.\n */\n setVisibility(visible) {\n if (visible) {\n this._hideOtherSubPanels();\n }\n // Aria hidden/unhidden can alter the focus, we only want to do it when needed.\n if (!visible && this.getVisibility) {\n hide(this.panelContent);\n }\n if (visible && !this.getVisibility) {\n unhide(this.panelContent);\n }\n this.menuItem.setAttribute('aria-expanded', visible ? 'true' : 'false');\n this.panelContent.classList.toggle('show', visible);\n this.element.classList.toggle(Classes.contentDisplayed, visible);\n }\n\n /**\n * Hide all other subpanels in the parent menu.\n * @private\n */\n _hideOtherSubPanels() {\n const dropdown = this.element.closest(Selectors.mainMenu);\n dropdown.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n if (dropdownSubPanel === this.element) {\n return;\n }\n const subPanel = new SubPanel(dropdownSubPanel);\n subPanel.setVisibility(false);\n });\n }\n\n /**\n * Get the visibility of a subpanel.\n * @returns {Boolean} true if the subpanel is visible.\n */\n getVisibility() {\n return this.menuItem.getAttribute('aria-expanded') === 'true';\n }\n\n /**\n * Update the panels position depending on the screen size and panel position.\n */\n updatePosition() {\n const dropdownRight = this._needDropdownRight();\n if (this._needSmallSpaceBehaviour()) {\n this.element.classList.remove(Classes.dropRight);\n this.element.classList.remove(Classes.dropLeft);\n this.element.classList.add(Classes.dropDown);\n this.element.classList.toggle(Classes.forceLeft, dropdownRight);\n return;\n }\n this.element.classList.remove(Classes.dropDown);\n this.element.classList.remove(Classes.forceLeft);\n this.element.classList.toggle(Classes.dropRight, !dropdownRight);\n this.element.classList.toggle(Classes.dropLeft, dropdownRight);\n }\n}\n\n/**\n * Initialise module for given report\n *\n * @method\n * @param {string} selector The query selector to init.\n */\nexport const init = (selector) => {\n initPageEvents();\n const subMenu = document.querySelector(selector);\n if (!subMenu) {\n throw new Error(`Sub panel element not found: ${selector}`);\n }\n const subPanel = new SubPanel(subMenu);\n subPanel.init();\n};\n"],"names":["Selectors","Classes","BootstrapEvents","initialized","updateAllPanelsPosition","document","querySelectorAll","forEach","dropdown","SubPanel","updatePosition","constructor","element","menuItem","querySelector","panelContent","showPreviewOnFocus","init","this","dataset","subPanelInitialized","addEventListener","_mainElementFocusInHandler","bind","_menuItemClickHandler","subpanelMenuItemSelector","id","on","_menuItemKeyHandler","_menuItemHoverHandler","_menuItemHoverOutHandler","_panelContentKeyHandler","_hideCurrentSubPanel","event","related","relatedTarget","contains","setVisibility","_needSmallSpaceBehaviour","closest","_needDropdownRight","stopPropagation","preventDefault","getVisibility","_hideOtherSubPanels","key","focusPanel","shiftKey","_focusPanelContent","canLoop","isBrowsingSubPanel","newFocus","focus","pendingPromise","Pending","setTimeout","firstFocusable","resolve","visible","setAttribute","classList","toggle","visibleSubPanel","dropdownSubPanel","getAttribute","dropdownRight","remove","add","selector","window","subMenu","Error"],"mappings":"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"} \ No newline at end of file diff --git a/lib/amd/src/local/action_menu/subpanel.js b/lib/amd/src/local/action_menu/subpanel.js index cf15061f406..a7a8491f44d 100644 --- a/lib/amd/src/local/action_menu/subpanel.js +++ b/lib/amd/src/local/action_menu/subpanel.js @@ -151,6 +151,18 @@ class SubPanel { this.element.dataset.subPanelInitialized = true; } + /** + * Hides the subpanel when mouse leaves the menu item. + * @param {Event} event + */ + _hideCurrentSubPanel(event) { + // Only hide if not hovering over the menu item or subpanel content. + const related = event.relatedTarget; + if (!this.menuItem.contains(related) && !this.panelContent.contains(related)) { + this.setVisibility(false); + } + } + /** * Checks if the subpanel has enough space. * @@ -223,13 +235,16 @@ class SubPanel { /** * Menu item hover out handler. + * @param {Event} event * @private */ - _menuItemHoverOutHandler() { + _menuItemHoverOutHandler(event) { if (this._needSmallSpaceBehaviour()) { return; } this._hideOtherSubPanels(); + // Hide subpanel when the menu item itself is not hovered. + this._hideCurrentSubPanel(event); } /**