Jacuba Spell was conceived as a drop-in component for spell-checking textareas. It was designed to be as straightforward as possible to add to existing websites.

As you will be able to see if you choose to leave a comment, we've added Jacuba to the blogging software we are are using - blojsom. It was very simple, but did require some small changes to keep all of the existing blojsom functionality.

The default asual theme provides a message preview which is updated as you type. Because with Jacuba the user is no longer typing directly into the textarea, the key-events which asual awaits before updating don't occur. The result is that the message preview never updates. The relevant javascript code is shown below:

function reloadPreviewDiv() {
	var previewString = document.getElementById("commentText").value;
	if (previewString.length > 0){
		previewString = previewString.replace(new RegExp("(.*)\n\n([^#\*\n\n].*)","g"), "<p>$1</p><p>$2</p>");
		previewString = previewString.replace(new RegExp("(.*)\n([^#\*\n].*)","g"), "$1<br />$2");
	}
	document.getElementById("commentPreview").innerHTML = previewString;
}

To solve this problem we changed the asual Javascript code to poll for changes in the textarea value instead of waiting for key-events. And to make the code more efficient we check to see if any change has actually occured before updating the preview by comparing the current textarea value against the new one. The changed code is shown below:

var oldPreviewString = "";
setInterval("reloadPreviewDiv()", 500);

function reloadPreviewDiv() {
	var commentText = document.getElementById("commentText");
	if (!commentText) return;
	var previewString = commentText.value;
	if (previewString == oldPreviewString) return;
	if (previewString.length > 0){
		previewString = previewString.replace(new RegExp("(.*)\n\n([^#\*\n\n].*)","g"), "<p>$1</p><p>$2</p>");
		previewString = previewString.replace(new RegExp("(.*)\n([^#\*\n].*)","g"), "$1<br />$2");
	}
	document.getElementById("commentPreview").innerHTML = previewString;
	oldPreviewString = previewString;
}

The code change is only small (and ideally wouldn't be needed at all) but it demonstrates that the Jacuba Spell component can even be integrated into textareas which have associated Javascript functionality.

Technorati Tags: jacuba blojsom javascript spelling