functional modal

bligneri · Nov 11, 2024 · 252b450 · 252b450
1 parent 6c3ac31
commit 252b450
Showing 1 changed file with 71 additions and 16 deletions.
diff --git a/pkg/assets/template/force_graph.tmpl b/pkg/assets/template/force_graph.tmpl
@@ -1,13 +1,53 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <style>
+        /* Modal styles */
+        .modal {
+            display: none; /* Hidden by default */
+            position: fixed;
+            z-index: 1; /* On top */
+            left: 0;
+            top: 0;
+            width: 100%; /* Full width */
+            height: 100%; /* Full height */
+            overflow: auto; /* Enable scroll if needed */
+            background-color: rgba(0,0,0,0.5); /* Black with opacity */
+        }
+
+        .modal-content {
+            background-color: #fefefe;
+            margin: 15% auto; /* 15% from the top and centered */
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%; /* Could be more or less, depending on screen size */
+            max-width: 500px; /* Maximum width for the modal */
+        }
+
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
+
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
+    </style>
 </head>
 <body>
-    <div id="node-info" style="display: none;">
-        <h2 id="node-title"></h2>
-        <p id="node-path"></p>
-        <a id="open-file" href="#" target="_blank">Open File</a>
+<div id="myModal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2 id="modal-title"></h2>
+        <p id="modal-path"></p>
+        <a id="modal-open-file" href="#" target="_blank">Open File</a>
     </div>
+</div>
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
 
@@ -172,18 +212,33 @@ function showNodeInfo(event, d) {
         return;
     }
 
-    var infoBox = document.getElementById('node-info');
-    var titleElem = document.getElementById('node-title');
-    var pathElem = document.getElementById('node-path');
-    var openFileLink = document.getElementById('open-file');
-
-    // Provide a fallback value if `title` is undefined
-    titleElem.textContent = d.title || d.id || "Unknown Title";
-    var fullPath = d.absPath || "Unknown Path"; // Provide a fallback if `absPath` is missing
-    pathElem.textContent = fullPath;
-    openFileLink.href = 'file://' + fullPath;
-
-    infoBox.style.display = 'block';
+    // Get modal elements
+    var modal = document.getElementById('myModal');
+    var modalTitle = document.getElementById('modal-title');
+    var modalPath = document.getElementById('modal-path');
+    var modalOpenFileLink = document.getElementById('modal-open-file');
+    var closeModalBtn = modal.querySelector('.close');
+
+    // Populate modal content
+    modalTitle.textContent = d.title || d.id || "Unknown Title";
+    var fullPath = d.absPath || "Unknown Path";
+    modalPath.textContent = fullPath;
+    modalOpenFileLink.href = 'file://' + fullPath;
+
+    // Display the modal
+    modal.style.display = 'block';
+
+    // Close modal on clicking the "x"
+    closeModalBtn.onclick = function() {
+        modal.style.display = 'none';
+    };
+
+    // Close modal when clicking outside the modal content
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    };
 }
 
 </script>