diff --git a/taccsite_cms/static/site_cms/js/modules/setTargetForExternalLinks.js b/taccsite_cms/static/site_cms/js/modules/setTargetForExternalLinks.js index c056c6e51..b35b86ce3 100644 --- a/taccsite_cms/static/site_cms/js/modules/setTargetForExternalLinks.js +++ b/taccsite_cms/static/site_cms/js/modules/setTargetForExternalLinks.js @@ -1,20 +1,30 @@ /** - * Whether to log debug info to console + * The standard links that should open in a new tab * @const {string} */ -const SHOULD_DEBUG = window.DEBUG; +export const DEFAULT_LINKS = document.querySelectorAll('body > :is(header, main, footer) a'); /** * Make links with absolute URLs open in new tab, and: * - add accessible markup * - fix absolute URLs that should be relative paths + * @param {NodeList} links - Custom links to open in new tab + * @param {object} opts + * @param {boolean} [opts.shouldDebug=false] - Whether to log debug statements + * @param {boolean} [opts.shouldFilter=true] - Whether to filter which links to adjust */ -export default function findLinksAndSetTargets() { - const links = document.querySelectorAll('body > :is(header, main, footer) a'); +export default function findLinksAndSetTargets( links = DEFAULT_LINKS, opts = { + shouldDebug: false, + shouldFilter: true, +}) { const baseDocHost = document.location.host; - const baseDocHostWithSubdomain= `www.${baseDocHost}`; + const baseDocHostWithSubdomain= `www.${ baseDocHost }`; - [ ...links ].forEach( function setTarget(link) { + if ( opts.shouldDebug ) { + console.log({ links, opts }); + } + + links.forEach( function setTarget( link ) { const linkHref = link.getAttribute('href'); if ( ! linkHref ) { @@ -23,18 +33,19 @@ export default function findLinksAndSetTargets() { const isMailto = ( linkHref.indexOf('mailto:') === 0 ); const isAbsolute = ( linkHref.indexOf('http') === 0 ); - const isSameHost = link.host === baseDocHost || link.host === baseDocHostWithSubdomain + const isSameHost = ( link.host === baseDocHost || link.host === baseDocHostWithSubdomain ); + const shouldOpenInNewTab = ( ! isSameHost || isMailto ); - if (SHOULD_DEBUG) { - console.debug({ isMailto, isAbsolute, isSameHost, linkHref }); + if (opts.shouldDebug) { + console.debug({ isMailto, isAbsolute, isSameHost, linkHref, shouldOpenInNewTab }); } - // Links to pages at different host should open in new tab - if ( ! isSameHost || isMailto ) { + // So either all or some links open in new tab + if ( ! opts.shouldFilter || ( opts.shouldFilter && shouldOpenInNewTab )) { if ( link.target !== '_blank') { link.target = '_blank'; - if (SHOULD_DEBUG) { - console.debug(`Link ${linkHref} now opens in new tab`); + if ( opts.shouldDebug ) { + console.debug(`Link "${ linkHref }" now opens in new tab`); } } if ( link.target === '_blank') { @@ -42,7 +53,7 @@ export default function findLinksAndSetTargets() { } } - // Links w/ absolute URL to page on same domain should use relative path + // So links w/ absolute URL to page on same domain use relative path if ( isAbsolute && isSameHost ) { link.href = link.pathname; }