diff --git a/source/js/common/template-js-handles/external-links.js b/source/js/common/template-js-handles/external-links.js new file mode 100644 index 00000000000..f59668cbbcc --- /dev/null +++ b/source/js/common/template-js-handles/external-links.js @@ -0,0 +1,28 @@ +import { set } from "react-ga"; + +/** + * ExternalLinks object for handling external links. + */ +const ExternalLinks = { + /** + * Initializes the ExternalLinks object. + */ + init() { + this.configure(); + }, + /** + * Set up the event handlers for the external links. + */ + configure() { + document + .querySelectorAll( + `a[href^="http"]:not([href*="${window.location.host}"]):not([href^="mailto:"])` + ) + .forEach((link) => { + link.target = "_blank"; + link.rel = "noopener noreferrer"; + }); + }, +}; + +export default ExternalLinks; diff --git a/source/js/main.js b/source/js/main.js index 32fc904e8e3..f1aced19484 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -43,6 +43,7 @@ import { initYouTubeRegretsRecommendationsPieChart } from "./foundation/pages/yo import { initYoutubeRegretsCarousel } from "./foundation/pages/youtube-regrets/carousel"; import { initYoutubeRegretsLocomotiveScroll } from "./foundation/pages/youtube-regrets/locomotive-scroll"; import SiteNav from "./common/template-js-handles/site-nav.js"; +import ExternalLinks from "./common/template-js-handles/external-links.js"; // Initializing component a11y browser console logging if (process.env.NODE_ENV === "development") { @@ -67,6 +68,7 @@ let main = { Dropdowns.init(); FoundationCarousels.init(); SiteNav.init(); + ExternalLinks.init(); this.fetchEnv((envData) => { env = envData;