From 300896dd1a12b861080076821bfde6907515c5ca Mon Sep 17 00:00:00 2001
From: Pierre Jarriges <pierre.jarriges@tutanota.com>
Date: Mon, 20 Jun 2022 09:56:33 +0200
Subject: [PATCH] images-courasel toggle fullscreen escape key
---
website/package.json | 2 +-
.../src/generic-components/image-carousel.js | 18 +++++++++++++++---
2 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/website/package.json b/website/package.json
index 3dbeada..d40d842 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,6 +1,6 @@
{
"name": "kuadrado-website",
- "version": "1.0.4",
+ "version": "1.1.0",
"description": "Presentation website of Kuadrado Software",
"main": "src/main.js",
"scripts": {
diff --git a/website/src/generic-components/image-carousel.js b/website/src/generic-components/image-carousel.js
index cdb8c5f..c8c9d94 100644
--- a/website/src/generic-components/image-carousel.js
+++ b/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();
},
}
--
GitLab