jeffchannell.com

linkifier

Posted in JavaScript
2009-04-27 02:16:23 +0000 UTC

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).