feat(info): add info/about popup.

Signed-off-by: Dmitry Kisler <admin@dkisler.com>
kislerdm · Jul 17, 2023 · 6708b7a · 6708b7a
1 parent 83c2556
commit 6708b7a
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 3 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,7 @@
 import Graph, {getNodeByID, Node} from "./graph.ts";
 import {DiagramBuilder} from "./diagram.ts";
-import SetTemplatedComponents from "./template.ts";
+import SetTemplatedComponents, {addInfoPopUp} from "./template.ts";
+
 
 const inputSelectedIdStyle: string = "font-weight:bold;font-size:18px";
 
@@ -93,6 +94,7 @@ export default async function Main(mountPoint: HTMLDivElement, builder: DiagramB
         console.error(err.message);
         mountPoint.innerHTML = errorMessage(err.message);
         mountPoint.innerHTML = SetTemplatedComponents(mountPoint.innerHTML);
+        addInfoPopUp(mountPoint)
         return;
     }
 
@@ -110,11 +112,13 @@ export default async function Main(mountPoint: HTMLDivElement, builder: DiagramB
     <div class="column right"><div id="output">${addTitle(getNodeByID(d.nodes, id))}${svg}</div></div>
 </div>`;
         mountPoint.innerHTML = SetTemplatedComponents(mountPoint.innerHTML);
+        addInfoPopUp(mountPoint)
         // @ts-ignore
     } catch (err: Error) {
         console.error(err.message);
         mountPoint.innerHTML = errorMessage(`Diagram rendering error. Node ID: ${id}\n${err.message}`);
         mountPoint.innerHTML = SetTemplatedComponents(mountPoint.innerHTML);
+        addInfoPopUp(mountPoint)
         return;
     }
 
@@ -166,6 +170,7 @@ export default async function Main(mountPoint: HTMLDivElement, builder: DiagramB
                 console.error(err.message);
                 mountPoint.innerHTML = errorMessage(`Diagram rendering error. Node ID: ${id}\n${err.message}`);
                 mountPoint.innerHTML = SetTemplatedComponents(mountPoint.innerHTML);
+                addInfoPopUp(mountPoint)
             }
 
             resetDefaultStyleInputElement(prevSelectedId);

diff --git a/src/style.css b/src/style.css
@@ -150,7 +150,7 @@ svg#diagram {
 
 footer {
     text-align: center;
-    padding:1rem
+    padding: 1rem
 }
 
 a {
@@ -186,4 +186,49 @@ header {
     text-align: center;
     left: 50%;
     transform: translate(0%, 50%);
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: var(--code-bg);
+    margin: 15% auto;
+    padding: 20px;
+    border: 2px solid #000;
+    border-radius: 20px;
+    width: 80vh;
+}
+
+/* The Close Button */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    position: relative;
+    top: 0;
+    right: 0;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+p#info {
+    text-align: left;
 }
diff --git a/src/template.ts b/src/template.ts
@@ -4,6 +4,8 @@ import logoGithub from "./svg/github.svg";
 import logoLinkedin from "./svg/linkedin.svg";
 // @ts-ignore
 import logoEmail from "./svg/email.svg";
+// @ts-ignore
+import infoSign from "./svg/info-sign.svg";
 
 function MailToLinkStr(innerHTML: string = ""): string {
     return `<a href="mailto:admin@dkisler.com" target="_blank" rel="noopener">${innerHTML}</a>`;
@@ -30,9 +32,45 @@ function Footer(): string {
 }
 
 function Header(): string {
-    return `<header>Organisational Infrastructure's Diagrams</header>`
+    return `<header>Organisational Infrastructure's Diagrams<sup></header>`
 }
 
 export default function SetTemplatedComponents(baseHTML: string): string {
     return `${Header()}${baseHTML}${Footer()}`
 }
+
+export function addInfoPopUp(mountPoint: HTMLDivElement): void {
+    const infoIconWidth: number = 20;
+
+    const header = mountPoint.getElementsByTagName("header")[0]!;
+
+    header.innerHTML += `<sup><img id="info-icon" src="${infoSign}" alt="info" 
+width=${infoIconWidth} height=${infoIconWidth} ></sup>
+<div class="modal">
+    <div class="modal-content"><span class="close">&times;</span>
+        <p id="info">foobar<br>qux</p>
+    </div>
+</div>`
+
+    const modal = mountPoint.querySelector<HTMLElement>(".modal")!;
+
+    for (const el of mountPoint.getElementsByTagName("img")) {
+        if (el.id === "info-icon") {
+            el.addEventListener("click", () => {
+                modal.style.display = "block";
+            })
+        }
+    }
+
+    const closeBtn = mountPoint.querySelector<HTMLElement>(".close")!;
+    closeBtn.addEventListener("click", () => {
+        modal.style.display = "none";
+    })
+
+    modal.addEventListener("click", (e) => {
+        // @ts-ignore
+        if (e.target.className === "modal") {
+            modal.style.display = "none";
+        }
+    })
+}