do the icon and external link processing before creating hover box wi…

…th tippy That way, links inside the hover box (e.g. citation links for DOI) would have the external icon
quarto-dev · Nov 3, 2023 · b239e91 · b239e91
1 parent e541ac4
commit b239e91
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 41 deletions.
diff --git a/news/changelog-1.4.md b/news/changelog-1.4.md
@@ -38,6 +38,7 @@
 - ([#6833](https://github.com/quarto-dev/quarto-cli/issues/6833)): Handle partially-specified aspect ratio, width, and height attributes in `video` shortcode.
 - ([#7137](https://github.com/quarto-dev/quarto-cli/discussions/7137)): Automatically set `rel="noopener"` when setting a target on external links
 - ([#7187](https://github.com/quarto-dev/quarto-cli/issues/7187)): Add `html-table-processing: none` to document- and project-level metadata to disable HTML table processing. Add `{html-table-processing="none"}` to a fenced div to disable HTML table processing for the elements in that div. Add `html-table-processing: none` on knitr or jupyter cell to disable HTML table processing for the cell output content.
+- ([#7441](https://github.com/quarto-dev/quarto-cli/issues/7441)): Links in hover box (e.g. links to DOI when hover for citations is opt-in) are now correctly process for external and new window processing (when `link-external-icon: true` and `link-external-newwindow: true`).
 
 ## Appendix
 

diff --git a/src/resources/formats/html/templates/quarto-html.ejs b/src/resources/formats/html/templates/quarto-html.ejs
@@ -337,6 +337,47 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
 
   <% } %>
 
+  <% if (linkExternalIcon || linkExternalNewwindow) { %>
+    var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
+    var mailtoRegex = new RegExp(/^mailto:/);
+    <% if (linkExternalFilter && linkExternalFilter.match(/\\\\/)) { %>
+      <%- `var filterRegex = new RegExp(/${linkExternalFilter}/);` %>
+    <% } else if (linkExternalFilter) { %>
+      <%= `var filterRegex = new RegExp("${linkExternalFilter}");` %>
+    <% } else { %>
+      var filterRegex = new RegExp('/' + window.location.host + '/');
+    <% } %>
+    var isInternal = (href) => {
+        return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
+    }
+    // Inspect non-navigation links and adorn them if external
+ 	var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool)');
+    for (var i=0; i<links.length; i++) {
+      const link = links[i];
+      if (!isInternal(link.href)) {
+        <% if (linkExternalNewwindow) { %> 
+          // target, if specified
+          link.setAttribute("target", "_blank");
+          if (link.getAttribute("rel") === null) {
+            link.setAttribute("rel", "noopener");
+          }
+        <% } %>
+
+        
+        <% if (linkExternalIcon && typeof(linkExternalIcon) === 'string') { %> 
+          // external icon, if provided
+          var extIcon = window.document.createElement('i');
+          extIcon.classList.add('bi-<%=linkExternalIcon%>');
+          extIcon.classList.add('quarto-ext-icon');
+          link.parentNode.insertBefore(extIcon, link.nextSibling)
+        <% } else if (linkExternalIcon) { %>
+          // default icon
+          link.classList.add("external");
+        <% } %>
+      }
+    }
+  <% } %>
+
   <% if (tippy) { %>
   function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
     const config = {
@@ -784,47 +825,6 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
 
   <% } %>
 
-
-  <% if (linkExternalIcon || linkExternalNewwindow) { %>
-    var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
-    var mailtoRegex = new RegExp(/^mailto:/);
-    <% if (linkExternalFilter && linkExternalFilter.match(/\\\\/)) { %>
-      <%- `var filterRegex = new RegExp(/${linkExternalFilter}/);` %>
-    <% } else if (linkExternalFilter) { %>
-      <%= `var filterRegex = new RegExp("${linkExternalFilter}");` %>
-    <% } else { %>
-      var filterRegex = new RegExp('/' + window.location.host + '/');
-    <% } %>
-    var isInternal = (href) => {
-        return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
-    }
-    // Inspect non-navigation links and adorn them if external
- 	var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool)');
-    for (var i=0; i<links.length; i++) {
-      const link = links[i];
-      if (!isInternal(link.href)) {
-        <% if (linkExternalNewwindow) { %> 
-          // target, if specified
-          link.setAttribute("target", "_blank");
-          if (link.getAttribute("rel") === null) {
-            link.setAttribute("rel", "noopener");
-          }
-        <% } %>
-
-        
-        <% if (linkExternalIcon && typeof(linkExternalIcon) === 'string') { %> 
-          // external icon, if provided
-          var extIcon = window.document.createElement('i');
-          extIcon.classList.add('bi-<%=linkExternalIcon%>');
-          extIcon.classList.add('quarto-ext-icon');
-          link.parentNode.insertBefore(extIcon, link.nextSibling)
-        <% } else if (linkExternalIcon) { %>
-          // default icon
-          link.classList.add("external");
-        <% } %>
-      }
-    }
-  <% } %>
 });
 
 </script>