Updated
This commit is contained in:
Éric Lemoine
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Demo of Google SMD / Translate test</title>
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
width:100%;
|
||||
margin:0; padding:0;
|
||||
}
|
||||
.logo {
|
||||
border:0; vertical-align:middle;
|
||||
}
|
||||
.summary {
|
||||
color:#666;
|
||||
font:8pt Arial,sans-serif;
|
||||
}
|
||||
#container {
|
||||
width:760px;
|
||||
margin:0 auto;
|
||||
}
|
||||
#loader {
|
||||
position:absolute;
|
||||
top:3px;
|
||||
left:3px;
|
||||
visibility:hidden;
|
||||
height:50px;
|
||||
width:50px;
|
||||
background:url("../../../dojox/image/resources/images/loading.gif") no-repeat center center;
|
||||
}
|
||||
.inputBox {
|
||||
width:300px;
|
||||
}
|
||||
.warn { color:magenta; }
|
||||
.over { color:red !important; }
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
|
||||
<script type="text/javascript">
|
||||
dojo.require("dojox.rpc.Service");
|
||||
dojo.require("dojo.io.script");
|
||||
|
||||
var google, showLoader, hideLoader = null;
|
||||
function init(){
|
||||
|
||||
var s = dojo.query("select.clone")[0];
|
||||
var n = dojo.clone(s);
|
||||
dojo.attr(s,"id","fromLang");
|
||||
dojo.attr(n,"id","toLang");
|
||||
dojo.place(n, "target", "after");
|
||||
|
||||
google = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc","SMDLibrary/google.smd"));
|
||||
|
||||
showLoader = dojo.hitch(dojo,"style","loader","visibility","visible");
|
||||
hideLoader = dojo.hitch(dojo,"style","loader","visibility","hidden");
|
||||
|
||||
dojo.connect(dojo.byId("test"),"onkeypress",function(e){
|
||||
var n = dojo.byId('test');
|
||||
var len = n.value.length + 1;
|
||||
if(len >= 400 && len < 500){
|
||||
if(!dojo.hasClass("progress","warn")){ dojo.addClass("progress","warn"); }
|
||||
}else if(len >= 501){
|
||||
n.value = n.value.substr(0, 500)
|
||||
if(!dojo.hasClass("progress","over")){ dojo.addClass("progress","over"); }
|
||||
return false;
|
||||
}else{
|
||||
dojo.removeClass("progress","over");
|
||||
dojo.removeClass("progress","warn");
|
||||
}
|
||||
dojo.byId("used").innerHTML = len + "";
|
||||
|
||||
});
|
||||
|
||||
var runner = function(e){
|
||||
var pair = dojo.byId("fromLang").value + "|" + dojo.byId("toLang").value;
|
||||
google.translate({ q: dojo.byId("test").value, langpair:pair })
|
||||
.addBoth(function(response){
|
||||
var r = response.responseData;
|
||||
if(r && r.translatedText){
|
||||
dojo.byId("response").value = r.translatedText;
|
||||
}
|
||||
dojo.byId("flop").disabled = false;
|
||||
});
|
||||
};
|
||||
|
||||
dojo.connect(dojo.byId("doit"),"onclick", runner);
|
||||
|
||||
dojo.connect(dojo.byId("flop"),"onclick", function(e){
|
||||
// take the value from the translated text, dump it in the incoming
|
||||
// and set the values opposite
|
||||
var input = dojo.byId("test");
|
||||
var resp = dojo.byId("response");
|
||||
var trans = resp.value;
|
||||
|
||||
resp.value = "";
|
||||
input.value = trans;
|
||||
|
||||
var cur = dojo.byId("fromLang").selectedIndex;
|
||||
dojo.query("#toLang option").map(function(n){ return (n.selected) ? n : false; })
|
||||
.forEach(function(n,i){
|
||||
if(n){
|
||||
dojo.byId("fromLang").selectedIndex = i;
|
||||
dojo.byId("toLang").selectedIndex = cur;
|
||||
}
|
||||
});
|
||||
dojo.byId("flop").disabled = true;
|
||||
runner();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
dojo.addOnLoad(init);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="loader"></div>
|
||||
<div id="container">
|
||||
<h2><a href="http://google.com"><img class="logo" src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" /></a> Ajax API SMD / Translation Test</h2>
|
||||
|
||||
<div id="progress">Used: <span id="used">?</span> of 500 max.</div>
|
||||
<textarea id="test" style="float:left; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>
|
||||
<textarea id="response" style="float:right; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>
|
||||
|
||||
<br style="clear:both">
|
||||
|
||||
<div style="padding-top:15px;">
|
||||
From:
|
||||
<select class="clone">
|
||||
<option value="ar">Arabic</option><option value="bg">Bulgarian</option>
|
||||
<option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option>
|
||||
<option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option>
|
||||
<option value="nl">Dutch</option><option SELECTED value="en">English</option><option value="fi">Finnish</option>
|
||||
<option value="fr">French</option><option value="de">German</option><option value="el">Greek</option>
|
||||
<option value="hi">Hindi</option><option value="it">Italian</option><option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option><option value="no">Norwegian</option><option value="pl">Polish</option>
|
||||
<option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option>
|
||||
<option value="es">Spanish</option><option value="sv">Swedish</option>
|
||||
</select>
|
||||
|
||||
<span id="target">To: </span>
|
||||
|
||||
<button id="doit">Translate</button>
|
||||
<button id="flop" disabled="disabled">Flip Back</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user