add link tooltips

pomdtr · Dec 9, 2023 · 4f1097a · 4f1097a
1 parent 5b4d717
commit 4f1097a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 1 deletion.
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -28,7 +28,33 @@ div#terminal {
 }
 
 .xterm {
+    box-sizing: border-box;
     padding: 10px;
     height: 100%;
     width: 100%;
 }
+
+.tooltip {
+    box-sizing: border-box;
+    position: fixed;
+    font-size: 10px;
+    font-size: medium;
+    border-radius: 3px;
+    padding: 3px;
+    color: hsl(0, 0%, 0%);
+    background-color: #fff;
+    border: 1px solid #C8C8C8;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+        background-color: #2E333A;
+        color: #fff;
+        border: 1px solid #454545;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+}
+
+.tooltip a {
+    color: #6599EE;
+}
diff --git a/frontend/src/terminal.ts b/frontend/src/terminal.ts
@@ -52,7 +52,62 @@ async function main() {
 
     const webglAddon = new WebglAddon();
     const fitAddon = new FitAddon();
-    const webLinksAddon = new WebLinksAddon();
+    const webLinksAddon = new WebLinksAddon((event, uri) => {
+        // check if cmd key is pressed
+        if (event.metaKey || event.ctrlKey) {
+            window.open(uri, "_blank");
+        }
+    }, {
+        hover: (_, text, location) => {
+            const terminalElement = document.getElementById("terminal")!;
+            const terminalRowHeight = terminalElement.getBoundingClientRect().height / terminal.rows;
+            const terminalColumnWidth = terminalElement.getBoundingClientRect().width / terminal.cols;
+
+            const locationTop = (location.start.y - 1) * terminalRowHeight + 10;
+            const locationLeft = (location.start.x - 1) * terminalColumnWidth + 10;
+
+            if (document.getElementById('tooltip')) {
+                document.getElementById('tooltip')!.remove();
+            }
+
+            const tooltip = document.createElement('div');
+            tooltip.id = 'tooltip';
+            tooltip.className = 'tooltip';
+            tooltip.style.position = 'fixed';
+            tooltip.innerHTML = `<a href="${text}" target="_blank">Follow Link</a>`;
+            tooltip.style.visibility = 'hidden';
+            document.body.appendChild(tooltip);
+
+            const tooltipHeight = tooltip.getBoundingClientRect().height;
+            if (locationTop - tooltipHeight > 0) {
+                tooltip.style.top = `${locationTop - tooltipHeight}px`;
+            } else {
+                tooltip.style.top = `${locationTop + terminalRowHeight}px`;
+            }
+            tooltip.style.left = `${locationLeft}px`;
+            tooltip.style.zIndex = '1000';
+
+            // Add a delay of 1 second before showing the tooltip
+            setTimeout(() => {
+                // check if the tooltip still exists
+                const tooltip = document.getElementById('tooltip');
+                if (tooltip) {
+                    tooltip.style.visibility = 'visible';
+                }
+            }, 1500);
+        },
+        leave: () => {
+            const tooltip = document.getElementById('tooltip');
+            if (tooltip && !tooltip.matches(':hover')) {
+                tooltip.remove();
+                return
+            }
+
+            tooltip!.addEventListener('mouseleave', () => {
+                tooltip!.remove();
+            });
+        },
+    });
     terminal.loadAddon(fitAddon);
     terminal.loadAddon(webglAddon);
     terminal.loadAddon(webLinksAddon);