When using the Microsoft Translator, Is there a way to remove the widget, but retain translation?

Question

I'm using the Microsoft Translation Widget, which I'd like to use to automatically translate a webpage without user interaction.

The problem is, I can't get rid of the widget that keeps popping up or hide it on document.ready because the CSS and JS get loaded from Microsoft's own script in the widget!

Does anyone know a way around this? I've looked everywhere and cannot find a solutuion for this.

Answer 1

Whoa, after some time playing around with that, I've finally achieved what you want.

It's kindda ugly, because of some needed workarounds, but it works, take a look at the fiddle.

The steps were:

1. Firstly, we must override the default addEventListener behavior:

   var addEvent = EventTarget.prototype.addEventListener;
   var events = [];
   
   EventTarget.prototype.addEventListener = function(type, listener) {
     addEvent.apply(this, [].slice.call(arguments));
     events.push({
       element: this,
       type: type,
       listener: listener
     });
   }
   

2. Then, we create a helper function removeEvents. It removes all the event listeners of an element.

   var removeEvents = function(el, type) {
     var elEvents = events.filter(function(ev) {
       return ev.element === el && (type ? ev.type === type : true);
     });
   
     for (var i = 0; i < elEvents.length; i++) {
       el.removeEventListener(elEvents[i].type, elEvents[i].listener);
     }
   }
   

3. When creating the script tag, in the way Microsoft says:

   var s = d.createElement('script');
   s.type = 'text/javascript';
   s.charset = 'UTF-8';
   s.src = ((location && location.href && location.href.indexOf('https') == 0) ? 'https://ssl.microsofttranslator.com' : 'http://www.microsofttranslator.com') + '/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from=';
   var p = d.getElementsByTagName('head')[0] || d.dElement;
   p.insertBefore(s, p.firstChild);
   

   We must add a load event listener to that script, and the code below is fully commented:

   s.addEventListener('load', function() {
     // when someone changes the translation, the plugin calls the method TranslateArray
     // then, we save the original method in a variable, and we override it
     var translate = Microsoft.Translator.TranslateArray;
   
     Microsoft.Translator.TranslateArray = function() {
       // we call the original method
       translate.apply(this, [].slice.call(arguments));
   
       // since the translation is not immediately available
       // and we don't have control when it will be
       // I've created a helper function to wait for it
       waitForTranslation(function() {
         // as soon as it is available
         // we get all the elements with an attribute lang 
         [].forEach.call(d.querySelectorAll('[lang]'), function(item, i) {
           // and we remove all the mouseover event listeners of them
           removeEvents(item, 'mouseover');
         });
       });
     }
   
     // this is the helper function which waits for the translation
     function waitForTranslation(cb) {
       // since we don't have control over the translation callback
       // the workaround was to see if the Translating label is visible
       // we keep calling the function, until it's hidden again
       // and then we call our callback
       var visible = d.getElementById('FloaterProgressBar').style.visibility;
       if (visible === 'visible') {
         setTimeout(function() {
           waitForTranslation(cb);
         }, 0);
         return;
       }
       cb();
     }
   });
   

---

Update 1

After re-reading your question, it seems you want to hide all the widgets at all.

So, you must add the following code as soon as the translation is got:

waitForTranslation(function() {
  document.getElementById('MicrosoftTranslatorWidget').style.display = 'none';
  document.getElementById('WidgetLauncher').style.display = 'none';
  document.getElementById('LauncherTranslatePhrase').style.display = 'none';
  document.getElementById('TranslateSpan').style.display = 'none';
  document.getElementById('LauncherLogo').style.display = 'none';
  document.getElementById('WidgetFloaterPanels').style.display = 'none';
  // rest of the code
});

I've created another fiddle for you, showing that new behavior.

Update 2

You can prevent the widget showing at all by adding the following CSS code:

#MicrosoftTranslatorWidget, #WidgetLauncher, #LauncherTranslatePhrase, #TranslateSpan, #LauncherLogo, #WidgetFloaterPanels {
    opacity: 0!important;
}

And you can even prevent the before-translated text being showed, by hiding the document.body by default, and then showing it when the page is fully translated:

(function(w, d) {
  document.body.style.display = 'none';
  /* (...) */

  s.addEventListener('load', function() {
    var translate = Microsoft.Translator.TranslateArray;

    Microsoft.Translator.TranslateArray = function() {
      translate.apply(this, [].slice.call(arguments));

      waitForTranslation(function() {
        /* (...) */
        document.body.style.display = 'block';
      });
    }
  });
});

Take a look at the final fiddle I've created.