simplify/generalize close-on-esc

This commit is contained in:
tophf 2022-02-21 23:45:42 +03:00
parent b75e2cb56b
commit 5ff664f9b9
5 changed files with 13 additions and 18 deletions

View File

@ -213,7 +213,7 @@
</template> </template>
<template data-id="keymapHelp"> <template data-id="keymapHelp">
<table class="keymap-list can-close-on-esc"> <table class="keymap-list">
<thead> <thead>
<tr> <tr>
<th><input i18n="placeholder:helpKeyMapHotkey" type="search"></th> <th><input i18n="placeholder:helpKeyMapHotkey" type="search"></th>

View File

@ -1,5 +1,5 @@
<div> <div>
<fieldset class="style-settings can-close-on-esc"> <fieldset class="style-settings">
<div class="rel"> <div class="rel">
<input id="ss-updatable" type="checkbox"> <input id="ss-updatable" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>

View File

@ -29,35 +29,32 @@ const helpPopup = {
div.style.display = 'block'; div.style.display = 'block';
helpPopup.originalFocus = document.activeElement; helpPopup.originalFocus = document.activeElement;
helpPopup.div = div; helpPopup.div = div;
moveFocus(div, 0);
return div; return div;
}, },
close(event) { close(event) {
let el;
const canClose = const canClose =
!event || !event ||
event.type === 'click' || ( event.type === 'click' ||
getEventKeyName(event) === 'Escape' && getEventKeyName(event) === 'Escape' && !$('.CodeMirror-hints, #message-box') && (
!$('.CodeMirror-hints, #message-box') && ( !(el = document.activeElement) ||
!document.activeElement || !el.closest('#search-replace-dialog')
!document.activeElement.closest('#search-replace-dialog') && (
document.activeElement.tagName !== 'INPUT' ||
document.activeElement.closest('.can-close-on-esc')
)
)
); );
const {div} = helpPopup; const {div} = helpPopup;
if (!canClose || !div) { if (!canClose || !div) {
return; return;
} }
if (event && div.codebox && !div.codebox.options.readOnly && !div.codebox.isClean()) { if (event && (el = div.codebox) && !el.options.readOnly && !el.isClean()) {
setTimeout(async () => { setTimeout(async () => {
const ok = await messageBoxProxy.confirm(t('confirmDiscardChanges')); const ok = await messageBoxProxy.confirm(t('confirmDiscardChanges'));
return ok && helpPopup.close(); return ok && helpPopup.close();
}); });
return; return;
} }
if (div.contains(document.activeElement) && helpPopup.originalFocus) { if (div.contains(document.activeElement) && (el = helpPopup.originalFocus)) {
helpPopup.originalFocus.focus(); el.focus();
} }
const contents = $('.contents', div); const contents = $('.contents', div);
div.style.display = ''; div.style.display = '';

View File

@ -64,10 +64,6 @@ messageBox.show = async ({
/config-dialog/.test(className)) { /config-dialog/.test(className)) {
moveFocus(messageBox.element, 1); moveFocus(messageBox.element, 1);
} }
// suppress focus outline when invoked via click
if (focusAccessibility.lastFocusedViaClick && document.activeElement) {
document.activeElement.dataset.focusedViaClick = '';
}
if (document.activeElement === messageBox._originalFocus) { if (document.activeElement === messageBox._originalFocus) {
document.body.focus(); document.body.focus();
} }

View File

@ -268,6 +268,8 @@ function moveFocus(rootElement, step) {
const el = elements[(activeIndex + i * step + num) % num]; const el = elements[(activeIndex + i * step + num) % num];
if (!el.disabled && el.tabIndex >= 0) { if (!el.disabled && el.tabIndex >= 0) {
el.focus(); el.focus();
// suppress focus outline when invoked via click
toggleDataset(el, 'focusedViaClick', focusAccessibility.lastFocusedViaClick);
return activeEl !== el && el; return activeEl !== el && el;
} }
} }