mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-27 13:01:41 +02:00
[refactor] improve modal focus
This commit is contained in:
parent
65e84f4470
commit
3e6084b9ea
@ -1,31 +1,5 @@
|
|||||||
var menu = (function() {
|
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 = {};
|
var mod = {};
|
||||||
|
|
||||||
mod.open = function() {
|
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 = {};
|
||||||
|
|
||||||
render.panel = function() {
|
render.panel = function() {
|
||||||
@ -257,6 +257,7 @@ var menu = (function() {
|
|||||||
return {
|
return {
|
||||||
init: init,
|
init: init,
|
||||||
mod: mod,
|
mod: mod,
|
||||||
|
bind: bind,
|
||||||
render: render,
|
render: render,
|
||||||
open: open,
|
open: open,
|
||||||
close: close,
|
close: close,
|
||||||
|
@ -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 = {};
|
var render = {};
|
||||||
|
|
||||||
render.toggle = function(override) {
|
render.toggle = function(override) {
|
||||||
@ -144,11 +171,13 @@ var modal = (function() {
|
|||||||
var open = function(override) {
|
var open = function(override) {
|
||||||
mod.open();
|
mod.open();
|
||||||
render.open(override);
|
render.open(override);
|
||||||
|
bind.focus.add();
|
||||||
};
|
};
|
||||||
|
|
||||||
var close = function() {
|
var close = function() {
|
||||||
mod.close();
|
mod.close();
|
||||||
render.close();
|
render.close();
|
||||||
|
bind.focus.remove();
|
||||||
};
|
};
|
||||||
|
|
||||||
var init = function() {
|
var init = function() {
|
||||||
@ -160,6 +189,7 @@ var modal = (function() {
|
|||||||
return {
|
return {
|
||||||
init: init,
|
init: init,
|
||||||
mod: mod,
|
mod: mod,
|
||||||
|
bind: bind,
|
||||||
render: render,
|
render: render,
|
||||||
open: open,
|
open: open,
|
||||||
close: close
|
close: close
|
||||||
|
Loading…
x
Reference in New Issue
Block a user