Skip to content

Instantly share code, notes, and snippets.

@Deepak-K-Anand

Deepak-K-Anand/MS Translate Widget.html Secret

Last active December 15, 2015 15:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Deepak-K-Anand/e336aed47a95a38b3f64 to your computer and use it in GitHub Desktop.
Save Deepak-K-Anand/e336aed47a95a38b3f64 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MS Translate Widget.html
<apex:page id="msTranslateWidgetPage" showHeader="false" showChat="false" standardStylesheets="false">
<head>
<!--For sforce.connection.remoteFunction(..)-->
<apex:includeScript value="/soap/ajax/27.0/connection.js"/>
<!--Required for Miscellaneous DOM Manipulations, BootStrap, JSON Parsing and Other JS Functions.-->
<apex:includeScript value="https://ajax.cdnjs.com/ajax/libs/jquery/1.9.1/jquery.js"/>
<!--BootStrap-->
<apex:includeScript value="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"/>
<apex:stylesheet value="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
<!--JS Function for Creating the UL Tag with the Languages.-->
<apex:includeScript value="{!$Resource.Languages}"/>
<script type="text/javascript">
var fromLang, toLang, textToTranslate, accessToken;
sforce.connection.sessionId = '{!GETSESSIONID()}';
var clientID = '<YOUR-CLIENT-ID>';
var clientSecret = '<YOUR-CLIENT-SECRET>';
var oAuthEndPt = 'https://datamarket.accesscontrol.windows.net/v2/OAuth2-13';
var transEndPt = 'https://api.microsofttranslator.com/v2/Http.svc/translate';
/*Fetch the Access Token from the Microsoft OAuth EndPoint.*/
function getAccessToken()
{
var data = 'grant_type=client_credentials&client_id=' + encodeURIComponent(clientID) + '&client_secret=' + encodeURIComponent(clientSecret) + '&scope=http://api.microsofttranslator.com';
sforce.connection.remoteFunction({
url : oAuthEndPt,
method : 'POST',
requestData : data,
requestHeaders: {
"Content-Type":"application/x-www-form-urlencoded"
},
onSuccess :
function(response){
accessToken = $.parseJSON(response).access_token;
getTranslatedText();
},
onFailure :
function(response){
alert('An Unexpected Error has Occured.\r\n' + response);
}
});
}
/*Get the Translated Text.*/
function getTranslatedText()
{
sforce.connection.remoteFunction({
url : transEndPt + '?text=' + encodeURIComponent(textToTranslate) + '&from=' + fromLang + '&to=' + toLang,
method : 'GET',
requestHeaders: {
'Authorization' : 'Bearer ' + accessToken
},
onSuccess :
function(response){
/*Hide the Progress Bar.*/
$('#progress-bar').css('display', 'none');
/*Show the Translated Content section(div).*/
$('#translated-content-div').removeAttr('style');
/*Extract the Translated Content from the XML Response.*/
/*<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">तुम कैसे हो?</string>*/
$('#translated-content-text').val(response.replace(/<\s*string[^>]*>/,"").replace("</string>",""));
},
onFailure :
function(response){
alert('An Unexpected Error has Occured.\r\n' + response);
}
});
}
function translateContent()
{
/*Show the Progress Bar.*/
$('#progress-bar').removeAttr('style');
/*Hide the Translated Content section(div), if it is displayed.*/
$('#translated-content-div').css('display','none');
fromLang = $('#fromInput').val();
toLang = $('#toInput').val();
textToTranslate = $('#content').val();
/*Initiate the Translation Process, firstly by fetching the Access Token.*/
getAccessToken();
}
/*Generate the <li>...</li> Tags for the UL.*/
$(document).ready(
function()
{
createLIElements('ddFrom', 'fromInput');
createLIElements('ddTo', 'toInput');
}
);
</script>
</head>
<body>
<div class="hero-unit">
<h1>Translator</h1>
<p>Uses the Microsoft Translator API</p>
<p>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" >From Language</label>
<div class="controls">
<div class="input-append">
<input id="fromInput" class="span2" type="text" value="en"/>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Select
<span class="caret"></span>
</button>
<ul id="ddFrom" class="dropdown-menu">
</ul>
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">To Language</label>
<div class="controls">
<div class="input-append">
<input id="toInput" class="span2" type="text" value="en"/>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Select
<span class="caret"></span>
</button>
<ul id="ddTo" class="dropdown-menu">
</ul>
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Text</label>
<div class="controls">
<textarea id="content" rows="4" style="width: 100%"></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="btn btn-primary" onclick="translateContent();">Translate</div>
</div>
</div>
</form>
<div id="progress-bar" style="display:none">
<label>Translating...</label>
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>
</div>
<div id="translated-content-div" style="display:none">
<legend>Translated Content</legend>
<textarea id="translated-content-text" rows="5" style="width: 100%"></textarea>
</div>
</p>
</div>
</body>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment