open image as dialog, when clicking on it

public/internal/footer.php

@@ -55,6 +55,8 @@ function getFooter(){
     </script>
     <script src="/js/includeHTML.js"></script>
     <script src="/js/burgerMenu.js"></script>
+    <script src="/js/dialog.js"></script>
+    <script src="/js/imgPreview.js"></script>
     </body>
     </html>
     EOF);

scss/_dialog.scss

@@ -0,0 +1,33 @@
+.dialog {
+  opacity: 0;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  .dialogContent {
+    height: 80%;
+    width: 80%;
+    background-color: white;
+    border: 10px solid rgb(86, 86, 86);
+    border-radius: 10px;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+
+  .imageDialog{
+    height: auto;
+    width: auto;
+  }
+}

scss/_menue.scss

@@ -35,14 +35,14 @@
         color: $text-color;
 
         &:first-of-type{
-            border-top-left-radius: 10px;
+            border-top-left-radius: $border-radius-sub-nav;
-            border-top-right-radius: 10px;
+            border-top-right-radius: $border-radius-sub-nav;
         }
 
         &:last-of-type {
             border-bottom: none;
-            border-bottom-left-radius: 10px;
+            border-bottom-left-radius: $border-radius-sub-nav;
-            border-bottom-right-radius: 10px;
+            border-bottom-right-radius: $border-radius-sub-nav;
         }
 
         &:hover{

scss/_var.scss

@@ -7,5 +7,7 @@ $content-footer-div-color: #03A8F4;
 $darker-color: 5%;
 $darker-color-2: 2%;
 
+$border-radius-sub-nav: 10px;
+
 $mobile-max-width: 600px;
 $small-mobile-max-width: 300px;

scss/style.scss

@@ -14,3 +14,4 @@
 @import "mobile";
 @import "menuMobile";
 @import "mobileSmall";
+@import "dialog";

ts/dialog.ts

@@ -0,0 +1,38 @@
+function createDialogIframe(url:string) {
+    createDialogHTML(`<iframe src="${url}">`);
+}
+
+function createDialogImage(url:string) {
+    createDialogHTML(`<img src="${url}">`, "imageDialog");
+}
+
+function createDialogHTML(html:string, customClasses = "") {
+    var dialog = document.createElement("div");
+    dialog.classList.add("dialog");
+    dialog.onclick = function () {
+        fade(dialog, -0.04, true);
+    }
+
+    dialog.innerHTML = `
+    <div class="dialogContent ${customClasses}">${html}</div>`;
+
+    document.body.appendChild(dialog);
+    fade(dialog, 0.04);
+}
+
+function fade(element:HTMLElement, value = 0.1, deleteAfterwards = false) {
+    let opacity:number = +(element.style.opacity) + value;
+
+    element.style.opacity = String(opacity);
+
+    if ((opacity < 1 && value > 0) || (opacity >= 0 && value < 0)) {
+        setTimeout(function () {
+            fade(element, value, deleteAfterwards);
+        }, 10);
+    } else if (deleteAfterwards) {
+        setTimeout(function () {
+            // @ts-ignore
+            element.parentNode.removeChild(element);
+        }, 10);
+    }
+}

ts/imgPreview.ts

@@ -0,0 +1,7 @@
+let images:HTMLCollectionOf<HTMLImageElement> = <HTMLCollectionOf<HTMLImageElement>> document.getElementsByTagName("img");
+for(let i = 0; i < images.length; i++){
+    let element:HTMLImageElement = images[i];
+    if(element.getAttribute("data-noPreview") === "true") {
+        element.onclick = () => createDialogImage(element.src);
+    }
+}