Added Escape keydown gesture

javascripts/ajouter-un-album.js

@@ -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");

javascripts/collection.js

@@ -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");

javascripts/mon-compte/ma-collection/details.js

@@ -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();