Dispatch a click event on an off-DOM <a> element when clicking on .table-seamless-links rows (e-valuation#2349)

This brings the interaction closer to clicking on an actual `a` tag and enables Ctrl-Click again. Having an `a` in there is still not feasible, because we cannot have any elements between `tr` and `td`.

Author: niklasmohrin

evap/evaluation/templates/base.html

@@ -181,8 +181,13 @@
 
             // activate clickable hover tables
             document.querySelectorAll(".table-seamless-links [data-url]").forEach(row => {
-                row.addEventListener("click", () => {
-                    window.location.assign(row.dataset.url);
+                row.addEventListener("click", event => {
+                    // We navigate via the <a> tag to enable browser behavior for Ctrl-Click. We cannot insert an actual
+                    // <a> tag, because there cannot be any non-table tags between for example <tbody> and <tr>.
+                    const anchor = document.createElement("a");
+                    anchor.href = row.dataset.url;
+                    // As `event` is bound to `row`, we need to clone it.
+                    anchor.dispatchEvent(new event.constructor(event.type, event));
                 });
             });
 

evap/static/scss/components/_tables.scss

@@ -35,8 +35,12 @@ $table-colors: (
     padding-bottom: 0.4rem;
 }
 
-.table-seamless-links td {
-    overflow: hidden;
+.table-seamless-links {
+  // Disable outline on cell after Ctrl-Click.
+  -moz-user-select: none;
+  td {
+      overflow: hidden;
+  }
 }
 
 // Hoverable rows