function wgAddIconToExternalLinks() {
  $('a').each(function () {

    var debug = {};
    debug.href = $(this).attr('href');


    // check if /jobs/ is in the current url
    var jobsLink = new RegExp('/jobs/');
    var jobsInUrl = jobsLink.test(window.location.href);

    debug.jobsInUrl = jobsInUrl;

    // if jobs is in the url, check if the link target is without /jobs/
    if (jobsInUrl) {
      var jobsLinkInUrl = jobsLink.test($(this).attr('href'));
    }
    debug.jobsLinkInUrl = jobsLinkInUrl;

    // check if target is mail or phone
    var mailLink = new RegExp('mailto:');
    var mailInUrl = mailLink.test($(this).attr('href'));

    var phoneLink = new RegExp('tel:');
    var phoneInUrl = phoneLink.test($(this).attr('href'));

    //check if target is anchor
    var anchorLink = new RegExp('#');
    var anchorInUrl = anchorLink.test($(this).attr('href'));


    // define special link true if mail or phone
    var specialLink = mailInUrl || phoneInUrl || anchorInUrl;
    debug.specialLink = specialLink;

    // if we are in the /jobs/ section and the link target is without /jobs/ or we are not in the /jobs/ section and link target is external
    if ( !specialLink && !jobsInUrl && jobsLinkInUrl || !specialLink && jobsInUrl && !jobsLinkInUrl) {


      if (!$(this).hasClass('no-icon')) {
        // detect color of this link
        var color = $(this).css('color');
        
        $(this).attr('target', '_blank');
        $(this).addClass('external');
        // add svg to link and add color as fill style
        $(this).append('<svg class="link-extern-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.5 275.5"><g><polygon fill="' + color + '" points="0 29.5 0 275.5 245 275.5 245 140 216.5 140 216.5 247 29.5 247 29.5 58.5 139 58.5 139 28.5 0 29.5"/><polygon fill="' + color + '" points="142.5 153.5 247.5 50.5 247.5 97 276.5 97 276.5 0 178.5 0 178.5 29.5 224.5 29.5 122 133.5 142.5 153.5"/></g></svg>');
      }
    }

    console.log(debug);

  });
} 
Last Updated:
Contributors: Finn Thorwarth