From d6920900223b9041586c1f96d9942beb46be7d07 Mon Sep 17 00:00:00 2001
From: Damien Broqua <damien@freemiumplay.com>
Date: Sun, 4 Feb 2024 15:37:42 +0100
Subject: [PATCH] Added Escape keydown gesture

---
 javascripts/ajouter-un-album.js               | 14 ++++++++++++
 javascripts/collection.js                     | 16 ++++++++++++++
 .../mon-compte/ma-collection/details.js       | 22 +++++++++++++++----
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/javascripts/ajouter-un-album.js b/javascripts/ajouter-un-album.js
index 02f50d4..a9d81a8 100644
--- a/javascripts/ajouter-un-album.js
+++ b/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");
diff --git a/javascripts/collection.js b/javascripts/collection.js
index b548e2f..74250a1 100644
--- a/javascripts/collection.js
+++ b/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");
diff --git a/javascripts/mon-compte/ma-collection/details.js b/javascripts/mon-compte/ma-collection/details.js
index af0414f..4ff50d1 100644
--- a/javascripts/mon-compte/ma-collection/details.js
+++ b/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();