images-carousel toggle fullscreen

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

 "use strict";
-const translator = require("ks-cheap-translator")
+
 class ImageCarousel {
     constructor(props) {
         this.props = props;
         this.id = this.props.images.join("").replace(/[\s\./]/g, "");
         this.state = {
             showImageIndex: 0,
+            fullscreen: false,
         };
         this.RUN_INTERVAL = 5000;
         this.props.images.length > 1 && this.run();
@@ -39,9 +40,11 @@ class ImageCarousel {
         obj2htm.subRender(this.render_bullets(), document.getElementById(this.id + "-bullets"), {
             mode: "replace",
         });
+        obj2htm.subRender(this.render_fullscreen_button(), document.getElementById(this.id + "-fullscreen-btn"), {
+            mode: "replace",
+        });
     }
 
-
     render_image() {
         return {
             tag: "img",
@@ -68,6 +71,22 @@ class ImageCarousel {
         } : { tag: "span" };
     }
 
+    render_fullscreen_button() {
+        return {
+            tag: "button",
+            id: this.id + "-fullscreen-btn",
+            class: `toggle-fullscreen-button ${this.state.fullscreen ? "to-small" : "to-full"}`,
+            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.refresh();
+            },
+        }
+    }
+
     render() {
         return {
             tag: "div",
@@ -76,6 +95,7 @@ class ImageCarousel {
             contents: [
                 this.render_image(),
                 this.render_bullets(),
+                this.render_fullscreen_button(),
             ],
         };
     }

website/src/style.scss

@@ -107,12 +107,12 @@ main {
 			bottom: 0;
 			padding: 20px;
 			display: flex;
-			gap: 10px;
+			gap: 20px;
 
 			.bullet {
 				cursor: pointer;
-				width: 8px;
-				height: 8px;
+				width: 12px;
+				height: 12px;
 				background-color: $medium_grey;
 				border-radius: 100%;
 				box-shadow: 0 0 3px black;
@@ -123,6 +123,54 @@ main {
 			}
 		}
 
+		.toggle-fullscreen-button {
+			position: absolute;
+			right: 15px;
+			top: 15px;
+			color: $light_1;
+			font-weight: bold;
+			background: none;
+			border: none;
+			cursor: pointer;
+			transition: transform 0.1s;
+
+			&.to-full {
+				font-size: 20px;
+
+				@media screen and (max-width:1000px) {
+					display: none;
+				}
+			}
+
+			&.to-small {
+				font-size: 30px;
+			}
+
+			&:hover {
+				color: white;
+
+				&.to-small {
+					transform: scale(0.7);
+				}
+
+				&.to-full {
+					transform: scale(1.5);
+
+				}
+			}
+
+
+		}
+
+		&.fullscreen {
+			position: fixed;
+			z-index: 20;
+			top: 0;
+			right: 0;
+			left: 0;
+			height: 100vh !important;
+		}
+
 		@media screen and (max-width: $screen_l) {
 			.carousel-bullets {
 				gap: 30px;