[refactor] improve modal focus

This commit is contained in:
zombieFox 2020-03-09 09:29:10 +00:00
parent 65e84f4470
commit 3e6084b9ea
2 changed files with 57 additions and 26 deletions

View File

@ -1,31 +1,5 @@
var menu = (function() {
var bind = {};
bind.focus = {
loop: function(event) {
var firstElement = helper.e(".control-menu-layout");
var lastElement = helper.e(".menu-close-tab");
if (event.keyCode == 9 && event.shiftKey) {
if (document.activeElement === firstElement) {
lastElement.focus();
event.preventDefault();
}
} else if (event.keyCode == 9) {
if (document.activeElement === lastElement) {
firstElement.focus();
event.preventDefault();
}
};
},
add: function() {
window.addEventListener("keydown", bind.focus.loop, false);
},
remove: function() {
window.removeEventListener("keydown", bind.focus.loop, false);
}
};
var mod = {};
mod.open = function() {
@ -64,6 +38,32 @@ var menu = (function() {
}
};
var bind = {};
bind.focus = {
loop: function(event) {
var firstElement = helper.e(".control-menu-layout");
var lastElement = helper.e(".menu-close-tab");
if (event.keyCode == 9 && event.shiftKey) {
if (document.activeElement === firstElement) {
lastElement.focus();
event.preventDefault();
}
} else if (event.keyCode == 9) {
if (document.activeElement === lastElement) {
firstElement.focus();
event.preventDefault();
}
};
},
add: function() {
window.addEventListener("keydown", bind.focus.loop, false);
},
remove: function() {
window.removeEventListener("keydown", bind.focus.loop, false);
}
};
render = {};
render.panel = function() {
@ -257,6 +257,7 @@ var menu = (function() {
return {
init: init,
mod: mod,
bind: bind,
render: render,
open: open,
close: close,

View File

@ -20,6 +20,33 @@ var modal = (function() {
});
};
var bind = {};
bind.focus = {
loop: function(event) {
var allElements = helper.e(".modal").querySelectorAll("[tabindex]");
var firstElement = allElements[0];
var lastElement = allElements[allElements.length - 1];
if (event.keyCode == 9 && event.shiftKey) {
if (document.activeElement === firstElement) {
lastElement.focus();
event.preventDefault();
}
} else if (event.keyCode == 9) {
if (document.activeElement === lastElement) {
firstElement.focus();
event.preventDefault();
}
};
},
add: function() {
window.addEventListener("keydown", bind.focus.loop, false);
},
remove: function() {
window.removeEventListener("keydown", bind.focus.loop, false);
}
};
var render = {};
render.toggle = function(override) {
@ -144,11 +171,13 @@ var modal = (function() {
var open = function(override) {
mod.open();
render.open(override);
bind.focus.add();
};
var close = function() {
mod.close();
render.close();
bind.focus.remove();
};
var init = function() {
@ -160,6 +189,7 @@ var modal = (function() {
return {
init: init,
mod: mod,
bind: bind,
render: render,
open: open,
close: close