MDL-71672 atto_managefiles: Focus the first file manager button

This commit is contained in:
Shamim Rezaie
2021-07-19 16:41:51 +10:00
parent a7c9576c20
commit aa3a2a43ea
4 changed files with 58 additions and 4 deletions
@@ -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();
@@ -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("<iframe></iframe>")).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"]});
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("<iframe></iframe>")).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"]});
@@ -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();
@@ -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();