dwClickable: Entire Block Clickable Using MooTools 1.2

I recently received an email from a reader who was really impressed with Block Clickable, a jQuery script that took the link within a list item and made the entire list item clickable. I thought it was a neat script so I took a few minutes and ported it to MooTools.

The XHTML

<ul class="block-list">
	<li>Clicking this block will take you to <a href="https://davidwalsh.name">DavidWalsh.name</a></li>
	<li>Clicking this block will take you to <a href="http://scriptandstyle.com">Script&Style.com</a>.</li>
	<li>Clicking this block will take you to <a href="http://bandwebsitetemplate.com">BandWebsiteTemplate.com</a></li>
	<li>Clicking this block will take you to <a href="http://mootools.net">MooTools.net</a></li>
</ul>

You see an unordered list with list items containing a link.

The CSS

.block-list	{ padding:0; margin:0; list-style-type:none; width:500px; }
.block-list li	{ padding:20px; background:#bfd0ed; border-top:3px solid #033289; }
.block-list li:hover	{ background:#e3ecfa; cursor:pointer; }

Here you can define styles for the list item. The :hover state is important -- you need to treat the list item as though it's a link when the mouse hovers over the link.

The MooTools 1.2 JavaScript Class

var dwClickables = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		elements: $$('li'),
		selectClass: '',
		anchorToSpan: false
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//set clickable
		this.doClickables();
	},
	
	//a method that does whatever you want
	doClickables: function() {
		
		//for all of the elements
		this.options.elements.each(function(el) {
			
			//get the href
			var anchor = el.getElements('a' + (this.options.selectClass ? '.' + this.options.selectClass : ''))[0];
			
			//if we found one
			if($defined(anchor)) {
				
				//add a click event to the item so it goes there when clicked. 
				this.setClick(el,anchor.get('href'));
				
				//modify anchor to span if necesssary
				if(this.options.anchorToSpan) {
					var span = new Element('span',{
						text: anchor.get('text')
					}).replaces(anchor);
				}
			}
			
		},this);
	},
	
	//ads the click event
	setClick: function(element,href) {
		
		element.addEvent('click', function() {
			window.location = href;
		});
	}
	
});

The class accepts three options:

• elements: A list of elements to make clickable
• selectClass: If you have more than one link in the item, you can designate which link to choose my the selectClass
• anchorToSpan: Since the link borrows the anchor's href attribute, you don't necessarily need the link. This settings directs the class to change the anchor to a SPAN tag if anchorToSpan is set to true.

The MooTools 1.2 Usage

window.addEvent('domready', function() {
	
	var clix = new dwClickables({
		elements: $$('.block-list li'),
		anchorToSpan: true
	});
	
});

Just as you would with any other MooTools class, you instantiate the class and pass in the desired options.

I really enjoyed creating this class. It plays nice with search engines and implements the list item / click functionality flawlessly.

Any suggestions?