Adding Comment Previews
March 10, 2005.    

I thought I'd added this a while ago, but apparently not. One of the problems with the commenting system for Blosxom, whether your using writeback or another system, is that visitors cannot preview their comments in a manner that is easy to look at and review. Last year I ran across this hint on the always interesting MacOS X Hints site. The submitter, tinker, created a simple Javascript hack that creates a popup window with the contents of comment fields.

This code has been added to this site and you can give it a try by leaving a comment on any article on this site. I've modified the code slightly to reflect the look and feel of the UNBLUG. Download the code at the MacOS X Hints link or locally here (you may have to view the source on the local file to get the actual codebase).

Click the button to

 

Sebbo wrote
2005/3/11 18:49:37

Damn--not gonna work for me. I use Markdown for my comment formatting, so I need to run it through the markdown engine before displaying previews. At this point, this is looking like the only widely-deployed blog feature that no-one has coded for Blosxom.

In other news, the cookie-based populating of the Name and URL fields worked for this comment. I'm envious--I wish I could figure out what's going wrong at my site.

Gnomon wrote
2005/3/14 00:53:14
A Better Alternative

Oi, I thought I'd point out that as interesting as a pop-up preview is, it's almost trivially easy to add a realtime preview feature as well. I hacked together a bit of JavaScript a while back to do so - I hope it comes through this comment form relatively unmolested:

<script type="text/javascript">
function dateString() {
	function padTo2(x) {
		return x.toString().replace(/^(.)$/,"0$1");
	};
	var x = new Date();
	return (x.getFullYear() + "-" +
		padTo2(x.getDate()) + "-" +
		padTo2(x.getDay()) + "T" +
		padTo2(x.getHours()) + ":" +
		padTo2(x.getMinutes()));
};

function reloadTextDiv() {
	function IDtoID(idFrom, idTo) {
		var x	= document.getElementById(idFrom).value;
		var y	= document.getElementById(idTo);
		y.innerHTML	= x;
	};

	var newTime	= "(" + dateString() + ")";
	var timeElement	= document.getElementById("comment-time-preview");

	IDtoID("comment-name","comment-name-preview");
	IDtoID("comment-title","comment-title-preview");
	IDtoID("comment-body","comment-body-preview")
	timeElement.innerHTML	= newTime;
};
</script>

Once that's in place, just set the <code>id</code> attribute of your comment textarea to <code>comment-body</code>, set the <code>onkeyup</code> event handler to fire <code>reloadTextDiv();</code> and create a blank writeback comment form with appropriately-<code>id</code>ed fields and you're set. By removing the date/time and multiple-field formatting silliness, you can reduce this to two lines of dead-simple JavaScript.

TMTOWTDI, of course. I just thought I'd let you know about some of your alternatives.

Sebbo, a partial JavaScript implementation of Markdown does exist and could probably be easily pressed into service with either the pop-up or the live preview options. I might take a crack at cleaning up the present code or I might not, depending on how my breakfast turns out tomorrow morning. We'll see. Either way, you've at least got something neat to play with for now.

Sebbo wrote
2005/3/16 10:55:22

Thanks, Gnomon. I tried it JS-Markdown out, but it's not really cross-platform, which means that it doesn't provide useful previewing for anyone with IE. My quest continues...