From aa3a2a43ea8b2c493b25837a09a38f9cf4690c74 Mon Sep 17 00:00:00 2001 From: Shamim Rezaie Date: Mon, 7 Jun 2021 12:37:11 +1000 Subject: [PATCH] MDL-71672 atto_managefiles: Focus the first file manager button --- .../moodle-atto_managefiles-button-debug.js | 20 ++++++++++++++++++- .../moodle-atto_managefiles-button-min.js | 2 +- .../moodle-atto_managefiles-button.js | 20 ++++++++++++++++++- .../managefiles/yui/src/button/js/button.js | 20 ++++++++++++++++++- 4 files changed, 58 insertions(+), 4 deletions(-) diff --git a/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-debug.js b/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-debug.js index 59199a492cd..ff55e3d878e 100644 --- a/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-debug.js +++ b/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-debug.js @@ -33,7 +33,9 @@ YUI.add('moodle-atto_managefiles-button', function (Y, NAME) { * @extends M.editor_atto.EditorPlugin */ -var LOGNAME = 'atto_managefiles'; +var LOGNAME = 'atto_managefiles', + CAN_RECEIVE_FOCUS_SELECTOR = '.fp-navbar a:not([disabled])', + FILE_MANAGER_SELECTOR = '#fitem_id_files_filemanager'; Y.namespace('M.atto_managefiles').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -96,6 +98,22 @@ Y.namespace('M.atto_managefiles').Button = Y.Base.create('button', Y.M.editor_at }); iframe.setAttribute('src', this._getIframeURL()); + // Focus on the first focusable element of the file manager after it is fully loaded. + iframe.on('load', function(e, frame) { + var fileManager = frame.getDOMNode().contentDocument.querySelector(FILE_MANAGER_SELECTOR); + // The file manager component is loaded asynchronously after the page is loaded. + // We check for the presence of .fm-loaded every 200 ms to determine if the file manager is loaded yet. + var intervalId = setInterval(function() { + if (fileManager.querySelector('.fm-loaded')) { + var firstFocusableElement = fileManager.querySelector(CAN_RECEIVE_FOCUS_SELECTOR); + if (firstFocusableElement) { + firstFocusableElement.focus(); + } + clearInterval(intervalId); + } + }, 200); + }, this, iframe); + dialogue.set('bodyContent', iframe) .show(); diff --git a/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-min.js b/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-min.js index 16ab8ed38b2..60c6c8ffe29 100644 --- a/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-min.js +++ b/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button-min.js @@ -1 +1 @@ -YUI.add("moodle-atto_managefiles-button",function(a,e){a.namespace("M.atto_managefiles").Button=a.Base.create("button",a.M.editor_atto.EditorPlugin,[],{_currentSelection:null,initializer:function(){if(!this.get("disabled")){var e=this.get("host"),t=this.get("area"),i=e.get("filepickeroptions");i.image&&i.image.itemid&&(t.itemid=i.image.itemid,this.set("area",t),this.addButton({icon:"e/manage_files",callback:this._displayDialogue}))}},_displayDialogue:function(e){var t,i;e.preventDefault(),t=this.getDialogue({headerContent:M.util.get_string("managefiles","atto_managefiles"),width:"800px",focusAfterHide:!0}),(i=a.Node.create("")).setStyles({height:"700px",border:"none",width:"100%"}),i.setAttribute("src",this._getIframeURL()),t.set("bodyContent",i).show(),this.markUpdated()},_getIframeURL:function(){var e=a.mix({elementid:this.get("host").get("elementid")},this.get("area"));return M.cfg.wwwroot+"/lib/editor/atto/plugins/managefiles/manage.php?"+a.QueryString.stringify(e)}},{ATTRS:{disabled:{value:!0},area:{value:{}}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]}); \ No newline at end of file +YUI.add("moodle-atto_managefiles-button",function(a,e){a.namespace("M.atto_managefiles").Button=a.Base.create("button",a.M.editor_atto.EditorPlugin,[],{_currentSelection:null,initializer:function(){if(!this.get("disabled")){var e=this.get("host"),t=this.get("area"),i=e.get("filepickeroptions");i.image&&i.image.itemid&&(t.itemid=i.image.itemid,this.set("area",t),this.addButton({icon:"e/manage_files",callback:this._displayDialogue}))}},_displayDialogue:function(e){var t,i;e.preventDefault(),t=this.getDialogue({headerContent:M.util.get_string("managefiles","atto_managefiles"),width:"800px",focusAfterHide:!0}),(i=a.Node.create("")).setStyles({height:"700px",border:"none",width:"100%"}),i.setAttribute("src",this._getIframeURL()),i.on("load",function(e,t){var i=t.getDOMNode().contentDocument.querySelector("#fitem_id_files_filemanager"),a=setInterval(function(){if(i.querySelector(".fm-loaded")){var e=i.querySelector(".fp-navbar a:not([disabled])");e&&e.focus(),clearInterval(a)}},200)},this,i),t.set("bodyContent",i).show(),this.markUpdated()},_getIframeURL:function(){var e=a.mix({elementid:this.get("host").get("elementid")},this.get("area"));return M.cfg.wwwroot+"/lib/editor/atto/plugins/managefiles/manage.php?"+a.QueryString.stringify(e)}},{ATTRS:{disabled:{value:!0},area:{value:{}}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]}); \ No newline at end of file diff --git a/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button.js b/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button.js index 1434a96e9df..7dbc265997e 100644 --- a/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button.js +++ b/lib/editor/atto/plugins/managefiles/yui/build/moodle-atto_managefiles-button/moodle-atto_managefiles-button.js @@ -33,7 +33,9 @@ YUI.add('moodle-atto_managefiles-button', function (Y, NAME) { * @extends M.editor_atto.EditorPlugin */ -var LOGNAME = 'atto_managefiles'; +var LOGNAME = 'atto_managefiles', + CAN_RECEIVE_FOCUS_SELECTOR = '.fp-navbar a:not([disabled])', + FILE_MANAGER_SELECTOR = '#fitem_id_files_filemanager'; Y.namespace('M.atto_managefiles').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -94,6 +96,22 @@ Y.namespace('M.atto_managefiles').Button = Y.Base.create('button', Y.M.editor_at }); iframe.setAttribute('src', this._getIframeURL()); + // Focus on the first focusable element of the file manager after it is fully loaded. + iframe.on('load', function(e, frame) { + var fileManager = frame.getDOMNode().contentDocument.querySelector(FILE_MANAGER_SELECTOR); + // The file manager component is loaded asynchronously after the page is loaded. + // We check for the presence of .fm-loaded every 200 ms to determine if the file manager is loaded yet. + var intervalId = setInterval(function() { + if (fileManager.querySelector('.fm-loaded')) { + var firstFocusableElement = fileManager.querySelector(CAN_RECEIVE_FOCUS_SELECTOR); + if (firstFocusableElement) { + firstFocusableElement.focus(); + } + clearInterval(intervalId); + } + }, 200); + }, this, iframe); + dialogue.set('bodyContent', iframe) .show(); diff --git a/lib/editor/atto/plugins/managefiles/yui/src/button/js/button.js b/lib/editor/atto/plugins/managefiles/yui/src/button/js/button.js index 3ba25e56f79..abf0012e3bf 100644 --- a/lib/editor/atto/plugins/managefiles/yui/src/button/js/button.js +++ b/lib/editor/atto/plugins/managefiles/yui/src/button/js/button.js @@ -31,7 +31,9 @@ * @extends M.editor_atto.EditorPlugin */ -var LOGNAME = 'atto_managefiles'; +var LOGNAME = 'atto_managefiles', + CAN_RECEIVE_FOCUS_SELECTOR = '.fp-navbar a:not([disabled])', + FILE_MANAGER_SELECTOR = '#fitem_id_files_filemanager'; Y.namespace('M.atto_managefiles').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { @@ -94,6 +96,22 @@ Y.namespace('M.atto_managefiles').Button = Y.Base.create('button', Y.M.editor_at }); iframe.setAttribute('src', this._getIframeURL()); + // Focus on the first focusable element of the file manager after it is fully loaded. + iframe.on('load', function(e, frame) { + var fileManager = frame.getDOMNode().contentDocument.querySelector(FILE_MANAGER_SELECTOR); + // The file manager component is loaded asynchronously after the page is loaded. + // We check for the presence of .fm-loaded every 200 ms to determine if the file manager is loaded yet. + var intervalId = setInterval(function() { + if (fileManager.querySelector('.fm-loaded')) { + var firstFocusableElement = fileManager.querySelector(CAN_RECEIVE_FOCUS_SELECTOR); + if (firstFocusableElement) { + firstFocusableElement.focus(); + } + clearInterval(intervalId); + } + }, 200); + }, this, iframe); + dialogue.set('bodyContent', iframe) .show();