images-courasel toggle fullscreen escape key

website/package.json

 {
     "name": "kuadrado-website",
-    "version": "1.0.4",
+    "version": "1.1.0",
     "description": "Presentation website of Kuadrado Software",
     "main": "src/main.js",
     "scripts": {

website/src/generic-components/image-carousel.js

@@ -10,6 +10,7 @@ class ImageCarousel {
         };
         this.RUN_INTERVAL = 5000;
         this.props.images.length > 1 && this.run();
+        this.toggle_fullscreen = this.toggle_fullscreen.bind(this);
     }
 
     run() {
@@ -33,6 +34,19 @@ class ImageCarousel {
         this.refresh();
     }
 
+
+    toggle_fullscreen() {
+        this.state.fullscreen = !this.state.fullscreen;
+        document.getElementById(this.id).classList.toggle("fullscreen");
+        document.body.style.overflow = this.state.fullscreen ? "hidden" : "initial";
+
+        if (this.state.fullscreen) {
+            window.addEventListener("keydown", this.toggle_fullscreen);
+        } else {
+            window.removeEventListener("keydown", this.toggle_fullscreen);
+        }
+    }
+
     refresh() {
         obj2htm.subRender(this.render_image(), document.getElementById(this.id + "-img-element"), {
             mode: "replace",
@@ -79,9 +93,7 @@ class ImageCarousel {
             contents: this.state.fullscreen ? "▢" : "⛶",
             onclick: e => {
                 e.stopImmediatePropagation();
-                this.state.fullscreen = !this.state.fullscreen;
-                document.getElementById(this.id).classList.toggle("fullscreen");
-                document.body.style.overflow = this.state.fullscreen ? "hidden" : "initial";
+                this.toggle_fullscreen();
                 this.refresh();
             },
         }