Mr Speaker

A couple of years ago I had a client who insisted that they should be able to copy some cells from Excel and paste the data into their web-based inventory system. I ended up creating a faux-grid of textboxes, with a "paste-box" where they could paste the data, which would be parsed and entered into the grid. It really felt like a horrible hack - the pasted data wasn't always in the "correct" format, and my parsing code was pretty dodgy.

But now that microformats are poised to take over the web, it's not looking like such a stupid idea after all! Ray Ozzie outlined his "Live Clipboard" idea a few months ago and created a pretty cool system that allows you to copy and paste microformats between web pages and applications.

I thought I'd whack the code provided up on this blog, and convert my hCard to be copy-able for the hordes of people who want to add me to their address books.

It worked like a treat - but there were a couple things that bothered me. The first thing was the size of the script - about 50k (un-squished) of javascript - and this blog is drenched in a ludicrous amount of script as it it. The second thing was that I only needed to use the "copy" stuff, and all the "paste" code (which is most of it) was sitting there twiddling it's thumbs.

As I only needed to offer a simple "copy" function of static data for one control, I decided to write it from the ground up, rather than trying to pull out all the "paste" bits.

To start I added the control - a text input, wrapped in a div to the sidebar of the blog:

<div id="webClipControl"><input type="text" /></div>

Then I styled it to get it to look like Ray's buttons:

#webClipControl{ 
	background: url( liveclipboard.gif ) no-repeat; 
}
#webClipControl input {
	overflow:hidden; 
	cursor:pointer; 
	width:12px;
	height:12px;
	filter:alpha(opacity=0); 
	KHTMLOpacity:0; 
	MozOpacity:0; 
	opacity:0;
}

Next I added some onload code to setup the control. An onclick was added which calls a function that puts the LiveClipboard formatted hCard into the input box. As an onblur event is added to switch the button image, so it looks cool:

function setupLiveClipboard()
{
	if ( ! document.getElementById( 'webClipControl' ) ) return;

	var webClip = document.getElementById( 'webClipControl' ).firstChild;
		
	webClip.onclick = function(){ 
		populateLiveClipboard( this ) 
	};
	webClip.onblur = function(){ 
		this.parentNode.style.backgroundImage = 'url(liveclipboard.gif)'
	}; 
}

Finally, I added the code to return the data. The proper version creates this code on the fly, depending on the type of microformat the user has selected and so on. But my data is static. So I just copy the full hCard data, wrapped in the LiveClipboard wrapper into the control's textbox.

function populateLiveClipboard( clipInput )
{
	clipInput.value = '{full hCard and wrapper string}';
	clipInput.select();
	clipInput.parentNode.style.backgroundImage = 'url(liveclipboard_b.gif)';
}

The last line just switches the button image to 'depressed' state.

That's it. Now you can click on the lil' button next to my contact details, hit control-c, and paste my hCard into all your Live Clipboard aware apps. Which, you know, are few at the moment. Paste it into notepad to see the format of the Live Clipboard proposed structure.

Also note, I was being pretty lazy with this implementation: I should have used a class on the control, rather than an ID - but until I have two bits of data to copy, I'm not going to worry about doing the getElementsByTagName loopyness, rather than a simple getElementById.

Annnnd, I really should have returned the Live Clipboard schema, and got my existing hCard details from the DOM node - rather than returning the static string: now if I change my contact details, I have to do it in two places. But come on, it's midnight on a Saturday night - I shouldn't be doing any of this anyway.

It's going to be good to see where microformats lead things. We are certainly going to get applications more interesting than simply copy-pasting contact details and calander events. But until then, get cuttin' and pastin' web2.01 style.