Sunday, 26 April 2009 21:16

You may have noticed that some of the links on this site are followed by the domain in brackets. This is something I really liked about links posted on Slashdot, so I figured I'd go ahead and do my own little rendition of this functionality.

Now, admittedly this script is quite specialized to this site, but I'll go through it & show parts that can be changed to fit any other site. It's based on Mootools 1.11, which ships with Joomla! 1.5.

HTML tag

 
<script type="text/javascript" src="/path/to/mootools-1.11.js"></script>
<script type="text/javascript" src="/path/to/linkifier.js"></script>
<script type="text/javascript">
window.addEvent( 'load', function()
{
  linkifier( 'div#mid-column' );
});
</script>
 

Above, we load Mootools & my linkfier script, then add a function call to window's "load" event, passing a CSS selector of the element that has links to be "linkified."

linkifier.js

 
/*
linkifier
add source to all links in content
*/
function linkifier( sel )
{
  var root = $$(sel);
  var domain = /jeffchannell.com/;
  var links = $$(sel+' a');
  var pres = $$(sel+' pre');
  links.each( function( el )
  {
    // get url
    var url = el.href.replace( /^https?\:\/\/(.*?)\/.*$/, '$1' ).replace( /^www\./, '' );
    var inpre = false;
    pres.each( function( pre )
    {
      if( pre.hasChild( el ) ) { inpre = true; }
    });
    if( !domain.test( url ) && !inpre )
    {
      el.appendText( ' [' + url + ']' );
    }
  });
}
 

This is a pretty short little function that loops through the selector argument, gets the domain through a regular expression, and appends the tag if the link if it meets certain criteria.

domain regular expression

 
...
var url = el.href.replace( /^https?\:\/\/(.*?)\/.*$/, '$1' ).replace( /^www\./, '' );
...
 

skip links inside <pre> tags

 
...
var pres = $$(sel+' pre');
...
  var inpre = false;
  pres.each( function( pre )
  {
    if( pre.hasChild( el ) ) { inpre = true; }
  });
...
 

Early in the script, before it gets to the loop, I go ahead & grab all the <pre> tags inside the root element. Later, I check each link to make sure it doesn't have a <pre> as a parent.

filter

 
...
if( !domain.test( url ) && !inpre )
...
 

This if statement does two things: it checks to see if the link does not reference the same domain it is running on (in this case, jeffchannell.com), and it ignores links contained within <pre> tags (because geshi likes to put reference links in the code tags).

Last Updated on Tuesday, 28 April 2009 00:13
 

Add your comment

Your name:
Comment:
  The word for verification. Lowercase letters only with no spaces.
Word verification:

The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Jeff Channell is not affiliated with or endorsed by Open Source Matters or the Joomla!® Project.

Santorum
Joomla Extensions