Sunday, March 24, 2013

Show 'translating' message while translating using Microsoft Translation Widget

Recently I had a task to translate exisiting website using Microsoft Translator Widget. One of the tasks was to display something that will indicate that translation is in progress.

If you take a look at Microsoft Translator help in msdn (here and pages inside same topic tree) you will see that there are lot of different methods to customize widget, to detect language or to translate something, but there is no way to detect when translation starts, end, get progress or anyting like that. But wait, translator toolbar has this ability so this might be possible in some way. But how can we find this out when this is not documented in any way? The only thing we have is that html piece MS asks us to insert into webpage to enable widget. If you take a closer look to it you may notice that it contains javascript that is injected into current document. And that javascript references page like this http://www.microsofttranslator.com/ajax/v2/widget.aspx?mode=notify&from=en&layout=ts. Why not to take a look at it? It is quite big piece of javascript and not a readable one, but if you spent some time in it (how I had to do) you will notice that there are interesting pieces like this one:

if(window.translatorOnBegin||document.translatorOnBegin)try{(window.translatorOnBegin||document.translatorOnBegin)()}catch(kc){}


So at some point of time widget checks whether window or document has method called translatorOnBegin? Wow, great, that was exactly I was looking for! This means that we just need to define a method with appropriate name and that's all! Really simple and actually I have no idea why MS didn't put this inside MSDN so far. Let's continue looking for document.translator... inside MS code and we will see that there are many other similar methods (translatorClose, translatorOnProgress and many others) but we are interested in the one called translatorOnComplete. As a result of this research we just need define two new methods:

    document.translatorOnBegin = function () {
        ...
    }

    document.translatorOnComplete = function () {
        ...
    }

and to actually display some animation between those methods I've used following post by Jonathan Sampson http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation/1964871#1964871 (Jonathan, if you read this post, then thank you for your great post in stackoverflow, it saved me lot's of time).

P.S. Since this is not documented staff this means that Microsoft can change this at any point in the future, so use it on your own risk.

No comments:

Post a Comment