DOM Compliant JavaScript for TypeKey Authentication

The default Site JavaScript template for MovableType relies on document.write to add bits of text and links to log into / out of TypeKey. I was annoyed that this didn't work with my XHTML pages and set out today to write a version of writeTypeKeyGreeting which works with the DOM.

In theory the following code should work out-of-the-box. Copy it into your mt-site.js template.

You will need to make two changes to your XHTML pages:

1. Add an id to an element which will be used to append the TypeKey login/out information (I used the div with the class comments-open-content, adding the id iefbr14 (sorry, a sad old joke for me).

2. Where you currently have:

writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);

Change it to read:

DOMwriteTypeKeyGreeting(commenter_name, <$MTEntryID$>, the-id-of-the-element-to-append-to);

And...it should work. I initially got tripped up by some strange encoding issues which I think are a problem on the TypeKey end (there is a portion of the MTRemoteSignInLink in which the & characters need to be URL-encoded, if you use the entity &amp; then the sign-in fails because the static=1&entry_id=... bit gets dropped by TypeKey).

Here is the code...feel free to ask questions or add corrections, I am by no means a skilled DOM/JavaScript programmer:

function DOMwriteTypeKeyGreeting(commenter_name, entry_id, DOMid) { // by ed costello, artific industries, based on SixApart's // writeTypeKeyGreeting var oInsertionPoint = document.getElementById(DOMid); <MTIfRegistrationAllowed> if (commenter_name) { var tMessage='Thanks for signing in, ' + commenter_name + '. Now you can comment. '; var oMessage = document.createElement('p'); var oSignoutLink = document.createElement('a'); var MTRemoteSignOutLink = '<$MTRemoteSignOutLink static="1"$>&amp;entry_id=' + entry_id; oSignoutLink.setAttribute('href',MTRemoteSignOutLink); oSignoutLink.setAttribute('title','Sign out of typekey'); oSignoutLink.appendChild(document.createTextNode('sign out of Typekey')); oMessage.appendChild(document.createTextNode(tMessage)); oMessage.appendChild(oSignoutLink); oMessage.appendChild(document.createTextNode(')')); oInsertionPoint.appendChild(oMessage); } else { var oSigninLink = document.createElement('a'); var oMessage = document.createElement('p'); var MTRemoteSignInLink = '<$MTRemoteSignInLink static="1"$>%26entry_id='+entry_id; oSigninLink.setAttribute('href',MTRemoteSignInLink); oSigninLink.setAttribute('title','Sign in to TypeKey'); oSigninLink.appendChild(document.createTextNode('Sign in to TypeKey')); <MTIfRegistrationRequired> var tMessage = document.createTextNode('You are not signed in. You need to be registered to comment on this site. '); oMessage.appendChild(tMessage); oMessage.appendChild(oSigninLink); oMessage.appendChild(document.createTextNode(')')); oInsertionPoint.appendChild(oMessage); <MTElse> var tMessage = document.createTextNode('If you have a TypeKey identity, you can '); oMessage.appendChild(tMessage); oMessage.appendChild(oSigninLink); oMessage.appendChild(document.createTextNode(' to use it here.')); oInsertionPoint.appendChild(oMessage); </MTElse> </MTIfRegistrationRequired> delete oMessage,tMessage,oSigninLink,oSignoutLink,oInsertionPoint; } </MTIfRegistrationAllowed> }

Posted in MovableType