fix revision list ESC behaviour

This commit is contained in:
Jin 2024-09-15 12:41:45 +02:00
parent a557b82c83
commit 5d08f2bc5a

View File

@ -8,8 +8,8 @@ import openService from "../../services/open.js";
import protectedSessionHolder from "../../services/protected_session_holder.js"; import protectedSessionHolder from "../../services/protected_session_holder.js";
import BasicWidget from "../basic_widget.js"; import BasicWidget from "../basic_widget.js";
import dialogService from "../../services/dialog.js"; import dialogService from "../../services/dialog.js";
import OnClickButtonWidget from "../buttons/onclick_button.js";
import options from "../../services/options.js"; import options from "../../services/options.js";
const TPL = ` const TPL = `
<div class="revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog"> <div class="revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog">
<style> <style>
@ -91,6 +91,7 @@ export default class RevisionsDialog extends BasicWidget {
this.$list = this.$widget.find(".revision-list"); this.$list = this.$widget.find(".revision-list");
this.$listDropdown = this.$widget.find(".revision-list-dropdown"); this.$listDropdown = this.$widget.find(".revision-list-dropdown");
this.listDropdown = bootstrap.Dropdown.getOrCreateInstance(this.$listDropdown);
this.$content = this.$widget.find(".revision-content"); this.$content = this.$widget.find(".revision-content");
this.$title = this.$widget.find(".revision-title"); this.$title = this.$widget.find(".revision-title");
this.$titleButtons = this.$widget.find(".revision-title-buttons"); this.$titleButtons = this.$widget.find(".revision-title-buttons");
@ -98,15 +99,21 @@ export default class RevisionsDialog extends BasicWidget {
this.$snapshotInterval = this.$widget.find(".revisions-snapshot-interval"); this.$snapshotInterval = this.$widget.find(".revisions-snapshot-interval");
this.$maximumRevisions = this.$widget.find(".maximum-revisions-for-current-note"); this.$maximumRevisions = this.$widget.find(".maximum-revisions-for-current-note");
this.$revisionSettingsButton = this.$widget.find(".revision-settings-button") this.$revisionSettingsButton = this.$widget.find(".revision-settings-button")
this.$listDropdown.dropdown(); this.listDropdown.show();
this.$listDropdown.parent().on('hide.bs.dropdown', e => { this.$listDropdown.parent().on('hide.bs.dropdown', e => {
// prevent closing dropdown by clicking outside // Prevent closing dropdown by pressing ESC and clicking outside
if (e.clickEvent) {
e.preventDefault(); e.preventDefault();
}
}); });
document.addEventListener('keydown', e => {
// Close the revision dialog when revision element is focused and ESC is pressed
if (e.key === 'Escape' ||
e.target.classList.contains(['dropdown-item', 'active'])) {
this.modal.hide();
}
}, true)
this.$widget.on('shown.bs.modal', () => { this.$widget.on('shown.bs.modal', () => {
this.$list.find(`[data-revision-id="${this.revisionId}"]`) this.$list.find(`[data-revision-id="${this.revisionId}"]`)
.trigger('focus'); .trigger('focus');
@ -124,11 +131,6 @@ export default class RevisionsDialog extends BasicWidget {
} }
}); });
this.$list.on('click', '.dropdown-item', e => {
e.preventDefault();
return false;
});
this.$list.on('focus', '.dropdown-item', e => { this.$list.on('focus', '.dropdown-item', e => {
this.$list.find('.dropdown-item').each((i, el) => { this.$list.find('.dropdown-item').each((i, el) => {
$(el).toggleClass('active', el === e.target); $(el).toggleClass('active', el === e.target);
@ -165,7 +167,7 @@ export default class RevisionsDialog extends BasicWidget {
); );
} }
this.$listDropdown.dropdown('show'); this.listDropdown.show();
if (this.revisionItems.length > 0) { if (this.revisionItems.length > 0) {
if (!this.revisionId) { if (!this.revisionId) {