Add icon and note for external links (#85)

* Add icon and note for external links * Add some exclusions and comments * Check class attr exists before using in match
nhsbsa-data-analytics · Sep 11, 2024 · 358ef07 · 358ef07
1 parent d17ee8d
commit 358ef07
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/R/nhs_footer.R b/R/nhs_footer.R
@@ -21,7 +21,8 @@ nhs_footer <- function() {
                 style = "text-decoration: underline;",
                 href = "https://www.nhsbsa.nhs.uk/accessibility-statement-website-estimated-prescribing-patterns-care-home-patients-aged-65-years-or",
                 target = "_blank",
-                "Accessibility statement"
+                "Accessibility statement",
+                icon("up-right-from-square")
               )
             ),
             tags$li(
@@ -41,7 +42,8 @@ nhs_footer <- function() {
                 style = "text-decoration: underline;",
                 href = "https://github.com/nhsbsa-data-analytics/care-home-prescribing-2020-2023",
                 target = "_blank",
-                "GitHub"
+                "GitHub",
+                icon("up-right-from-square")
               )
             )
           ),

diff --git a/inst/app/www/js/custom.js b/inst/app/www/js/custom.js
@@ -4,6 +4,28 @@ $(document).ready(function () {
     window.scrollTo(0, 0);
   });
 
+  // Add new tab icon for external links and set to open in new tab
+  var links = $("a[target!=_blank]");
+  links.each(function(){
+    // Current link
+    var a = $(this);
+    // If no href attribute, exit early (internal links will not have href)
+    if (!a.attr("href")) return;
+    if (
+      !a.attr('href').match(/^mailto\:/)                    // Email links
+         && (a[0].hostname != window.location.hostname)     // Internal links
+         && !a.attr('href').match(/^javascript\:/)          // Starting javascript
+         && !a.attr('href').match(/^$/)                     // Empty links
+         && !a.attr('href').match(/^#maincontent$/)         // Skip link
+         && !(a.attr('class') &&                            // NHSBSA header icon
+              a.attr('class').match(/^nhsuk-header__link$/))
+    ) {
+        // Append space then icon to link
+        a.after('&nbsp;<i class="fa-solid fa-arrow-up-right-from-square"></i>');
+        // Force open in new tab
+        a.attr('target', '_blank');
+    }
+  });
 
   // Remove aria attributes from anchor tags to prevent accessibility issues
   var observer = new MutationObserver(function(mutations) {
@@ -25,21 +47,6 @@ $(document).ready(function () {
     });
 
 
-  // Add target='_blank' to external links so they open a new tab
-  $(document.body).on('mouseover', 'a[target!=_blank]:not(.local)', function (e) {
-    var a = $(this);
-    if (
-      !a.attr('href').match(/^mailto\:/)
-         && (a[0].hostname != window.location.hostname)
-         && !a.attr('href').match(/^javascript\:/)
-         && !a.attr('href').match(/^$/)
-    ) {
-        a.attr('target', '_blank');
-    } else {
-        a.addClass('local');
-    }
-  });
-
   // Handle clicks on mod_06 datatable, to outline selected map region
   Shiny.addCustomMessageHandler("rowClicked",
     function(message) {

diff --git a/inst/markdown/15_updates.md b/inst/markdown/15_updates.md
@@ -5,3 +5,4 @@ In this section we will give details of any updates to the report since it's ini
   *	09-11-2023: Addition of total items and total cost in the BNF-level analyses.
   * 10-11-2023: Added rounding details in all chart captions.
   * 10-11-2023: Pre-compute data download for _BNF-level prescribing estimates by geography_ charts and table.
+  * 09-09-2024: Note that links to external URLs will open in a new tab. An icon indicating this will be at the end of such links.