Added Escape keydown gesture

This commit is contained in:
Damien Broqua 2024-02-04 15:37:42 +01:00
parent 061e72c459
commit d692090022
3 changed files with 48 additions and 4 deletions

View File

@ -78,6 +78,12 @@ Vue.createApp({
],
};
},
created() {
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
window.removeEventListener("keydown", this.keyDown);
},
methods: {
search(event) {
event.preventDefault();
@ -189,5 +195,13 @@ Vue.createApp({
orderedItems(items) {
return items.sort();
},
keyDown(event) {
const keycode = event.code;
if (this.modalIsVisible && keycode === "Escape") {
event.preventDefault();
this.modalIsVisible = false;
}
},
},
}).mount("#ajouter-album");

View File

@ -34,6 +34,11 @@ Vue.createApp({
},
created() {
this.fetch();
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
window.removeEventListener("keydown", this.keyDown);
},
methods: {
formatParams(param) {
@ -241,5 +246,16 @@ Vue.createApp({
return render;
},
keyDown(event) {
const keycode = event.code;
if (this.showModalDelete && keycode === "Escape") {
event.preventDefault();
this.showModalDelete = false;
}
if (this.showModalShare && keycode === "Escape") {
event.preventDefault();
this.showModalShare = false;
}
},
},
}).mount("#collection");

View File

@ -25,10 +25,10 @@ if (typeof item !== "undefined") {
this.setTrackList();
this.setIdentifiers();
window.addEventListener("keydown", this.changeImage);
window.addEventListener("keydown", this.keyDown);
},
destroyed() {
window.removeEventListener("keydown", this.changeImage);
window.removeEventListener("keydown", this.keyDown);
},
watch: {
shareMessage(message) {
@ -139,12 +139,12 @@ if (typeof item !== "undefined") {
this.setImage();
},
changeImage(event) {
event.preventDefault();
const direction = event.code;
if (
this.modalIsVisible &&
["ArrowRight", "ArrowLeft", "Escape"].indexOf(direction) !==
-1
-1
) {
switch (direction) {
case "ArrowRight":
@ -159,6 +159,20 @@ if (typeof item !== "undefined") {
return true;
},
keyDown(event) {
const keycode = event.code;
if (this.modalIsVisible) {
this.changeImage(event);
}
if (this.showModalDelete && keycode === "Escape") {
event.preventDefault();
this.showModalDelete = false;
}
if (this.showModalShare && keycode === "Escape") {
event.preventDefault();
this.showModalShare = false;
}
},
showAllIdentifiers() {
this.identifiersMode = "all";
this.setIdentifiers();