diff --git a/lib/amd/build/local/aria/focuslock.min.js b/lib/amd/build/local/aria/focuslock.min.js index 424623346906b..56cd769d17a94 100644 --- a/lib/amd/build/local/aria/focuslock.min.js +++ b/lib/amd/build/local/aria/focuslock.min.js @@ -8,6 +8,6 @@ define("core/local/aria/focuslock",["exports","./selectors"],(function(_exports, * @module core/local/aria/focuslock * @copyright 2019 Andrew Nicols * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.untrapFocus=_exports.trapFocus=void 0,_selectors=(obj=_selectors)&&obj.__esModule?obj:{default:obj};const lockRegionStack=[],initialFocusElementStack=[],finalFocusElementStack=[];let lastFocus=null,ignoreFocusChanges=!1,isLocked=!1;const lockHandler=event=>{if(ignoreFocusChanges)return;let lockRegion=getCurrentLockRegion();for(;lockRegion&&!document.contains(lockRegion);)untrapFocus(),lockRegion=getCurrentLockRegion();lockRegion&&(lockRegion.contains(event.target)?lastFocus=event.target:(focusFirstDescendant(),lastFocus==document.activeElement&&focusLastDescendant(),lastFocus=document.activeElement))},focusFirstDescendant=()=>{const lockRegion=getCurrentLockRegion(),focusableElements=Array.from(lockRegion.querySelectorAll(_selectors.default.elements.focusable));return focusableElements.unshift(lockRegion),focusableElements.some((focusableElement=>attemptFocus(focusableElement)))},focusLastDescendant=()=>{const lockRegion=getCurrentLockRegion(),focusableElements=Array.from(lockRegion.querySelectorAll(_selectors.default.elements.focusable)).reverse();return focusableElements.push(lockRegion),focusableElements.some((focusableElement=>attemptFocus(focusableElement)))},attemptFocus=focusTarget=>{if(!(focusTarget=>{if(focusTarget.tabIndex>0||0===focusTarget.tabIndex&&null!==focusTarget.getAttribute("tabIndex"))return!0;if(focusTarget.disabled)return!1;switch(focusTarget.nodeName){case"A":return!!focusTarget.href&&"ignore"!=focusTarget.rel;case"INPUT":return"hidden"!=focusTarget.type&&"file"!=focusTarget.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}})(focusTarget))return!1;ignoreFocusChanges=!0;try{focusTarget.focus()}catch(e){}return ignoreFocusChanges=!1,document.activeElement===focusTarget},getCurrentLockRegion=()=>lockRegionStack[lockRegionStack.length-1];_exports.trapFocus=newLockRegion=>{if((newLockRegion=>{if(newLockRegion===getCurrentLockRegion())return;lockRegionStack.push(newLockRegion);const currentLockRegion=getCurrentLockRegion(),element=document.createElement("div");element.tabIndex=0,element.style.position="fixed",element.style.top=0,element.style.left=0;const initialNode=element.cloneNode();currentLockRegion.parentNode.insertBefore(initialNode,currentLockRegion),initialFocusElementStack.push(initialNode);const finalNode=element.cloneNode();currentLockRegion.parentNode.insertBefore(finalNode,currentLockRegion.nextSibling),finalFocusElementStack.push(finalNode)})(newLockRegion),isLocked||document.addEventListener("focus",lockHandler,!0),!focusFirstDescendant()){const currentLockRegion=getCurrentLockRegion(),originalRegionTabIndex=currentLockRegion.tabIndex;currentLockRegion.tabIndex=0,attemptFocus(currentLockRegion),currentLockRegion.tabIndex=originalRegionTabIndex}lastFocus=document.activeElement,isLocked=!0};const untrapFocus=()=>{(()=>{lockRegionStack.pop();const finalNode=finalFocusElementStack.pop();finalNode&&finalNode.remove();const initialNode=initialFocusElementStack.pop();initialNode&&initialNode.remove()})(),lockRegionStack.length||(document.removeEventListener("focus",lockHandler,!0),lastFocus=null,ignoreFocusChanges=!1,isLocked=!1)};_exports.untrapFocus=untrapFocus})); + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.untrapFocus=_exports.trapFocus=void 0,_selectors=(obj=_selectors)&&obj.__esModule?obj:{default:obj};const lockRegionStack=[],initialFocusElementStack=[],finalFocusElementStack=[];let lastFocus=null,ignoreFocusChanges=!1,isLocked=!1;const lockHandler=event=>{if(ignoreFocusChanges)return;let lockRegion=getCurrentLockRegion();for(;lockRegion&&!document.contains(lockRegion);)untrapFocus(),lockRegion=getCurrentLockRegion();lockRegion&&(event&&lockRegion.contains(event.target)?lastFocus=event.target:(focusFirstDescendant(),lastFocus==document.activeElement&&focusLastDescendant(),lastFocus=document.activeElement))},keyDownHandler=event=>{if("Tab"===event.key&&getCurrentLockRegion())if(event.shiftKey){const firstFocusable=document.querySelector(_selectors.default.elements.focusable);document.activeElement===firstFocusable&&(lockHandler(),event.preventDefault())}else{const allFocusable=document.querySelectorAll(_selectors.default.elements.focusable);document.activeElement===allFocusable[allFocusable.length-1]&&(lockHandler(),event.preventDefault())}},focusFirstDescendant=()=>{const lockRegion=getCurrentLockRegion(),focusableElements=Array.from(lockRegion.querySelectorAll(_selectors.default.elements.focusable));return focusableElements.unshift(lockRegion),focusableElements.some((focusableElement=>attemptFocus(focusableElement)))},focusLastDescendant=()=>{const lockRegion=getCurrentLockRegion(),focusableElements=Array.from(lockRegion.querySelectorAll(_selectors.default.elements.focusable)).reverse();return focusableElements.push(lockRegion),focusableElements.some((focusableElement=>attemptFocus(focusableElement)))},attemptFocus=focusTarget=>{if(!(focusTarget=>{if(focusTarget.tabIndex>0||0===focusTarget.tabIndex&&null!==focusTarget.getAttribute("tabIndex"))return!0;if(focusTarget.disabled)return!1;switch(focusTarget.nodeName){case"A":return!!focusTarget.href&&"ignore"!=focusTarget.rel;case"INPUT":return"hidden"!=focusTarget.type&&"file"!=focusTarget.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}})(focusTarget))return!1;ignoreFocusChanges=!0;try{focusTarget.focus()}catch(e){}return ignoreFocusChanges=!1,document.activeElement===focusTarget},getCurrentLockRegion=()=>lockRegionStack[lockRegionStack.length-1];_exports.trapFocus=newLockRegion=>{if((newLockRegion=>{if(newLockRegion===getCurrentLockRegion())return;lockRegionStack.push(newLockRegion);const currentLockRegion=getCurrentLockRegion(),element=document.createElement("div");element.tabIndex=0,element.style.position="fixed",element.style.top=0,element.style.left=0;const initialNode=element.cloneNode();currentLockRegion.parentNode.insertBefore(initialNode,currentLockRegion),initialFocusElementStack.push(initialNode);const finalNode=element.cloneNode();currentLockRegion.parentNode.insertBefore(finalNode,currentLockRegion.nextSibling),finalFocusElementStack.push(finalNode)})(newLockRegion),isLocked||(document.addEventListener("focus",lockHandler,!0),document.addEventListener("keydown",keyDownHandler,!0)),!focusFirstDescendant()){const currentLockRegion=getCurrentLockRegion(),originalRegionTabIndex=currentLockRegion.tabIndex;currentLockRegion.tabIndex=0,attemptFocus(currentLockRegion),currentLockRegion.tabIndex=originalRegionTabIndex}lastFocus=document.activeElement,isLocked=!0};const untrapFocus=()=>{(()=>{lockRegionStack.pop();const finalNode=finalFocusElementStack.pop();finalNode&&finalNode.remove();const initialNode=initialFocusElementStack.pop();initialNode&&initialNode.remove()})(),lockRegionStack.length||(document.removeEventListener("focus",lockHandler,!0),document.removeEventListener("keydown",keyDownHandler,!0),lastFocus=null,ignoreFocusChanges=!1,isLocked=!1)};_exports.untrapFocus=untrapFocus})); //# sourceMappingURL=focuslock.min.js.map \ No newline at end of file diff --git a/lib/amd/build/local/aria/focuslock.min.js.map b/lib/amd/build/local/aria/focuslock.min.js.map index 4a579912cdb23..1524dd81fb5b2 100644 --- a/lib/amd/build/local/aria/focuslock.min.js.map +++ b/lib/amd/build/local/aria/focuslock.min.js.map @@ -1 +1 @@ -{"version":3,"file":"focuslock.min.js","sources":["../../../src/local/aria/focuslock.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 * Tab locking system.\n *\n * This is based on code and examples provided in the ARIA specification.\n * https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html\n *\n * @module core/local/aria/focuslock\n * @copyright 2019 Andrew Nicols \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Selectors from './selectors';\n\nconst lockRegionStack = [];\nconst initialFocusElementStack = [];\nconst finalFocusElementStack = [];\n\nlet lastFocus = null;\nlet ignoreFocusChanges = false;\nlet isLocked = false;\n\n/**\n * The lock handler.\n *\n * This is the item that does a majority of the work.\n * The overall logic from this comes from the examles in the WCAG guidelines.\n *\n * The general idea is that if the focus is not held within by an Element within the lock region, then we replace focus\n * on the first element in the lock region. If the first element is the element previously selected prior to the\n * user-initiated focus change, then instead jump to the last element in the lock region.\n *\n * This gives us a solution which supports focus locking of any kind, which loops in both directions, and which\n * prevents the lock from escaping the modal entirely.\n *\n * @method\n * @param {Event} event The event from the focus change\n */\nconst lockHandler = event => {\n if (ignoreFocusChanges) {\n // The focus change was made by an internal call to set focus.\n return;\n }\n\n // Find the current lock region.\n let lockRegion = getCurrentLockRegion();\n while (lockRegion) {\n if (document.contains(lockRegion)) {\n break;\n }\n\n // The lock region does not exist.\n // Perhaps it was removed without being untrapped.\n untrapFocus();\n lockRegion = getCurrentLockRegion();\n }\n if (!lockRegion) {\n return;\n }\n\n if (lockRegion.contains(event.target)) {\n lastFocus = event.target;\n } else {\n focusFirstDescendant();\n if (lastFocus == document.activeElement) {\n focusLastDescendant();\n }\n lastFocus = document.activeElement;\n }\n};\n\n/**\n * Focus the first descendant of the current lock region.\n *\n * @method\n * @returns {Bool} Whether a node was focused\n */\nconst focusFirstDescendant = () => {\n const lockRegion = getCurrentLockRegion();\n\n // Grab all elements in the lock region and attempt to focus each element until one is focused.\n // We can capture most of this in the query selector, but some cases may still reject focus.\n // For example, a disabled text area cannot be focused, and it becomes difficult to provide a decent query selector\n // to capture this.\n // The use of Array.some just ensures that we stop as soon as we have a successful focus.\n const focusableElements = Array.from(lockRegion.querySelectorAll(Selectors.elements.focusable));\n\n // The lock region itself may be focusable. This is particularly true on Moodle's older dialogues.\n // We must include it in the calculation of descendants to ensure that looping works correctly.\n focusableElements.unshift(lockRegion);\n return focusableElements.some(focusableElement => attemptFocus(focusableElement));\n};\n\n/**\n * Focus the last descendant of the current lock region.\n *\n * @method\n * @returns {Bool} Whether a node was focused\n */\nconst focusLastDescendant = () => {\n const lockRegion = getCurrentLockRegion();\n\n // Grab all elements in the lock region, reverse them, and attempt to focus each element until one is focused.\n // We can capture most of this in the query selector, but some cases may still reject focus.\n // For example, a disabled text area cannot be focused, and it becomes difficult to provide a decent query selector\n // to capture this.\n // The use of Array.some just ensures that we stop as soon as we have a successful focus.\n const focusableElements = Array.from(lockRegion.querySelectorAll(Selectors.elements.focusable)).reverse();\n\n // The lock region itself may be focusable. This is particularly true on Moodle's older dialogues.\n // We must include it in the calculation of descendants to ensure that looping works correctly.\n focusableElements.push(lockRegion);\n return focusableElements.some(focusableElement => attemptFocus(focusableElement));\n};\n\n/**\n * Check whether the supplied focusTarget is actually focusable.\n * There are cases where a normally focusable element can reject focus.\n *\n * Note: This example is a wholesale copy of the WCAG example.\n *\n * @method\n * @param {HTMLElement} focusTarget\n * @returns {Bool}\n */\nconst isFocusable = focusTarget => {\n if (focusTarget.tabIndex > 0 || (focusTarget.tabIndex === 0 && focusTarget.getAttribute('tabIndex') !== null)) {\n return true;\n }\n\n if (focusTarget.disabled) {\n return false;\n }\n\n switch (focusTarget.nodeName) {\n case 'A':\n return !!focusTarget.href && focusTarget.rel != 'ignore';\n case 'INPUT':\n return focusTarget.type != 'hidden' && focusTarget.type != 'file';\n case 'BUTTON':\n case 'SELECT':\n case 'TEXTAREA':\n return true;\n default:\n return false;\n }\n};\n\n/**\n * Attempt to focus the supplied focusTarget.\n *\n * Note: This example is a heavily inspired by the WCAG example.\n *\n * @method\n * @param {HTMLElement} focusTarget\n * @returns {Bool} Whether focus was successful o rnot.\n */\nconst attemptFocus = focusTarget => {\n if (!isFocusable(focusTarget)) {\n return false;\n }\n\n // The ignoreFocusChanges variable prevents the focus event handler from interfering and entering a fight with itself.\n ignoreFocusChanges = true;\n\n try {\n focusTarget.focus();\n } catch (e) {\n // Ignore failures. We will just try to focus the next element in the list.\n }\n\n ignoreFocusChanges = false;\n\n // If focus was successful the activeElement will be the one we focused.\n return (document.activeElement === focusTarget);\n};\n\n/**\n * Get the current lock region from the top of the stack.\n *\n * @method\n * @returns {HTMLElement}\n */\nconst getCurrentLockRegion = () => {\n return lockRegionStack[lockRegionStack.length - 1];\n};\n\n/**\n * Add a new lock region to the stack.\n *\n * @method\n * @param {HTMLElement} newLockRegion\n */\nconst addLockRegionToStack = newLockRegion => {\n if (newLockRegion === getCurrentLockRegion()) {\n return;\n }\n\n lockRegionStack.push(newLockRegion);\n const currentLockRegion = getCurrentLockRegion();\n\n // Append an empty div which can be focused just outside of the item locked.\n // This locks tab focus to within the tab region, and does not allow it to extend back into the window by\n // guaranteeing the existence of a tabable item after the lock region which can be focused but which will be caught\n // by the handler.\n const element = document.createElement('div');\n element.tabIndex = 0;\n element.style.position = 'fixed';\n element.style.top = 0;\n element.style.left = 0;\n\n const initialNode = element.cloneNode();\n currentLockRegion.parentNode.insertBefore(initialNode, currentLockRegion);\n initialFocusElementStack.push(initialNode);\n\n const finalNode = element.cloneNode();\n currentLockRegion.parentNode.insertBefore(finalNode, currentLockRegion.nextSibling);\n finalFocusElementStack.push(finalNode);\n};\n\n/**\n * Remove the top lock region from the stack.\n *\n * @method\n */\nconst removeLastLockRegionFromStack = () => {\n // Take the top element off the stack, and replce the current lockRegion value.\n lockRegionStack.pop();\n\n const finalNode = finalFocusElementStack.pop();\n if (finalNode) {\n // The final focus element may have been removed if it was part of a parent item.\n finalNode.remove();\n }\n\n const initialNode = initialFocusElementStack.pop();\n if (initialNode) {\n // The initial focus element may have been removed if it was part of a parent item.\n initialNode.remove();\n }\n};\n\n/**\n * Whether any region is left in the stack.\n *\n * @return {Bool}\n */\nconst hasTrappedRegionsInStack = () => {\n return !!lockRegionStack.length;\n};\n\n/**\n * Start trapping the focus and lock it to the specified newLockRegion.\n *\n * @method\n * @param {HTMLElement} newLockRegion The container to lock focus to\n */\nexport const trapFocus = newLockRegion => {\n // Update the lock region stack.\n // This allows us to support nesting.\n addLockRegionToStack(newLockRegion);\n\n if (!isLocked) {\n // Add the focus handler.\n document.addEventListener('focus', lockHandler, true);\n }\n\n // Attempt to focus on the first item in the lock region.\n if (!focusFirstDescendant()) {\n const currentLockRegion = getCurrentLockRegion();\n\n // No focusable descendants found in the region yet.\n // This can happen when the region is locked before content is generated.\n // Focus on the region itself for now.\n const originalRegionTabIndex = currentLockRegion.tabIndex;\n currentLockRegion.tabIndex = 0;\n attemptFocus(currentLockRegion);\n currentLockRegion.tabIndex = originalRegionTabIndex;\n }\n\n // Keep track of the last item focused.\n lastFocus = document.activeElement;\n\n isLocked = true;\n};\n\n/**\n * Stop trapping the focus.\n *\n * @method\n */\nexport const untrapFocus = () => {\n // Remove the top region from the stack.\n removeLastLockRegionFromStack();\n\n if (hasTrappedRegionsInStack()) {\n // The focus manager still has items in the stack.\n return;\n }\n\n document.removeEventListener('focus', lockHandler, true);\n\n lastFocus = null;\n ignoreFocusChanges = false;\n isLocked = false;\n};\n"],"names":["lockRegionStack","initialFocusElementStack","finalFocusElementStack","lastFocus","ignoreFocusChanges","isLocked","lockHandler","event","lockRegion","getCurrentLockRegion","document","contains","untrapFocus","target","focusFirstDescendant","activeElement","focusLastDescendant","focusableElements","Array","from","querySelectorAll","Selectors","elements","focusable","unshift","some","focusableElement","attemptFocus","reverse","push","focusTarget","tabIndex","getAttribute","disabled","nodeName","href","rel","type","isFocusable","focus","e","length","newLockRegion","currentLockRegion","element","createElement","style","position","top","left","initialNode","cloneNode","parentNode","insertBefore","finalNode","nextSibling","addLockRegionToStack","addEventListener","originalRegionTabIndex","pop","remove","removeLastLockRegionFromStack","removeEventListener"],"mappings":";;;;;;;;;;gLA2BMA,gBAAkB,GAClBC,yBAA2B,GAC3BC,uBAAyB,OAE3BC,UAAY,KACZC,oBAAqB,EACrBC,UAAW,QAkBTC,YAAcC,WACZH,8BAMAI,WAAaC,4BACVD,aACCE,SAASC,SAASH,aAMtBI,cACAJ,WAAaC,uBAEZD,aAIDA,WAAWG,SAASJ,MAAMM,QAC1BV,UAAYI,MAAMM,QAElBC,uBACIX,WAAaO,SAASK,eACtBC,sBAEJb,UAAYO,SAASK,iBAUvBD,qBAAuB,WACnBN,WAAaC,uBAObQ,kBAAoBC,MAAMC,KAAKX,WAAWY,iBAAiBC,mBAAUC,SAASC,mBAIpFN,kBAAkBO,QAAQhB,YACnBS,kBAAkBQ,MAAKC,kBAAoBC,aAAaD,qBAS7DV,oBAAsB,WAClBR,WAAaC,uBAObQ,kBAAoBC,MAAMC,KAAKX,WAAWY,iBAAiBC,mBAAUC,SAASC,YAAYK,iBAIhGX,kBAAkBY,KAAKrB,YAChBS,kBAAkBQ,MAAKC,kBAAoBC,aAAaD,qBA6C7DC,aAAeG,kBAhCDA,CAAAA,iBACZA,YAAYC,SAAW,GAA+B,IAAzBD,YAAYC,UAA2D,OAAzCD,YAAYE,aAAa,mBAC7E,KAGPF,YAAYG,gBACL,SAGHH,YAAYI,cACX,YACQJ,YAAYK,MAA2B,UAAnBL,YAAYM,QACxC,cAC0B,UAApBN,YAAYO,MAAwC,QAApBP,YAAYO,SAClD,aACA,aACA,kBACM,iBAEA,IAcVC,CAAYR,oBACN,EAIX1B,oBAAqB,MAGjB0B,YAAYS,QACd,MAAOC,WAITpC,oBAAqB,EAGbM,SAASK,gBAAkBe,aASjCrB,qBAAuB,IAClBT,gBAAgBA,gBAAgByC,OAAS,sBAyE3BC,mBAhEIA,CAAAA,mBACrBA,gBAAkBjC,8BAItBT,gBAAgB6B,KAAKa,qBACfC,kBAAoBlC,uBAMpBmC,QAAUlC,SAASmC,cAAc,OACvCD,QAAQb,SAAW,EACnBa,QAAQE,MAAMC,SAAW,QACzBH,QAAQE,MAAME,IAAM,EACpBJ,QAAQE,MAAMG,KAAO,QAEfC,YAAcN,QAAQO,YAC5BR,kBAAkBS,WAAWC,aAAaH,YAAaP,mBACvD1C,yBAAyB4B,KAAKqB,mBAExBI,UAAYV,QAAQO,YAC1BR,kBAAkBS,WAAWC,aAAaC,UAAWX,kBAAkBY,aACvErD,uBAAuB2B,KAAKyB,YA2C5BE,CAAqBd,eAEhBrC,UAEDK,SAAS+C,iBAAiB,QAASnD,aAAa,IAI/CQ,uBAAwB,OACnB6B,kBAAoBlC,uBAKpBiD,uBAAyBf,kBAAkBZ,SACjDY,kBAAkBZ,SAAW,EAC7BJ,aAAagB,mBACbA,kBAAkBZ,SAAW2B,uBAIjCvD,UAAYO,SAASK,cAErBV,UAAW,SAQFO,YAAc,KAlEW,MAElCZ,gBAAgB2D,YAEVL,UAAYpD,uBAAuByD,MACrCL,WAEAA,UAAUM,eAGRV,YAAcjD,yBAAyB0D,MACzCT,aAEAA,YAAYU,UAuDhBC,GA7CS7D,gBAAgByC,SAoDzB/B,SAASoD,oBAAoB,QAASxD,aAAa,GAEnDH,UAAY,KACZC,oBAAqB,EACrBC,UAAW"} \ No newline at end of file +{"version":3,"file":"focuslock.min.js","sources":["../../../src/local/aria/focuslock.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 * Tab locking system.\n *\n * This is based on code and examples provided in the ARIA specification.\n * https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html\n *\n * @module core/local/aria/focuslock\n * @copyright 2019 Andrew Nicols \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport Selectors from './selectors';\n\nconst lockRegionStack = [];\nconst initialFocusElementStack = [];\nconst finalFocusElementStack = [];\n\nlet lastFocus = null;\nlet ignoreFocusChanges = false;\nlet isLocked = false;\n\n/**\n * The lock handler.\n *\n * This is the item that does a majority of the work.\n * The overall logic from this comes from the examles in the WCAG guidelines.\n *\n * The general idea is that if the focus is not held within by an Element within the lock region, then we replace focus\n * on the first element in the lock region. If the first element is the element previously selected prior to the\n * user-initiated focus change, then instead jump to the last element in the lock region.\n *\n * This gives us a solution which supports focus locking of any kind, which loops in both directions, and which\n * prevents the lock from escaping the modal entirely.\n *\n * If no event is supplied then this function can be used to focus the first element in the lock region, or the\n * last element if the first element is already focused.\n *\n * @method\n * @param {Event} [event] The event from the focus change\n */\nconst lockHandler = event => {\n if (ignoreFocusChanges) {\n // The focus change was made by an internal call to set focus.\n return;\n }\n\n // Find the current lock region.\n let lockRegion = getCurrentLockRegion();\n while (lockRegion) {\n if (document.contains(lockRegion)) {\n break;\n }\n\n // The lock region does not exist.\n // Perhaps it was removed without being untrapped.\n untrapFocus();\n lockRegion = getCurrentLockRegion();\n }\n if (!lockRegion) {\n return;\n }\n\n if (event && lockRegion.contains(event.target)) {\n lastFocus = event.target;\n } else {\n focusFirstDescendant();\n if (lastFocus == document.activeElement) {\n focusLastDescendant();\n }\n lastFocus = document.activeElement;\n }\n};\n\n/**\n * Catch event for any keydown during focus lock.\n *\n * This is used to detect situations when the user would be tabbing out to the browser UI. In that\n * case, no 'focus' event is generated, so we need to trap it before it happens via the keydown\n * event.\n *\n * @param {KeyboardEvent} event\n */\nconst keyDownHandler = event => {\n // We only care about Tab keypresses and only if there is a current lock region.\n if (event.key !== 'Tab' || !getCurrentLockRegion()) {\n return;\n }\n\n if (!event.shiftKey) {\n // Have they already focused the last focusable element in the document?\n const allFocusable = document.querySelectorAll(Selectors.elements.focusable);\n if (document.activeElement === allFocusable[allFocusable.length - 1]) {\n // When the last thing is focused, focus would go to browser UI next, instead use\n // lockHandler to put focus back on the first element in lock region.\n lockHandler();\n event.preventDefault();\n }\n } else {\n // Have they already focused the first focusable element in the document?\n const firstFocusable = document.querySelector(Selectors.elements.focusable);\n if (document.activeElement === firstFocusable) {\n // When the first thing is focused, focus would go to browser UI next, instead use\n // lockHandler to put focus back on the last element in lock region. It will focus\n // the last element because in this case, the first element in the document must be\n // the first element in the lock region as well.\n lockHandler();\n event.preventDefault();\n }\n }\n};\n\n/**\n * Focus the first descendant of the current lock region.\n *\n * @method\n * @returns {Bool} Whether a node was focused\n */\nconst focusFirstDescendant = () => {\n const lockRegion = getCurrentLockRegion();\n\n // Grab all elements in the lock region and attempt to focus each element until one is focused.\n // We can capture most of this in the query selector, but some cases may still reject focus.\n // For example, a disabled text area cannot be focused, and it becomes difficult to provide a decent query selector\n // to capture this.\n // The use of Array.some just ensures that we stop as soon as we have a successful focus.\n const focusableElements = Array.from(lockRegion.querySelectorAll(Selectors.elements.focusable));\n\n // The lock region itself may be focusable. This is particularly true on Moodle's older dialogues.\n // We must include it in the calculation of descendants to ensure that looping works correctly.\n focusableElements.unshift(lockRegion);\n return focusableElements.some(focusableElement => attemptFocus(focusableElement));\n};\n\n/**\n * Focus the last descendant of the current lock region.\n *\n * @method\n * @returns {Bool} Whether a node was focused\n */\nconst focusLastDescendant = () => {\n const lockRegion = getCurrentLockRegion();\n\n // Grab all elements in the lock region, reverse them, and attempt to focus each element until one is focused.\n // We can capture most of this in the query selector, but some cases may still reject focus.\n // For example, a disabled text area cannot be focused, and it becomes difficult to provide a decent query selector\n // to capture this.\n // The use of Array.some just ensures that we stop as soon as we have a successful focus.\n const focusableElements = Array.from(lockRegion.querySelectorAll(Selectors.elements.focusable)).reverse();\n\n // The lock region itself may be focusable. This is particularly true on Moodle's older dialogues.\n // We must include it in the calculation of descendants to ensure that looping works correctly.\n focusableElements.push(lockRegion);\n return focusableElements.some(focusableElement => attemptFocus(focusableElement));\n};\n\n/**\n * Check whether the supplied focusTarget is actually focusable.\n * There are cases where a normally focusable element can reject focus.\n *\n * Note: This example is a wholesale copy of the WCAG example.\n *\n * @method\n * @param {HTMLElement} focusTarget\n * @returns {Bool}\n */\nconst isFocusable = focusTarget => {\n if (focusTarget.tabIndex > 0 || (focusTarget.tabIndex === 0 && focusTarget.getAttribute('tabIndex') !== null)) {\n return true;\n }\n\n if (focusTarget.disabled) {\n return false;\n }\n\n switch (focusTarget.nodeName) {\n case 'A':\n return !!focusTarget.href && focusTarget.rel != 'ignore';\n case 'INPUT':\n return focusTarget.type != 'hidden' && focusTarget.type != 'file';\n case 'BUTTON':\n case 'SELECT':\n case 'TEXTAREA':\n return true;\n default:\n return false;\n }\n};\n\n/**\n * Attempt to focus the supplied focusTarget.\n *\n * Note: This example is a heavily inspired by the WCAG example.\n *\n * @method\n * @param {HTMLElement} focusTarget\n * @returns {Bool} Whether focus was successful o rnot.\n */\nconst attemptFocus = focusTarget => {\n if (!isFocusable(focusTarget)) {\n return false;\n }\n\n // The ignoreFocusChanges variable prevents the focus event handler from interfering and entering a fight with itself.\n ignoreFocusChanges = true;\n\n try {\n focusTarget.focus();\n } catch (e) {\n // Ignore failures. We will just try to focus the next element in the list.\n }\n\n ignoreFocusChanges = false;\n\n // If focus was successful the activeElement will be the one we focused.\n return (document.activeElement === focusTarget);\n};\n\n/**\n * Get the current lock region from the top of the stack.\n *\n * @method\n * @returns {HTMLElement}\n */\nconst getCurrentLockRegion = () => {\n return lockRegionStack[lockRegionStack.length - 1];\n};\n\n/**\n * Add a new lock region to the stack.\n *\n * @method\n * @param {HTMLElement} newLockRegion\n */\nconst addLockRegionToStack = newLockRegion => {\n if (newLockRegion === getCurrentLockRegion()) {\n return;\n }\n\n lockRegionStack.push(newLockRegion);\n const currentLockRegion = getCurrentLockRegion();\n\n // Append an empty div which can be focused just outside of the item locked.\n // This locks tab focus to within the tab region, and does not allow it to extend back into the window by\n // guaranteeing the existence of a tabable item after the lock region which can be focused but which will be caught\n // by the handler.\n const element = document.createElement('div');\n element.tabIndex = 0;\n element.style.position = 'fixed';\n element.style.top = 0;\n element.style.left = 0;\n\n const initialNode = element.cloneNode();\n currentLockRegion.parentNode.insertBefore(initialNode, currentLockRegion);\n initialFocusElementStack.push(initialNode);\n\n const finalNode = element.cloneNode();\n currentLockRegion.parentNode.insertBefore(finalNode, currentLockRegion.nextSibling);\n finalFocusElementStack.push(finalNode);\n};\n\n/**\n * Remove the top lock region from the stack.\n *\n * @method\n */\nconst removeLastLockRegionFromStack = () => {\n // Take the top element off the stack, and replce the current lockRegion value.\n lockRegionStack.pop();\n\n const finalNode = finalFocusElementStack.pop();\n if (finalNode) {\n // The final focus element may have been removed if it was part of a parent item.\n finalNode.remove();\n }\n\n const initialNode = initialFocusElementStack.pop();\n if (initialNode) {\n // The initial focus element may have been removed if it was part of a parent item.\n initialNode.remove();\n }\n};\n\n/**\n * Whether any region is left in the stack.\n *\n * @return {Bool}\n */\nconst hasTrappedRegionsInStack = () => {\n return !!lockRegionStack.length;\n};\n\n/**\n * Start trapping the focus and lock it to the specified newLockRegion.\n *\n * @method\n * @param {HTMLElement} newLockRegion The container to lock focus to\n */\nexport const trapFocus = newLockRegion => {\n // Update the lock region stack.\n // This allows us to support nesting.\n addLockRegionToStack(newLockRegion);\n\n if (!isLocked) {\n // Add the focus handler.\n document.addEventListener('focus', lockHandler, true);\n document.addEventListener('keydown', keyDownHandler, true);\n }\n\n // Attempt to focus on the first item in the lock region.\n if (!focusFirstDescendant()) {\n const currentLockRegion = getCurrentLockRegion();\n\n // No focusable descendants found in the region yet.\n // This can happen when the region is locked before content is generated.\n // Focus on the region itself for now.\n const originalRegionTabIndex = currentLockRegion.tabIndex;\n currentLockRegion.tabIndex = 0;\n attemptFocus(currentLockRegion);\n currentLockRegion.tabIndex = originalRegionTabIndex;\n }\n\n // Keep track of the last item focused.\n lastFocus = document.activeElement;\n\n isLocked = true;\n};\n\n/**\n * Stop trapping the focus.\n *\n * @method\n */\nexport const untrapFocus = () => {\n // Remove the top region from the stack.\n removeLastLockRegionFromStack();\n\n if (hasTrappedRegionsInStack()) {\n // The focus manager still has items in the stack.\n return;\n }\n\n document.removeEventListener('focus', lockHandler, true);\n document.removeEventListener('keydown', keyDownHandler, true);\n\n lastFocus = null;\n ignoreFocusChanges = false;\n isLocked = false;\n};\n"],"names":["lockRegionStack","initialFocusElementStack","finalFocusElementStack","lastFocus","ignoreFocusChanges","isLocked","lockHandler","event","lockRegion","getCurrentLockRegion","document","contains","untrapFocus","target","focusFirstDescendant","activeElement","focusLastDescendant","keyDownHandler","key","shiftKey","firstFocusable","querySelector","Selectors","elements","focusable","preventDefault","allFocusable","querySelectorAll","length","focusableElements","Array","from","unshift","some","focusableElement","attemptFocus","reverse","push","focusTarget","tabIndex","getAttribute","disabled","nodeName","href","rel","type","isFocusable","focus","e","newLockRegion","currentLockRegion","element","createElement","style","position","top","left","initialNode","cloneNode","parentNode","insertBefore","finalNode","nextSibling","addLockRegionToStack","addEventListener","originalRegionTabIndex","pop","remove","removeLastLockRegionFromStack","removeEventListener"],"mappings":"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"} \ No newline at end of file diff --git a/lib/amd/src/local/aria/focuslock.js b/lib/amd/src/local/aria/focuslock.js index 7ba33e92ed3d9..63df8a0891063 100644 --- a/lib/amd/src/local/aria/focuslock.js +++ b/lib/amd/src/local/aria/focuslock.js @@ -46,8 +46,11 @@ let isLocked = false; * This gives us a solution which supports focus locking of any kind, which loops in both directions, and which * prevents the lock from escaping the modal entirely. * + * If no event is supplied then this function can be used to focus the first element in the lock region, or the + * last element if the first element is already focused. + * * @method - * @param {Event} event The event from the focus change + * @param {Event} [event] The event from the focus change */ const lockHandler = event => { if (ignoreFocusChanges) { @@ -71,7 +74,7 @@ const lockHandler = event => { return; } - if (lockRegion.contains(event.target)) { + if (event && lockRegion.contains(event.target)) { lastFocus = event.target; } else { focusFirstDescendant(); @@ -82,6 +85,44 @@ const lockHandler = event => { } }; +/** + * Catch event for any keydown during focus lock. + * + * This is used to detect situations when the user would be tabbing out to the browser UI. In that + * case, no 'focus' event is generated, so we need to trap it before it happens via the keydown + * event. + * + * @param {KeyboardEvent} event + */ +const keyDownHandler = event => { + // We only care about Tab keypresses and only if there is a current lock region. + if (event.key !== 'Tab' || !getCurrentLockRegion()) { + return; + } + + if (!event.shiftKey) { + // Have they already focused the last focusable element in the document? + const allFocusable = document.querySelectorAll(Selectors.elements.focusable); + if (document.activeElement === allFocusable[allFocusable.length - 1]) { + // When the last thing is focused, focus would go to browser UI next, instead use + // lockHandler to put focus back on the first element in lock region. + lockHandler(); + event.preventDefault(); + } + } else { + // Have they already focused the first focusable element in the document? + const firstFocusable = document.querySelector(Selectors.elements.focusable); + if (document.activeElement === firstFocusable) { + // When the first thing is focused, focus would go to browser UI next, instead use + // lockHandler to put focus back on the last element in lock region. It will focus + // the last element because in this case, the first element in the document must be + // the first element in the lock region as well. + lockHandler(); + event.preventDefault(); + } + } +}; + /** * Focus the first descendant of the current lock region. * @@ -276,6 +317,7 @@ export const trapFocus = newLockRegion => { if (!isLocked) { // Add the focus handler. document.addEventListener('focus', lockHandler, true); + document.addEventListener('keydown', keyDownHandler, true); } // Attempt to focus on the first item in the lock region. @@ -312,6 +354,7 @@ export const untrapFocus = () => { } document.removeEventListener('focus', lockHandler, true); + document.removeEventListener('keydown', keyDownHandler, true); lastFocus = null; ignoreFocusChanges = false; diff --git a/lib/editor/tiny/amd/build/utils.min.js b/lib/editor/tiny/amd/build/utils.min.js index ee38363d7635b..4aa0cdcaef8b8 100644 --- a/lib/editor/tiny/amd/build/utils.min.js +++ b/lib/editor/tiny/amd/build/utils.min.js @@ -1,3 +1,3 @@ -define("editor_tiny/utils",["exports","core/templates","./options","core/str"],(function(_exports,_templates,_options,_str){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.updateEditorState=_exports.removeToolbarButtons=_exports.removeToolbarButton=_exports.removeSubmenuItem=_exports.removeMenubarItems=_exports.removeMenubarItem=_exports.getPluginMetadata=_exports.getImagePath=_exports.getDocumentationLink=_exports.getButtonImage=_exports.ensureEditorIsValid=_exports.displayFilepicker=_exports.addToolbarSection=_exports.addToolbarButtons=_exports.addToolbarButton=_exports.addQuickbarsToolbarItem=_exports.addMenubarItem=_exports.addContextmenuItem=void 0;const getImagePath=function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return Promise.resolve(M.util.image_url(identifier,component))};_exports.getImagePath=getImagePath;_exports.getButtonImage=async function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return(0,_templates.renderForPromise)("editor_tiny/toolbar_button",{image:await getImagePath(identifier,component)})};_exports.displayFilepicker=(editor,filetype)=>new Promise(((resolve,reject)=>{const configuration=(0,_options.getFilePicker)(editor,filetype);if(configuration){const options={...configuration,formcallback:resolve};M.core_filepicker.show(Y,options)}else reject("Unknown filetype ".concat(filetype))}));_exports.addToolbarButton=function(toolbar,section,button){let after=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(!toolbar)return[{name:section,items:[button]}];const mutatedToolbar=JSON.parse(JSON.stringify(toolbar));return mutatedToolbar.map((item=>{if(item.name===section)if(after){let index=item.items.findIndex((value=>value==after));-1!==index&&item.items.splice(index+1,0,button)}else item.items.push(button);return item}))};_exports.addToolbarButtons=(toolbar,section,buttons)=>{if(!toolbar)return[{name:section,items:buttons}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&buttons.forEach((button=>item.items.push(button))),item)))};_exports.addToolbarSection=function(toolbar,name,relativeTo){let append=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];const newSection={name:name,items:[]},sectionInserted=toolbar.some(((section,index)=>section.name===relativeTo&&(append?toolbar.splice(index+1,0,newSection):toolbar.splice(index,0,newSection),!0)));return sectionInserted||(append?toolbar.push(newSection):toolbar.unshift(newSection)),toolbar};_exports.addMenubarItem=function(menubar,section,menuitem){let after=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(!menubar){({})[section]={title:section,items:menuitem}}const mutatedMenubar=JSON.parse(JSON.stringify(menubar));return Array.from(Object.entries(mutatedMenubar)).forEach((_ref=>{let[name,menu]=_ref;if(name===section)if(after){let index=menu.items.indexOf(after);-1!==index&&(index+=after.length,menu.items=menu.items.slice(0,index)+" ".concat(menuitem)+menu.items.slice(index))}else menu.items="".concat(menu.items," ").concat(menuitem)})),mutatedMenubar};_exports.addContextmenuItem=function(contextmenu){const contextmenuItems=(contextmenu||"").split(" ");for(var _len=arguments.length,menuitems=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)menuitems[_key-1]=arguments[_key];return contextmenuItems.concat(menuitems).filter((item=>""!==item)).join(" ")};_exports.addQuickbarsToolbarItem=function(quicktoolbar){const quicktoolbarItems=(quicktoolbar||"").split(" ");for(var _len2=arguments.length,toolbaritems=new Array(_len2>1?_len2-1:0),_key2=1;_key2<_len2;_key2++)toolbaritems[_key2-1]=arguments[_key2];return quicktoolbarItems.concat(toolbaritems).filter((item=>""!==item)).join(" ")};const getDocumentationLink=pluginName=>"https://docs.moodle.org/en/editor_tiny/".concat(pluginName);_exports.getDocumentationLink=getDocumentationLink;_exports.getPluginMetadata=async function(component,pluginName){let url=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;const name=await(0,_str.getString)("helplinktext",component);return{getMetadata:()=>({name:name,url:null!=url?url:getDocumentationLink(pluginName)})}};_exports.ensureEditorIsValid=editor=>editor.getElement().isConnected?editor:null;_exports.removeToolbarButton=(toolbar,section,button)=>{if(!toolbar)return[{name:section,items:[button]}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&item.items.splice(item.items.indexOf(button),1),item)))};_exports.removeToolbarButtons=(toolbar,section,buttons)=>{if(!toolbar)return[{name:section,items:buttons}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&buttons.forEach((button=>item.items.splice(item.items.indexOf(button),1))),item)))};_exports.removeSubmenuItem=async(editor,section,submenuitem)=>{const menuItems=editor.ui.registry.getAll().menuItems[section],submenuitemtitle=await(0,_str.getString)(submenuitem,"editor_tiny");menuItems&&editor.ui.registry.addNestedMenuItem(section,{text:menuItems.text,getSubmenuItems:()=>{let newSubmenu=[];return menuItems.getSubmenuItems().forEach((item=>{item.text.trim()!=submenuitemtitle&&newSubmenu.push(item)})),newSubmenu}})};_exports.removeMenubarItem=(menubar,section,menuitem)=>(menubar[section].items=menubar[section].items.replace(menuitem,""),menubar);_exports.removeMenubarItems=(menubar,section,menuitems)=>{const regexPattern=new RegExp(menuitems.join("|"),"ig");return menubar[section].items=menubar[section].items.replace(regexPattern,""),menubar};_exports.updateEditorState=(editor,target)=>{target.hasAttribute("readonly")?editor.mode.set("readonly"):editor.mode.set("design")}})); +define("editor_tiny/utils",["exports","core/templates","./options","core/str"],(function(_exports,_templates,_options,_str){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.updateEditorState=_exports.removeToolbarButtons=_exports.removeToolbarButton=_exports.removeSubmenuItem=_exports.removeMenubarItems=_exports.removeMenubarItem=_exports.getPluginMetadata=_exports.getImagePath=_exports.getDocumentationLink=_exports.getButtonImage=_exports.ensureEditorIsValid=_exports.displayFilepicker=_exports.addToolbarSection=_exports.addToolbarButtons=_exports.addToolbarButton=_exports.addQuickbarsToolbarItem=_exports.addMenubarItem=_exports.addContextmenuItem=void 0;const getImagePath=function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return Promise.resolve(M.util.image_url(identifier,component))};_exports.getImagePath=getImagePath;_exports.getButtonImage=async function(identifier){let component=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"editor_tiny";return(0,_templates.renderForPromise)("editor_tiny/toolbar_button",{image:await getImagePath(identifier,component)})};_exports.displayFilepicker=(editor,filetype)=>new Promise(((resolve,reject)=>{const configuration=(0,_options.getFilePicker)(editor,filetype);if(configuration){const options={...configuration,formcallback:resolve,previousActiveElement:document.activeElement};M.core_filepicker.show(Y,options)}else reject("Unknown filetype ".concat(filetype))}));_exports.addToolbarButton=function(toolbar,section,button){let after=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(!toolbar)return[{name:section,items:[button]}];const mutatedToolbar=JSON.parse(JSON.stringify(toolbar));return mutatedToolbar.map((item=>{if(item.name===section)if(after){let index=item.items.findIndex((value=>value==after));-1!==index&&item.items.splice(index+1,0,button)}else item.items.push(button);return item}))};_exports.addToolbarButtons=(toolbar,section,buttons)=>{if(!toolbar)return[{name:section,items:buttons}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&buttons.forEach((button=>item.items.push(button))),item)))};_exports.addToolbarSection=function(toolbar,name,relativeTo){let append=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];const newSection={name:name,items:[]},sectionInserted=toolbar.some(((section,index)=>section.name===relativeTo&&(append?toolbar.splice(index+1,0,newSection):toolbar.splice(index,0,newSection),!0)));return sectionInserted||(append?toolbar.push(newSection):toolbar.unshift(newSection)),toolbar};_exports.addMenubarItem=function(menubar,section,menuitem){let after=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(!menubar){({})[section]={title:section,items:menuitem}}const mutatedMenubar=JSON.parse(JSON.stringify(menubar));return Array.from(Object.entries(mutatedMenubar)).forEach((_ref=>{let[name,menu]=_ref;if(name===section)if(after){let index=menu.items.indexOf(after);-1!==index&&(index+=after.length,menu.items=menu.items.slice(0,index)+" ".concat(menuitem)+menu.items.slice(index))}else menu.items="".concat(menu.items," ").concat(menuitem)})),mutatedMenubar};_exports.addContextmenuItem=function(contextmenu){const contextmenuItems=(contextmenu||"").split(" ");for(var _len=arguments.length,menuitems=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++)menuitems[_key-1]=arguments[_key];return contextmenuItems.concat(menuitems).filter((item=>""!==item)).join(" ")};_exports.addQuickbarsToolbarItem=function(quicktoolbar){const quicktoolbarItems=(quicktoolbar||"").split(" ");for(var _len2=arguments.length,toolbaritems=new Array(_len2>1?_len2-1:0),_key2=1;_key2<_len2;_key2++)toolbaritems[_key2-1]=arguments[_key2];return quicktoolbarItems.concat(toolbaritems).filter((item=>""!==item)).join(" ")};const getDocumentationLink=pluginName=>"https://docs.moodle.org/en/editor_tiny/".concat(pluginName);_exports.getDocumentationLink=getDocumentationLink;_exports.getPluginMetadata=async function(component,pluginName){let url=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;const name=await(0,_str.getString)("helplinktext",component);return{getMetadata:()=>({name:name,url:null!=url?url:getDocumentationLink(pluginName)})}};_exports.ensureEditorIsValid=editor=>editor.getElement().isConnected?editor:null;_exports.removeToolbarButton=(toolbar,section,button)=>{if(!toolbar)return[{name:section,items:[button]}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&item.items.splice(item.items.indexOf(button),1),item)))};_exports.removeToolbarButtons=(toolbar,section,buttons)=>{if(!toolbar)return[{name:section,items:buttons}];return JSON.parse(JSON.stringify(toolbar)).map((item=>(item.name===section&&buttons.forEach((button=>item.items.splice(item.items.indexOf(button),1))),item)))};_exports.removeSubmenuItem=async(editor,section,submenuitem)=>{const menuItems=editor.ui.registry.getAll().menuItems[section],submenuitemtitle=await(0,_str.getString)(submenuitem,"editor_tiny");menuItems&&editor.ui.registry.addNestedMenuItem(section,{text:menuItems.text,getSubmenuItems:()=>{let newSubmenu=[];return menuItems.getSubmenuItems().forEach((item=>{item.text.trim()!=submenuitemtitle&&newSubmenu.push(item)})),newSubmenu}})};_exports.removeMenubarItem=(menubar,section,menuitem)=>(menubar[section].items=menubar[section].items.replace(menuitem,""),menubar);_exports.removeMenubarItems=(menubar,section,menuitems)=>{const regexPattern=new RegExp(menuitems.join("|"),"ig");return menubar[section].items=menubar[section].items.replace(regexPattern,""),menubar};_exports.updateEditorState=(editor,target)=>{target.hasAttribute("readonly")?editor.mode.set("readonly"):editor.mode.set("design")}})); //# sourceMappingURL=utils.min.js.map \ No newline at end of file diff --git a/lib/editor/tiny/amd/build/utils.min.js.map b/lib/editor/tiny/amd/build/utils.min.js.map index 036f0f2f884df..1a5eeb0b24695 100644 --- a/lib/editor/tiny/amd/build/utils.min.js.map +++ b/lib/editor/tiny/amd/build/utils.min.js.map @@ -1 +1 @@ -{"version":3,"file":"utils.min.js","sources":["../src/utils.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\nimport {renderForPromise} from 'core/templates';\nimport {getFilePicker} from './options';\nimport {getString} from 'core/str';\n\n/**\n * Get the image path for the specified image.\n *\n * @param {string} identifier The name of the image\n * @param {string} component The component name\n * @return {string} The image URL path\n */\nexport const getImagePath = (identifier, component = 'editor_tiny') => Promise.resolve(M.util.image_url(identifier, component));\n\nexport const getButtonImage = async(identifier, component = 'editor_tiny') => renderForPromise('editor_tiny/toolbar_button', {\n image: await getImagePath(identifier, component),\n});\n\n/**\n * Helper to display a filepicker and return a Promise.\n *\n * The Promise will resolve when a file is selected, or reject if the file type is not found.\n *\n * @param {TinyMCE} editor\n * @param {string} filetype\n * @returns {Promise} The file object returned by the filepicker\n */\nexport const displayFilepicker = (editor, filetype) => new Promise((resolve, reject) => {\n const configuration = getFilePicker(editor, filetype);\n if (configuration) {\n const options = {\n ...configuration,\n formcallback: resolve,\n };\n M.core_filepicker.show(Y, options);\n return;\n }\n reject(`Unknown filetype ${filetype}`);\n});\n\n/**\n * Given a TinyMCE Toolbar configuration, add the specified button to the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {string} button\n * @param {string|null} [after=null]\n * @returns {object} The toolbar configuration\n */\nexport const addToolbarButton = (toolbar, section, button, after = null) => {\n if (!toolbar) {\n return [{\n name: section,\n items: [button],\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n if (after) {\n // Insert new button after the specified button.\n let index = item.items.findIndex(value => value == after);\n if (index !== -1) {\n item.items.splice(index + 1, 0, button);\n }\n } else {\n // Append button to end of button section.\n item.items.push(button);\n }\n }\n\n return item;\n });\n};\n\n/**\n * Given a TinyMCE Toolbar configuration, add the specified buttons to the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {Array} buttons\n * @returns {object} The toolbar configuration\n */\nexport const addToolbarButtons = (toolbar, section, buttons) => {\n if (!toolbar) {\n return [{\n name: section,\n items: buttons,\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n buttons.forEach(button => item.items.push(button));\n }\n\n return item;\n });\n};\n\n/**\n * Insert a new section into the toolbar.\n *\n * @param {array} toolbar The TinyMCE.editor.settings.toolbar configuration\n * @param {string} name The new section name to add\n * @param {string} relativeTo Insert relative to this section name\n * @param {boolean} append Append or Prepend\n * @returns {array}\n */\nexport const addToolbarSection = (toolbar, name, relativeTo, append = true) => {\n const newSection = {\n name,\n items: [],\n };\n const sectionInserted = toolbar.some((section, index) => {\n if (section.name === relativeTo) {\n if (append) {\n toolbar.splice(index + 1, 0, newSection);\n } else {\n toolbar.splice(index, 0, newSection);\n }\n return true;\n }\n return false;\n });\n\n if (!sectionInserted) {\n // Relative section not found.\n if (append) {\n toolbar.push(newSection);\n } else {\n toolbar.unshift(newSection);\n }\n }\n\n return toolbar;\n};\n\n/**\n * Given a TinyMCE Menubar configuration, add the specified button to the named section.\n *\n * @param {object} menubar\n * @param {string} section\n * @param {string} menuitem\n * @param {string|null} [after=null]\n * @returns {object}\n */\nexport const addMenubarItem = (menubar, section, menuitem, after = null) => {\n if (!menubar) {\n const emptyMenubar = {};\n emptyMenubar[section] = {\n title: section,\n items: menuitem,\n };\n }\n\n const mutatedMenubar = JSON.parse(JSON.stringify(menubar));\n Array.from(Object.entries(mutatedMenubar)).forEach(([name, menu]) => {\n if (name === section) {\n if (after) {\n // Insert new item after the specified menu item.\n let index = menu.items.indexOf(after);\n if (index !== -1) {\n index += after.length;\n menu.items = menu.items.slice(0, index) + ` ${menuitem}` + menu.items.slice(index);\n }\n } else {\n // Append item to end of the menu section.\n menu.items = `${menu.items} ${menuitem}`;\n }\n }\n });\n\n return mutatedMenubar;\n};\n\n/**\n * Given a TinyMCE contextmenu configuration, add the specified button to the end.\n *\n * @param {string} contextmenu\n * @param {string[]} menuitems\n * @returns {string}\n */\nexport const addContextmenuItem = (contextmenu, ...menuitems) => {\n const contextmenuItems = (contextmenu ? contextmenu : '').split(' ');\n\n return contextmenuItems\n .concat(menuitems)\n .filter((item) => item !== '')\n .join(' ');\n};\n\n/**\n * Given a TinyMCE quickbars configuration, add items to the menu.\n *\n * @param {string} quicktoolbar\n * @param {string[]} toolbaritems\n * @returns {string}\n */\nexport const addQuickbarsToolbarItem = (quicktoolbar, ...toolbaritems) => {\n const quicktoolbarItems = (quicktoolbar ? quicktoolbar : '').split(' ');\n\n return quicktoolbarItems\n .concat(toolbaritems)\n .filter((item) => item !== '')\n .join(' ');\n};\n\n/**\n * Get the link to the user documentation for the named plugin.\n *\n * @param {string} pluginName\n * @returns {string}\n */\nexport const getDocumentationLink = (pluginName) => `https://docs.moodle.org/en/editor_tiny/${pluginName}`;\n\n/**\n * Get the default plugin metadata for the named plugin.\n * If no URL is provided, then a URL is generated pointing to the standard Moodle Documentation.\n *\n * @param {string} component The component name\n * @param {string} pluginName The plugin name\n * @param {string|null} [url=null] An optional URL to the plugin documentation\n * @returns {object}\n */\nexport const getPluginMetadata = async(component, pluginName, url = null) => {\n const name = await getString('helplinktext', component);\n return {\n getMetadata: () => ({\n name,\n url: url ?? getDocumentationLink(pluginName),\n }),\n };\n};\n\n/**\n * Ensure that the editor is still in the DOM, removing it if it is not.\n *\n * @param {TinyMCE} editor\n * @returns {TinyMCE|null}\n */\nexport const ensureEditorIsValid = (editor) => {\n // TinyMCE uses the element ID as a map key internally, even if the target has changed.\n // In cases such as where an editor is in a modal form which has been detached from the DOM, but the editor not removed,\n // we need to manually destroy the editor.\n // We could theoretically do this with a Mutation Observer, but in some cases the Node may be moved,\n // or added back elsewhere in the DOM.\n if (!editor.getElement().isConnected) {\n return null;\n }\n\n return editor;\n};\n\n/**\n * Given a TinyMCE Toolbar configuration, remove the specified button from the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {string} button\n * @returns {object} The toolbar configuration\n */\n export const removeToolbarButton = (toolbar, section, button) => {\n if (!toolbar) {\n return [{\n name: section,\n items: [button],\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n item.items.splice(item.items.indexOf(button), 1);\n }\n\n return item;\n });\n};\n\n/**\n * Given a TinyMCE Toolbar configuration, remove the specified buttons from the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {Array} buttons\n * @returns {object} The toolbar configuration\n */\n export const removeToolbarButtons = (toolbar, section, buttons) => {\n if (!toolbar) {\n return [{\n name: section,\n items: buttons,\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n buttons.forEach(button => item.items.splice(item.items.indexOf(button), 1));\n }\n\n return item;\n });\n};\n\n/**\n * Remove the specified sub-menu item from the named section.\n * Recreate a menu with the same sub-menu items but remove the specified item.\n *\n * @param {TinyMCE} editor\n * @param {string} section\n * @param {string} submenuitem The text of sub-menu that we want to removed\n */\nexport const removeSubmenuItem = async(editor, section, submenuitem) => {\n // Get menu items.\n const menuItems = editor.ui.registry.getAll().menuItems[section];\n\n // Because we will match between title strings,\n // we make sure no problems arise while applying multi-language.\n const submenuitemtitle = await getString(submenuitem, 'editor_tiny');\n\n // Overriding the menu items,\n // by recreating them but excluding the specified sub-menu.\n if (menuItems) {\n editor.ui.registry.addNestedMenuItem(\n section,\n {\n text: menuItems.text,\n getSubmenuItems: () => {\n let newSubmenu = [];\n menuItems.getSubmenuItems().forEach((item) => {\n // Need to trim the text because some of the sub-menus use space to replace an icon.\n if (item.text.trim() != submenuitemtitle) {\n newSubmenu.push(item);\n }\n });\n return newSubmenu;\n }\n }\n );\n }\n};\n\n/**\n * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.\n *\n * @param {string} menubar\n * @param {string} section\n * @param {string} menuitem\n * @returns {object}\n */\nexport const removeMenubarItem = (menubar, section, menuitem) => {\n menubar[section].items = menubar[section].items\n .replace(menuitem, '');\n\n return menubar;\n};\n\n/**\n * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.\n *\n * @param {string} menubar\n * @param {string} section\n * @param {Array} menuitems\n * @returns {object}\n */\nexport const removeMenubarItems = (menubar, section, menuitems) => {\n // Create RegExp pattern.\n const regexPattern = new RegExp(menuitems.join('|'), \"ig\");\n\n // Remove menuitems.\n menubar[section].items = menubar[section].items.replace(regexPattern, '');\n\n return menubar;\n};\n\n/**\n * Updates the state of the editor.\n *\n * @param {TinyMCE} editor\n * @param {HTMLElement} target\n */\nexport const updateEditorState = (editor, target) => {\n if (target.hasAttribute('readonly')) {\n editor.mode.set(\"readonly\");\n } else {\n editor.mode.set(\"design\");\n }\n};\n"],"names":["getImagePath","identifier","component","Promise","resolve","M","util","image_url","async","image","editor","filetype","reject","configuration","options","formcallback","core_filepicker","show","Y","toolbar","section","button","after","name","items","mutatedToolbar","JSON","parse","stringify","map","item","index","findIndex","value","splice","push","buttons","forEach","relativeTo","append","newSection","sectionInserted","some","unshift","menubar","menuitem","title","mutatedMenubar","Array","from","Object","entries","_ref","menu","indexOf","length","slice","contextmenu","contextmenuItems","split","menuitems","concat","filter","join","quicktoolbar","quicktoolbarItems","toolbaritems","getDocumentationLink","pluginName","url","getMetadata","getElement","isConnected","submenuitem","menuItems","ui","registry","getAll","submenuitemtitle","addNestedMenuItem","text","getSubmenuItems","newSubmenu","trim","replace","regexPattern","RegExp","target","hasAttribute","mode","set"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"utils.min.js","sources":["../src/utils.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\nimport {renderForPromise} from 'core/templates';\nimport {getFilePicker} from './options';\nimport {getString} from 'core/str';\n\n/**\n * Get the image path for the specified image.\n *\n * @param {string} identifier The name of the image\n * @param {string} component The component name\n * @return {string} The image URL path\n */\nexport const getImagePath = (identifier, component = 'editor_tiny') => Promise.resolve(M.util.image_url(identifier, component));\n\nexport const getButtonImage = async(identifier, component = 'editor_tiny') => renderForPromise('editor_tiny/toolbar_button', {\n image: await getImagePath(identifier, component),\n});\n\n/**\n * Helper to display a filepicker and return a Promise.\n *\n * The Promise will resolve when a file is selected, or reject if the file type is not found.\n *\n * @param {TinyMCE} editor\n * @param {string} filetype\n * @returns {Promise} The file object returned by the filepicker\n */\nexport const displayFilepicker = (editor, filetype) => new Promise((resolve, reject) => {\n const configuration = getFilePicker(editor, filetype);\n if (configuration) {\n const options = {\n ...configuration,\n formcallback: resolve,\n previousActiveElement: document.activeElement,\n };\n M.core_filepicker.show(Y, options);\n return;\n }\n reject(`Unknown filetype ${filetype}`);\n});\n\n/**\n * Given a TinyMCE Toolbar configuration, add the specified button to the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {string} button\n * @param {string|null} [after=null]\n * @returns {object} The toolbar configuration\n */\nexport const addToolbarButton = (toolbar, section, button, after = null) => {\n if (!toolbar) {\n return [{\n name: section,\n items: [button],\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n if (after) {\n // Insert new button after the specified button.\n let index = item.items.findIndex(value => value == after);\n if (index !== -1) {\n item.items.splice(index + 1, 0, button);\n }\n } else {\n // Append button to end of button section.\n item.items.push(button);\n }\n }\n\n return item;\n });\n};\n\n/**\n * Given a TinyMCE Toolbar configuration, add the specified buttons to the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {Array} buttons\n * @returns {object} The toolbar configuration\n */\nexport const addToolbarButtons = (toolbar, section, buttons) => {\n if (!toolbar) {\n return [{\n name: section,\n items: buttons,\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n buttons.forEach(button => item.items.push(button));\n }\n\n return item;\n });\n};\n\n/**\n * Insert a new section into the toolbar.\n *\n * @param {array} toolbar The TinyMCE.editor.settings.toolbar configuration\n * @param {string} name The new section name to add\n * @param {string} relativeTo Insert relative to this section name\n * @param {boolean} append Append or Prepend\n * @returns {array}\n */\nexport const addToolbarSection = (toolbar, name, relativeTo, append = true) => {\n const newSection = {\n name,\n items: [],\n };\n const sectionInserted = toolbar.some((section, index) => {\n if (section.name === relativeTo) {\n if (append) {\n toolbar.splice(index + 1, 0, newSection);\n } else {\n toolbar.splice(index, 0, newSection);\n }\n return true;\n }\n return false;\n });\n\n if (!sectionInserted) {\n // Relative section not found.\n if (append) {\n toolbar.push(newSection);\n } else {\n toolbar.unshift(newSection);\n }\n }\n\n return toolbar;\n};\n\n/**\n * Given a TinyMCE Menubar configuration, add the specified button to the named section.\n *\n * @param {object} menubar\n * @param {string} section\n * @param {string} menuitem\n * @param {string|null} [after=null]\n * @returns {object}\n */\nexport const addMenubarItem = (menubar, section, menuitem, after = null) => {\n if (!menubar) {\n const emptyMenubar = {};\n emptyMenubar[section] = {\n title: section,\n items: menuitem,\n };\n }\n\n const mutatedMenubar = JSON.parse(JSON.stringify(menubar));\n Array.from(Object.entries(mutatedMenubar)).forEach(([name, menu]) => {\n if (name === section) {\n if (after) {\n // Insert new item after the specified menu item.\n let index = menu.items.indexOf(after);\n if (index !== -1) {\n index += after.length;\n menu.items = menu.items.slice(0, index) + ` ${menuitem}` + menu.items.slice(index);\n }\n } else {\n // Append item to end of the menu section.\n menu.items = `${menu.items} ${menuitem}`;\n }\n }\n });\n\n return mutatedMenubar;\n};\n\n/**\n * Given a TinyMCE contextmenu configuration, add the specified button to the end.\n *\n * @param {string} contextmenu\n * @param {string[]} menuitems\n * @returns {string}\n */\nexport const addContextmenuItem = (contextmenu, ...menuitems) => {\n const contextmenuItems = (contextmenu ? contextmenu : '').split(' ');\n\n return contextmenuItems\n .concat(menuitems)\n .filter((item) => item !== '')\n .join(' ');\n};\n\n/**\n * Given a TinyMCE quickbars configuration, add items to the menu.\n *\n * @param {string} quicktoolbar\n * @param {string[]} toolbaritems\n * @returns {string}\n */\nexport const addQuickbarsToolbarItem = (quicktoolbar, ...toolbaritems) => {\n const quicktoolbarItems = (quicktoolbar ? quicktoolbar : '').split(' ');\n\n return quicktoolbarItems\n .concat(toolbaritems)\n .filter((item) => item !== '')\n .join(' ');\n};\n\n/**\n * Get the link to the user documentation for the named plugin.\n *\n * @param {string} pluginName\n * @returns {string}\n */\nexport const getDocumentationLink = (pluginName) => `https://docs.moodle.org/en/editor_tiny/${pluginName}`;\n\n/**\n * Get the default plugin metadata for the named plugin.\n * If no URL is provided, then a URL is generated pointing to the standard Moodle Documentation.\n *\n * @param {string} component The component name\n * @param {string} pluginName The plugin name\n * @param {string|null} [url=null] An optional URL to the plugin documentation\n * @returns {object}\n */\nexport const getPluginMetadata = async(component, pluginName, url = null) => {\n const name = await getString('helplinktext', component);\n return {\n getMetadata: () => ({\n name,\n url: url ?? getDocumentationLink(pluginName),\n }),\n };\n};\n\n/**\n * Ensure that the editor is still in the DOM, removing it if it is not.\n *\n * @param {TinyMCE} editor\n * @returns {TinyMCE|null}\n */\nexport const ensureEditorIsValid = (editor) => {\n // TinyMCE uses the element ID as a map key internally, even if the target has changed.\n // In cases such as where an editor is in a modal form which has been detached from the DOM, but the editor not removed,\n // we need to manually destroy the editor.\n // We could theoretically do this with a Mutation Observer, but in some cases the Node may be moved,\n // or added back elsewhere in the DOM.\n if (!editor.getElement().isConnected) {\n return null;\n }\n\n return editor;\n};\n\n/**\n * Given a TinyMCE Toolbar configuration, remove the specified button from the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {string} button\n * @returns {object} The toolbar configuration\n */\n export const removeToolbarButton = (toolbar, section, button) => {\n if (!toolbar) {\n return [{\n name: section,\n items: [button],\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n item.items.splice(item.items.indexOf(button), 1);\n }\n\n return item;\n });\n};\n\n/**\n * Given a TinyMCE Toolbar configuration, remove the specified buttons from the named section.\n *\n * @param {object} toolbar\n * @param {string} section\n * @param {Array} buttons\n * @returns {object} The toolbar configuration\n */\n export const removeToolbarButtons = (toolbar, section, buttons) => {\n if (!toolbar) {\n return [{\n name: section,\n items: buttons,\n }];\n }\n\n const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));\n return mutatedToolbar.map((item) => {\n if (item.name === section) {\n buttons.forEach(button => item.items.splice(item.items.indexOf(button), 1));\n }\n\n return item;\n });\n};\n\n/**\n * Remove the specified sub-menu item from the named section.\n * Recreate a menu with the same sub-menu items but remove the specified item.\n *\n * @param {TinyMCE} editor\n * @param {string} section\n * @param {string} submenuitem The text of sub-menu that we want to removed\n */\nexport const removeSubmenuItem = async(editor, section, submenuitem) => {\n // Get menu items.\n const menuItems = editor.ui.registry.getAll().menuItems[section];\n\n // Because we will match between title strings,\n // we make sure no problems arise while applying multi-language.\n const submenuitemtitle = await getString(submenuitem, 'editor_tiny');\n\n // Overriding the menu items,\n // by recreating them but excluding the specified sub-menu.\n if (menuItems) {\n editor.ui.registry.addNestedMenuItem(\n section,\n {\n text: menuItems.text,\n getSubmenuItems: () => {\n let newSubmenu = [];\n menuItems.getSubmenuItems().forEach((item) => {\n // Need to trim the text because some of the sub-menus use space to replace an icon.\n if (item.text.trim() != submenuitemtitle) {\n newSubmenu.push(item);\n }\n });\n return newSubmenu;\n }\n }\n );\n }\n};\n\n/**\n * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.\n *\n * @param {string} menubar\n * @param {string} section\n * @param {string} menuitem\n * @returns {object}\n */\nexport const removeMenubarItem = (menubar, section, menuitem) => {\n menubar[section].items = menubar[section].items\n .replace(menuitem, '');\n\n return menubar;\n};\n\n/**\n * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.\n *\n * @param {string} menubar\n * @param {string} section\n * @param {Array} menuitems\n * @returns {object}\n */\nexport const removeMenubarItems = (menubar, section, menuitems) => {\n // Create RegExp pattern.\n const regexPattern = new RegExp(menuitems.join('|'), \"ig\");\n\n // Remove menuitems.\n menubar[section].items = menubar[section].items.replace(regexPattern, '');\n\n return menubar;\n};\n\n/**\n * Updates the state of the editor.\n *\n * @param {TinyMCE} editor\n * @param {HTMLElement} target\n */\nexport const updateEditorState = (editor, target) => {\n if (target.hasAttribute('readonly')) {\n editor.mode.set(\"readonly\");\n } else {\n editor.mode.set(\"design\");\n }\n};\n"],"names":["getImagePath","identifier","component","Promise","resolve","M","util","image_url","async","image","editor","filetype","reject","configuration","options","formcallback","previousActiveElement","document","activeElement","core_filepicker","show","Y","toolbar","section","button","after","name","items","mutatedToolbar","JSON","parse","stringify","map","item","index","findIndex","value","splice","push","buttons","forEach","relativeTo","append","newSection","sectionInserted","some","unshift","menubar","menuitem","title","mutatedMenubar","Array","from","Object","entries","_ref","menu","indexOf","length","slice","contextmenu","contextmenuItems","split","menuitems","concat","filter","join","quicktoolbar","quicktoolbarItems","toolbaritems","getDocumentationLink","pluginName","url","getMetadata","getElement","isConnected","submenuitem","menuItems","ui","registry","getAll","submenuitemtitle","addNestedMenuItem","text","getSubmenuItems","newSubmenu","trim","replace","regexPattern","RegExp","target","hasAttribute","mode","set"],"mappings":"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"} \ No newline at end of file diff --git a/lib/editor/tiny/amd/src/utils.js b/lib/editor/tiny/amd/src/utils.js index 80c39993d5f4c..b800f8b169629 100644 --- a/lib/editor/tiny/amd/src/utils.js +++ b/lib/editor/tiny/amd/src/utils.js @@ -45,6 +45,7 @@ export const displayFilepicker = (editor, filetype) => new Promise((resolve, rej const options = { ...configuration, formcallback: resolve, + previousActiveElement: document.activeElement, }; M.core_filepicker.show(Y, options); return; diff --git a/lib/editor/tiny/plugins/media/tests/behat/image.feature b/lib/editor/tiny/plugins/media/tests/behat/image.feature index a9df5f3311784..95499d7863f88 100644 --- a/lib/editor/tiny/plugins/media/tests/behat/image.feature +++ b/lib/editor/tiny/plugins/media/tests/behat/image.feature @@ -17,6 +17,14 @@ Feature: Use the TinyMCE editor to upload an image And I click on "Browse repositories" "button" in the "Insert image" "dialogue" Then "File picker" "dialogue" should exist + Scenario: Focus returns to the correct location after closing a nested FilePicker + Given I log in as "admin" + And I open my profile in edit mode + When I click on the "Image" button for the "Description" TinyMCE editor + And I press "Browse repositories" + When I press the escape key + Then the focused element is "Browse repositories" "button" + @_file_upload @test_tiny Scenario: Browsing repositories in the TinyMCE editor shows the FilePicker and upload url image Given I log in as "admin" diff --git a/lib/tests/behat/modal_focus.feature b/lib/tests/behat/modal_focus.feature new file mode 100644 index 0000000000000..ee4dbb2b3543f --- /dev/null +++ b/lib/tests/behat/modal_focus.feature @@ -0,0 +1,35 @@ +@core +Feature: Focus lock in modal popups + In order to navigate a modal popup with keyboard + As a user + The tab key should cycle through elements in the form and not go outside it + + @javascript + Scenario: Tab cycles through elements in modal, using image popup in Tiny as an example + Given the following "courses" exist: + | fullname | shortname | + | Course 1 | C1 | + And the following "activities" exist: + | activity | name | course | idnumber | + | forum | Test forum | C1 | forum1 | + And I am on the "forum1" "Activity" page logged in as "admin" + And I follow "Add discussion topic" + And I click on "Image" "button" + + # Repeated tabs just to get to the last element. This may need changing if controls are added + # or removed to the form. + And I press the tab key + And I press the tab key + And I press the tab key + And I press the tab key + And I press the tab key + And the focused element is "Browse repositories" "button" + + # Tab past last element should go back to the first one, which is the modal itself, then the close button. + And I press the tab key + And I press the tab key + Then the focused element is "Close" "button" in the "Insert image" "dialogue" + + And I press the shift tab key + And I press the shift tab key + And the focused element is "Browse repositories" "button"