diff options
Diffstat (limited to 'js/dojo/dojox/rpc/demos/demo_GoogleAjaxTranslate.html')
| -rw-r--r-- | js/dojo/dojox/rpc/demos/demo_GoogleAjaxTranslate.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/js/dojo/dojox/rpc/demos/demo_GoogleAjaxTranslate.html b/js/dojo/dojox/rpc/demos/demo_GoogleAjaxTranslate.html new file mode 100644 index 0000000..d6d0d5f --- /dev/null +++ b/js/dojo/dojox/rpc/demos/demo_GoogleAjaxTranslate.html @@ -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> |