Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: ui.js: modal dialog tweaks

Browse source 
- Automatically focus modal dialog frame
 - Close modal dialog on pressing escape key

Fixes: #4609, #6205
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2023-02-05 19:41:20 +01:00
parent 8db3e0e70f
commit c9939a83e7
1 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
modules/luci-base/htdocs/luci-static/resources/ui.js
View file

@ -3486,8 +3486,17 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ {
var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
__init__: function() {
modalDiv = document.body.appendChild(
dom.create('div', { id: 'modal_overlay' },
dom.create('div', { class: 'modal', role: 'dialog', 'aria-modal': true })));
dom.create('div', {
id: 'modal_overlay',
tabindex: -1,
keydown: this.cancelModal
}, [
dom.create('div', {
class: 'modal',
role: 'dialog',
'aria-modal': true
})
]));
tooltipDiv = document.body.appendChild(
dom.create('div', { class: 'cbi-tooltip' }));
@ -3551,6 +3560,7 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
document.body.classList.add('modal-overlay-active');
modalDiv.scrollTop = 0;
modalDiv.focus();
return dlg;
},
@ -3567,6 +3577,17 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
*/
hideModal: function() {
document.body.classList.remove('modal-overlay-active');
modalDiv.blur();
},
/** @private */
cancelModal: function(ev) {
if (ev.key == 'Escape') {
var btn = modalDiv.querySelector('.right > button, .right > .btn');
if (btn)
btn.click();
}
},
/** @private */