mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-05 10:32:04 +00:00
Allow main menu modals to be closed by clicking escape (#1617)
## Description: Allow the main menu modals to be closed by clicking the Escape key. The manner by which this change achieves this is by adding a connectedCallback to add a keydown EventListener, which closes the modal on clicking Escape. Relevant issue: #1586 My earlier PR was only for the in-game modals, as they can access the Event Bus and receive the CloseViewEvent. https://github.com/openfrontio/OpenFrontIO/pull/1604 As mentioned, this PR differs in that it does not use the Event Bus because these are not in-game modals. The main menu modals do not have access to the event bus. Affected modals for this PR. - UserSettingModal.ts - TerritoryPatternsModal.ts - SingePlayerModal.ts - NewsModal.ts - LanguageModal.ts - JoinPrivateLobbyModal.ts - HostLobbyModal.ts - HelpModal.ts - FlatInput.ts ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced - [x] I have read and accepted the CLA agreement (only required once). ## Please put your Discord username so you can be contacted if a bug or regression is found: slyty --------- Co-authored-by: Antoine <antoine.gannat@gmail.com>
This commit is contained in:
@@ -15,6 +15,23 @@ export class HelpModal extends LitElement {
|
||||
return this;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
window.addEventListener("keydown", this.handleKeyDown);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
window.removeEventListener("keydown", this.handleKeyDown);
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
private handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.code === "Escape") {
|
||||
e.preventDefault();
|
||||
this.close();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<o-modal
|
||||
|
||||
Reference in New Issue
Block a user