templates/portfolio/card.html

@@ -1,5 +1,5 @@
 {{#metadata}} {{#info}} {{#portfolio}} {{#link}}
-<li role="button" onclick="window.open('{{link}}', '_blank', 'noreferrer');">
+<li role="button" onmousedown="openLink('{{link}}');">
   {{>portfolio/project.html}}
 </li>
 {{/link}} {{^link}}

templates/portfolio/index.html

@@ -40,11 +40,42 @@
         document.querySelectorAll("main a").forEach(function (link) {
           link.setAttribute("target", "_blank");
           link.setAttribute("rel", "noreferrer");
-          link.addEventListener("click", function (event) {
+          link.addEventListener("mousedown", function (event) {
             event.stopPropagation();
           });
         })
       );
+
+      /* Open cards link */
+      const openLink = (url) => {
+        const backgroundtab = () =>
+          Object.assign(document.createElement("a"), {
+            href: url,
+            target: "_blank",
+            rel: "noreferrer",
+          }).dispatchEvent(
+            new MouseEvent("click", { ctrlKey: true, metaKey: true })
+          );
+
+        switch (event.button) {
+          case 0:
+            /* Left click */
+            if (event.ctrlKey || event.metaKey) {
+              backgroundtab();
+            } else {
+              window.open(url, "_blank", "noreferrer");
+            }
+            break;
+          case 1:
+            /* Middle click */
+            event.preventDefault();
+            backgroundtab();
+
+            break;
+          default:
+            break;
+        }
+      };
     </script>
   </body>
 </html>